140 lines
5.5 KiB
Plaintext
Executable File
140 lines
5.5 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>
|
|
<!--Importing CSS frameworks-->
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
|
|
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
|
|
crossorigin=""/>
|
|
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
|
|
<link rel="shortcut icon" type="image/x-icon" href="/static/Icons/h0.png" />
|
|
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
</head>
|
|
<body>
|
|
|
|
<!--Background shapes Don't care about them! :D -->
|
|
<div id="water-shape">
|
|
<img src="/static/Shapes/water-shape.svg">
|
|
</div>
|
|
<div id="circle-shape">
|
|
<img src="/static/Shapes/circle-shape.svg">
|
|
</div>
|
|
<div id="curve-two-shape">
|
|
<img src="/static/Shapes/curve2-shape.svg">
|
|
</div>
|
|
<div id="triangle-shape">
|
|
<img src="/static/Shapes/triangle-shape.svg">
|
|
</div>
|
|
<!--End of background shapes-->
|
|
|
|
|
|
<!--This is the beginning of the navigation you dont have to care about it too :D -->
|
|
<div class="container">
|
|
<nav>
|
|
<div class="nav-wrapper">
|
|
<a href="#" class="brand-logo-map left">Pub</a>
|
|
<ul class="right">
|
|
<li><a class="btn-floating btn-small waves-effect waves-light purple darken-3"><i class="material-icons">menu</i></a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<!--The End of the naviation-->
|
|
|
|
|
|
<div class="container">
|
|
<div class="row ">
|
|
<div class="col m4 s12 purple darken-3">
|
|
<!--Map from leafletjs-->
|
|
<div id="mapid"></div>
|
|
<!--End of Map from leafletjs-->
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<!--This is the add button-->
|
|
<div class="input-field col m6 s12 center-btn">
|
|
<input placeholder="Placeholder" id="nomZone" type="text" class="validate">
|
|
<label for="nomZone">Nom Zone </label>
|
|
<a href="#" class="btn white-text purple darken-3 center bordered" id="btnAddZone">Add</a>
|
|
</div>
|
|
|
|
<!--This is the End of the add button-->
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Importing Javascript frameworks-->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
|
|
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
|
|
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
|
|
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
|
|
crossorigin=""></script>
|
|
<script type="text/javascript" src="/static/Js/map.js"></script>
|
|
<script src="/static/Leaflet.Editable.js"></script>
|
|
|
|
|
|
<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();
|
|
var map = L.map('mapid',{editable: true});
|
|
|
|
// 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);
|
|
map.locate({setView: true, maxZoom: 15});
|
|
<% /*ajout des rectangle*/ %>
|
|
<% for(var i = 0;i<zone.length;i++){ %>
|
|
lstRect.push(L.rectangle([[<%=zone[i].Nord %>,<%=zone[i].Ouest %>],[<%=zone[i].Sud %>,<%=zone[i].Est %>]]));
|
|
lstRect[lstRect.length-1].addTo(map);
|
|
lstRect[lstRect.length-1].bindTooltip("<%= zone[i].Nom %>",{permanent: true, direction:"auto"}).addTo(map);
|
|
<% } %>
|
|
|
|
$("#btnAddZone").click(function(){
|
|
if($("#btnAddZone").html() == "Add"){
|
|
lstRect.push(map.editTools.startRectangle());
|
|
console.debug(lstRect);
|
|
lstRect[lstRect.length-1].enableEdit();
|
|
$(this).html("Confirmer");
|
|
} else if($("#btnAddZone").html() == "Confirmer"){
|
|
$(this).html("Add");
|
|
lstRect[lstRect.length-1].disableEdit();
|
|
lstRect[lstRect.length-1].bindTooltip($("#nomZone").val(),{permanent: true, direction:"auto"});
|
|
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() } );
|
|
}
|
|
});
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|