Map_

Back to phila-vue-mapping wiki Home

Back to Mapboard Map Panel wiki

Leaflet/Map_

The Map_ component wraps a leaflet Map with the Vue framework.

Note: it is called "Map_" instead of "Map" because the word "map" seemed to be a reserved word, and it could not be used as a component name

The props that can be passed to a Map are:

prop	description or example
center	[-75.163471, 39.953338]
zoom	the initial zoom
zoomControlPosition	'bottomleft'
minZoom	11
maxZoom	22

In a Vue script

In a Vue script, Map is defined as a component as follows:

const Map_ = philaVueMapping.Map_;

export.default{
  components: [Map_]
}

In a Vue template

In a Vue template, Map_ could be included as follows:

<map_ :class="{ 'mb-map-with-widget': this.$store.state.cyclomedia.active || this.$store.state.pictometry.active }"
      id="map-tag"
      :center="this.$store.state.map.center"
      :zoom="this.$store.state.map.zoom"
      @l-click="handleMapClick"
      @l-moveend="handleMapMove"
      zoom-control-position="bottomright"
      :min-zoom="this.$config.map.minZoom"
      :max-zoom="this.$config.map.maxZoom"
>

In a Mapboard config file

In a config, a "map" object should be split between a baseConfig and main.js.