LegendControl

Back to phila-vue-mapping wiki Home

Back to Mapboard Map Panel wiki

LegendControl

A LegendControl is a custom widget that can be added to a Leaflet map.

The props that can be passed to a phila-vue-mapping LegendControl are:

prop	description or example
position
options
items

In a Vue template

the <legend-control> tag is put inside a <map_> tag:

<map_>
  ...
  <div v-once>
    <legend-control v-for="legendControl in Object.keys(legendControls)"
                    :key="legendControl"
                    :position="'bottomleft'"
                    :options="legendControls[legendControl].options"
                    :items="legendControls[legendControl].data"
    />
  </div>
  ...
</map_>

In a Mapboard config file

If using Mapboard, a "legendControls" object can be added to the config. It includes objects with options. One of the options is "topics", which is a list of topics which will show this legend when the topic is activated:

water: {
  options: {
    topics: ['water'],
    showWithBaseMapOnly: false
  },
  data: {
    'Roof': {
      'background-color': '#FEFF7F',
    },
    'Other Impervious Surface': {
      'background-color': '#F2DCFF',
    }
  }
},