chore: add examples

.dockerignore

@@ -7,3 +7,4 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+examples/

.gitignore

@@ -8,3 +8,4 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+examples/assets/

.prettierignore

@@ -12,3 +12,5 @@ static
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+
+examples/assets/

README.md

@@ -1,4 +1,5 @@
 # MapColonies Playground
+
 Code playground for mapping clients.
 The code examples are saved in S3 bucket and fetched and cached by the server.
 
@@ -21,62 +22,63 @@ The code examples are saved in S3 bucket and fetched and cached by the server.
 The codes examples shown are defined by a json index file with all the data needed. All the files listed in the index are loaded from the same bucket as the index itself.
 
 ### example index
+
 ```json
 {
-  "ol": {
-    "basic-ol": {
-      "displayName": "basic openlayers",
-      "files": ["openlayers_basic.js", "openlayers.css", "openlayers.html"],
-      "links": [
-        { "name": "ol.css", "url": "/libs/ol/v7.3.0/ol.css", "type": "css" },
-        { "name": "ol.js", "url": "/libs/ol/v7.3.0/ol.js", "type": "js" }
-      ]
-    },
-    "geojson-style-ol": {
-      "displayName": "geojson openlayers",
-      "files": ["openlayers_geojson.js", "openlayers.css", "openlayers.html"],
-      "links": [
-        { "name": "ol.css", "url": "/libs/ol/v7.3.0/ol.css", "type": "css" },
-        { "name": "ol.js", "url": "/libs/ol/v7.3.0/ol.js", "type": "js" }
-      ]
-    }
-  },
-  "cesium": {
-    "basic-cesium": {
-      "displayName": "basic cesium",
-      "files": ["cesium_basic.js", "cesium.html"],
-      "links": [
-        {
-          "name": "cesium.js",
-          "url": "/libs/Cesium/Cesium.js",
-          "type": "js"
-        },
-        {
-          "name": "widgets.css",
-          "url": "/libs/Cesium/Widgets/widgets.css",
-          "type": "css"
-        }
-      ]
-    }
-  },
-  "leaflet": {
-    "basic-leaflet": {
-      "displayName": "basic leaflet",
-      "files": ["leaflet_basic.js", "leaflet.css", "leaflet.html"],
-      "links": [
-        {
-          "name": "leaflet.js",
-          "url": "/libs/leaflet/1.9.4/leaflet.js",
-          "type": "js"
-        },
-        {
-          "name": "leaflet.css",
-          "url": "/libs/leaflet/1.9.4/leaflet.css",
-          "type": "css"
-        }
-      ]
-    }
-  }
+	"ol": {
+		"basic-ol": {
+			"displayName": "basic openlayers",
+			"files": ["openlayers_basic.js", "openlayers.css", "openlayers.html"],
+			"links": [
+				{ "name": "ol.css", "url": "/libs/ol/v7.3.0/ol.css", "type": "css" },
+				{ "name": "ol.js", "url": "/libs/ol/v7.3.0/ol.js", "type": "js" }
+			]
+		},
+		"geojson-style-ol": {
+			"displayName": "geojson openlayers",
+			"files": ["openlayers_geojson.js", "openlayers.css", "openlayers.html"],
+			"links": [
+				{ "name": "ol.css", "url": "/libs/ol/v7.3.0/ol.css", "type": "css" },
+				{ "name": "ol.js", "url": "/libs/ol/v7.3.0/ol.js", "type": "js" }
+			]
+		}
+	},
+	"cesium": {
+		"basic-cesium": {
+			"displayName": "basic cesium",
+			"files": ["cesium_basic.js", "cesium.html"],
+			"links": [
+				{
+					"name": "cesium.js",
+					"url": "/libs/Cesium/Cesium.js",
+					"type": "js"
+				},
+				{
+					"name": "widgets.css",
+					"url": "/libs/Cesium/Widgets/widgets.css",
+					"type": "css"
+				}
+			]
+		}
+	},
+	"leaflet": {
+		"basic-leaflet": {
+			"displayName": "basic leaflet",
+			"files": ["leaflet_basic.js", "leaflet.css", "leaflet.html"],
+			"links": [
+				{
+					"name": "leaflet.js",
+					"url": "/libs/leaflet/1.9.4/leaflet.js",
+					"type": "js"
+				},
+				{
+					"name": "leaflet.css",
+					"url": "/libs/leaflet/1.9.4/leaflet.css",
+					"type": "css"
+				}
+			]
+		}
+	}
 }
 ```
 

examples/cesium-3d/3d-model.js

