Implement current map display features.

[gpl/argeo-suite.git] / org.argeo.app.geo.js / src / org.argeo.app.geo.js / OpenLayersMapPart.js

diff --git a/org.argeo.app.geo.js/src/org.argeo.app.geo.js/OpenLayersMapPart.js b/org.argeo.app.geo.js/src/org.argeo.app.geo.js/OpenLayersMapPart.js
index 6284296f87492760383f0f614f5cb5b6afde7135..7c157eb19226a1716545aa4e11f09232060292fb 100644 (file)
--- a/org.argeo.app.geo.js/src/org.argeo.app.geo.js/OpenLayersMapPart.js
+++ b/org.argeo.app.geo.js/src/org.argeo.app.geo.js/OpenLayersMapPart.js
@@ -5,10 +5,16 @@
 import Map from 'ol/Map.js';
 import OSM from 'ol/source/OSM.js';
 import TileLayer from 'ol/layer/Tile.js';
-import View from 'ol/View.js';
-import { fromLonLat, toLonLat } from 'ol/proj.js';
+import { fromLonLat } from 'ol/proj.js';
+import VectorSource from 'ol/source/Vector.js';
+import Feature from 'ol/Feature.js';
+import { Point } from 'ol/geom.js';
+import VectorLayer from 'ol/layer/Vector.js';
+import GeoJSON from 'ol/format/GeoJSON.js';
+import GPX from 'ol/format/GPX.js';
 
 import MapPart from './MapPart.js';
+import { SentinelCloudless } from './OpenLayerTileSources.js';
 
 /** OpenLayers implementation of MapPart. */
 export default class OpenLayersMapPart extends MapPart {
@@ -19,8 +25,13 @@ export default class OpenLayersMapPart extends MapPart {
                super();
                this.#map = new Map({
                        layers: [
+                               new TileLayer({
+                                       source: new SentinelCloudless(),
+                               }),
                                new TileLayer({
                                        source: new OSM(),
+                                       opacity: 0.4,
+                                       transition: 0,
                                }),
                        ],
                        target: 'map',
@@ -34,4 +45,26 @@ export default class OpenLayersMapPart extends MapPart {
        setCenter(lng, lat) {
                this.#map.getView().setCenter(fromLonLat([lng, lat]));
        }
+
+       addPoint(lng, lat, style) {
+               let vectorSource = new VectorSource({
+                       features: [new Feature({
+                               geometry: new Point(fromLonLat([lng, lat]))
+                       })]
+               });
+               this.#map.addLayer(new VectorLayer({ source: vectorSource }));
+       }
+
+       addUrlLayer(url, format) {
+               let vectorSource;
+               if (format === 'GEOJSON') {
+                       vectorSource = new VectorSource({ url: url, format: new GeoJSON() })
+               }
+               else if (format === 'GPX') {
+                       vectorSource = new VectorSource({ url: url, format: new GPX() })
+               }
+               this.#map.addLayer(new VectorLayer({
+                       source: vectorSource,
+               }));
+       }
 }