Tobias/Leaflet-Customelement
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add files

Browse Source
This commit is contained in:
Tobias Weise 2024-04-21 18:48:39 +02:00
parent 6fe5ea572b
commit 82ba9115e8
4 changed files with 406 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
leaflet_hybrid.html Normal file
View File

@ -0,0 +1,95 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Multi Polygons</title>
<link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script type="module">
// We can use "/src" here - browsers, which support modules also support ES2015
import { define, html } from 'https://unpkg.com/hybrids@4.0.2/src/index.js';
export function increaseCount(host) {
host.count += 1;
}
function alertJ(x){
let s = JSON.stringify(x, null, 4);
alert(s);
}
async function search(name){
let resp = await fetch("https://nominatim.openstreetmap.org/search.php?q="+name+"&polygon_geojson=1&format=json");
let results = await resp.json();
return results;
}
function right_result(result){
return result.osm_type === "relation";
}
export const OsmMap = {
target: "",
width: "800px",
height: "600px",
render: async function({ target, width, height }){
let div_id = "map_" + target;
//setTimeout(async function(){
let name = target;
let results = await search(name);
let result = results.filter(right_result)[0];
alert(result);
let mapOptions = {
//center: [52.6787254, 13.5881114],
center: [Number(result.lat), Number(result.lon)],
zoom: 11
};
let map = new L.map(div_id, 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]]);
}
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:'red', weight:2};
let multipolygon = L.multiPolygon(latlang , multiPolygonOptions);
multipolygon.addTo(map);
//}, 1000);
return html`<div id="${div_id}" style="width: ${width}; height: ${height}"></div>`;
}
};
define('osm-map', OsmMap);
</script>
</head>
<body>
<osm-map width="1700px" height="860px" target="Berlin"></osm-map>
</body>
</html>

116
leaflet_snippet.html Normal file
View File

@ -0,0 +1,116 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Multi Polygons</title>
<link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
<div id="map" style = "width: 1700px; height: 860px"></div>
<script>
function alertJ(x){
let s = JSON.stringify(x, null, 4);
alert(s);
}
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");
let results = await resp.json();
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";
}
//let resp = await fetch("https://nominatim.openstreetmap.org/details?osmtype=R&osmid=175905&format=json");
//let name = "Braunschweig";
//let name = "Berlin, Germany";
//let name = "Berlin";
//let name = "Leipzig";
//let name = "Erfurt";
//let name = "Germany";
//let name = "Ukraine";
//let name = "Iran";
//let name = "India";
//let name = "Bhutan";
(async function(){
let spec = {
areas: {
"Potsdam": "blue",
"Erfurt": "yellow",
"Berlin": "red",
"Bernau": "orange"
},
focus: "Berlin"
};
let polygons = {};
for(let k of Object.keys(spec.areas)){
let results = await search(k);
let result = results.filter(right_result)[0];
polygons[k] = result;
}
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: 11
};
let map = new L.map('map', 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);
}
}());
</script>
</body>
</html>

167
leaflet_widget.js Normal file
View File

@ -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);
//<link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
//<script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></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);

28
usage_examples.html Normal file
View File

@ -0,0 +1,28 @@
<!doctype html>
<html>
<head>
<title>My Custom Viz-Element</title>
<meta charset="utf-8">
<!--
<link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
-->
<script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="leaflet_widget.js"></script>
</head>
<body>
<leaf-let zoom="8" style="width:800px; height:600px; box-shadow: 10px 5px 5px black;">
{
"areas": {
"Potsdam": "blue",
"Erfurt": "yellow",
"Berlin": "red",
"Bernau": "orange"
},
"focus": "Berlin"
}
</leaf-let>
</body>
</html>