add files
This commit is contained in:
parent
6fe5ea572b
commit
82ba9115e8
95
leaflet_hybrid.html
Normal file
95
leaflet_hybrid.html
Normal 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
116
leaflet_snippet.html
Normal 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
167
leaflet_widget.js
Normal 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
28
usage_examples.html
Normal 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>
|
||||
Loading…
x
Reference in New Issue
Block a user