Merge pull request #1790 from griidc/feature/PELAGOS-5444-upgrade-data-landing-page-map-to-leaflet

Added leaflet map to dataland instead of GeoViz

Author: mickel1138

.env

@@ -112,3 +112,6 @@ SITEMAP_MIN_DATE='2025-01-01'
 WKHTMLTOPDF_PATH=/usr/local/bin/wkhtmltopdf
 WKHTMLTOIMAGE_PATH=/usr/local/bin/wkhtmltoimage
 ###< knplabs/knp-snappy-bundle ###
+
+###> ESRI API KEY ###
+ESRI_API_KEY='yourkeyhere'

assets/css/leaflet-custom.css

@@ -0,0 +1,25 @@
+.leaflet-control-attribution {
+    max-height: 3rem;
+    overflow-x: auto;
+}
+
+.leaflet-control-zoom-in span,
+.leaflet-control-zoom-out span {
+    color: white;
+}
+
+.leaflet-control-zoom-in:focus span,
+.leaflet-control-zoom-in:hover span,
+.leaflet-control-zoom-out:focus span,
+.leaflet-control-zoom-out:hover span {
+    color: black;
+}
+
+.leaflet-bar {
+    background-color: rgba(0, 60, 136, 0.5);
+}
+
+.leaflet-bar a:hover,
+.leaflet-bar a:focus {
+    background-color: rgba(0, 60, 136, 0.5);
+}

assets/js/entry/data-land.js

@@ -1,12 +1,68 @@
 import Vue from 'vue';
 import { BootstrapVue, IconsPlugin } from 'bootstrap-vue';
+
+import * as Leaflet from 'leaflet';
+import 'esri-leaflet';
+import * as EsriLeafletVector from 'esri-leaflet-vector';
+import '../../css/leaflet-custom.css';
+import Routing from '../../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min';
 import FileManager from '../vue/FileManager.vue';
 import '../../css/file-manager.css';
 import '@fortawesome/fontawesome-free/css/all.min.css';
 import DownloadZipBtn from '../vue/components/data-land/DownloadZipBtn.vue';
 import HelpModal from '../vue/components/data-land/HelpModal.vue';
 import '../../scss/data-land.scss';
 
+const leafletMap = document.getElementById('leaflet-map');
+
+if (typeof (leafletMap) !== 'undefined' && leafletMap != null) {
+  const { datasetId } = leafletMap.dataset;
+  const esriApiKey = process.env.ESRI_API_KEY;
+
+  const GRIIDCStyle = {
+    color: 'orange',
+    weight: 4,
+    opacity: 1,
+    fillOpacity: 0.15,
+  };
+
+  const map = Leaflet.map('leaflet-map', {
+    preferCanvas: true,
+    minZoom: 3,
+    maxZoom: 14,
+    attributionControl: true,
+    worldCopyJump: true,
+  });
+
+  const basemapEnum = 'ArcGIS:Imagery';
+  EsriLeafletVector.vectorBasemapLayer(basemapEnum, {
+    apiKey: esriApiKey,
+  }).addTo(map);
+
+  Leaflet.featureGroup().addTo(map);
+
+  const url = `${Routing.generate('pelagos_app_ui_dataland_get_json')}/${datasetId}`;
+  fetch(url).then((response) => response.json()).then((response) => {
+    const geojsonMarkerOptions = {
+      radius: 12,
+      fill: false,
+      weight: 4,
+      opacity: 1,
+    };
+    const geojsonLayer = Leaflet.geoJson(response, {
+      pointToLayer(feature, latlng) {
+        return Leaflet.circleMarker(latlng, geojsonMarkerOptions);
+      },
+      style: GRIIDCStyle,
+      onEachFeature(feature, layer) {
+        layer.bindTooltip(feature.properties.name.toString(), { permanent: false, className: 'label' });
+      },
+    }).addTo(map);
+    const bounds = geojsonLayer.getBounds();
+    map.fitBounds(bounds, { padding: [20, 20] });
+  });
+}
+
 // Mount File Manager vue component
 const fileManagerElement = document.getElementById('file-manager-app');
 if (fileManagerElement) {
@@ -87,25 +143,6 @@ if (helpBtnElement) {
   });
 }
 
