From 88f85f38ecb82cbbf7ce9c81519367dd2a601204 Mon Sep 17 00:00:00 2001
From: Andrew Harvey <andrew@alantgeo.com.au>
Date: Thu, 23 Jan 2025 22:25:53 +1100
Subject: [PATCH] add basic editor used to update sources

---
 editor/index.html | 250 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 250 insertions(+)
 create mode 100644 editor/index.html
diff --git a/editor/index.html b/editor/index.html
new file mode 100644
index 000000000..190653798
--- /dev/null
+++ b/editor/index.html
@@ -0,0 +1,250 @@
+<!DOCTYPE html>
+<html lang="en">
+<!--
+Web application editor for ELI sources
+
+1. Drag your sources .geojson within this page in the browser. The sources .geojson file may either include or exclude the geometry
+2. Fix or create a new polygon or polygons
+3. Once done take the last object logged to the developer tools console and copy it into your source .geojson
+-->
+
+<head>
+    <title>ELI Editor</title>
+    <meta property="og:description" content="editor-layer-index editor" />
+    <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.css' />
+    <script src='https://unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js'></script>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+
+        html,
+        body,
+        #map {
+            height: 100%;
+        }
+    </style>
+</head>
+
+<body>
+    <style>
+    </style>
+    <script src="https://www.unpkg.com/@mapbox/mapbox-gl-draw@1.5.0/dist/mapbox-gl-draw.js"></script>
+    <link rel="stylesheet" href="https://www.unpkg.com/@mapbox/mapbox-gl-draw@1.5.0/dist/mapbox-gl-draw.css" />
+    <div id="map"></div>
+
+    <script type="module">
+
+        import * as turf from 'https://esm.sh/@turf/turf@7.1.0';
+
+        MapboxDraw.constants.classes.CANVAS = 'maplibregl-canvas';
+        MapboxDraw.constants.classes.CONTROL_BASE = 'maplibregl-ctrl';
+        MapboxDraw.constants.classes.CONTROL_PREFIX = 'maplibregl-ctrl-';
+        MapboxDraw.constants.classes.CONTROL_GROUP = 'maplibregl-ctrl-group';
+        MapboxDraw.constants.classes.ATTRIBUTION = 'maplibregl-ctrl-attrib';
+
+        const blue = "#3bb2d0";
+        const orange = "#fbb03b";
+        const white = "#fff";
+
+        const theme = [
+            // Polygons
+            //   Solid fill
+            //   Active state defines color
+            {
+                id: "gl-draw-polygon-fill",
+                type: "fill",
+                filter: ["all", ["==", "$type", "Polygon"]],
+                paint: {
+                    "fill-color": ["case", ["==", ["get", "active"], "true"], orange, blue],
+                    "fill-opacity": 0.5,
+                },
+            },
+            // Lines
+            // Polygon
+            //   Matches Lines AND Polygons
+            //   Active state defines color
+            {
+                id: "gl-draw-lines",
+                type: "line",
+                filter: ["any", ["==", "$type", "LineString"], ["==", "$type", "Polygon"]],
+                layout: {
+                    "line-cap": "round",
+                    "line-join": "round",
+                },
+                paint: {
+                    "line-color": ["case", ["==", ["get", "active"], "true"], orange, blue],
+                    "line-dasharray": [0.2, 2],
+                    "line-width": 4,
+                },
+            },
+            // Points
+            //   Circle with an outline
+            //   Active state defines size and color
+            {
+                id: "gl-draw-point-outer",
+                type: "circle",
+                filter: ["all", ["==", "$type", "Point"], ["==", "meta", "feature"]],
+                paint: {
+                    "circle-radius": ["case", ["==", ["get", "active"], "true"], 14, 10],
+                    "circle-color": white,
+                },
+            },
+            {
+                id: "gl-draw-point-inner",
+                type: "circle",
+                filter: ["all", ["==", "$type", "Point"], ["==", "meta", "feature"]],
+                paint: {
+                    "circle-radius": ["case", ["==", ["get", "active"], "true"], 10, 6],
+                    "circle-color": ["case", ["==", ["get", "active"], "true"], orange, blue],
+                },
+            },
+            // Vertex
+            //   Visible when editing polygons and lines
+            //   Similar behaviour to Points
+            //   Active state defines size
+            {
+                id: "gl-draw-vertex-outer",
+                type: "circle",
+                filter: [
+                    "all",
+                    ["==", "$type", "Point"],
+                    ["==", "meta", "vertex"],
+                    ["!=", "mode", "simple_select"],
+                ],
+                paint: {
+                    "circle-radius": ["case", ["==", ["get", "active"], "true"], 14, 10],
+                    "circle-color": white,
+                },
+            },
+            {
+                id: "gl-draw-vertex-inner",
+                type: "circle",
+                filter: [
+                    "all",
+                    ["==", "$type", "Point"],
+                    ["==", "meta", "vertex"],
+                    ["!=", "mode", "simple_select"],
+                ],
+                paint: {
+                    "circle-radius": ["case", ["==", ["get", "active"], "true"], 10, 6],
+                    "circle-color": orange,
+                },
+            },
+            // Midpoint
+            //   Visible when editing polygons and lines
+            //   Tapping or dragging them adds a new vertex to the feature
+            {
+                id: "gl-draw-midpoint",
+                type: "circle",
+                filter: ["all", ["==", "meta", "midpoint"]],
+                paint: {
+                    "circle-radius": 6,
+                    "circle-color": orange,
+                },
+            },
+        ];
+
+        let source;
+
+        const map = new maplibregl.Map({
+            container: 'map',
+            style: 'https://pnorman.github.io/tilekiln-shortbread-demo/colorful.json',
+            center: [0, 0],
+            zoom: 1
+        });
+        window.map = map;
+
+        const draw = new MapboxDraw({
+            displayControlsDefault: false,
+            controls: {
+                polygon: true,
+                trash: true
+            },
+            styles: theme
+        });
+        map.addControl(draw);
+
+        map.on('draw.create', update);
+        map.on('draw.delete', update);
+        map.on('draw.update', update);
+
+        function update(e) {
+            const data = draw.getAll();
+            const feature = data.features.length > 1 ? turf.union(data) : data.features[0];
+            source.geometry = feature.geometry;
+            console.log(source.geometry);
+        }
+
+        function handleDrop(e) {
+            e.stopPropagation();
+            e.preventDefault();
+            var files = e.dataTransfer.files;
+            for (const file of files) {
+
+                if (file.type == 'application/geo+json') {
+                    var reader = new FileReader();
+                    reader.addEventListener('load', (loadEvent) => {
+                        source = JSON.parse(reader.result);
+                        draw.deleteAll();
+                        if (source.geometry) {
+                            draw.add(source);
+                            map.fitBounds(turf.bbox(source), { padding: 20 });
+                        }
+
+                        let url;
+                        let scheme;
+                        if (source.properties.type === 'wms') {
+                            url = source.properties.url
+                                .replace('{bbox}', '{bbox-epsg-3857}')
+                                .replace('{width}', '256')
+                                .replace('{height}', '256')
+                                .replace('{proj}', '3857')
+                                .replace('format=jpeg', 'format=png&transparent=true');
+                            scheme = 'xyz'
+                        } else if (source.properties.type === 'tms') {
+                            url = source.properties.url
+                                .replace('{zoom}', '{z}');
+                            scheme = 'xyz';
+                        }
+
+                        if (map.getLayer('layer')) {
+                            map.removeLayer('layer');
+                        }
+                        if (map.getSource('source')) {
+                            map.removeSource('source');
+                        }
+                        map.addSource('source', {
+                            'type': 'raster',
+                            'tiles': [url],
+                            'tileSize': 256,
+                            'scheme': scheme
+                        });
+                        map.addLayer({
+                            'id': 'layer',
+                            'type': 'raster',
+                            'source': 'source',
+                            'paint': {}
+                        }, 'symbol-transit-airport');
+                    });
+                    reader.readAsText(file);
+                }
+            }
+        }
+
+        function handleDragOver(e) {
+            e.stopPropagation();
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'copy';
+        }
+
+        var dropElement = document.getElementsByTagName('body')[0];
+        dropElement.addEventListener('dragover', handleDragOver, false);
+        dropElement.addEventListener('drop', handleDrop, false);
+    </script>
+</body>
+
+</html>