@@ -0,0 +1,75 @@
+import { TOKEN } from './config/common-config.js';
+import {
+	PRODUCT_ID as RASTER_PRODUCT_ID,
+	PRODUCT_TYPE as RASTER_PRODUCT_TYPE,
+	LAYER_IMAGE_FORMAT
+} from './config/raster-config.js';
+import {
+	PRODUCT_ID as DEM_PRODUCT_ID,
+	PRODUCT_TYPE as DEM_PRODUCT_TYPE,
+	DEM_SCHEME
+} from './config/dem-config.js';
+import {
+	PRODUCT_ID as MODEL_3D_PRODUCT_ID,
+	PRODUCT_TYPE as MODEL_3D_PRODUCT_TYPE,
+	MODEL_3D_SCHEME
+} from './config/3d-config.js';
+import { fetchServiceLink } from './utils/catalog-client.js';
+import { fetchWmtsTileTemplate } from './utils/wmts-utils.js';
+
+Promise.all([
+	fetchWmtsTileTemplate(RASTER_PRODUCT_ID, RASTER_PRODUCT_TYPE, LAYER_IMAGE_FORMAT),
+	fetchServiceLink('dem', DEM_PRODUCT_ID, DEM_PRODUCT_TYPE, DEM_SCHEME),
+	fetchServiceLink('3d', MODEL_3D_PRODUCT_ID, MODEL_3D_PRODUCT_TYPE, MODEL_3D_SCHEME)
+]).then(([raster, dem, model]) => {
+	const viewer = new Cesium.Viewer('cesiumContainer', {
+		baseLayer: new Cesium.ImageryLayer(
+			new Cesium.WebMapTileServiceImageryProvider({
+				url: new Cesium.Resource({
+					url: raster.template,
+					queryParameters: {
+						token: TOKEN
+					}
+				}),
+				layer: raster.name,
+				style: 'default',
+				format: LAYER_IMAGE_FORMAT,
+				tileMatrixSetID: 'WorldCRS84',
+				tilingScheme: new Cesium.GeographicTilingScheme()
+			})
+		),
+		terrainProvider: new Cesium.CesiumTerrainProvider({
+			url: new Cesium.Resource({
+				url: dem.url,
+				queryParameters: {
+					token: TOKEN
+				}
+			})
+		})
+	});
+
+	viewer.scene.primitives.add(
+		new Cesium.Cesium3DTileset({
+			url: new Cesium.Resource({
+				url: model.url,
+				queryParameters: {
+					token: TOKEN
+				}
+			}),
+			maximumScreenSpaceError: 5,
+			cullRequestsWhileMovingMultiplier: 120,
+			preloadFlightDestination: true,
+			preferLeaves: true,
+			skipLevelOfDetail: true
+		})
+	);
+
+	viewer.camera.flyTo({
+		destination: Cesium.Cartesian3.fromDegrees(35.201436, 33.265378, 300),
+		orientation: {
+			heading: Cesium.Math.toRadians(25.0),
+			pitch: Cesium.Math.toRadians(-10.0),
+			roll: 0.0
+		}
+	});
+});

examples/cesium-3d/cesium.html

@@ -0,0 +1 @@
+<div id="cesiumContainer"></div>

examples/cesium-geocoding/cesium.html

@@ -0,0 +1 @@
+<div id="cesiumContainer"></div>

examples/cesium-geocoding/cesium.js

@@ -0,0 +1,64 @@
+'use strict';
+import { TOKEN } from './config/common-config.js';
+import { PRODUCT_ID, PRODUCT_TYPE, LAYER_IMAGE_FORMAT } from './config/raster-config.js';
+import { GEOCODING_URL } from './config/vector-config.js';
+import { fetchWmtsTileTemplate } from './utils/wmts-utils.js';
+
+function OpenStreetMapNominatimGeocoder() {}
+
+OpenStreetMapNominatimGeocoder.prototype.geocode = function (input) {
+	const resource = new Cesium.Resource({
+		url: GEOCODING_URL,
+		queryParameters: {
+			format: 'json',
+			q: input,
+			token: TOKEN
+		},
+		headers: {
+			'accept-language': 'he'
+		}
+	});
+
+	return resource.fetchJson().then(function (results) {
+		let bboxDegrees;
+		return results.map(function (resultObject) {
+			bboxDegrees = resultObject.boundingbox;
+			return {
+				displayName: resultObject.display_name,
+				destination: Cesium.Rectangle.fromDegrees(
+					bboxDegrees[2],
+					bboxDegrees[0],
+					bboxDegrees[3],
+					bboxDegrees[1]
+				)
+			};
+		});
+	});
+};
+
+fetchWmtsTileTemplate(PRODUCT_ID, PRODUCT_TYPE, LAYER_IMAGE_FORMAT).then(({ template, name }) => {
+	new Cesium.Viewer('cesiumContainer', {
+		vrButton: false,
+		homeButton: false,
+		infoBox: false,
+		timeline: false,
+		navigationHelpButton: false,
+		shouldAnimate: false,
+		baseLayer: new Cesium.ImageryLayer(
+			new Cesium.WebMapTileServiceImageryProvider({
+				url: new Cesium.Resource({
+					url: template,
+					queryParameters: {
+						token: TOKEN
+					}
+				}),
+				layer: name,
+				style: 'default',
+				format: LAYER_IMAGE_FORMAT,
+				tileMatrixSetID: 'WorldCRS84',
+				tilingScheme: new Cesium.GeographicTilingScheme()
+			})
+		),
+		geocoder: new OpenStreetMapNominatimGeocoder()
+	});
+});

