Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
ElasticSearch GeoPolygon Drawing Utility
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>ElasticSearch GeoPolygon Drawing Utility</title>
<style>
html, body {
height : 100%;
margin : 0;
padding : 0;
}
#map {
height : 600px;
}
table {
width: 80%;
}
table tr td {
vertical-align: top;
}
table tr td:nth-child(1) {
width: 10%;
}
table tr td:nth-child(2) {
width: 90%;
}
textarea { width: 100%; }
input { width: 30%; }
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
</head>
<body>
<table>
<tr>
<td>Shape</td>
<td>
<textarea id="shape">[-80.190, 25.774], [ -66.118, 18.466], [-64.757, 32.321],[-80.190, 25.774]</textarea>
<p>Enter shape in format: e.g. [lng, lat], [lng, lat]<br/>
1. [-80.190, 25.774], [ -66.118, 18.466], [-64.757, 32.321],[-80.190, 25.774] <br/>
2.
[
3.0393063856686,
50.518243082097
],
[
3.0144060457509,
50.532322358986
],
[
3.0078311327497,
50.541666481466
],
[
3.0058882294197,
50.548460990096
],
[
2.9817246359913,
50.562084285196
],
[
2.9853451932994,
50.564481142822
],
[
3.0129333563982,
50.555425320071
],
[
3.021391541532,
50.567208612243
],
[
3.0284631168484,
50.562665753062
],
[
3.0398846640865,
50.572903234764
],
[
3.0425617260693,
50.572067662788
],
[
3.0408398743791,
50.56902568296
],
[
3.0549224732193,
50.560018139208
],
[
3.0689087809327,
50.556385146954
],
[
3.063100553549,
50.531050541802
],
[
3.049340094405,
50.528462829181
],
[
3.0393063856686,
50.518243082097
]
</p>
</td>
</tr>
<tr>
<td>Point</td>
<td>
<input type="text" id="point" value="24.886, -70.268"></textarea>
<p>format: lat, lng e.g. 24.886, -70.268</p>
</td>
</tr>
<tr><td colspan="2"><button onclick="draw();">Draw</button></td></tr>
</table>
<div id="map"></div>
<script>
function draw()
{
center = $('#point').val();
center = center.replace(/\s|\]/g, '');
centerCoords = center.split(',');
centerLag = parseFloat(centerCoords[0]);
centerLng = parseFloat(centerCoords[1]);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: centerLag, lng: centerLng},
mapTypeId: 'terrain'
});
// [ {lat: 25.774, lng: -80.190}, {lat: 18.466, lng: -66.118}, {lat: 32.321, lng: -64.757}, {lat: 25.774, lng: -80.190} ]
paths = [];
shape = $('#shape').val();
shapeCoords = shape.split('[');
$.each(shapeCoords, function (i, v)
{
v = v.replace(/\s|\]/g, '');
cord = v.split(',');
lng = parseFloat(cord[0]);
lat = parseFloat(cord[1]);
if (lat && lng) {
o = {lat: lat, lng: lng};
paths.push(o);
}
});
var polygon = new google.maps.Polygon({
paths: paths,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
polygon.setMap(map);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(centerLag, centerLng),
map: map,
title: 'Hello World!'
});
marker.setMap(map);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3dm89q9hPfnlXHEIgzfHwV-WykMlA3Fk"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment