96 lines
3.6 KiB
Plaintext
Executable File
96 lines
3.6 KiB
Plaintext
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script>
|
|
if (location.protocol != 'https:')
|
|
{
|
|
location.href = 'https:' + window.location.href.substring(window.location.protocol.length);
|
|
}
|
|
</script>
|
|
<title>User-Editable Shapes</title>
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
|
|
<meta charset="utf-8">
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
|
|
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
|
|
crossorigin=""/>
|
|
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
|
|
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
|
|
crossorigin=""></script>
|
|
|
|
<script src="/static/Leaflet.Editable.js"></script>
|
|
<style>
|
|
|
|
#map { height: 500px; width: 80%}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<table><tr><td id="map">
|
|
</td><td><h1>Zone :</h1>
|
|
<table id="ListZone"><tr><th>Nom</th><th>Coo</th></tr>
|
|
<% for(var i = 0;i<data.length;i++){ %>
|
|
<tr><td><%= data[i].Nom %></td><td>#N<%=data[i].Nord %>#S<%=data[i].Sud %>#O<%=data[i].Ouest %>#E<%=data[i].Est %></td></tr>
|
|
<% } %>
|
|
</table>
|
|
Nom Zone : <input type="text" id="nomZone">
|
|
<button id="btnAddZone">Ajouter une zone</button>
|
|
</td></tr>
|
|
</table>
|
|
<script>
|
|
L.Popup = L.Popup.extend({
|
|
getEvents: function () {
|
|
var events = L.DivOverlay.prototype.getEvents.call(this);
|
|
if ('closeOnClick' in this.options ? this.options.closeOnClick : this._map.options.closePopupOnClick) {
|
|
//events.preclick = this._close;
|
|
}
|
|
if (this.options.keepInView) {
|
|
events.moveend = this._adjustPan;
|
|
}
|
|
return events;
|
|
},
|
|
});
|
|
var lstRect = new Array();
|
|
// center of the map
|
|
var center = [-33.8650, 151.2094];
|
|
|
|
// Create the map
|
|
var map = L.map('map',{editable: true}).setView(center, 6);
|
|
|
|
// Set up the OSM layer
|
|
L.tileLayer(
|
|
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: 'Data © <a href="http://osm.org/copyright">OpenStreetMap</a>',
|
|
maxZoom: 18
|
|
}).addTo(map);
|
|
L.marker(center);
|
|
map.locate({setView: true, maxZoom: 15});
|
|
|
|
$("#btnAddZone").click(function(){
|
|
if($(this).html() == "Ajouter une zone"){
|
|
lstRect.push(map.editTools.startRectangle());
|
|
console.debug(lstRect);
|
|
lstRect[lstRect.length-1].enableEdit();
|
|
$(this).html("Confirmer");
|
|
}
|
|
else {
|
|
|
|
$(this).html("Ajouter une zone");
|
|
lstRect[lstRect.length-1].disableEdit();
|
|
lstRect[lstRect.length-1].bindTooltip($("#nomZone").val(),{permanent: true, direction:"center"});
|
|
var bounds = lstRect[lstRect.length-1].getBounds();
|
|
$('#ListZone tr:last').after('<tr><td>'+$("#nomZone").val()+'</td><td>w'+bounds.getWest()+';s'+bounds.getSouth()+';e'+bounds.getEast()
|
|
+';n'+bounds.getNorth()+'</td></tr>');
|
|
$.post( "/addZone", { N: bounds.getNorth(), S: bounds.getSouth(), E:bounds.getEast(), O:bounds.getWest(), Name:$("#nomZone").val() } );
|
|
}
|
|
});
|
|
|
|
<% for(var i = 0;i<data.length;i++){ %>
|
|
lstRect.push(L.rectangle([[<%=data[i].Nord %>,<%=data[i].Ouest %>],[<%=data[i].Sud %>,<%=data[i].Est %>]]));
|
|
lstRect[lstRect.length-1].addTo(map);
|
|
lstRect[lstRect.length-1].bindTooltip("<%= data[i].Nom %>",{permanent: true, direction:"center"}).addTo(map);
|
|
<% } %>
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|