GeoJSON based Map View Formatter

[DiegoPino]

Nothing new, but the we can do better and the code is actual discrete

Drupal has many modules that do this. The most common approach is to use a Views Attachment that gathers all features from a GeoField (so DB) and the the actual Style Plugin of a View renders it.

The approach is not very performant and I can see how this will fail for 10,000 or so features.

Leaflet, our favorite library can Stream via Ajax GeoJSON and that is how we do it here for a single ADO with Geographic information using an exposed Metadata Display Entity that produces GeoJSON

format_strawberryfield/js/leaflet_strawberry.js

Lines 41 to 47 in 9f0241d

	var geojsonLayer = L.geoJson.ajax(drupalSettings.format_strawberryfield.leaflet[element_id]['geojsonurl'],{
	onEachFeature: onEachFeature,
	pointToLayer: function (feature, latlng) {
	markerArray.push(L.marker (latlng));
	return L.marker (latlng);
	},
	});

So. To build this custom View Formatter we are going to do something simpler:

1. A new Leaflet JS based Drupal Library that generates for many data-geojson attributes (each one with the endpoint of a single ADO, so what each ROW of the a View will produce) a single Map by continuously via AJAX loading the geoJSON and aggregating them under Layer.
2. The view formatter itself will have a setting to allow other SBF JSON values/Solr indexed fields to be used to generate groups (e.g group by Object Type, or Group by Country, etc). This is really alternative since the actual Facets of the Solr View can act as filters.
3. We will make sure to also enable and use the Leaflet Cluster JS (already attached) to make faster renders.
   This approach has a lot of benefits since we won't need to load as a huge memory array all the features at once, and we can add them to the Map as they get processed.

This approach can also be used for other libraries that generate large amount of data and inclusive, we can allow each ADO to have not only its own geoJSON producing endpoint as source, but also another JSON key with an external link with geoJSON points. With the issue of course that cross domain (CORS) Ajax access is not an easy peasy task so will probably not be as simple as our local approach.

Another example of how this could work is the 3D formatter applied as a View Formatter (not the same code, just similar) to stream multiple sources of 3D PointClouds to build from many many ADOs a full large scene! Imagine an Archeologic site (or a City) where each ADO provide a small subset of 3D and the View Renders all elements. 3D maps? So much!

@pcambra @patdunlavey @alliomeria @giancarlobi what do you think?

[DiegoPino]

@pcambra following your advice I plan on making everything that is "Views" extending a submodule shipped with formatter_strawberryfield

[DiegoPino]

And more info here
https://github.com/calvinmetcalf/leaflet-ajax

The fact that you can pass an array of URLs to L.geoJson.ajax makes things even more promising or you can dynamically (as new things get download) add them to the existing layer.

An example with some cool styling based on custom properties (which we have full control off because its just a twig template!)
I love archipelago gosh
https://leafletjs.com/examples/choropleth/

[DiegoPino]

Resolved via d9d980f