65 lines
1.3 KiB
HTML
65 lines
1.3 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
#left {
|
||
|
|
float: left;
|
||
|
|
width: 50%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#geojson {
|
||
|
|
height: 400px;
|
||
|
|
width: 90%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#right {
|
||
|
|
width: 48%;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="container">
|
||
|
|
<div id="left">
|
||
|
|
<textarea id="geojson">
|
||
|
|
|
||
|
|
</textarea> <br />
|
||
|
|
<button id="generateMapframe">Create Mapframe</button>
|
||
|
|
</div>
|
||
|
|
<pre id="right">
|
||
|
|
|
||
|
|
</pre>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
document.getElementById('generateMapframe').addEventListener('click', () => {
|
||
|
|
let fc;
|
||
|
|
try {
|
||
|
|
fc = JSON.parse(document.getElementById('geojson').value);
|
||
|
|
} catch (e) {
|
||
|
|
alert('Invalid GeoJSON');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
window.foo = fc;
|
||
|
|
const center = turf.center(fc);
|
||
|
|
const lon = center.geometry.coordinates[0];
|
||
|
|
const lat = center.geometry.coordinates[1];
|
||
|
|
const mapframe = `
|
||
|
|
<mapframe latitude="${lat}" longitude="${lon}" zoom="8">
|
||
|
|
${JSON.stringify(fc, null, 2)}
|
||
|
|
</mapframe>
|
||
|
|
`;
|
||
|
|
document.getElementById('right').innerHTML = mapframe;
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|