X-Git-Url: https://git.argeo.org/?a=blobdiff_plain;f=org.argeo.app.geo.js%2Fsrc%2Forg.argeo.app.geo.js%2FOpenLayersMapPart.js;h=7c157eb19226a1716545aa4e11f09232060292fb;hb=2c1a7dd0af92287d3239a21dcec90de7313842a9;hp=df7dd969aec4739b3cd555be40945847321ddbc8;hpb=78449dce988dbc690234d0508c6fd609feabe45a;p=gpl%2Fargeo-suite.git

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 df7dd96..7c157eb 100644
--- 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
@@ -1,20 +1,37 @@
+/** OpenLayers-based implementation. 
+ * @module OpenLayersMapPart
+ */
+
 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 {
+	/** The OpenLayers Map. */
 	#map;
 	// Constructor
 	constructor() {
 		super();
 		this.#map = new Map({
 			layers: [
+				new TileLayer({
+					source: new SentinelCloudless(),
+				}),
 				new TileLayer({
 					source: new OSM(),
+					opacity: 0.4,
+					transition: 0,
 				}),
 			],
 			target: 'map',
@@ -28,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,
+		}));
+	}
 }