To split up the GenerateMap view into a parent and two new child components (Map and Sidebar), and to add double-binding functionality and smooth state synchronization between them.
Screenshots
What I changed
Created a new component Map.vue and moved all MapGL related code there.
Stored and handled the map as a Reactive Vue state object.
Substantially expanded the Sidebar component:
Added Title, Description, Zoom, and Latitude + Longitude fields.
Implemented vue-slider-component for the Zoom field to set maxZoom.
Both Sidebar and Map child components listen for changes (to the fields in Sidebar or the Map canvas, respectively) and emit them back to the parent component.
Upon receiving these changes, GenerateMap uses an updateMapParams function to pass the updated values (rounded to a reasonable number of decimal places) to the child components.
Oops, some stylistic changes out-of-scope for this PR were made to the MapDashboard, including functionality to copy an offline map link and display a popup notification that the link has been copied.
What I'm not doing here
To get this working, I needed to store the map as a reactive state, which breaks the map rendering; a known bug with Mapbox + Vue with some documented workarounds. I will fix this in follow-up work.
Goal
To split up the
GenerateMapview into a parent and two new child components (MapandSidebar), and to add double-binding functionality and smooth state synchronization between them.Screenshots
What I changed
Map.vueand moved all MapGL related code there.vue-slider-componentfor the Zoom field to set maxZoom.MapDashboard, including functionality to copy an offline map link and display a popup notification that the link has been copied.What I'm not doing here
To get this working, I needed to store the map as a reactive state, which breaks the map rendering; a known bug with Mapbox + Vue with some documented workarounds. I will fix this in follow-up work.