Leaflet Map

  • This map plots markers on an interactive map using latitude and longitude columns
  • A customizable tooltip is included by passing column names in an array
  • Does not support value formatting yet
  • Auto-zooms to the points plotted on the map
<LeafletMap data={coords} lat=lat long=long name=store_name tooltipFields={['segment', 'annual_sales', 'city']} height=500 />

Future Improvements

  • Syntax should be expanded to allow for more flexibility and customization. E.g., allow for definitions of multiple sets and styles of markers, arbitrary shapes, choropleths, etc.
  • Syntax may be similar to the DataTable with Columns. For example, if you wanted to show service locations, along with a service radius:
    <LeafletMap basemap=cartoGrey> <Markers color=red data={high_value_locations} tooltipFields={['segment', 'annual_sales', 'city']} /> <Markers color=blue data={low_value_locations} tooltipFields={['segment', 'annual_sales', 'city']} /> <Circle centreLat=51.2342 centreLong=-0.1258 radius=2 label="Service Area" /> </LeafletMap>
  • Having a few off-the-shelf styles for markers/shapes would be helpful (like in ReferenceArea)
  • Tooltip customization may require specific syntax - e.g., a Tooltip component that slots into the Markers component
  • Like with DataTable, if there are common use cases, it might make sense to cover those in their own pre-set components which call the underlying LeafletMap component