HPC-9963: WIP Replace leaflet with mapbox gl

Author: berliner

.docksal/etc/apache/httpd-vhost-overrides.conf

@@ -1,7 +1,7 @@
 <IfModule mod_rewrite.c>
   RewriteEngine on
   SSLProxyEngine on
-  #Add the string and keep hidden from user with [P]
+  # Add the string and keep hidden from user with [P]
   RewriteCond %{QUERY_STRING} ^(([^&]*&)*)access_token=token(&.*)?$
   RewriteRule ^/mapbox/(.*)$ https://api.mapbox.com/$1?%1access_token=${MAPBOX_TOKEN}%3 [P]
 </IfModule>

config/seckit.settings.yml

@@ -10,7 +10,7 @@ seckit_xss:
     default-src: "'none'"
     script-src: "'self' 'unsafe-inline' https://js-agent.newrelic.com https://static.addtoany.com browser-update.org/update.min.js https://bam.nr-data.net cdn.jsdelivr.net/npm/toastify-js https://unpkg.com/@popperjs/core@2 https://unpkg.com/tippy.js@6"
     object-src: "'none'"
-    style-src: "'self' 'unsafe-inline' fonts.googleapis.com cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css https://fonts.gstatic.com"
+    style-src: "'self' 'unsafe-inline' fonts.googleapis.com cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css https://fonts.gstatic.com https://api.mapbox.com"
     img-src: "'self' unocha.org hpc.tools content.hpc.tools fts.unocha.org data: api.mapbox.com browser-update.org https://fonts.gstatic.com"
     media-src: ''
     frame-src: "'self' https://content.hpc.tools https://www.youtube.com https://data.humdata.org https://datawrapper.dwcdn.net"
@@ -22,11 +22,11 @@ seckit_xss:
     upgrade-req: false
     policy-uri: ''
   x_xss:
+    select: 0
     seckit_x_xss_option_disable: Disabled
     seckit_x_xss_option_0: '0'
     seckit_x_xss_option_1: 1;
     seckit_x_xss_option_1_block: '1; mode=block'
-    select: 0
 seckit_csrf:
   origin: false
   origin_whitelist: ''

html/modules/custom/ghi_base_objects/assets/geojson/UN_Geodata_simplified.geojson

@@ -14,12 +14,14 @@ protected function map() {
     $data = $this->getRawData();
     return (object) [
       'location_id' => $data->id,
-      'location_name' => $data->name,
+      'location_name' => $data->name ?: 'Admin area ' . $data->externalId,
       'admin_level' => $data->adminLevel,
       'pcode' => $data->pcode,
+      'iso3' => $data->iso3,
       'latLng' => [(string) $data->latitude, (string) $data->longitude],
       'filepath' => !empty($data->filepath) ? $data->filepath : NULL,
       'parent_id' => $data->parentId,
+      'children' => $data->children ?? [],
     ];
   }
 
