96 lines
3.2 KiB
HTML
96 lines
3.2 KiB
HTML
<!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>
|