To add a new component that allows the user to toggle between different map styles - Mapbox custom (default as provided by env var), Mapbox Satellite Streets, Mapbox Streets, and Planet Visual Monthly.
Screenshots
Initial / deactivated state:
Activated state to toggle modal to open:
New basemap selected:
What I changed
Added a new component BasemapSelector which provides a basemap selection button, which if clicked opens a modal with basemap options. Selecting a basemap options emits the style parameters upstream to the parent component.
Added a shared function changeMapStyle that Vue components can use to change the map style. For most, we take a style URL provided by the BasemapSelector component, but for Planet, we provide a JSON stylesheet.
Added BasemapSelector to the Map and AlertsDashboard parent components, and generalized some code that was being triggered upon mount into a method prepareMapCanvasContent, to be re-used whenever the map canvas repaints.
Also added some conditional logic to only add sources/layers if they don't already exist.
Introduced a new env var PLANET_API_KEY which if set, adds Planet Monthly Visual Basemaps to the list of options of basemaps to select from.
Goal
To add a new component that allows the user to toggle between different map styles - Mapbox custom (default as provided by env var), Mapbox Satellite Streets, Mapbox Streets, and Planet Visual Monthly.
Screenshots
Initial / deactivated state:
Activated state to toggle modal to open:
New basemap selected:
What I changed
BasemapSelectorwhich provides a basemap selection button, which if clicked opens a modal with basemap options. Selecting a basemap options emits the style parameters upstream to the parent component.changeMapStylethat Vue components can use to change the map style. For most, we take a style URL provided by theBasemapSelectorcomponent, but for Planet, we provide a JSON stylesheet.BasemapSelectorto theMapandAlertsDashboardparent components, and generalized some code that was being triggered upon mount into a methodprepareMapCanvasContent, to be re-used whenever the map canvas repaints.PLANET_API_KEYwhich if set, adds Planet Monthly Visual Basemaps to the list of options of basemaps to select from.What I'm not doing here
Right now, the Planet Monthly Visual Basemap is hard coded to be
2024-02. https://github.com/ConservationMetrics/guardianconnector-views/issues/44 describes follow-on work to add a slider to select a month & year.