examples/cesium-layers-split/split-layers.css

@@ -0,0 +1,13 @@
+#slider {
+	position: absolute;
+	left: 50%;
+	top: 0px;
+	background-color: #d3d3d3;
+	width: 5px;
+	height: 100%;
+	z-index: 9999;
+}
+
+#slider:hover {
+	cursor: ew-resize;
+}

examples/cesium-layers-split/split-layers.html

@@ -0,0 +1,4 @@
+<div id="cesiumContainer" class="fullSize">
+	<div id="slider"></div>
+</div>
+<div id="toolbar"></div>

examples/cesium-layers-split/split-layers.js

@@ -0,0 +1,83 @@
+'use strict';
+import { TOKEN } from './config/common-config.js';
+import { PRODUCT_ID, PRODUCT_TYPE, LAYER_IMAGE_FORMAT } from './config/raster-config.js';
+import { fetchWmtsTileTemplate } from './utils/wmts-utils.js';
+
+Promise.all([
+	fetchWmtsTileTemplate(PRODUCT_ID, PRODUCT_TYPE, LAYER_IMAGE_FORMAT),
+	fetchWmtsTileTemplate('OSM', 'RasterVectorBest', LAYER_IMAGE_FORMAT)
+]).then(([main, second]) => {
+	const viewer = new Cesium.Viewer('cesiumContainer', {
+		baseLayer: new Cesium.ImageryLayer(
+			new Cesium.WebMapTileServiceImageryProvider({
+				url: new Cesium.Resource({
+					url: main.template,
+					queryParameters: {
+						token: TOKEN
+					}
+				}),
+				layer: main.name,
+				style: 'default',
+				format: LAYER_IMAGE_FORMAT,
+				tileMatrixSetID: 'WorldCRS84',
+				tilingScheme: new Cesium.GeographicTilingScheme()
+			})
+		),
+		baseLayerPicker: false,
+		infoBox: false
+	});
+
+	const layers = viewer.imageryLayers;
+	const secondLayer = layers.addImageryProvider(
+		new Cesium.WebMapTileServiceImageryProvider({
+			url: new Cesium.Resource({
+				url: second.template,
+				queryParameters: {
+					token: TOKEN
+				}
+			}),
+			layer: second.name,
+			style: 'default',
+			format: LAYER_IMAGE_FORMAT,
+			tileMatrixSetID: 'WorldCRS84',
+			tilingScheme: new Cesium.GeographicTilingScheme()
+		})
+	);
+	secondLayer.splitDirection = Cesium.SplitDirection.LEFT; // Only show to the left of the slider.
+
+	// Sync the position of the slider with the split position
+	const slider = document.getElementById('slider');
+	viewer.scene.splitPosition = slider.offsetLeft / slider.parentElement.offsetWidth;
+
+	const handler = new Cesium.ScreenSpaceEventHandler(slider);
+
+	let moveActive = false;
+
+	function move(movement) {
+		if (!moveActive) {
+			return;
+		}
+
+		const relativeOffset = movement.endPosition.x;
+		const splitPosition = (slider.offsetLeft + relativeOffset) / slider.parentElement.offsetWidth;
+		slider.style.left = `${100.0 * splitPosition}%`;
+		viewer.scene.splitPosition = splitPosition;
+	}
+
+	handler.setInputAction(function () {
+		moveActive = true;
+	}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
+	handler.setInputAction(function () {
+		moveActive = true;
+	}, Cesium.ScreenSpaceEventType.PINCH_START);
+
+	handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+	handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);
+
+	handler.setInputAction(function () {
+		moveActive = false;
+	}, Cesium.ScreenSpaceEventType.LEFT_UP);
+	handler.setInputAction(function () {
+		moveActive = false;
+	}, Cesium.ScreenSpaceEventType.PINCH_END);
+});

examples/cesium-terrain/cesium.html

@@ -0,0 +1 @@
+<div id="cesiumContainer"></div>