VectorTileLayer from JSON

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

This sample shows how to add a VectorTileLayer from a JSON style object. The mid-century vector tiles style is simplified and the VectorTileLayer is added from the modified JSON object. Esri offers a set of vector basemaps with different styles.

const vtLayer = new VectorTileLayer({
  style: {
    "layers": [{
        "layout": {},
        "paint": {
          "fill-color": "#F0ECDB",
        },
        "source": "esri",
        "minzoom": 0,
        "source-layer": "Land",
        "type": "fill",
        "id": "Land/0"
      },
      {
        "layout": {},
        "paint": {
          "fill-pattern": "Landpattern",
          "fill-opacity": 0.25
        },
        "source": "esri",
        "minzoom": 0,
        "source-layer": "Land",
        "type": "fill",
        "id": "Land/1"
      },
      {
        "layout": {},
        "paint": {
          "fill-color": "#93CFC7"
        },
        "source": "esri",
        "minzoom": 0,
        "source-layer": "Marine area",
        "type": "fill",
        "id": "Marine area/1"
      },
      {
        "layout": {},
        "paint": {
          "fill-pattern": "Marine area",
          "fill-opacity": 0.08
        },
        "source": "esri",
        "source-layer": "Marine area",
        "type": "fill",
        "id": "Marine area/2"
      },
      {
        "layout": {
          "line-cap": "round",
          "line-join": "round"
        },
        "paint": {
          "line-color": "#cccccc",
          "line-dasharray": [
            7, 5.33333
          ],
          "line-width": 1
        },
        "source": "esri",
        "minzoom": 1,
        "source-layer": "Boundary line",
        "type": "line",
        "id": "Boundary line/Admin0/0"
      },
      {
        "layout": {
          "text-font": [
            "Risque Regular"
          ],
          "text-anchor": "center",
          "text-field": "{_name_global}",
        },
        "paint": {
          "text-halo-blur": 1,
          "text-color": "#AF420A",
          "text-halo-width": 1,
          "text-halo-color": "#f0efec"
        },
        "source": "esri",
        "source-layer": "Continent",
        "type": "symbol",
        "id": "Continent"
      },
      {
        "layout": {
          "text-font": [
            "Atomic Age Regular"
          ],
          "text-field": "{_name}",
        },
        "paint": {
          "text-halo-blur": 1,
          "text-color": "#AF420A",
          "text-halo-width": 1,
          "text-halo-color": "#f0efec"
        },
        "source": "esri",
        "minzoom": 2,
        "source-layer": "Admin0 point",
        "maxzoom": 10,
        "type": "symbol",
        "id": "Admin0 point/large"
      }
    ],
    "glyphs": "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/resources/fonts/{fontstack}/{range}.pbf",
    "version": 8,
    "sprite": "https://www.arcgis.com/sharing/rest/content/items/7675d44bb1e4428aa2c30a9b68f97822/resources/styles/../sprites/sprite",
    "sources": {
      "esri": {
        "url": "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer",
        "type": "vector"
      }
    }
  }
});
map.add(vtLayer);