From 82ba9115e8b4f105df4c0487079b963d5eced9a9 Mon Sep 17 00:00:00 2001 From: Tobias Date: Sun, 21 Apr 2024 18:48:39 +0200 Subject: [PATCH] add files --- leaflet_hybrid.html | 95 ++++++++++++++++++++++++ leaflet_snippet.html | 116 ++++++++++++++++++++++++++++++ leaflet_widget.js | 167 +++++++++++++++++++++++++++++++++++++++++++ usage_examples.html | 28 ++++++++ 4 files changed, 406 insertions(+) create mode 100644 leaflet_hybrid.html create mode 100644 leaflet_snippet.html create mode 100644 leaflet_widget.js create mode 100644 usage_examples.html diff --git a/leaflet_hybrid.html b/leaflet_hybrid.html new file mode 100644 index 0000000..96532f1 --- /dev/null +++ b/leaflet_hybrid.html @@ -0,0 +1,95 @@ + + + + Leaflet Multi Polygons + + + + + + + + + + diff --git a/leaflet_snippet.html b/leaflet_snippet.html new file mode 100644 index 0000000..602d15b --- /dev/null +++ b/leaflet_snippet.html @@ -0,0 +1,116 @@ + + + +Leaflet Multi Polygons + + + + +
+ + + \ No newline at end of file diff --git a/leaflet_widget.js b/leaflet_widget.js new file mode 100644 index 0000000..e9134eb --- /dev/null +++ b/leaflet_widget.js @@ -0,0 +1,167 @@ + +class LeafletElement extends HTMLElement { + + constructor() { + super(); + this.attachShadow({mode: 'open'}); + this.content_div = document.createElement('div'); + this.shadowRoot.appendChild(this.content_div); + + this.link = document.createElement('link'); + this.link.setAttribute("rel", "stylesheet"); + this.link.setAttribute("href", "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"); + this.shadowRoot.appendChild(this.link); + + //this.script = document.createElement('script'); + //this.script.setAttribute("src", "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"); + //this.shadowRoot.appendChild(this.script); + + // + // + + + this.slot_ele = document.createElement('slot'); + this.shadowRoot.appendChild(this.slot_ele); + this.dot_text = ""; + } + + connectedCallback(){ + let zoom = this.hasAttribute('zoom') ? this.getAttribute('zoom') : "11"; + let style = this.hasAttribute('style') ? this.getAttribute('style') : ""; + this.content_div.style = style; + + async function search(name){ + //let results = localStorage.getItem("https://nominatim.openstreetmap.org/search.php?q="+name+"&polygon_geojson=1&format=json"); + //if(results){ + // console.log("Use cache!"); + // return JSON.parse(results); + //} + //else{ + //console.log("Use fetch!"); + let resp = await fetch("https://nominatim.openstreetmap.org/search.php?q="+name+"&polygon_geojson=1&format=json"); + + //what if negative resp? + //console.log(resp); + + let results = await resp.json(); + //console.log(results); + + //localStorage.setItem("https://nominatim.openstreetmap.org/search.php?q="+name+"&polygon_geojson=1&format=json", JSON.stringify(results)); + return results; + //} + } + + function right_result(result){ + return result.osm_type === "relation"; + } + + async function get_polygon(name){ + let query = "https://nominatim.openstreetmap.org/search.php?q="+name+"&polygon_geojson=1&format=json"; + let result = localStorage.getItem(query); + if(result){ + console.log("Use cache!"); + return JSON.parse(result); + } + else{ + console.log("Use fetch!"); + let results = await search(name); + let result = results.filter(right_result)[0]; + console.log(result); + localStorage.setItem(query, JSON.stringify(result)); + return result; + } + } + + let that = this; + this.slot_ele.addEventListener('slotchange', async e => { + let spec = JSON.parse(that.innerText); + + //alert(JSON.stringify(spec)); + + let polygons = {}; + for(let k of Object.keys(spec.areas)){ + //let results = await search(k); + //let result = results.filter(right_result)[0]; + + let result = await get_polygon(k); + + //alert(typeof result); + + polygons[k] = result; + } + + //alert(JSON.stringify(polygons)); + + let mapOptions = { + //center: [52.6787254, 13.5881114], + //center: [Number(result.lat), Number(result.lon)], + center: [Number(polygons[spec.focus].lat), Number(polygons[spec.focus].lon)], + zoom + }; + + //let map = new L.map('map', mapOptions); + let map = new L.map(this.content_div, mapOptions); + + let layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'); + map.addLayer(layer); + + function switch_coords(poly){ + return poly.map(t => [t[1], t[0]]); + } + + for(let k of Object.keys(polygons)){ + let result = polygons[k]; + + let latlang; + switch(result.geojson.type){ + case "MultiPolygon": + latlang = [ + ...result.geojson.coordinates[0].map(x => switch_coords(x)) + ]; + break; + + case "Polygon": + latlang = [ + ...[ switch_coords(result.geojson.coordinates[0]) ] + ]; + break; + } + + let multiPolygonOptions = {color: spec.areas[k], weight:2}; + let multipolygon = L.multiPolygon(latlang , multiPolygonOptions); + multipolygon.addTo(map); + } + this.slot_ele.style.display = "none"; + this.content_div.children[0].setAttribute("width", this.content_div.style.width); + this.content_div.children[0].setAttribute("height", this.content_div.style.height); + }); + } + + disconnectedCallback() { + + } + + attributeChangedCallback(name, oldValue, newValue) { + //this.displayVal.innerText = this.value; + } + + get layout(){ + + } + + set layout(x){ + + } + + get value(){ + //dot code + } + + set value(x){ + + } + +} + +customElements.define('leaf-let', LeafletElement); + diff --git a/usage_examples.html b/usage_examples.html new file mode 100644 index 0000000..ba7ebcf --- /dev/null +++ b/usage_examples.html @@ -0,0 +1,28 @@ + + + + My Custom Viz-Element + + + + + + + + + + + { + "areas": { + "Potsdam": "blue", + "Erfurt": "yellow", + "Berlin": "red", + "Bernau": "orange" + }, + "focus": "Berlin" + } + + + \ No newline at end of file