Map single page app

[oliverroick]

This is a huge task. I suggest dividing this into the subtasks I have outlined below. Once we agreed on the task breakdown, we can create issues for each of the tasks for separate tracking and discussions of tasks.

To manage implementation and ensure that more than one person can work on this task (if necessary), we should create a feature branch (e.g. map-spa), which serves as the "master" for the development of this feature. Every time, you start a new task, you create a task branch off map-spa. When you finish a task, you create a PR to merge that branch into map-spa. That way, we will be able to review smaller PRs more continuously. When all tasks are finished, we test on staging and finally merge into master.

Tasks

• Write decision record and get it approved
• Create map scaffolding
  • Implement a view e.g. ProjectMap and a template that serves the map. The template should have the map itself and the right-hand side panel the display record details.
  • Write CSS including transitions, so we can show/hide the panel by changing its CSS class.
  • Upgrade to Leaflet 1.0+
• Enable GeoJSON vector tiles
  • Change spatial.asyc.SpatialUnitList so it can serve GeoJSON vector tiles. The view should support the XYZ tile convention.
  • Change loading of features on the client-side to support GeoJSON vector tiles. (look at TileLayer.GeoJSON)
• Update existing views and templates
  • Existing views and templates (see list below) so they can be served asynchronously. For consistency, both the URLs and view classes should be moved to the async component the corresponding Django app. Scaffolding should be removed from the HTML template, so only the contents of the right-hand side panel are rendered.
• Implement minimal routing and async loading
  • The URL displayed in the address bar is in sync with the current view. The view should be updated according to the URL when users access the page via a permalink. (Possibly of help: A JavaScript router in 20 lines)
  • Implement async loading into the client-side. This will involve designing and implementing a framework to handle information flows uni directional. Changes to the UI should only happen when the URL in the browser changes. This should trigger and event, which will load the resource from the backend and display some loading info to the user. Upon receiving the response, the loading info is removed, and the contents are displayed in the panel. Ideally, we would track to app's current state in one central variable and update only the state when the user interacts with the platform. We would listen for changes to the stated and update the UI according to the current state.
• Store the map position either in the browser session and/or the URL so it can be recovered through a permalink.

Affected views

• organization.views.default.ProjectDashboard
• spatial.views.default.LocationsList
• spatial.views.default.LocationAdd
• spatial.views.default.LocationDetail
• spatial.views.default.LocationEdit
• spatial.views.default.LocationDelete
• spatial.views.default.LocationResourceAdd
• spatial.views.default.LocationResourceNew
• spatial.views.default.TenureRelationshipAdd
• party.views.default.PartyRelationshipDetail
• party.views.default.PartyRelationshipEdit
• party.views.default.PartyRelationshipDelete
• party.views.default.PartyRelationshipResourceNew
• party.views.default.PartyRelationshipResourceAdd

[linzjax]

Additional Tasks

• upgrade the main dashboard to be compatible with leaflet 1.0
• implement replacement for LeafletWidget
• address conflicts with L.Deflate/L.MarkerCluster and Leaflet 1.0
• Check editing point-type locations shows zoom level 0 (Editing a point-type location shows zoom level 0 #718)
• Check adding geometry works from touchscreens (Adding geometries does not work from touchscreens #299).
• [Maybe] Load urls with coordinates (ex. https://demo.cadasta.org/organizations/david-org/projects/csrc-demo?#12/21.3903/84.2390)
• Set up location detail tabs so that you can redirect to a specific tab (SMAP: Redirecting to specific location tab #1206).
• Handle permissions errors (SMAP: Router should handle permission errors #1207)
• Zoom to location if reached through direct url (SMAP: Accessing a location or relationship from url should center on location geometry #1310)

[dpalomino]

Hey @linzjax. Just including this in the next sprint, to follow up the QA and bugfixing needed. Please feel free to add in the Sprint project any specific tasks/bugs that will be appearing. Thanks :)

[oliverroick]

Let's be honest; we'll never dig this up from the graveyard of unfinished work. Closing.