Basic Map Integration Example

[p-a-s-c-a-l]

Create a basic entity with country and study_area fields. Note: This basic entity will later be replaced by / integrated with the Study Group Type.

• country field:
  • used to center the map shown in Mockup 0130 on a country selected by the user in in Mockup 0120
  • a reference to an entry in a countries vocabulary. Properties of the Country Taxonomy Type: name, country code, geom (type: Geofield), etc.
• study_area field:
  • used for storing the spatial study area selected in Mockup 0130
  • a Geofield) attached to the Study Group Type) instance

Populate Countries Vocabulary (Taxonomy) with Couintry Data + Polygons, e.g. from #7 (comment)
Integrate React Map (e.g. Leaflet) via Module or iFrame (depending on the result of the evaluation).

Connect React Web App via Drupal REST API and / or JavaScript to Drupal Backend and implement the features for

• setting and showing the polygon of the selected country on the react map
• selecting the study area (bbox, polygon, etc.) in the react map and storing the geometry in the study_area field.

[therter]

Add taxonomy terms via SQL:

As example, the taxonomy country with the two fields country and study_area was created.
When a shape file with the country data exists (e.g. from https://gadm.org/download_world.html), a import script can be created by the shp2pgsql command.

Example:

shp2pgsql -d -W UTF-8 shapefile table-name > ~/import-script.sql

This script can be executed with the psql command. After this, the data from the shape file is available in the specified database table. This data can be added to the drupal system with a pgsql script like the following script:

CREATE OR REPLACE FUNCTION public.import_countries()
    RETURNS boolean LANGUAGE 'plpgsql' COST 100 VOLATILE 
AS $BODY$
declare
        ref RECORD;
	tid integer;
begin
	--the imported data is contained within the table raw.countries
        for ref in select name, st_asText(the_geom) as the_geom from raw.countries  LOOP
		insert into taxonomy_term_data (vid, uuid, langcode)
		       values ('country', uuid_generate_v4(), 'en');
			
		select currval('taxonomy_term_data_tid_seq') into tid;

		insert into taxonomy_term_field_data (tid, vid, langcode, name, description__value, description__format, weight, changed, default_langcode)
		       values (tid, 'country', 'en', ref.name, null, null, 0, EXTRACT(EPOCH FROM now())::int, 1);

		insert into taxonomy_term__field_country (bundle, deleted, entity_id, revision_id, langcode, delta, field_country_value)
		       values ('country', 0, tid, tid, 'en', 0, ref.name);
                -- the following code also converts the postgis geometry to GeoJSON
		insert into taxonomy_term__field_study_area (bundle, deleted, entity_id, revision_id, langcode, delta, field_study_area_value)
		       values ('country', 0, tid, tid, 'en', 0, ST_AsGeoJSON(ref.the_geom));
        END LOOP;
		
	return true;
end
$BODY$;

[therter]

A first gif of a map component that interacts with the drupal system:

[therter]

To allow the communication with the REST API, the RESTful Web Services module has to be activated (/admin/modules permission) and the permissions for the required resources should be set via the page /admin/config/services/rest.

Example to access the RestAPI from javascript code

    fetch('http://localhost:8080/taxonomy/term/93?_format=json')
    // see https://developer.mozilla.org/en-US/docs/Web/API/Body/json
    .then((resp) => resp.json())
    .then(function(data) {
        //do something
        //window.mapCom.setGeom(data.field_study_area[0].value);
    })
    .catch(function(error) {
      console.log(JSON.stringify(error));
    });         

[p-a-s-c-a-l]

done