VectorMarker

Back to phila-vue-mapping wiki Home

Back to Mapboard Map Panel wiki

VectorMarker

Using Font Awesome

You can use any icon from Font Awesome as a Vector Marker on the map.

You have to import the icon from a Font Awesome library in your main.js using these instructions

In a Vue template

The <vector-marker> tag is put inside a <map_> tag:

<map_>
  ...
  <vector-marker v-for="(marker, index) in markers"
                 :latlng="marker.latlng"
                 :key="marker.key"
                 :markerColor="marker.color"
                 :icon="marker.icon"
  />
  ...
</map_>

In a Mapboard config file

markersForTopic: {
  data: function(state) {
    return state.sources.pollingPlaces.data
  },
  lat: 'LAT',
  lng: 'LON',
  key: 'STREET_ADDRESS',
  color: '#54278f',
  icon: {
    prefix: 'fas',
    icon: 'landmark',
    shadow: false,
    size: 35,
  }
},