A React Component for Rendering Interactive Maps
Requirements
- Map focussed on a particular region (view bounds)
- Markers
- Dynamic showing and deleting of markers based on external input
- Show a marker in the center of the region
- Clustering based on proximity
- Icon Color
- CSS on click
- Rerender the map on data change.
- Showing a legend
- Bounding a map with a GeoJSON. Showing a static color outside the GeoJSON.
Solution
In general, all map solutions have 3 aspects to them
- Map Tiles - for example OpenstreetMap, Mapbox, Google, Apple, etc.
- Map Library - for example Leaflet. Some solutions include 1 and 2 combined - Mapbox and Google.
- Map Config - a domain-driven config that acts as an input to the Map Library. It includes settings, markets, and geo boundaries that allow for the rendering of the map based on user inputs.
The solution proposes OpenstreetMap for the tiles, a react wrapper for leaflet as the map library, and the config below to render the maps. But could be replaced with other alternatives without any changes to other blocks. The thinking behind creating another layer of abstraction over and above the existing one (in react-leaflet) is to write a minimal spec that includes only the relevant APIs. This follows the principle of form follows function.
Any inputs based on the filters are assumed to be part of the preprocessing. This helps decouple the map capabilities from the data sources. It is upon the user of this react component to provide the data in the form of the input config shown below.
Input config
{
"legend": {
"display": true,
"position": "bottom",
"labels": [
{
"boxWidth": 20,
"fontSize": 10,
"fontColor": "#000",
"fontFamily": "sans-serif",
"fontStyle": "bold",
"padding": 10,
"label": "Legend"
}
]
},
"bounds": {
"byGeoJson": [],
"byBbox": []
},
"markers": {
"shouldClusterMarkers": true,
"postions": [
{
"icon": "",
"color": "",
"tooltipCSS": "",
"tooltip": "",
"position": [
20.4,
94.1
]
}
]
},
"overlays": [
{
"color": "#ff0000",
"opacity": 0.5,
"geoJson": []
}
]
}
A React Component for Rendering Interactive Maps
Requirements
Solution
In general, all map solutions have 3 aspects to them
The solution proposes OpenstreetMap for the tiles, a react wrapper for leaflet as the map library, and the config below to render the maps. But could be replaced with other alternatives without any changes to other blocks. The thinking behind creating another layer of abstraction over and above the existing one (in react-leaflet) is to write a minimal spec that includes only the relevant APIs. This follows the principle of form follows function.
Any inputs based on the filters are assumed to be part of the preprocessing. This helps decouple the map capabilities from the data sources. It is upon the user of this react component to provide the data in the form of the input config shown below.
Input config
{ "legend": { "display": true, "position": "bottom", "labels": [ { "boxWidth": 20, "fontSize": 10, "fontColor": "#000", "fontFamily": "sans-serif", "fontStyle": "bold", "padding": 10, "label": "Legend" } ] }, "bounds": { "byGeoJson": [], "byBbox": [] }, "markers": { "shouldClusterMarkers": true, "postions": [ { "icon": "", "color": "", "tooltipCSS": "", "tooltip": "", "position": [ 20.4, 94.1 ] } ] }, "overlays": [ { "color": "#ff0000", "opacity": 0.5, "geoJson": [] } ] }