-// eslint-disable-next-line no-undef
-const dlmap = new GeoViz();
-
-dlmap.initMap('dlolmap', {
-  onlyOneFeature: false, allowModify: false, allowDelete: false, staticMap: false, labelAttr: 'udi',
-});
-
-// eslint-disable-next-line no-undef
-const geovizMap = $('#dlolmap');
-
-if (geovizMap.attr('description') !== '' && geovizMap.attr('wkt') === '') {
-  const imagePath = geovizMap.attr('labimage');
-  dlmap.addImage(imagePath, 0.4);
-  dlmap.makeStatic();
-} else if (geovizMap.attr('wkt')) {
-  dlmap.addFeatureFromWKT(geovizMap.attr('wkt'), { udi: geovizMap.attr('udi') });
-  dlmap.gotoAllFeatures();
-}
-
 const metadataDownloadBtn = document.getElementById('metadata-download');
 if (metadataDownloadBtn) {
   metadataDownloadBtn.addEventListener('click', () => {

config/services.yaml

@@ -12,6 +12,7 @@ parameters:
     custom_template: '%env(CUSTOM_BASE_TEMPLATE)%'
     main_site: '%env(MAINSITE)%'
     sitemap_min_date: '%env(SITEMAP_MIN_DATE)%'
+    esri_api_key: '%env(ESRI_API_KEY)%'
 
 services:
     # default configuration for services in *this* file

package.json

@@ -54,12 +54,16 @@
         "devextreme-vue": "^21.1.6",
         "dotenv-webpack": "^8.1.0",
         "dropzone": "^5.7.2",
+        "esri-leaflet": "^3.0.14",
+        "esri-leaflet-vector": "^4.2.7",
         "exceljs": "^4.3.0",
         "file-saver": "^2.0.5",
         "jquery": "^3.5.1",
         "jquery-migrate": "^3.1.0",
         "jquery-ui": "^1.13.2",
         "jquery.cookie": "^1.4.1",
+        "leaflet": "^1.9.4",
+        "maplibre-gl": "^4.7.1",
         "postcss-loader": "^7.0.0",
         "prop-types": "^15.8.1",
         "qtip2": "2.2.0",

src/Controller/UI/DatalandController.php

@@ -14,6 +14,7 @@
 use App\Entity\Dataset;
 use App\Util\GmlUtil;
 use Doctrine\ORM\EntityManagerInterface;
+use Symfony\Component\HttpFoundation\JsonResponse;
 
 /**
  * The Dataset Monitoring controller.
@@ -269,6 +270,7 @@ public function indexPage(string $udi, EntityManagerInterface $entityManager)
                 'wkt' => $wkt,
                 'datasetSubmissionLockStatus' => true,
                 'issuetracker' => $this->issueTrackingBaseUrl,
+                'esri_api_key' => $mainsite = $this->getParameter('esri_api_key'),
             )
         );
     }
@@ -302,4 +304,18 @@ public function getFormattedMetadata(string $udi)
             )
         );
     }
+
+    #[Route('/data/json/{dataset}', name: 'pelagos_app_ui_dataland_get_json', methods: ['GET', 'HEAD'])]
+    public function getjson(Dataset $dataset, Geometry $geometryUtil): Response
+    {
+        $geoJson = [];
+        $udi = $dataset->getUdi();
+        $spatialExtent = $dataset->getSpatialExtentGeometry();
+
+        if ($spatialExtent !== null) {
+            $geoJson = $geometryUtil->convertGmlToGeoJSON(gml:$spatialExtent, udi:$udi, id:$udi);
+        }
+
+        return new JsonResponse($geoJson, 200, [], true);
+    }
 }

src/Util/Geometry.php

@@ -125,4 +125,24 @@ public function convertGmlToWkt(string $gml)
 
         return $wkt[0];
     }
+
+    /**
+     * Convert GML to GeoJSON representation
+     *
+     * @param string $gml Textual GML of geometry.
+     * @param string $udi Dataset UDI.
+     * @param string $id  Identifier for feature.
+     */
+    public function convertGmlToGeoJSON(string $gml, string $udi = 'unknown', string $id = 'A'): mixed
+    {
+        $sql = "SELECT ST_AsGeoJSON(t.*) FROM (VALUES(:id, :name, ST_GeomFromGML(:gml))) AS t(id, name, geom)";
+        $connection = $this->entityManager->getConnection();
+        $statement = $connection->prepare($sql);
+        try {
+            $result = $statement->executeQuery(array('gml' => $gml, 'id' => $id, 'name' => $udi));
+        } catch (DriverException $e) {
+            throw new InvalidGmlException($e->getMessage());
+        }
+        return $result->fetchOne();
+    }
 }

templates/Dataland/v2/index.html.twig

@@ -12,6 +12,7 @@
 {% endblock %}
 
 {% block stylesheets %}
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
     {{ encore_entry_link_tags('data-land') }}
     {{ parent() }}
 {% endblock stylesheets %}
@@ -89,12 +90,7 @@
                     <hr>
                     {% if dataset.datasetSubmission.spatialExtent|default %}
                         <div class="py-2">
-                            <div id="dlolmap" style="width: 100%;height:480px;"
-                                 wkt="{{wkt|default}}"
-                                 udi="{{dataset.udi}}"
-                                 description= {{ (dataset.datasetStatus == constant('App\\Entity\\Dataset::DATASET_STATUS_ACCEPTED')) ? dataset.datasetSubmission.spatialExtentDescription : "" }}
-                                 labimage="{{ asset('build/images/labonly.png') }}">
-                            </div>
+                            <div id="leaflet-map" data-dataset-id="{{ dataset.id }}" style="width: 100%;height:480px;"></div>
                         </div>
                         <hr>
                     {% endif %}
@@ -128,9 +124,5 @@
 {% block javascripts %}
     {{ parent() }}
 
-    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js"></script>
-    <script type="text/javascript" src="//maps.google.com/maps/api/js?v=3.51&key={{ google_maps_api_key }}&callback=Function.prototype"></script>
-    <script type="text/javascript" src="{{ asset('build/js/geoviz.js') }}"></script>
-
     {{ encore_entry_script_tags('data-land') }}
 {% endblock %}