@@ -34,8 +36,20 @@ protected function map() {
    */
   public function getGeoJsonLocalFilePath($refresh = FALSE) {
     $geojson_service = self::getGeoJsonService();
-    $uri = $geojson_service->getGeoJsonLocalFilePath($this->filepath, $refresh);
-    return $uri ? \Drupal::service('file_url_generator')->generate($uri)->toString() : NULL;
+    if ($this->filepath && $uri = $geojson_service->getGeoJsonLocalFilePath($this->filepath, $refresh)) {
+      // If we have a filepath, let's point to it. This comes from the API and
+      // we store local copies of it.
+      return $uri ? \Drupal::service('file_url_generator')->generate($uri)->toString() : NULL;
+    }
+    // Otherwise let's see if we can get another type of local file that is
+    // extracted from a static geojson source and fetched via
+    // self::getGeoJsonFallback().
+    $local_filename = $this->iso3 . '.json';
+    if (!$this->getGeoJsonService()->localFileExists($local_filename)) {
+      $this->getGeoJsonFallback();
+    }
+    $filepath = $geojson_service->getLocalFilePath($local_filename);
+    return $filepath ? \Drupal::service('file_url_generator')->generate($filepath)->toString() : NULL;
   }
 
   /**
@@ -44,12 +58,65 @@ public function getGeoJsonLocalFilePath($refresh = FALSE) {
    * @param bool $refresh
    *   Whether to refresh stored data.
    *
-   * @return object
-   *   The geo json data object.
+   * @return object|false
+   *   The geo json data object or FALSE.
    */
   public function getGeoJson($refresh = FALSE) {
     $geojson_service = self::getGeoJsonService();
-    return $geojson_service->getGeoJson($this->filepath, $refresh);
+    $geojson = $this->filepath ? $geojson_service->getGeoJson($this->filepath, $refresh) : FALSE;
+    if (!$geojson) {
+      $geojson = $this->getGeoJsonFallback();
+    }
+    return $geojson;
+  }
+
+  /**
+   * Use a fallback to retrieve geojson polygon data for a location.
+   *
+   * @return object|false
+   *   The geo json data object or FALSE.
+   */
+  private function getGeoJsonFallback() {
+    if ($this->admin_level > 0) {
+      // The fallback is available only for admin level 0 locations.
+      return FALSE;
+    }
+    $local_filename = $this->iso3 . '.json';
+    if ($this->getGeoJsonService()->localFileExists($local_filename)) {
+      return $this->getGeoJsonService()->getLocalFileContent($local_filename);
+    }
+    // Load the UN dataset. This comes from
+    // https://geoportal.un.org/arcgis/apps/sites/#/geohub/datasets/d7caaff3ef4b4f7c82689b7c4694ad92/about.
+    $geojson_file = \Drupal::service('module_handler')->getModule('ghi_base_objects')->getPath() . '/assets/geojson/UN_Geodata_simplified.geojson';
+    if (!file_exists($geojson_file)) {
+      return FALSE;
+    }
+    // Extract the features for the current location based on the iso3 code.
+    $content = json_decode(file_get_contents($geojson_file));
+    $features = array_filter($content->features, function ($item) {
+      return property_exists($item->properties, 'iso3cd') && $item->properties->iso3cd == $this->iso3;
+    });
+    if (empty($features)) {
+      return FALSE;
+    }
+    $features = array_values(array_map(function ($feature) {
+      unset($feature->properties);
+      return $feature;
+    }, $features));
+    $geojson = (object) [
+      'type' => 'Feature',
+      'geometry' => (object) [
+        'type' => 'GeometryCollection',
+        'geometries' => array_map(function ($feature) {
+          return $feature->geometry;
+        }, $features),
+      ],
+      'properties' => (object) [
+        'location_id' => $this->id(),
+      ],
+    ];
+    $this->getGeoJsonService()->writeGeoJsonFile($local_filename, json_encode($geojson));
+    return $geojson;
   }
 
   /**

html/modules/custom/ghi_base_objects/src/ApiObjects/Location.php

@@ -37,20 +37,22 @@ class LocationsQuery extends EndpointQueryBase {
    * @param bool $include_expired
    *   Include expired locations.
    *
-   * @return object
-   *   An unprocessed response object from the API.
+   * @return \Drupal\ghi_base_objects\ApiObjects\Location|null
+   *   A location.
    */
-  private function getCountryLocationData($country_id, $max_level = NULL, $include_expired = TRUE) {
+  public function getCountryLocationData($country_id, $max_level = NULL, $include_expired = TRUE) {
     $this->setPlaceholder('country_id', $country_id);
     $this->endpointQuery->setEndpointArguments(array_filter([
       'maxLevel' => $max_level ?? self::MAX_LEVEL,
       'includeExpired' => $include_expired ? 'true' : NULL,
-    ]));
+    ], function ($item) {
+      return $item !== NULL;
+    }));
     $data = $this->getData();
     if (empty($data)) {
       return NULL;
     }
