EsriTiledMapLayer

Back to phila-vue-mapping wiki Home

Back to Mapboard Map Panel wiki

Leaflet/EsriTiledMapLayer

An EsriTiledMapLayer wraps a Esri Leaflet TiledMapLayer in a Vue component.

In a Vue template

The <esri-tiled-map-layer> tag is put inside a <map_> tag:

<map_>
  ...
  <!-- basemaps -->
  <esri-tiled-map-layer v-for="(basemap, key) in this.$config.map.basemaps"
                        v-if="activeBasemap === key"
                        :key="key"
                        :url="basemap.url"
                        :max-zoom="basemap.maxZoom"
                        :attribution="basemap.attribution"
  />

  <!-- basemap labels and parcels outlines -->
  <esri-tiled-map-layer v-for="(tiledLayer, key) in this.$config.map.tiledLayers"
                        v-if="tiledLayers.includes(key)"
                        :key="key"
                        :url="tiledLayer.url"
                        :zIndex="tiledLayer.zIndex"
                        :attribution="tiledLayer.attribution"
  />
  ...
</map_>

In a Mapboard config file

tiledLayers should be put in a baseConfig:

tiledLayers: {
  cityBasemapLabels: {
    // type: 'labels',
    url: '//tiles.arcgis.com/tiles/fLeGjb7u4uXqeF9q/arcgis/rest/services/CityBasemap_Labels/MapServer',
    zIndex: '3',
  },
  dorBasemapLabels: {
    // type: 'labels',
    url: '//tiles.arcgis.com/tiles/fLeGjb7u4uXqeF9q/arcgis/rest/services/DORBasemap_Labels/MapServer',
    zIndex: '3',
  },
  imageryBasemapLabels: {
    url: '//tiles.arcgis.com/tiles/fLeGjb7u4uXqeF9q/arcgis/rest/services/CityImagery_Labels/MapServer',
    zIndex: '3',
    attribution: 'overwrite',
    // attribution: ' ',
  },
  parcels: {
    url: '//tiles.arcgis.com/tiles/fLeGjb7u4uXqeF9q/arcgis/rest/services/PWDParcel_ImageryOverlay/MapServer/',
    zIndex: '2',
  },