56 lines
1.9 KiB
JavaScript
56 lines
1.9 KiB
JavaScript
|
RapportoMarker = L.Circle.extend({ options: { originalData: 0 } });
|
||
|
|
||
|
function viewMap() {
|
||
|
var map = L.map('mapid').setView([43.797, 11.2400], 11);
|
||
|
// Set up the OSM layer
|
||
|
L.tileLayer(
|
||
|
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
|
||
|
).addTo(map);
|
||
|
$.getJSON('/api/rapporti/get', function(data) {
|
||
|
for(var i in data.rapporti) {
|
||
|
var p = data.rapporti[i]
|
||
|
var marker = new RapportoMarker([p.lat, p.lng], {
|
||
|
color: p.colore,
|
||
|
fillColor:p.colore,
|
||
|
fillOpacity: 0.3,
|
||
|
radius: p.radius,
|
||
|
originalData: p,
|
||
|
})
|
||
|
marker.addTo(map).bindPopup(p.explaination)
|
||
|
marker.off('click')
|
||
|
marker.on('click', onMarkerClicked)
|
||
|
}
|
||
|
})
|
||
|
function onMarkerClicked(evt) {
|
||
|
console.log('T', this)
|
||
|
var data = evt.target.options.originalData
|
||
|
var rid = data.rid
|
||
|
$('#dialog').html('<div class="explaination"></div><div class="actions"></div>')
|
||
|
$('#dialog .explaination').text(data.explaination)
|
||
|
$('#dialog .actions').html('<button class="btn-elimina">Elimina</button>')
|
||
|
$('#dialog').attr('title', rid)
|
||
|
$('#dialog').data('rid', rid)
|
||
|
$('#dialog').data('marker', this)
|
||
|
$('#dialog').dialog({
|
||
|
modal: true,
|
||
|
beforeClose: function(event, ui) {
|
||
|
$('#dialog').dialog('destroy')
|
||
|
$('#dialog')[0].outerHTML = '<div id="dialog"></div>'
|
||
|
}
|
||
|
})
|
||
|
}
|
||
|
|
||
|
$('body').on('click', '.btn-elimina', function onCancella(evt) {
|
||
|
var rid = $('#dialog').data('rid')
|
||
|
console.log('cancelliamo?', rid)
|
||
|
$.post('/api/rapporti/delete', {rid: rid}, function() {
|
||
|
map.removeLayer($('#dialog').data('marker'))
|
||
|
$('#dialog').dialog('close')
|
||
|
})
|
||
|
})
|
||
|
}
|
||
|
jQuery(function($) {
|
||
|
$('#mapid').css('height', $(window).height() - 200)
|
||
|
viewMap()
|
||
|
})
|