-    return $data ?? NULL;
+    return $data ? new Location($data) : NULL;
   }
 
   /**
@@ -75,7 +77,7 @@ public function getCountryLocations($country, $max_level = self::MAX_LEVEL) {
     }
 
     $data = $this->getCountryLocationData($country->id, $max_level);
-    if (empty($data) || empty($data->children) || !is_array($data->children)) {
+    if (!$data || empty($data->children) || !is_array($data->children)) {
       $this->setCache($cache_key, []);
       return [];
     }

html/modules/custom/ghi_base_objects/src/Plugin/EndpointQuery/LocationsQuery.php

@@ -76,9 +76,98 @@ leaflet.sidebar:
     component:
       /libraries/leaflet-sidebar/src/L.Control.Sidebar.css: {}
 
-map.base:
+mapbox_gl:
+  version: 3.8.0
   js:
-    js/map/map.search_control.js: {}
+    https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.js: {}
+  css:
+    component:
+      https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.css: {}
+
+map.gl.sidebar:
+  js:
+    js/map.gl/map.sidebar.js: {}
+  dependencies:
+    - core/jquery
+    - core/once
+    - ghi_blocks/theme
+
+map.gl.interactive_legend:
+  js:
+    js/map.gl/map.interactive_legend.js: {}
+  dependencies:
+    - core/jquery
+
+map.gl.control.admin_level:
+  js:
+    js/map.gl/controls/map.control.admin_level.js: {}
+  dependencies:
+    - core/jquery
+
+map.gl.control.disclaimer:
+  js:
+    js/map.gl/controls/map.control.disclaimer.js: {}
+
+map.gl.control.search:
+  js:
+    js/map.gl/controls/map.control.search.js: {}
+  dependencies:
+    - core/jquery
+
+map.gl.state:
+  js:
+    js/map.gl/map.state.js: {}
+  dependencies:
+    - core/jquery
+
+map.gl:
+  js:
+    js/map.gl/map.mapbox.js: {}
+    js/map.gl/styles/map.circle.js: {}
+    js/map.gl/styles/map.chloropleth.js: {}
+    js/map.gl/map.js: {}
+  dependencies:
+    - core/jquery
+    - ghi_blocks/mapbox_gl
+    - ghi_blocks/map.gl.state
+    - ghi_blocks/map.gl.sidebar
+    - ghi_blocks/map.gl.interactive_legend
+    - ghi_blocks/map.gl.control.admin_level
+    - ghi_blocks/map.gl.control.disclaimer
+    - ghi_blocks/map.gl.control.search
+    - ghi_blocks/map.leaflet.base
+
+
+
+map.gl.plan_overview:
+  js:
+    js/map.gl/map.plan_overview.js: {}
+  dependencies:
+    - ghi_blocks/map.gl
+
+map.gl.plan:
+  js:
+    js/map.gl/map.plan_attachment.js: {}
+  dependencies:
+    - ghi_blocks/map.gl
+
+map.gl.operational_presence:
+  js:
+    js/map.gl/map.plan_operational_presence.js: {}
+  dependencies:
+    - ghi_blocks/map.gl
+
+map.leaflet:
+  js:
+    js/map.leaflet/map.circle.js: {}
+    js/map.leaflet/map.donut.js: {}
+    js/map.leaflet/map.js: {}
+  dependencies:
+    - ghi_blocks/map.leaflet.base
+
+map.leaflet.base:
+  js:
+    js/map.leaflet/map.search_control.js: {}
   dependencies:
     - hpc_common/tooltip
     - hpc_common/d3
@@ -89,31 +178,23 @@ map.base:
     - ghi_blocks/leaflet.search
     - ghi_blocks/leaflet.sidebar
 
-map:
-  js:
-    js/map/map.circle.js: {}
-    js/map/map.donut.js: {}
-    js/map/map.js: {}
-  dependencies:
-    - ghi_blocks/map.base
-
-map.plan:
+map.leaflet.plan:
   js:
-    js/map/map.plan.js: {}
+    js/map.leaflet/map.plan.js: {}
   dependencies:
-    - ghi_blocks/map
+    - ghi_blocks/map.leaflet
 
-map.plan_overview:
+map.leaflet.plan_overview:
   js:
-    js/map/map.plan_overview.js: {}
+    js/map.leaflet/map.plan_overview.js: {}
   dependencies:
-    - ghi_blocks/map
+    - ghi_blocks/map.leaflet
 
-map.chloropleth:
+map.leaflet.chloropleth:
   js:
-    js/map/map.chloropleth.js: {}
+    js/map.leaflet/map.chloropleth.js: {}
   dependencies:
-    - ghi_blocks/map.base
+    - ghi_blocks/map.leaflet.base
 
 modal:
   js:

html/modules/custom/ghi_blocks/ghi_blocks.libraries.yml

@@ -9,6 +9,7 @@ use Drupal\Component\Utility\Html;
 use Drupal\Component\Utility\Unicode;
 use Drupal\Core\Link;
 use Drupal\Core\Render\Markup;
+use Drupal\Core\StringTranslation\ByteSizeMarkup;
 use Drupal\Core\Url;
 use Drupal\ghi_blocks\Plugin\ConfigurationContainerItem\DocumentLink;
 use Drupal\ghi_plans\Entity\Plan;
@@ -178,7 +179,7 @@ function ghi_blocks_build_document_download_link(array $document, $language = NU
   // Get the filesize.
   $filesize = NULL;
   if (!empty($document['filesize'])) {
-    $filesize = format_size($document['filesize']);
+    $filesize = ByteSizeMarkup::create($document['filesize']);
   }
 
   // Link title.