Geojson

Back to phila-vue-mapping wiki Home

Back to Mapboard Map Panel wiki

Leaflet/Geojson

Geojson wraps a Leaflet GeoJSON element in a Vue component.

The props that can be passed to a Geojson are:

prop	description or example
geojson
fillColor
color
weight
opacity
fillOpacity
data

In a Vue template

The <geojson> tag is put inside a <map_> tag:

<map_>
  ...
  <!-- non-reactive geojson features -->
  <geojson v-for="geojsonFeature in geojsonFeatures"
           v-if="shouldShowGeojson(geojsonFeature.key)"
           :geojson="geojsonFeature.geojson"
           :fillColor="geojsonFeature.fillColor"
           :color="geojsonFeature.color"
           :weight="geojsonFeature.weight"
           :opacity="geojsonFeature.opacity"
           :fillOpacity="geojsonFeature.fillOpacity"
           :key="geojsonFeature.key"
           :data="{
             featureId: geojsonFeature.featureId,
             tableId: geojsonFeature.tableId
           }"
  />

  <!-- reactive geojson features -->
  <geojson v-for="geojsonFeature in reactiveGeojsonFeatures"
           v-if="shouldShowGeojson(geojsonFeature.key)"
           @l-mouseover="handleMarkerMouseover"
           @l-click="handleMarkerClick"
           @l-mouseout="handleMarkerMouseout"
           :geojson="geojsonFeature.geojson"
           :fillColor="geojsonFeature.fillColor"
           :color="geojsonFeature.color"
           :weight="geojsonFeature.weight"
           :opacity="geojsonFeature.opacity"
           :fillOpacity="geojsonFeature.fillOpacity"
           :key="geojsonFeature.key"
           :data="{
             featureId: geojsonFeature.featureId,
             tableId: geojsonFeature.tableId
           }"
  />
  ...
</map_>