CircleMarker

Back to phila-vue-mapping wiki Home

Back to Mapboard Map Panel wiki

CircleMarker

The CircleMarker component wraps a Leaflet CircleMarker with the Vue framework.

The props that can be passed to a CircleMarker are:

prop	description or example
latlng
radius
fillColor
color
weight
opacity
fillOpacity
data
pane

In a Vue template

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

<map_>
  ...
  <circle-marker v-for="circleMarker in circleMarkers"
                 @l-mouseover="handleMarkerMouseover"
                 @l-click="handleMarkerClick"
                 @l-mouseout="handleMarkerMouseout"
                 :latlng="circleMarker.latlng"
                 :radius="circleMarker.radius"
                 :fillColor="circleMarker.fillColor"
                 :color="circleMarker.color"
                 :weight="circleMarker.weight"
                 :opacity="circleMarker.opacity"
                 :fillOpacity="circleMarker.fillOpacity"
                 :key="Math.random()"
                 :data="{
                   featureId: circleMarker.featureId,
                   tableId: circleMarker.tableId
                 }"
  />
  ...
</map_>

In a Mapboard config file

If using Mapboard, calling CircleMarkers as a feature of a Horizontal Table could be done as follows:

mapOverlay: {
  marker: 'circle',
  style: {
    radius: 6,
    fillColor: '#9400c6',
    color: '#9400c6',
    weight: 1,
    opacity: 1,
    fillOpacity: 1.0
  },
  hoverStyle: {
    radius: 6,
    fillColor: 'yellow',
    color: '#009900',
    weight: 1,
    opacity: 1,
    fillOpacity: 1.0
  }
},