EsriDynamicMapLayer

Back to phila-vue-mapping wiki Home

Back to Mapboard Map Panel wiki

Leaflet/EsriDynamicMapLayer

An EsriDynamicMapLayer wraps a Esri Leaflet DynamicMapLayer in a Vue component.

In a Vue template

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

<map_>
  ...
  <!-- regmaps -->
  <esri-dynamic-map-layer v-for="(item, key) in this.imageOverlayItems"
                          v-if="shouldShowImageOverlay(item.properties.RECMAP)"
                          :key="key"
                          :url="'//gis.phila.gov/arcgis/rest/services/Atlas/RegMaps/MapServer'"
                          :layers="[0]"
                          :layerDefs="'0:NAME=\'g' + item.properties.RECMAP.toLowerCase() + '.tif\''"
                          :transparent="true"
                          :opacity="0.5"
  />
  ...
</map_>

In a Mapboard config file

dynamicMapLayers should be put in a baseConfig:

dynamicMapLayers: {
  stormwater: {
    url: '//gis.phila.gov/arcgis/rest/services/Water/pv_data/MapServer',
    opacity: 1.0
  },
  regmaps: {
    url: '//services.arcgis.com/fLeGjb7u4uXqeF9q/arcgis/rest/services/MASTERMAPINDEX/FeatureServer/',
    opacity: 0.5
  },
},