sanj/geojson-mapframe
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

first commit, basic version

Browse Source
This commit is contained in:
Sanjay Bhangar 2018-03-16 16:38:30 +05:30
commit e92cced7be
2 changed files with 66 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md Normal file
View File

@ -0,0 +1 @@
Simple tool to paste a GeoJSON FeatureCollection and creates a <mapframe> element that you can paste into mediawiki pages.

65
index.html Normal file
View File

@ -0,0 +1,65 @@
<!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 = `
&lt;mapframe latitude="${lat}" longitude="${lon}" zoom="8">
${JSON.stringify(fc, null, 2)}
&lt;/mapframe>
`;
document.getElementById('right').innerHTML = mapframe;
});
</script>
</body>
</html>