GIService
2 anni fa
1850 ha cambiato i file con 348592 aggiunte e 0 eliminazioni
File binario non mostrato.
@ -0,0 +1,183 @@
|
||||
$(document).ready(function(){ |
||||
_attachTopNavMenu(); |
||||
_displayMapRead('app'); |
||||
}); |
||||
function _attachTopNavMenu () { |
||||
var adjacentTopNavMenuDOM = "" + |
||||
"<nav id='sidebar'>" + |
||||
" <div class='sidebar-header'><a href='#'><img src='assets/img/draw.png' height='90px'></a></div> " + |
||||
" <ul class='list-unstyled'>" + |
||||
<?php if ($_SESSION['STATUS'] == 'true' ) {?>
|
||||
" <li><a id='home' class='nav-link flat' href='#'><span class='icon'><i class='fal fa-home fa-lg'></i></span>Torna alla mappa</a></li>" + |
||||
<?php } else { ?> |
||||
" <li><a id='home' class='nav-link flat' href='#'><span class='icon'><i class='fal fa-home fa-lg'></i></span>Home</a></li>" + |
||||
<?php } ?> |
||||
" <li><a id='leaflet_crud_create' class='nav-link flat' href='#'><span class='icon'><i class='fal fa-object-group fa-lg'></i></span> Crea</a>" + |
||||
" <li><a id='leaflet_crud_read' class='nav-link flat' href='#'><span class='icon'><i class='fal fa-map fa-lg'></i></span> Visualizza</a>" + |
||||
" <li>" + |
||||
" <a href='#homeSubmenu' id='navbarDropdownUpdate' data-toggle='collapse' aria-expanded='false' class='dropdown-toggle collapsed'><span class='icon'><i class='fal fa-edit fa-lg'></i></span>Modifica</a>" + |
||||
" <ul class='collapse list-unstyled' id='homeSubmenu'>" + |
||||
" <li><a id='leaflet_crud_update_point' class='dropdown-item' href='#'><i class='fal fa-map-marker-alt fa-lg' style='margin-right:10px'></i> Punto</a>" + |
||||
" <li><a id='leaflet_crud_update_linestring' class='dropdown-item' href='#'><i class='fal fa-grip-lines fa-lg' style='margin-right:10px'></i> Linea</a>" + |
||||
" <li><a id='leaflet_crud_update_polygon' class='dropdown-item' href='#'><i class='fas fa-draw-polygon fa-lg' style='margin-right:10px'></i> Poligono</a></li>" + |
||||
" </ul>" + |
||||
" </li>" + |
||||
" <li><a id='leaflet_crud_delete' class='nav-link flat' href='#'><span class='icon'><i class='fal fa-trash fa-lg'></i></span> Cancella</a></li>" + |
||||
" <li><a href='guida.php' class='nav-link flat'><span class='icon'><i class='fas fa-question fa-lg' style='margin-right:10px'></i></span>Guida</a></li>" + |
||||
" </ul>" + |
||||
"</nav>" + |
||||
""; |
||||
var baseObject = document.getElementById('app'); |
||||
baseObject.insertAdjacentHTML('beforebegin', adjacentTopNavMenuDOM); |
||||
_attachTopNavMenuFunction(); |
||||
} |
||||
function _attachTopNavMenuFunction () { |
||||
$('#sidebar a.nav-link.flat').on('click', function(e){ |
||||
e.stopImmediatePropagation(); |
||||
var menuid = $(this).attr('id'); |
||||
$('.navbar-collapse').collapse('hide'); |
||||
switch(menuid){ |
||||
|
||||
<?php if ($_SESSION['STATUS'] == true ) {?>
|
||||
case 'home': |
||||
window.location.href = "detail.php"; |
||||
break; |
||||
<?php } else { ?> |
||||
case 'home': |
||||
<?php } ?>
|
||||
case 'leaflet_crud_read': |
||||
_displayMapRead('app'); |
||||
break; |
||||
case 'leaflet_crud_create': |
||||
_displayMapCreate('app'); |
||||
break; |
||||
case 'leaflet_crud_delete': |
||||
_displayMapDelete('app'); |
||||
break; |
||||
default: |
||||
console.log('__undefined__'); |
||||
break; |
||||
} |
||||
return false; |
||||
}); |
||||
$('#sidebar a.dropdown-item').on('click', function(e){ |
||||
e.stopImmediatePropagation(); |
||||
var menuid = $(this).attr('id'); |
||||
$('.navbar-collapse').collapse('hide'); |
||||
$(this).closest('li.nav-item.dropdown').find('.nav-link.dropdown-toggle').dropdown('toggle'); |
||||
switch(menuid){ |
||||
case 'leaflet_crud_update_point': |
||||
_displayMapUpdatePoint('app'); |
||||
break; |
||||
case 'leaflet_crud_update_linestring': |
||||
_displayMapUpdateLinestring('app'); |
||||
break; |
||||
case 'leaflet_crud_update_polygon': |
||||
_displayMapUpdatePolygon('app'); |
||||
break; |
||||
default: |
||||
console.log('__undefined__'); |
||||
break; |
||||
} |
||||
return false; |
||||
}); |
||||
} |
||||
function _buildDigitiseModalBox (targetmodal,context,geometry) { |
||||
targetmodal = typeof targetmodal !== 'undefined' ? targetmodal : 'modalbox'; |
||||
context = typeof context !== 'undefined' ? context : 'POINT'; |
||||
geometry = typeof geometry !== 'undefined' ? geometry : 'POINT (110.21766 -7.459129)'; |
||||
|
||||
var htmlformcomponent = "" + |
||||
"<input type='hidden' id='command' name='command' value='"+context+"'/>" + |
||||
"<input type='hidden' id='geometry' name='geometry' value='"+geometry+"'/>" + |
||||
"<table id='feature_data' class='table table-condensed table-bordered table-striped'>" + |
||||
"<thead>" + |
||||
"<tr>" + |
||||
"<th colspan='2' class='text-center'>Dati indetificativi</th>" + |
||||
"</tr>" + |
||||
"</thead>" + |
||||
"<tbody>" + |
||||
"<tr>" + |
||||
"<td class=''>Note alla geometria</td>" + |
||||
"<td class='text-center'><textarea id='notes' name='notes' rows='4' class='form-control' value=''/></textarea></td>" + |
||||
"</tr>" + |
||||
"<!--tr>" + |
||||
"<td class=''>Geometry<br/>(in WKT)</td>" + |
||||
"<td class='text-center'><textarea rows='5' style='width:100%;' readonly='true'>"+geometry+"</textarea></td>" + |
||||
"</tr-->" + |
||||
"</tbody>" + |
||||
"</table>" + |
||||
""; |
||||
var modalfooter = "" + |
||||
"<button type='button' id='canceldigitize' class='btn btn-default' data-dismiss='modal'><i class='fa fa-power-off'></i> Cancel</button>" + |
||||
"<button type='button' id='savegeometrydata' class='btn btn-primary'><i class='fa fa-floppy-o'></i> Save</button>" + |
||||
""; |
||||
$("#form_modal_body").empty(); |
||||
$("#form_modal_footer").empty().html(modalfooter); |
||||
$("#form_modal_body").removeClass().addClass('modal-body'); |
||||
$("#form_modal_size").removeClass().addClass('modal-dialog'); |
||||
$("#form_modal_body").html(htmlformcomponent); |
||||
$("#form_modal_label").html("<i class='fa fa-pencil'></i> "+context+""); |
||||
|
||||
$('#'+targetmodal+'').modal({show:true, backdrop:'static', keyboard:false}); |
||||
} |
||||
function _activateFeatureSave () { |
||||
$("#savegeometrydata").on('click', function(evt){ |
||||
evt.stopImmediatePropagation(); |
||||
var commandContext = $('#command').val(); |
||||
var noteString = $('#notes').val(); |
||||
var geometry = $('#geometry').val(); |
||||
if (commandContext == "POINT") { |
||||
$.ajax({ url: "assets/dataservice/create_point.php", |
||||
method: "GET", |
||||
dataType: "json", |
||||
data: $('#dynamicform').serialize(), |
||||
success: function (data) { |
||||
if (data.response=="200") { |
||||
$("#modalform").modal('hide'); |
||||
} else { |
||||
$("#modalform").modal('hide'); |
||||
console.log('Failed to save.'); |
||||
} |
||||
}, |
||||
username: null, |
||||
password: null |
||||
}); |
||||
} else if (commandContext == "LINESTRING") { |
||||
$.ajax({ url: "assets/dataservice/create_linestring.php", |
||||
method: "GET", |
||||
dataType: "json", |
||||
data: $('#dynamicform').serialize(), |
||||
success: function (data) { |
||||
if (data.response=="200") { |
||||
$("#modalform").modal('hide'); |
||||
} else { |
||||
$("#modalform").modal('hide'); |
||||
console.log('Failed to save.'); |
||||
} |
||||
}, |
||||
username: null, |
||||
password: null |
||||
}); |
||||
} else if (commandContext == "POLYGON") { |
||||
$.ajax({ url: "assets/dataservice/create_polygon.php", |
||||
method: "GET", |
||||
dataType: "json", |
||||
data: $('#dynamicform').serialize(), |
||||
success: function (data) { |
||||
if (data.response=="200") { |
||||
$("#modalform").modal('hide'); |
||||
} else { |
||||
$("#modalform").modal('hide'); |
||||
console.log('Failed to save.'); |
||||
} |
||||
}, |
||||
username: null, |
||||
password: null |
||||
}); |
||||
} else { |
||||
console.log('__undefined__'); |
||||
} |
||||
return false; |
||||
}); |
||||
} |
||||
@ -0,0 +1,206 @@
|
||||
function _displayMapCreate (divtarget) { |
||||
divtarget = typeof divtarget !== 'undefined' ? divtarget : 'app'; |
||||
document.getElementById(divtarget).innerHTML = "<div id='map' class='map-wrapper'></div>"; |
||||
document.getElementById('home').className = "nav-link flat"; |
||||
document.getElementById('leaflet_crud_create').className = "nav-link flat active"; |
||||
document.getElementById('leaflet_crud_read').className = "nav-link flat"; |
||||
document.getElementById('navbarDropdownUpdate').className = "nav-link dropdown-toggle"; |
||||
document.getElementById('leaflet_crud_delete').className = "nav-link flat"; |
||||
|
||||
var map, isCollapsed, openStreetMaps; |
||||
if (document.body.clientWidth <= 767) { |
||||
isCollapsed = true; |
||||
} else { |
||||
isCollapsed = false; |
||||
} |
||||
|
||||
var url = "https://test-paesaggistica.lavoripubblici.sicilia.it/geoserver/mappers/wms"; |
||||
|
||||
//################# INIZIO PARTICELLA SELEZIONATA ################# |
||||
<?php if ( strlen($_SESSION['SELECT_PARTICELLA']) > 100 ) { ?> |
||||
particella = L.geoJson(<?php echo $_SESSION['SELECT_PARTICELLA'];?>, {
|
||||
style: {'color': "#ff0000",'fillColor': "rgb(255, 255, 0)",'fillOpacity': 0.4,'dashArray': 4,'weight': 3,'opacity': 0.9} |
||||
}), |
||||
<?php } ?>
|
||||
//################# FINE PARTICELLA SELEZIONATA ################# |
||||
|
||||
odm1 = L.tileLayer ('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', |
||||
{ |
||||
maxZoom: 20, |
||||
minZoom: 1, |
||||
transparent: true, |
||||
attribution: 'OpenStreetMap | contributors CC-BY-SA.' |
||||
}); |
||||
|
||||
|
||||
odm2 = L.tileLayer ('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', |
||||
{ |
||||
maxZoom: 20, |
||||
minZoom: 1, |
||||
transparent: true, |
||||
attribution: '© Esri | Source: Esri, USDA, USGS, AEX, GeoEye and the GIS User Community' |
||||
}); |
||||
|
||||
|
||||
odm3 = L.tileLayer.wms ('http://geoportal.mapcloud.it:8080/geoserver/wms', |
||||
{ |
||||
maxZoom: 20, |
||||
minZoom: 5, |
||||
transparent: true, |
||||
layers: 'mappers:provincie', |
||||
attribution: '© mapcloud services' |
||||
}); |
||||
|
||||
ctr10k = L.tileLayer.wms ('http://geoportal.mapcloud.it:8080/geoserver/wms', |
||||
{ |
||||
format: 'image/png', |
||||
transparent: true, |
||||
maxZoom: 20, |
||||
minZoom: 5, |
||||
transparent: true, |
||||
layers: 'mapcloud:ctr10k', |
||||
attribution: 'Carta Tecnica Regionale 1:10.000 - Regione Sicilia (Servizio WMS)' |
||||
}); |
||||
|
||||
particelle = L.tileLayer.wms(url, { |
||||
layers: "mappers:particelle_<?php echo $_SESSION['COMUNE_BELF']; ?>",
|
||||
format: "image/png", |
||||
maxZoom: 20, |
||||
minZoom: 10, |
||||
transparent: true, |
||||
attribution: '© mapcloud services' |
||||
}); |
||||
|
||||
|
||||
|
||||
map = L.map("map", { |
||||
zoom: <?php echo $_SESSION['ZOOM'];?>,
|
||||
center: [<?php echo $_SESSION['CENTER'];?>],
|
||||
layers: [odm1,particella], |
||||
minZoom: 3, |
||||
maxZoom: 20, |
||||
zoomControl: false, |
||||
attributionControl: false |
||||
}); |
||||
|
||||
map.setMaxBounds([<?php echo $_SESSION['BOUND']; ?>]);
|
||||
|
||||
var zoomControl = L.control.zoom({ |
||||
position: "topleft" |
||||
}).addTo(map); |
||||
|
||||
|
||||
var baseLayers = [ |
||||
{label: '<b>Opendata Map</b>', noShow: false, children: [ |
||||
{label: 'OpenStreetMap', layer: odm1}, |
||||
{label: 'Satellite Image', layer: odm2}, |
||||
{label: 'Limiti provinciali', layer: odm3}, |
||||
]}, |
||||
{label: '<b>Cartografia Regionale</b>', children: [ |
||||
{label: 'CTR 10K - volo 2012-2013', layer: ctr10k }, |
||||
]}, |
||||
]; |
||||
|
||||
var overlayLayers = |
||||
{ |
||||
label: '<b>CARTOGRAFICI</b>', |
||||
noShow: true, |
||||
children: [ |
||||
{label: '<b>Catasto</b>', children: [ |
||||
{label: 'Particelle catastali', layer: particelle}, |
||||
]}, |
||||
{label: '<b>Particelle progetto</b>', children: [ |
||||
{label: 'Particelle selezionate', layer: particella}, |
||||
]}, |
||||
] |
||||
}; |
||||
|
||||
var options = { |
||||
collapsed: true, |
||||
closedSymbol: '<i class="fal fa-plus-square" style="margin-right:5px"></i>', |
||||
openedSymbol: '<i class="fal fa-minus-square" style="margin-right:5px"></i>', |
||||
namedToggle: false, |
||||
spaceSymbol: ' ', |
||||
selectorBack: false, |
||||
collapseAll: '', |
||||
expandAll: '', |
||||
}; |
||||
|
||||
var layerControl = L.control.layers.tree(baseLayers, overlayLayers, options).addTo(map); |
||||
|
||||
var attributionControl = L.control({ |
||||
position: "bottomright" |
||||
}); |
||||
|
||||
/* Digitize Function */ |
||||
var drawnItems = new L.FeatureGroup(); |
||||
map.addLayer(drawnItems); |
||||
|
||||
var drawControl = new L.Control.Draw({ |
||||
draw: { |
||||
position: 'topleft', |
||||
polyline: true, |
||||
polygon: true, |
||||
rectangle: false, |
||||
circle: false, |
||||
marker: true, |
||||
circlemarker: false |
||||
}, |
||||
edit: false |
||||
}); |
||||
|
||||
map.addControl(drawControl); |
||||
|
||||
map.on('draw:created', function (e) { |
||||
var type = e.layerType, |
||||
layer = e.layer; |
||||
|
||||
var drawnJSONObject = layer.toGeoJSON(); |
||||
var objectGeometry = Terraformer.WKT.convert(drawnJSONObject.geometry); |
||||
|
||||
if (type === 'polyline') { |
||||
_buildDigitiseModalBox('modalform','LINESTRING',objectGeometry); |
||||
} else if (type === 'polygon') { |
||||
_buildDigitiseModalBox('modalform','POLYGON',objectGeometry); |
||||
} else if (type === 'marker') { |
||||
_buildDigitiseModalBox('modalform','POINT',objectGeometry); |
||||
} else { |
||||
console.log('__undefined__'); |
||||
} |
||||
//map.addLayer(layer); |
||||
drawnItems.addLayer(layer); |
||||
}); |
||||
|
||||
$("#modalform").on('shown.bs.modal', function(){ |
||||
_activateFeatureSave(); |
||||
}); |
||||
|
||||
|
||||
|
||||
var sidebar = L.control.sidebar({ |
||||
autopan: false, |
||||
container: "sidebar", |
||||
position: "right" |
||||
}).addTo(map); |
||||
|
||||
|
||||
var layerControl = L.control.layers( |
||||
baseLayers, |
||||
overlayLayers, |
||||
{ |
||||
position: "topright", |
||||
collapsed: false |
||||
} |
||||
).addTo(map); |
||||
|
||||
|
||||
var layerControlContainer = layerControl.getContainer(); |
||||
$("#layercontrol").append(layerControlContainer); |
||||
$(".leaflet-control-layers-list").prepend("<strong class='title'>Base Maps</strong><br>"); |
||||
$(".leaflet-control-layers-separator").after("<br><strong class='title'>Layers</strong><br>"); |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
} |
||||
@ -0,0 +1,198 @@
|
||||
function _displayMapDelete (divtarget) { |
||||
divtarget = typeof divtarget !== 'undefined' ? divtarget : 'app'; |
||||
document.getElementById(divtarget).innerHTML = "<div id='map' class='map-wrapper'></div>"; |
||||
document.getElementById('home').className = "nav-link flat"; |
||||
document.getElementById('leaflet_crud_create').className = "nav-link flat"; |
||||
document.getElementById('leaflet_crud_read').className = "nav-link flat"; |
||||
document.getElementById('navbarDropdownUpdate').className = "nav-link dropdown-toggle"; |
||||
document.getElementById('leaflet_crud_delete').className = "nav-link flat active"; |
||||
|
||||
var map, isCollapsed, openStreetMaps; |
||||
|
||||
if (document.body.clientWidth <= 767) { |
||||
isCollapsed = true; |
||||
} else { |
||||
isCollapsed = false; |
||||
} |
||||
|
||||
var promisePoint = $.ajax({ url: "assets/dataservice/read_point.php", |
||||
method: "GET", |
||||
dataType: "json", |
||||
data: {command:"POINT"}, |
||||
username: null, |
||||
password: null |
||||
}); |
||||
|
||||
var pointObjects = L.geoJson(null, { |
||||
onEachFeature: function (feature, layer) { |
||||
if (feature.properties) { |
||||
layer.on({ |
||||
click: function (e) { |
||||
var featureGid = feature.properties.id; |
||||
var deleteConfirmation = confirm("Vuoi cancellare questa geometria?"); |
||||
if (deleteConfirmation == true) { |
||||
$.ajax({ url: "assets/dataservice/delete_point.php", |
||||
method: "GET", |
||||
dataType: "json", |
||||
data: {command:"DELETE",id:featureGid}, |
||||
success: function (data) { |
||||
if (data.response=="200") { |
||||
map.off(); |
||||
map.remove(); |
||||
_displayMapDelete('app'); |
||||
} else { |
||||
console.log('Failed to delete.'); |
||||
} |
||||
}, |
||||
username: null, |
||||
password: null |
||||
}); |
||||
} else { |
||||
console.log('Delete feature is cancelled.'); |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
}); |
||||
promisePoint.then(function (data) { |
||||
pointObjects.addData(data); |
||||
map.addLayer(pointObjects); |
||||
}); |
||||
|
||||
var promiseLinestring = $.ajax({ url: "assets/dataservice/read_linestring.php", |
||||
method: "GET", |
||||
dataType: "json", |
||||
data: {command:"LINESTRING"}, |
||||
username: null, |
||||
password: null |
||||
}); |
||||
|
||||
var linestringObjects = L.geoJson(null, { |
||||
onEachFeature: function (feature, layer) { |
||||
if (feature.properties) { |
||||
layer.on({ |
||||
click: function (e) { |
||||
var featureGid = feature.properties.id; |
||||
var deleteConfirmation = confirm("Vuoi cancellare questa geometria?"); |
||||
if (deleteConfirmation == true) { |
||||
$.ajax({ url: "assets/dataservice/delete_linestring.php", |
||||
method: "GET", |
||||
dataType: "json", |
||||
data: {command:"DELETE",id:featureGid}, |
||||
success: function (data) { |
||||
if (data.response=="200") { |
||||
map.off(); |
||||
map.remove(); |
||||
_displayMapDelete('app'); |
||||
} else { |
||||
console.log('Failed to delete.'); |
||||
} |
||||
}, |
||||
username: null, |
||||
password: null |
||||
}); |
||||
} else { |
||||
console.log('Delete feature is cancelled.'); |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
}); |
||||
promiseLinestring.then(function (data) { |
||||
linestringObjects.addData(data); |
||||
map.addLayer(linestringObjects); |
||||
}); |
||||
|
||||
var promisePolygon = $.ajax({ url: "assets/dataservice/read_polygon.php", |
||||
method: "GET", |
||||
dataType: "json", |
||||
data: {command:"POLYGON"}, |
||||
username: null, |
||||
password: null |
||||
}); |
||||
|
||||
var polygonObjects = L.geoJson(null, { |
||||
onEachFeature: function (feature, layer) { |
||||
if (feature.properties) { |
||||
layer.on({ |
||||
click: function (e) { |
||||
var featureGid = feature.properties.id; |
||||
var deleteConfirmation = confirm("Vuoi cancellare questa geometria?"); |
||||
if (deleteConfirmation == true) { |
||||
$.ajax({ url: "assets/dataservice/delete_polygon.php", |
||||
method: "GET", |
||||
dataType: "json", |
||||
data: {command:"DELETE",id:featureGid}, |
||||
success: function (data) { |
||||
if (data.response=="200") { |
||||
map.off(); |
||||
map.remove(); |
||||
_displayMapDelete('app'); |
||||
} else { |
||||
console.log('Failed to delete.'); |
||||
} |
||||
}, |
||||
username: null, |
||||
password: null |
||||
}); |
||||
} else { |
||||
console.log('Delete feature is cancelled.'); |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
}); |
||||
promisePolygon.then(function (data) { |
||||
polygonObjects.addData(data); |
||||
map.addLayer(polygonObjects); |
||||
}); |
||||
|
||||
|
||||
//################# INIZIO PARTICELLA SELEZIONATA ################# |
||||
<?php if ( strlen($_SESSION['SELECT_PARTICELLA']) > 100 ) { ?> |
||||
particella = L.geoJson(<?php echo $_SESSION['SELECT_PARTICELLA'];?>, {
|
||||
style: {'color': "#ff0000",'fillColor': "rgb(255, 255, 0)",'fillOpacity': 0.4,'dashArray': 4,'weight': 3,'opacity': 0.9} |
||||
}), |
||||
<?php } ?>
|
||||
//################# FINE PARTICELLA SELEZIONATA ################# |
||||
|
||||
openStreetMaps = new L.TileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { |
||||
minZoom: 3, |
||||
maxZoom: 20, |
||||
attribution: 'Map Data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors.' |
||||
}); |
||||
|
||||
map = L.map("map", { |
||||
zoom: <?php echo $_SESSION['ZOOM'];?>,
|
||||
center: [<?php echo $_SESSION['CENTER'];?>],
|
||||
layers: [openStreetMaps,particella], |
||||
minZoom: 3, |
||||
maxZoom: 20, |
||||
zoomControl: false, |
||||
attributionControl: true |
||||
}); |
||||
|
||||
map.setMaxBounds([<?php echo $_SESSION['BOUND']; ?>]);
|
||||
|
||||
var zoomControl = L.control.zoom({ |
||||
position: "topleft" |
||||
}).addTo(map); |
||||
|
||||
var baseLayers = { |
||||
"OpenStreetMap": openStreetMaps |
||||
}; |
||||
|
||||
var overlayLayers = { |
||||
"Elementi puntuali": pointObjects, |
||||
"Elementi lineari": linestringObjects, |
||||
"Elementi poligonali": polygonObjects |
||||
}; |
||||
|
||||
var layerControl = L.control.layers(baseLayers, overlayLayers, { |
||||
collapsed: isCollapsed |
||||
}).addTo(map); |
||||
|
||||
} |
||||
@ -0,0 +1,272 @@
|
||||
function _displayMapRead (divtarget) { |
||||
divtarget = typeof divtarget !== 'undefined' ? divtarget : 'app'; |
||||
document.getElementById(divtarget).innerHTML = "<div id='map' class='map-wrapper'></div>"; |
||||
document.getElementById('home').className = "nav-link flat active"; |
||||
document.getElementById('leaflet_crud_create').className = "nav-link flat"; |
||||
document.getElementById('leaflet_crud_read').className = "nav-link flat active"; |
||||
document.getElementById('navbarDropdownUpdate').className = "nav-link dropdown-toggle"; |
||||
document.getElementById('leaflet_crud_delete').className = "nav-link flat"; |
||||
|
||||
var map, isCollapsed, odm1; |
||||
|
||||
if (document.body.clientWidth <= 767) { |
||||
isCollapsed = true; |
||||
} else { |
||||
isCollapsed = false; |
||||
} |
||||
|
||||
var promisePoint = $.ajax({ url: "assets/dataservice/read_point.php", |
||||
method: "GET", |
||||
dataType: "json", |
||||
data: {command:"POINT"}, |
||||
username: null, |
||||
password: null |
||||
}); |
||||
|
||||
var pointObjects = L.geoJson(null, { |
||||
onEachFeature: function (feature, layer) { |
||||
if (feature.properties) { |
||||
layer.on({ |
||||
click: function (e) { |
||||
var htmlformcomponent = "" + |
||||
"<table id='feature_data' class='table table-condensed table-bordered table-striped'>" + |
||||
"<thead>" + |
||||
"<tr>" + |
||||
"<th colspan='2' class='text-center'>Dati indetificativi</th>" + |
||||
"</tr>" + |
||||
"</thead>" + |
||||
"<tbody>" + |
||||
"<tr>" + |
||||
"<td class=''>Note</td>" + |
||||
"<td class=''><strong>"+feature.properties.notes+"</strong></td>" + |
||||
"</tr>" + |
||||
"</tbody>" + |
||||
"</table>" + |
||||
""; |
||||
$("#app_modal_body").empty(); |
||||
$("#app_modal_body").removeClass().addClass('modal-body'); |
||||
$("#app_modal_size").removeClass().addClass('modal-dialog'); |
||||
$("#app_modal_body").html(htmlformcomponent); |
||||
$("#app_modal_label").html("POINT"); |
||||
|
||||
$("#modalbox").modal('show'); |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
}); |
||||
promisePoint.then(function (data) { |
||||
pointObjects.addData(data); |
||||
map.addLayer(pointObjects); |
||||
}); |
||||
|
||||
var promiseLinestring = $.ajax({ url: "assets/dataservice/read_linestring.php", |
||||
method: "GET", |
||||
dataType: "json", |
||||
data: {command:"LINESTRING"}, |
||||
username: null, |
||||
password: null |
||||
}); |
||||
|
||||
var linestringObjects = L.geoJson(null, { |
||||
onEachFeature: function (feature, layer) { |
||||
if (feature.properties) { |
||||
layer.on({ |
||||
click: function (e) { |
||||
var htmlformcomponent = "" + |
||||
"<table id='feature_data' class='table table-condensed table-bordered table-striped'>" + |
||||
"<thead>" + |
||||
"<tr>" + |
||||
"<th colspan='2' class='text-center'>Dati indetificativi</th>" + |
||||
"</tr>" + |
||||
"</thead>" + |
||||
"<tbody>" + |
||||
"<tr>" + |
||||
"<td class=''>Note</td>" + |
||||
"<td class=''><strong>"+feature.properties.notes+"</strong></td>" + |
||||
"</tr>" + |
||||
"</tbody>" + |
||||
"</table>" + |
||||
""; |
||||
$("#app_modal_body").empty(); |
||||
$("#app_modal_body").removeClass().addClass('modal-body'); |
||||
$("#app_modal_size").removeClass().addClass('modal-dialog'); |
||||
$("#app_modal_body").html(htmlformcomponent); |
||||
$("#app_modal_label").html("LINESTRING"); |
||||
|
||||
$("#modalbox").modal('show'); |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
}); |
||||
promiseLinestring.then(function (data) { |
||||
linestringObjects.addData(data); |
||||
map.addLayer(linestringObjects); |
||||
}); |
||||
|
||||
var promisePolygon = $.ajax({ url: "assets/dataservice/read_polygon.php", |
||||
method: "GET", |
||||
dataType: "json", |
||||
data: {command:"POLYGON"}, |
||||
username: null, |
||||
password: null |
||||
}); |
||||
|
||||
var polygonObjects = L.geoJson(null, { |
||||
onEachFeature: function (feature, layer) { |
||||
if (feature.properties) { |
||||
layer.on({ |
||||
click: function (e) { |
||||
var htmlformcomponent = "" + |
||||
"<table id='feature_data' class='table table-condensed table-bordered table-striped'>" + |
||||
"<thead>" + |
||||
"<tr>" + |
||||
"<th colspan='2' class='text-center'>Dati indetificativi</th>" + |
||||
"</tr>" + |
||||
"</thead>" + |
||||
"<tbody>" + |
||||
"<tr>" + |
||||
"<td class=''>Notes</td>" + |
||||
"<td class=''><strong>"+feature.properties.notes+"</strong></td>" + |
||||
"</tr>" + |
||||
"</tbody>" + |
||||
"</table>" + |
||||
""; |
||||
$("#app_modal_body").empty(); |
||||
$("#app_modal_body").removeClass().addClass('modal-body'); |
||||
$("#app_modal_size").removeClass().addClass('modal-dialog'); |
||||
$("#app_modal_body").html(htmlformcomponent); |
||||
$("#app_modal_label").html("POLYGON"); |
||||
|
||||
$("#modalbox").modal('show'); |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
}); |
||||
promisePolygon.then(function (data) { |
||||
polygonObjects.addData(data); |
||||
map.addLayer(polygonObjects); |
||||
}); |
||||
|
||||
|
||||
|
||||
var url = "https://test-paesaggistica.lavoripubblici.sicilia.it/geoserver/mappers/wms"; |
||||
|
||||
//################# INIZIO PARTICELLA SELEZIONATA ################# |
||||
<?php if ( strlen($_SESSION['SELECT_PARTICELLA']) > 100 ) { ?> |
||||
particella = L.geoJson(<?php echo $_SESSION['SELECT_PARTICELLA'];?>, {
|
||||
style: {'color': "#ff0000",'fillColor': "rgb(255, 255, 0)",'fillOpacity': 0.4,'dashArray': 4,'weight': 3,'opacity': 0.9} |
||||
}); |
||||
<?php } ?>
|
||||
//################# FINE PARTICELLA SELEZIONATA ################# |
||||
|
||||
odm1 = L.tileLayer ('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
||||
maxZoom: 20, |
||||
minZoom: 1, |
||||
transparent: true, |
||||
attribution: 'OpenStreetMap | contributors CC-BY-SA.' |
||||
}); |
||||
|
||||
|
||||
odm2 = L.tileLayer ('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { |
||||
maxZoom: 20, |
||||
minZoom: 1, |
||||
transparent: true, |
||||
attribution: '© Esri | Source: Esri, USDA, USGS, AEX, GeoEye and the GIS User Community' |
||||
}); |
||||
|
||||
|
||||
odm3 = L.tileLayer.wms (url, { |
||||
maxZoom: 20, |
||||
minZoom: 5, |
||||
transparent: true, |
||||
layers: 'mappers:provincie', |
||||
attribution: '© mapcloud services' |
||||
}); |
||||
|
||||
ctr10k = L.tileLayer.wms ('http://geoportal.mapcloud.it:8080/geoserver/wms', { |
||||
format: 'image/png', |
||||
transparent: true, |
||||
maxZoom: 20, |
||||
minZoom: 5, |
||||
transparent: true, |
||||
layers: 'mapcloud:ctr10k', |
||||
attribution: 'Carta Tecnica Regionale 1:10.000 - Regione Sicilia (Servizio WMS)' |
||||
}); |
||||
|
||||
|
||||
particelle = L.tileLayer.wms(url, { |
||||
layers: "mappers:particelle_<?php echo $_SESSION['COMUNE_BELF']; ?>",
|
||||
format: "image/png", |
||||
maxZoom: 20, |
||||
minZoom: 10, |
||||
transparent: true, |
||||
attribution: '© mapcloud services' |
||||
}), |
||||
|
||||
|
||||
map = L.map("map", { |
||||
zoom: <?php echo $_SESSION['ZOOM'];?>,
|
||||
center: [<?php echo $_SESSION['CENTER'];?>],
|
||||
layers: [odm1,particella], |
||||
minZoom: 3, |
||||
maxZoom: 20, |
||||
zoomControl: false, |
||||
attributionControl: false |
||||
}); |
||||
|
||||
map.setMaxBounds([<?php echo $_SESSION['BOUND']; ?>]);
|
||||
|
||||
var zoomControl = L.control.zoom({ |
||||
position: "topleft" |
||||
}).addTo(map); |
||||
|
||||
|
||||
var baseLayers = [ |
||||
{label: '<b>Opendata Map</b>', noShow: false, children: [ |
||||
{label: 'OpenStreetMap', layer: odm1}, |
||||
{label: 'Satellite Image', layer: odm2}, |
||||
{label: 'Limiti provinciali', layer: odm3}, |
||||
]}, |
||||
{label: '<b>Cartografia Regionale</b>', children: [ |
||||
{label: 'CTR 10K - volo 2012-2013', layer: ctr10k }, |
||||
]}, |
||||
]; |
||||
|
||||
var overlayLayers = |
||||
{ |
||||
label: '<b>CARTOGRAFICI</b>', |
||||
noShow: true, |
||||
children: [ |
||||
{label: '<b>Catasto</b>', children: [ |
||||
{label: 'Particelle catastali', layer: particelle}, |
||||
]}, |
||||
{label: '<b>Particelle progetto</b>', children: [ |
||||
{label: 'Particelle selezionate', layer: particella}, |
||||
]}, |
||||
{label: '<b>Elelenti del progetto</b>', children: [ |
||||
{label: 'Elementi puntuali', layer: pointObjects}, |
||||
{label: 'Elementi lineari', layer: linestringObjects}, |
||||
{label: 'Elementi poligonali', layer: polygonObjects}, |
||||
]}, |
||||
|
||||
] |
||||
}; |
||||
|
||||
var options = { |
||||
collapsed: true, |
||||
closedSymbol: '<i class="fal fa-plus-square" style="margin-right:5px"></i>', |
||||
openedSymbol: '<i class="fal fa-minus-square" style="margin-right:5px"></i>', |
||||
namedToggle: false, |
||||
spaceSymbol: ' ', |
||||
selectorBack: false, |
||||
collapseAll: '', |
||||
expandAll: '', |
||||
}; |
||||
|
||||
var layerControlTree = L.control.layers.tree(baseLayers, overlayLayers, options).addTo(map); |
||||
|
||||
|
||||
} |
||||
@ -0,0 +1,436 @@
|
||||
function _displayMapUpdateLinestring (divtarget) { |
||||
divtarget = typeof divtarget !== 'undefined' ? divtarget : 'app'; |
||||
document.getElementById(divtarget).innerHTML = "<div id='map' class='map-wrapper'></div>"; |
||||
document.getElementById('home').className = "nav-link flat"; |
||||
document.getElementById('leaflet_crud_create').className = "nav-link flat"; |
||||
document.getElementById('leaflet_crud_read').className = "nav-link flat"; |
||||
document.getElementById('navbarDropdownUpdate').className = "nav-link dropdown-toggle active"; |
||||
document.getElementById('leaflet_crud_delete').className = "nav-link flat"; |
||||
|
||||
var map, isCollapsed, openStreetMaps; |
||||
if (document.body.clientWidth <= 767) { |
||||
isCollapsed = true; |
||||
} else { |
||||
isCollapsed = false; |
||||
} |
||||
|
||||
var promiseLinestring = $.ajax({ url: "assets/dataservice/read_linestring.php", |
||||
method: "GET", |
||||
dataType: "json", |
||||
data: {command:"LINESTRING"}, |
||||
username: null, |
||||
password: null |
||||
}); |
||||
|
||||
var linestringObjects = L.geoJson(null, { |
||||
onEachFeature: function (feature, layer) { |
||||
if (feature.properties) { |
||||
layer.on({ |
||||
click: function (e) { |
||||
var objectGIDToEdit = feature.properties.id; |
||||
$("#editobjectgid").val(objectGIDToEdit); |
||||
map.off(); |
||||
map.remove(); |
||||
_displayMapEditLinestring('app',objectGIDToEdit); |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
}); |
||||
promiseLinestring.then(function (data) { |
||||
linestringObjects.addData(data); |
||||
map.addLayer(linestringObjects); |
||||
}); |
||||
|
||||
|
||||
|
||||
var url = "https://test-paesaggistica.lavoripubblici.sicilia.it/geoserver/mappers/wms"; |
||||
|
||||
//################# INIZIO PARTICELLA SELEZIONATA ################# |
||||
<?php if ( strlen($_SESSION['SELECT_PARTICELLA']) > 100 ) { ?> |
||||
particella = L.geoJson(<?php echo $_SESSION['SELECT_PARTICELLA'];?>, {
|
||||
style: {'color': "#ff0000",'fillColor': "rgb(255, 255, 0)",'fillOpacity': 0.4,'dashArray': 4,'weight': 3,'opacity': 0.9} |
||||
}); |
||||
<?php } ?>
|
||||
//################# FINE PARTICELLA SELEZIONATA ################# |
||||
|
||||
odm1 = L.tileLayer ('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
||||
maxZoom: 20, |
||||
minZoom: 1, |
||||
transparent: true, |
||||
attribution: 'OpenStreetMap | contributors CC-BY-SA.' |
||||
}); |
||||
|
||||
|
||||
odm2 = L.tileLayer ('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { |
||||
maxZoom: 20, |
||||
minZoom: 1, |
||||
transparent: true, |
||||
attribution: '© Esri | Source: Esri, USDA, USGS, AEX, GeoEye and the GIS User Community' |
||||
}); |
||||
|
||||
|
||||
odm3 = L.tileLayer.wms (url, { |
||||
maxZoom: 20, |
||||
minZoom: 5, |
||||
transparent: true, |
||||
layers: 'mappers:provincie', |
||||
attribution: '© mapcloud services' |
||||
}); |
||||
|
||||
ctr10k = L.tileLayer.wms ('http://geoportal.mapcloud.it:8080/geoserver/wms', { |
||||
format: 'image/png', |
||||
transparent: true, |
||||
maxZoom: 20, |
||||
minZoom: 5, |
||||
transparent: true, |
||||
layers: 'mapcloud:ctr10k', |
||||
attribution: 'Carta Tecnica Regionale 1:10.000 - Regione Sicilia (Servizio WMS)' |
||||
}); |
||||
|
||||
|
||||
particelle = L.tileLayer.wms(url, { |
||||
layers: "mappers:particelle_<?php echo $_SESSION['COMUNE_BELF']; ?>",
|
||||
format: "image/png", |
||||
maxZoom: 20, |
||||
minZoom: 10, |
||||
transparent: true, |
||||
attribution: '© mapcloud services' |
||||
}), |
||||
|
||||
|
||||
map = L.map("map", { |
||||
zoom: <?php echo $_SESSION['ZOOM'];?>,
|
||||
center: [<?php echo $_SESSION['CENTER'];?>],
|
||||
layers: [odm1,particella], |
||||
minZoom: 3, |
||||
maxZoom: 20, |
||||
zoomControl: false, |
||||
attributionControl: false |
||||
}); |
||||
|
||||
map.setMaxBounds([<?php echo $_SESSION['BOUND']; ?>]);
|
||||
|
||||
var zoomControl = L.control.zoom({ |
||||
position: "topleft" |
||||
}).addTo(map); |
||||
|
||||
|
||||
var baseLayers = [ |
||||
{label: '<b>Opendata Map</b>', noShow: false, children: [ |
||||
{label: 'OpenStreetMap', layer: odm1}, |
||||
{label: 'Satellite Image', layer: odm2}, |
||||
{label: 'Limiti provinciali', layer: odm3}, |
||||
]}, |
||||
{label: '<b>Cartografia Regionale</b>', children: [ |
||||
{label: 'CTR 10K - volo 2012-2013', layer: ctr10k }, |
||||
]}, |
||||
]; |
||||
|
||||
var overlayLayers = |
||||
{ |
||||
label: '<b>CARTOGRAFICI</b>', |
||||
noShow: true, |
||||
children: [ |
||||
{label: '<b>Catasto</b>', children: [ |
||||
{label: 'Particelle catastali', layer: particelle}, |
||||
]}, |
||||
{label: '<b>Particelle progetto</b>', children: [ |
||||
{label: 'Particelle selezionate', layer: particella}, |
||||
]}, |
||||
] |
||||
}; |
||||
|
||||
var options = { |
||||
collapsed: true, |
||||
closedSymbol: '<i class="fal fa-plus-square" style="margin-right:5px"></i>', |
||||
openedSymbol: '<i class="fal fa-minus-square" style="margin-right:5px"></i>', |
||||
namedToggle: false, |
||||
spaceSymbol: ' ', |
||||
selectorBack: false, |
||||
collapseAll: '', |
||||
expandAll: '', |
||||
}; |
||||
|
||||
var layerControlTree = L.control.layers.tree(baseLayers, overlayLayers, options).addTo(map); |
||||
|
||||
|
||||
} |
||||
|
||||
/* ============================================= */ |
||||
|
||||
function _displayMapEditLinestring (divtarget,objectgid) { |
||||
divtarget = typeof divtarget !== 'undefined' ? divtarget : 'app'; |
||||
document.getElementById(divtarget).innerHTML = "<div id='map' class='map-wrapper'></div>"; |
||||
|
||||
var map, isCollapsed, openStreetMaps; |
||||
if (document.body.clientWidth <= 767) { |
||||
isCollapsed = true; |
||||
} else { |
||||
isCollapsed = false; |
||||
} |
||||
|
||||
|
||||
|
||||
var url = "https://test-paesaggistica.lavoripubblici.sicilia.it/geoserver/mappers/wms"; |
||||
|
||||
//################# INIZIO PARTICELLA SELEZIONATA ################# |
||||
<?php if ( strlen($_SESSION['SELECT_PARTICELLA']) > 100 ) { ?> |
||||
particella = L.geoJson(<?php echo $_SESSION['SELECT_PARTICELLA'];?>, {
|
||||
style: {'color': "#ff0000",'fillColor': "rgb(255, 255, 0)",'fillOpacity': 0.4,'dashArray': 4,'weight': 3,'opacity': 0.9} |
||||
}); |
||||
<?php } ?>
|
||||
//################# FINE PARTICELLA SELEZIONATA ################# |
||||
|
||||
odm1 = L.tileLayer ('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
||||
maxZoom: 20, |
||||
minZoom: 1, |
||||
transparent: true, |
||||
attribution: 'OpenStreetMap | contributors CC-BY-SA.' |
||||
}); |
||||
|
||||
|
||||
odm2 = L.tileLayer ('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { |
||||
maxZoom: 20, |
||||
minZoom: 1, |
||||
transparent: true, |
||||
attribution: '© Esri | Source: Esri, USDA, USGS, AEX, GeoEye and the GIS User Community' |
||||
}); |
||||
|
||||
|
||||
odm3 = L.tileLayer.wms (url, { |
||||
maxZoom: 20, |
||||
minZoom: 5, |
||||
transparent: true, |
||||
layers: 'mappers:provincie', |
||||
attribution: '© mapcloud services' |
||||
}); |
||||
|
||||
ctr10k = L.tileLayer.wms ('http://geoportal.mapcloud.it:8080/geoserver/wms', { |
||||
format: 'image/png', |
||||
transparent: true, |
||||
maxZoom: 20, |
||||
minZoom: 5, |
||||
transparent: true, |
||||
layers: 'mapcloud:ctr10k', |
||||
attribution: 'Carta Tecnica Regionale 1:10.000 - Regione Sicilia (Servizio WMS)' |
||||
}); |
||||
|
||||
|
||||
particelle = L.tileLayer.wms(url, { |
||||
layers: "mappers:particelle_<?php echo $_SESSION['COMUNE_BELF']; ?>",
|
||||
format: "image/png", |
||||
maxZoom: 20, |
||||
minZoom: 10, |
||||
transparent: true, |
||||
attribution: '© mapcloud services' |
||||
}), |
||||
|
||||
|
||||
map = L.map("map", { |
||||
zoom: <?php echo $_SESSION['ZOOM'];?>,
|
||||
center: [<?php echo $_SESSION['CENTER'];?>],
|
||||
layers: [odm1,particella], |
||||
minZoom: 3, |
||||
maxZoom: 20, |
||||
zoomControl: false, |
||||
attributionControl: false |
||||
}); |
||||
|
||||
map.setMaxBounds([<?php echo $_SESSION['BOUND']; ?>]);
|
||||
|
||||
var zoomControl = L.control.zoom({ |
||||
position: "topleft" |
||||
}).addTo(map); |
||||
|
||||
|
||||
var baseLayers = [ |
||||
{label: '<b>Opendata Map</b>', noShow: false, children: [ |
||||
{label: 'OpenStreetMap', layer: odm1}, |
||||
{label: 'Satellite Image', layer: odm2}, |
||||
{label: 'Limiti provinciali', layer: odm3}, |
||||
]}, |
||||
{label: '<b>Cartografia Regionale</b>', children: [ |
||||
{label: 'CTR 10K - volo 2012-2013', layer: ctr10k }, |
||||
]}, |
||||
]; |
||||
|
||||
var overlayLayers = |
||||
{ |
||||
label: '<b>CARTOGRAFICI</b>', |
||||
noShow: true, |
||||
children: [ |
||||
{label: '<b>Catasto</b>', children: [ |
||||
{label: 'Particelle catastali', layer: particelle}, |
||||
]}, |
||||
{label: '<b>Particelle progetto</b>', children: [ |
||||
{label: 'Particelle selezionate', layer: particella}, |
||||
]}, |
||||
] |
||||
}; |
||||
|
||||
var options = { |
||||
collapsed: true, |
||||
closedSymbol: '<i class="fal fa-plus-square" style="margin-right:5px"></i>', |
||||
openedSymbol: '<i class="fal fa-minus-square" style="margin-right:5px"></i>', |
||||
namedToggle: false, |
||||
spaceSymbol: ' ', |
||||
selectorBack: false, |
||||
collapseAll: '', |
||||
expandAll: '', |
||||
}; |
||||
|
||||
var layerControlTree = L.control.layers.tree(baseLayers, overlayLayers, options).addTo(map); |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Digitize Function */ |
||||
var drawnItems = new L.FeatureGroup(); |
||||
map.addLayer(drawnItems); |
||||
|
||||
var promiseObjectEdit = $.ajax({ url: "assets/dataservice/read_one_linestring.php", |
||||
method: "GET", |
||||
dataType: "json", |
||||
data: {command:"LINESTRING",id:objectgid}, |
||||
username: null, |
||||
password: null |
||||
}); |
||||
|
||||
promiseObjectEdit.then(function (data) { |
||||
L.geoJson(data, { |
||||
style: function (feature) { |
||||
return { |
||||
color: "#FF0000" |
||||
}; |
||||
}, |
||||
onEachFeature: _onEachFeature |
||||
}); |
||||
}); |
||||
|
||||
var drawControl = new L.Control.Draw({ |
||||
draw: { |
||||
position: 'topleft', |
||||
polyline: false, |
||||
polygon: false, |
||||
rectangle: false, |
||||
circle: false, |
||||
marker: false, |
||||
circlemarker: false |
||||
}, |
||||
edit: { |
||||
featureGroup: drawnItems, |
||||
edit: true, |
||||
remove: false |
||||
} |
||||
}); |
||||
|
||||
map.addControl(drawControl); |
||||
|
||||
/* edit functions */ |
||||
map.on('draw:edited', function (e) { |
||||
var layers = e.layers; |
||||
layers.eachLayer(function(layer) { |
||||
var drawnJSONObject = layer.toGeoJSON(); |
||||
var objectGeometry = Terraformer.WKT.convert(drawnJSONObject.geometry); |
||||
var objectGIDToEdit = $("#editobjectgid").val(); |
||||
$.ajax({ url: "assets/dataservice/update_linestring.php", |
||||
method: "GET", |
||||
dataType: "json", |
||||
data: {command:"UPDATE",id:objectGIDToEdit,geometry:objectGeometry}, |
||||
success: function (data) { |
||||
if (data.response == "200") { |
||||
map.off(); |
||||
map.remove(); |
||||
_displayMapRead('app'); |
||||
} else { |
||||
map.off(); |
||||
map.remove(); |
||||
_displayMapRead('app'); |
||||
console.log('Update feature failed.'); |
||||
} |
||||
}, |
||||
username: null, |
||||
password: null |
||||
}); |
||||
}); |
||||
}); |
||||
|
||||
function _onEachFeature (feature, layer) { |
||||
drawnItems.addLayer(layer); |
||||
map.fitBounds(drawnItems.getBounds()); |
||||
if (feature.properties) { |
||||
layer.on({ |
||||
click: function (e) { |
||||
var notes = feature.properties.notes; |
||||
_buildDigitiseModalBox('modalform','UPDATE LINESTRING',notes); |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
|
||||
function _buildDigitiseModalBox (targetmodal,context,notes) { |
||||
targetmodal = typeof targetmodal !== 'undefined' ? targetmodal : 'modalbox'; |
||||
context = typeof context !== 'undefined' ? context : 'UPDATE LINESTRING'; |
||||
notes = typeof notes !== 'undefined' ? notes : ''; |
||||
|
||||
var htmlformcomponent = "" + |
||||
"<input type='hidden' id='command' name='command' value='"+context+"'/>" + |
||||
"<table id='feature_data' class='table table-condensed table-bordered table-striped'>" + |
||||
"<thead>" + |
||||
"<tr>" + |
||||
"<th colspan='2' class='text-center'>Feature Data</th>" + |
||||
"</tr>" + |
||||
"</thead>" + |
||||
"<tbody>" + |
||||
"<tr>" + |
||||
"<td class=''>Notes</td>" + |
||||
"<td class='text-center'><input type='text' id='notes' name='notes' class='form-control' value='"+notes+"'/></td>" + |
||||
"</tr>" + |
||||
"</tbody>" + |
||||
"</table>" + |
||||
""; |
||||
var modalfooter = "" + |
||||
"<button type='button' id='canceldigitize' class='btn btn-default' data-dismiss='modal'><i class='fa fa-power-off'></i> Cancel</button>" + |
||||
"<button type='button' id='saveattributedata' class='btn btn-primary'><i class='fa fa-floppy-o'></i> Save</button>" + |
||||
""; |
||||
$("#form_modal_body").empty(); |
||||
$("#form_modal_footer").empty().html(modalfooter); |
||||
$("#form_modal_body").removeClass().addClass('modal-body'); |
||||
$("#form_modal_size").removeClass().addClass('modal-dialog'); |
||||
$("#form_modal_body").html(htmlformcomponent); |
||||
$("#form_modal_label").html("<i class='fa fa-pencil'></i> "+context+""); |
||||
|
||||
$('#'+targetmodal+'').modal({show:true, backdrop:'static', keyboard:false}); |
||||
} |
||||
|
||||
$("#modalform").on('shown.bs.modal', function(){ |
||||
_activateFeatureSave(); |
||||
}); |
||||
|
||||
function _activateFeatureSave () { |
||||
$("#saveattributedata").on('click', function(evt){ |
||||
evt.stopImmediatePropagation(); |
||||
var gid = $("#editobjectgid").val(); |
||||
var noteString = $('#notes').val(); |
||||
$.ajax({ url: "assets/dataservice/update_data_linestring.php", |
||||
method: "GET", |
||||
dataType: "json", |
||||
data: {id:gid, command:"UPDATE", notes:noteString}, |
||||
success: function (data) { |
||||
if (data.response=="200") { |
||||
$("#modalform").modal('hide'); |
||||
_displayMapRead('app'); |
||||
} else { |
||||
$("#modalform").modal('hide'); |
||||
console.log('Failed to save.'); |
||||
} |
||||
}, |
||||
username: null, |
||||
password: null |
||||
}); |
||||
return false; |
||||
}); |
||||
} |
||||
} |
||||
@ -0,0 +1,427 @@
|
||||
function _displayMapUpdatePoint (divtarget) { |
||||
divtarget = typeof divtarget !== 'undefined' ? divtarget : 'app'; |
||||
document.getElementById(divtarget).innerHTML = "<div id='map' class='map-wrapper'></div>"; |
||||
document.getElementById('home').className = "nav-link flat"; |
||||
document.getElementById('leaflet_crud_create').className = "nav-link flat"; |
||||
document.getElementById('leaflet_crud_read').className = "nav-link flat"; |
||||
document.getElementById('navbarDropdownUpdate').className = "nav-link dropdown-toggle active"; |
||||
document.getElementById('leaflet_crud_delete').className = "nav-link flat"; |
||||
|
||||
var map, isCollapsed, openStreetMaps; |
||||
if (document.body.clientWidth <= 767) { |
||||
isCollapsed = true; |
||||
} else { |
||||
isCollapsed = false; |
||||
} |
||||
|
||||
var promisePoint = $.ajax({ url: "assets/dataservice/read_point.php", |
||||
method: "GET", |
||||
dataType: "json", |
||||
data: {command:"POINT"}, |
||||
username: null, |
||||
password: null |
||||
}); |
||||
|
||||
var pointObjects = L.geoJson(null, { |
||||
onEachFeature: function (feature, layer) { |
||||
if (feature.properties) { |
||||
layer.on({ |
||||
click: function (e) { |
||||
var objectGIDToEdit = feature.properties.id; |
||||
$("#editobjectgid").val(objectGIDToEdit); |
||||
map.off(); |
||||
map.remove(); |
||||
_displayMapEditPoint('app',objectGIDToEdit); |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
}); |
||||
promisePoint.then(function (data) { |
||||
pointObjects.addData(data); |
||||
map.addLayer(pointObjects); |
||||
}); |
||||
|
||||
|
||||
|
||||
var url = "https://test-paesaggistica.lavoripubblici.sicilia.it/geoserver/mappers/wms"; |
||||
|
||||
//################# INIZIO PARTICELLA SELEZIONATA ################# |
||||
<?php if ( strlen($_SESSION['SELECT_PARTICELLA']) > 100 ) { ?> |
||||
particella = L.geoJson(<?php echo $_SESSION['SELECT_PARTICELLA'];?>, {
|
||||
style: {'color': "#ff0000",'fillColor': "rgb(255, 255, 0)",'fillOpacity': 0.4,'dashArray': 4,'weight': 3,'opacity': 0.9} |
||||
}); |
||||
<?php } ?>
|
||||
//################# FINE PARTICELLA SELEZIONATA ################# |
||||
|
||||
odm1 = L.tileLayer ('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
||||
maxZoom: 20, |
||||
minZoom: 1, |
||||
transparent: true, |
||||
attribution: 'OpenStreetMap | contributors CC-BY-SA.' |
||||
}); |
||||
|
||||
|
||||
odm2 = L.tileLayer ('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { |
||||
maxZoom: 20, |
||||
minZoom: 1, |
||||
transparent: true, |
||||
attribution: '© Esri | Source: Esri, USDA, USGS, AEX, GeoEye and the GIS User Community' |
||||
}); |
||||
|
||||
|
||||
odm3 = L.tileLayer.wms (url, { |
||||
maxZoom: 20, |
||||
minZoom: 5, |
||||
transparent: true, |
||||
layers: 'mappers:provincie', |
||||
attribution: '© mapcloud services' |
||||
}); |
||||
|
||||
ctr10k = L.tileLayer.wms ('http://geoportal.mapcloud.it:8080/geoserver/wms', { |
||||
format: 'image/png', |
||||
transparent: true, |
||||
maxZoom: 20, |
||||
minZoom: 5, |
||||
transparent: true, |
||||
layers: 'mapcloud:ctr10k', |
||||
attribution: 'Carta Tecnica Regionale 1:10.000 - Regione Sicilia (Servizio WMS)' |
||||
}); |
||||
|
||||
|
||||
particelle = L.tileLayer.wms(url, { |
||||
layers: "mappers:particelle_<?php echo $_SESSION['COMUNE_BELF']; ?>",
|
||||
format: "image/png", |
||||
maxZoom: 20, |
||||
minZoom: 10, |
||||
transparent: true, |
||||
attribution: '© mapcloud services' |
||||
}), |
||||
|
||||
|
||||
map = L.map("map", { |
||||
zoom: <?php echo $_SESSION['ZOOM'];?>,
|
||||
center: [<?php echo $_SESSION['CENTER'];?>],
|
||||
layers: [odm1,particella], |
||||
minZoom: 3, |
||||
maxZoom: 20, |
||||
zoomControl: false, |
||||
attributionControl: false |
||||
}); |
||||
|
||||
map.setMaxBounds([<?php echo $_SESSION['BOUND']; ?>]);
|
||||
|
||||
var zoomControl = L.control.zoom({ |
||||
position: "topleft" |
||||
}).addTo(map); |
||||
|
||||
|
||||
var baseLayers = [ |
||||
{label: '<b>Opendata Map</b>', noShow: false, children: [ |
||||
{label: 'OpenStreetMap', layer: odm1}, |
||||
{label: 'Satellite Image', layer: odm2}, |
||||
{label: 'Limiti provinciali', layer: odm3}, |
||||
]}, |
||||
{label: '<b>Cartografia Regionale</b>', children: [ |
||||
{label: 'CTR 10K - volo 2012-2013', layer: ctr10k }, |
||||
]}, |
||||
]; |
||||
|
||||
var overlayLayers = |
||||
{ |
||||
label: '<b>CARTOGRAFICI</b>', |
||||
noShow: true, |
||||
children: [ |
||||
{label: '<b>Catasto</b>', children: [ |
||||
{label: 'Particelle catastali', layer: particelle}, |
||||
]}, |
||||
{label: '<b>Particelle progetto</b>', children: [ |
||||
{label: 'Particelle selezionate', layer: particella}, |
||||
]}, |
||||
] |
||||
}; |
||||
|
||||
var options = { |
||||
collapsed: true, |
||||
closedSymbol: '<i class="fal fa-plus-square" style="margin-right:5px"></i>', |
||||
openedSymbol: '<i class="fal fa-minus-square" style="margin-right:5px"></i>', |
||||
namedToggle: false, |
||||
spaceSymbol: ' ', |
||||
selectorBack: false, |
||||
collapseAll: '', |
||||
expandAll: '', |
||||
}; |
||||
|
||||
var layerControlTree = L.control.layers.tree(baseLayers, overlayLayers, options).addTo(map); |
||||
|
||||
|
||||
} |
||||
|
||||
/* ============================================= */ |
||||
|
||||
function _displayMapEditPoint (divtarget,objectgid) { |
||||
divtarget = typeof divtarget !== 'undefined' ? divtarget : 'app'; |
||||
document.getElementById(divtarget).innerHTML = "<div id='map' class='map-wrapper'></div>"; |
||||
|
||||
var map, isCollapsed, openStreetMaps; |
||||
if (document.body.clientWidth <= 767) { |
||||
isCollapsed = true; |
||||
} else { |
||||
isCollapsed = false; |
||||
} |
||||
|
||||
|
||||
var url = "https://test-paesaggistica.lavoripubblici.sicilia.it/geoserver/mappers/wms"; |
||||
|
||||
//################# INIZIO PARTICELLA SELEZIONATA ################# |
||||
<?php if ( strlen($_SESSION['SELECT_PARTICELLA']) > 100 ) { ?> |
||||
particella = L.geoJson(<?php echo $_SESSION['SELECT_PARTICELLA'];?>, {
|
||||
style: {'color': "#ff0000",'fillColor': "rgb(255, 255, 0)",'fillOpacity': 0.4,'dashArray': 4,'weight': 3,'opacity': 0.9} |
||||
}); |
||||
<?php } ?>
|
||||
//################# FINE PARTICELLA SELEZIONATA ################# |
||||
|
||||
odm1 = L.tileLayer ('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
||||
maxZoom: 20, |
||||
minZoom: 1, |
||||
transparent: true, |
||||
attribution: 'OpenStreetMap | contributors CC-BY-SA.' |
||||
}); |
||||
|
||||
|
||||
odm2 = L.tileLayer ('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { |
||||
maxZoom: 20, |
||||
minZoom: 1, |
||||
transparent: true, |
||||
attribution: '© Esri | Source: Esri, USDA, USGS, AEX, GeoEye and the GIS User Community' |
||||
}); |
||||
|
||||
|
||||
odm3 = L.tileLayer.wms (url, { |
||||
maxZoom: 20, |
||||
minZoom: 5, |
||||
transparent: true, |
||||
layers: 'mappers:provincie', |
||||
attribution: '© mapcloud services' |
||||
}); |
||||
|
||||
ctr10k = L.tileLayer.wms ('http://geoportal.mapcloud.it:8080/geoserver/wms', { |
||||
format: 'image/png', |
||||
transparent: true, |
||||
maxZoom: 20, |
||||
minZoom: 5, |
||||
transparent: true, |
||||
layers: 'mapcloud:ctr10k', |
||||
attribution: 'Carta Tecnica Regionale 1:10.000 - Regione Sicilia (Servizio WMS)' |
||||
}); |
||||
|
||||
|
||||
particelle = L.tileLayer.wms(url, { |
||||
layers: "mappers:particelle_<?php echo $_SESSION['COMUNE_BELF']; ?>",
|
||||
format: "image/png", |
||||
maxZoom: 20, |
||||
minZoom: 10, |
||||
transparent: true, |
||||
attribution: '© mapcloud services' |
||||
}), |
||||
|
||||
|
||||
map = L.map("map", { |
||||
zoom: <?php echo $_SESSION['ZOOM'];?>,
|
||||
center: [<?php echo $_SESSION['CENTER'];?>],
|
||||
layers: [odm1,particella], |
||||
minZoom: 3, |
||||
maxZoom: 20, |
||||
zoomControl: false, |
||||
attributionControl: false |
||||
}); |
||||
|
||||
map.setMaxBounds([<?php echo $_SESSION['BOUND']; ?>]);
|
||||
|
||||
var zoomControl = L.control.zoom({ |
||||
position: "topleft" |
||||
}).addTo(map); |
||||
|
||||
|
||||
var baseLayers = [ |
||||
{label: '<b>Opendata Map</b>', noShow: false, children: [ |
||||
{label: 'OpenStreetMap', layer: odm1}, |
||||
{label: 'Satellite Image', layer: odm2}, |
||||
{label: 'Limiti provinciali', layer: odm3}, |
||||
]}, |
||||
{label: '<b>Cartografia Regionale</b>', children: [ |
||||
{label: 'CTR 10K - volo 2012-2013', layer: ctr10k }, |
||||
]}, |
||||
]; |
||||
|
||||
var overlayLayers = |
||||
{ |
||||
label: '<b>CARTOGRAFICI</b>', |
||||
noShow: true, |
||||
children: [ |
||||
{label: '<b>Catasto</b>', children: [ |
||||
{label: 'Particelle catastali', layer: particelle}, |
||||
]}, |
||||
{label: '<b>Particelle progetto</b>', children: [ |
||||
{label: 'Particelle selezionate', layer: particella}, |
||||
]}, |
||||
] |
||||
}; |
||||
|
||||
var options = { |
||||
collapsed: true, |
||||
closedSymbol: '<i class="fal fa-plus-square" style="margin-right:5px"></i>', |
||||
openedSymbol: '<i class="fal fa-minus-square" style="margin-right:5px"></i>', |
||||
namedToggle: false, |
||||
spaceSymbol: ' ', |
||||
selectorBack: false, |
||||
collapseAll: '', |
||||
expandAll: '', |
||||
}; |
||||
|
||||
var layerControlTree = L.control.layers.tree(baseLayers, overlayLayers, options).addTo(map); |
||||
|
||||
|
||||
/* Digitize Function */ |
||||
var drawnItems = new L.FeatureGroup(); |
||||
map.addLayer(drawnItems); |
||||
|
||||
var promiseObjectEdit = $.ajax({ url: "assets/dataservice/read_one_point.php", |
||||
method: "GET", |
||||
dataType: "json", |
||||
data: {command:"POINT",id:objectgid}, |
||||
username: null, |
||||
password: null |
||||
}); |
||||
|
||||
promiseObjectEdit.then(function (data) { |
||||
L.geoJson(data, { |
||||
onEachFeature: _onEachFeature |
||||
}); |
||||
}); |
||||
|
||||
var drawControl = new L.Control.Draw({ |
||||
draw: { |
||||
position: 'topleft', |
||||
polyline: false, |
||||
polygon: false, |
||||
rectangle: false, |
||||
circle: false, |
||||
marker: false, |
||||
circlemarker: false |
||||
}, |
||||
edit: { |
||||
featureGroup: drawnItems, |
||||
edit: true, |
||||
remove: false |
||||
} |
||||
}); |
||||
|
||||
map.addControl(drawControl); |
||||
|
||||
/* edit functions */ |
||||
map.on('draw:edited', function (e) { |
||||
var layers = e.layers; |
||||
layers.eachLayer(function(layer) { |
||||
var drawnJSONObject = layer.toGeoJSON(); |
||||
var objectGeometry = Terraformer.WKT.convert(drawnJSONObject.geometry); |
||||
var objectGIDToEdit = $("#editobjectgid").val(); |
||||
$.ajax({ url: "assets/dataservice/update_point.php", |
||||
method: "GET", |
||||
dataType: "json", |
||||
data: {command:"UPDATE",id:objectGIDToEdit,geometry:objectGeometry}, |
||||
success: function (data) { |
||||
if (data.response == "200") { |
||||
map.off(); |
||||
map.remove(); |
||||
_displayMapRead('app'); |
||||
} else { |
||||
map.off(); |
||||
map.remove(); |
||||
_displayMapRead('app'); |
||||
console.log('Update feature failed.'); |
||||
} |
||||
}, |
||||
username: null, |
||||
password: null |
||||
}); |
||||
}); |
||||
}); |
||||
|
||||
function _onEachFeature (feature, layer) { |
||||
drawnItems.addLayer(layer); |
||||
map.flyTo(new L.LatLng(feature.geometry.coordinates[1],feature.geometry.coordinates[0]), 12); |
||||
if (feature.properties) { |
||||
layer.on({ |
||||
click: function (e) { |
||||
var notes = feature.properties.notes; |
||||
_buildDigitiseModalBox('modalform','UPDATE POINT',notes); |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
|
||||
function _buildDigitiseModalBox (targetmodal,context,notes) { |
||||
targetmodal = typeof targetmodal !== 'undefined' ? targetmodal : 'modalbox'; |
||||
context = typeof context !== 'undefined' ? context : 'UPDATE POINT'; |
||||
notes = typeof notes !== 'undefined' ? notes : ''; |
||||
|
||||
var htmlformcomponent = "" + |
||||
"<input type='hidden' id='command' name='command' value='"+context+"'/>" + |
||||
"<table id='feature_data' class='table table-condensed table-bordered table-striped'>" + |
||||
"<thead>" + |
||||
"<tr>" + |
||||
"<th colspan='2' class='text-center'>Feature Data</th>" + |
||||
"</tr>" + |
||||
"</thead>" + |
||||
"<tbody>" + |
||||
"<tr>" + |
||||
"<td class=''>Notes</td>" + |
||||
"<td class='text-center'><input type='text' id='notes' name='notes' class='form-control' value='"+notes+"'/></td>" + |
||||
"</tr>" + |
||||
"</tbody>" + |
||||
"</table>" + |
||||
""; |
||||
var modalfooter = "" + |
||||
"<button type='button' id='canceldigitize' class='btn btn-default' data-dismiss='modal'><i class='fa fa-power-off'></i> Cancel</button>" + |
||||
"<button type='button' id='saveattributedata' class='btn btn-primary'><i class='fa fa-floppy-o'></i> Save</button>" + |
||||
""; |
||||
$("#form_modal_body").empty(); |
||||
$("#form_modal_footer").empty().html(modalfooter); |
||||
$("#form_modal_body").removeClass().addClass('modal-body'); |
||||
$("#form_modal_size").removeClass().addClass('modal-dialog'); |
||||
$("#form_modal_body").html(htmlformcomponent); |
||||
$("#form_modal_label").html("<i class='fa fa-pencil'></i> "+context+""); |
||||
|
||||
$('#'+targetmodal+'').modal({show:true, backdrop:'static', keyboard:false}); |
||||
} |
||||
|
||||
$("#modalform").on('shown.bs.modal', function(){ |
||||
_activateFeatureSave(); |
||||
}); |
||||
|
||||
function _activateFeatureSave () { |
||||
$("#saveattributedata").on('click', function(evt){ |
||||
evt.stopImmediatePropagation(); |
||||
var gid = $("#editobjectgid").val(); |
||||
var noteString = $('#notes').val(); |
||||
$.ajax({ url: "assets/dataservice/update_data_point.php", |
||||
method: "GET", |
||||
dataType: "json", |
||||
data: {id:gid, command:"UPDATE", notes:noteString}, |
||||
success: function (data) { |
||||
if (data.response=="200") { |
||||
$("#modalform").modal('hide'); |
||||
_displayMapRead('app'); |
||||
} else { |
||||
$("#modalform").modal('hide'); |
||||
console.log('Failed to save.'); |
||||
} |
||||
}, |
||||
username: null, |
||||
password: null |
||||
}); |
||||
return false; |
||||
}); |
||||
} |
||||
} |
||||
@ -0,0 +1,426 @@
|
||||
function _displayMapUpdatePolygon (divtarget) { |
||||
divtarget = typeof divtarget !== 'undefined' ? divtarget : 'app'; |
||||
document.getElementById(divtarget).innerHTML = "<div id='map' class='map-wrapper'></div>"; |
||||
document.getElementById('home').className = "nav-link flat"; |
||||
document.getElementById('leaflet_crud_create').className = "nav-link flat"; |
||||
document.getElementById('leaflet_crud_read').className = "nav-link flat"; |
||||
document.getElementById('navbarDropdownUpdate').className = "nav-link dropdown-toggle active"; |
||||
document.getElementById('leaflet_crud_delete').className = "nav-link flat"; |
||||
|
||||
var map, isCollapsed, openStreetMaps; |
||||
if (document.body.clientWidth <= 767) { |
||||
isCollapsed = true; |
||||
} else { |
||||
isCollapsed = false; |
||||
} |
||||
|
||||
var promisePolygon = $.ajax({ url: "assets/dataservice/read_polygon.php", |
||||
method: "GET", |
||||
dataType: "json", |
||||
data: {command:"POLYGON"}, |
||||
username: null, |
||||
password: null |
||||
}); |
||||
|
||||
var polygonObjects = L.geoJson(null, { |
||||
onEachFeature: function (feature, layer) { |
||||
if (feature.properties) { |
||||
layer.on({ |
||||
click: function (e) { |
||||
var objectGIDToEdit = feature.properties.id; |
||||
$("#editobjectgid").val(objectGIDToEdit); |
||||
map.off(); |
||||
map.remove(); |
||||
_displayMapEditPolygon('app',objectGIDToEdit); |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
}); |
||||
promisePolygon.then(function (data) { |
||||
polygonObjects.addData(data); |
||||
map.addLayer(polygonObjects); |
||||
}); |
||||
|
||||
var url = "https://test-paesaggistica.lavoripubblici.sicilia.it/geoserver/mappers/wms"; |
||||
|
||||
//################# INIZIO PARTICELLA SELEZIONATA ################# |
||||
<?php if ( strlen($_SESSION['SELECT_PARTICELLA']) > 100 ) { ?> |
||||
particella = L.geoJson(<?php echo $_SESSION['SELECT_PARTICELLA'];?>, {
|
||||
style: {'color': "#ff0000",'fillColor': "rgb(255, 255, 0)",'fillOpacity': 0.4,'dashArray': 4,'weight': 3,'opacity': 0.9} |
||||
}); |
||||
<?php } ?>
|
||||
//################# FINE PARTICELLA SELEZIONATA ################# |
||||
|
||||
odm1 = L.tileLayer ('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
||||
maxZoom: 20, |
||||
minZoom: 1, |
||||
transparent: true, |
||||
attribution: 'OpenStreetMap | contributors CC-BY-SA.' |
||||
}); |
||||
|
||||
|
||||
odm2 = L.tileLayer ('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { |
||||
maxZoom: 20, |
||||
minZoom: 1, |
||||
transparent: true, |
||||
attribution: '© Esri | Source: Esri, USDA, USGS, AEX, GeoEye and the GIS User Community' |
||||
}); |
||||
|
||||
|
||||
odm3 = L.tileLayer.wms (url, { |
||||
maxZoom: 20, |
||||
minZoom: 5, |
||||
transparent: true, |
||||
layers: 'mappers:provincie', |
||||
attribution: '© mapcloud services' |
||||
}); |
||||
|
||||
ctr10k = L.tileLayer.wms ('http://geoportal.mapcloud.it:8080/geoserver/wms', { |
||||
format: 'image/png', |
||||
transparent: true, |
||||
maxZoom: 20, |
||||
minZoom: 5, |
||||
transparent: true, |
||||
layers: 'mapcloud:ctr10k', |
||||
attribution: 'Carta Tecnica Regionale 1:10.000 - Regione Sicilia (Servizio WMS)' |
||||
}); |
||||
|
||||
|
||||
particelle = L.tileLayer.wms(url, { |
||||
layers: "mappers:particelle_<?php echo $_SESSION['COMUNE_BELF']; ?>",
|
||||
format: "image/png", |
||||
maxZoom: 20, |
||||
minZoom: 10, |
||||
transparent: true, |
||||
attribution: '© mapcloud services' |
||||
}), |
||||
|
||||
|
||||
map = L.map("map", { |
||||
zoom: <?php echo $_SESSION['ZOOM'];?>,
|
||||
center: [<?php echo $_SESSION['CENTER'];?>],
|
||||
layers: [odm1,particella], |
||||
minZoom: 3, |
||||
maxZoom: 20, |
||||
zoomControl: false, |
||||
attributionControl: false |
||||
}); |
||||
|
||||
map.setMaxBounds([<?php echo $_SESSION['BOUND']; ?>]);
|
||||
|
||||
var zoomControl = L.control.zoom({ |
||||
position: "topleft" |
||||
}).addTo(map); |
||||
|
||||
|
||||
var baseLayers = [ |
||||
{label: '<b>Opendata Map</b>', noShow: false, children: [ |
||||
{label: 'OpenStreetMap', layer: odm1}, |
||||
{label: 'Satellite Image', layer: odm2}, |
||||
{label: 'Limiti provinciali', layer: odm3}, |
||||
]}, |
||||
{label: '<b>Cartografia Regionale</b>', children: [ |
||||
{label: 'CTR 10K - volo 2012-2013', layer: ctr10k }, |
||||
]}, |
||||
]; |
||||
|
||||
var overlayLayers = |
||||
{ |
||||
label: '<b>CARTOGRAFICI</b>', |
||||
noShow: true, |
||||
children: [ |
||||
{label: '<b>Catasto</b>', children: [ |
||||
{label: 'Particelle catastali', layer: particelle}, |
||||
]}, |
||||
{label: '<b>Particelle progetto</b>', children: [ |
||||
{label: 'Particelle selezionate', layer: particella}, |
||||
]}, |
||||
] |
||||
}; |
||||
|
||||
var options = { |
||||
collapsed: true, |
||||
closedSymbol: '<i class="fal fa-plus-square" style="margin-right:5px"></i>', |
||||
openedSymbol: '<i class="fal fa-minus-square" style="margin-right:5px"></i>', |
||||
namedToggle: false, |
||||
spaceSymbol: ' ', |
||||
selectorBack: false, |
||||
collapseAll: '', |
||||
expandAll: '', |
||||
}; |
||||
|
||||
var layerControlTree = L.control.layers.tree(baseLayers, overlayLayers, options).addTo(map); |
||||
} |
||||
|
||||
/* ============================================= */ |
||||
|
||||
function _displayMapEditPolygon (divtarget,objectgid) { |
||||
divtarget = typeof divtarget !== 'undefined' ? divtarget : 'app'; |
||||
document.getElementById(divtarget).innerHTML = "<div id='map' class='map-wrapper'></div>"; |
||||
|
||||
var map, isCollapsed, openStreetMaps; |
||||
if (document.body.clientWidth <= 767) { |
||||
isCollapsed = true; |
||||
} else { |
||||
isCollapsed = false; |
||||
} |
||||
|
||||
var url = "https://test-paesaggistica.lavoripubblici.sicilia.it/geoserver/mappers/wms"; |
||||
|
||||
//################# INIZIO PARTICELLA SELEZIONATA ################# |
||||
<?php if ( strlen($_SESSION['SELECT_PARTICELLA']) > 100 ) { ?> |
||||
particella = L.geoJson(<?php echo $_SESSION['SELECT_PARTICELLA'];?>, {
|
||||
style: {'color': "#ff0000",'fillColor': "rgb(255, 255, 0)",'fillOpacity': 0.4,'dashArray': 4,'weight': 3,'opacity': 0.9} |
||||
}); |
||||
<?php } ?>
|
||||
//################# FINE PARTICELLA SELEZIONATA ################# |
||||
|
||||
odm1 = L.tileLayer ('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
||||
maxZoom: 20, |
||||
minZoom: 1, |
||||
transparent: true, |
||||
attribution: 'OpenStreetMap | contributors CC-BY-SA.' |
||||
}); |
||||
|
||||
|
||||
odm2 = L.tileLayer ('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { |
||||
maxZoom: 20, |
||||
minZoom: 1, |
||||
transparent: true, |
||||
attribution: '© Esri | Source: Esri, USDA, USGS, AEX, GeoEye and the GIS User Community' |
||||
}); |
||||
|
||||
|
||||
odm3 = L.tileLayer.wms (url, { |
||||
maxZoom: 20, |
||||
minZoom: 5, |
||||
transparent: true, |
||||
layers: 'mappers:provincie', |
||||
attribution: '© mapcloud services' |
||||
}); |
||||
|
||||
ctr10k = L.tileLayer.wms ('http://geoportal.mapcloud.it:8080/geoserver/wms', { |
||||
format: 'image/png', |
||||
transparent: true, |
||||
maxZoom: 20, |
||||
minZoom: 5, |
||||
transparent: true, |
||||
layers: 'mapcloud:ctr10k', |
||||
attribution: 'Carta Tecnica Regionale 1:10.000 - Regione Sicilia (Servizio WMS)' |
||||
}); |
||||
|
||||
|
||||
particelle = L.tileLayer.wms(url, { |
||||
layers: "mappers:particelle_<?php echo $_SESSION['COMUNE_BELF']; ?>",
|
||||
format: "image/png", |
||||
maxZoom: 20, |
||||
minZoom: 10, |
||||
transparent: true, |
||||
attribution: '© mapcloud services' |
||||
}), |
||||
|
||||
|
||||
map = L.map("map", { |
||||
zoom: <?php echo $_SESSION['ZOOM'];?>,
|
||||
center: [<?php echo $_SESSION['CENTER'];?>],
|
||||
layers: [odm1,particella], |
||||
minZoom: 3, |
||||
maxZoom: 20, |
||||
zoomControl: false, |
||||
attributionControl: false |
||||
}); |
||||
|
||||
map.setMaxBounds([<?php echo $_SESSION['BOUND']; ?>]);
|
||||
|
||||
var zoomControl = L.control.zoom({ |
||||
position: "topleft" |
||||
}).addTo(map); |
||||
|
||||
|
||||
var baseLayers = [ |
||||
{label: '<b>Opendata Map</b>', noShow: false, children: [ |
||||
{label: 'OpenStreetMap', layer: odm1}, |
||||
{label: 'Satellite Image', layer: odm2}, |
||||
{label: 'Limiti provinciali', layer: odm3}, |
||||
]}, |
||||
{label: '<b>Cartografia Regionale</b>', children: [ |
||||
{label: 'CTR 10K - volo 2012-2013', layer: ctr10k }, |
||||
]}, |
||||
]; |
||||
|
||||
var overlayLayers = |
||||
{ |
||||
label: '<b>CARTOGRAFICI</b>', |
||||
noShow: true, |
||||
children: [ |
||||
{label: '<b>Catasto</b>', children: [ |
||||
{label: 'Particelle catastali', layer: particelle}, |
||||
]}, |
||||
{label: '<b>Particelle progetto</b>', children: [ |
||||
{label: 'Particelle selezionate', layer: particella}, |
||||
]}, |
||||
] |
||||
}; |
||||
|
||||
var options = { |
||||
collapsed: true, |
||||
closedSymbol: '<i class="fal fa-plus-square" style="margin-right:5px"></i>', |
||||
openedSymbol: '<i class="fal fa-minus-square" style="margin-right:5px"></i>', |
||||
namedToggle: false, |
||||
spaceSymbol: ' ', |
||||
selectorBack: false, |
||||
collapseAll: '', |
||||
expandAll: '', |
||||
}; |
||||
|
||||
var layerControlTree = L.control.layers.tree(baseLayers, overlayLayers, options).addTo(map); |
||||
|
||||
/* Digitize Function */ |
||||
var drawnItems = new L.FeatureGroup(); |
||||
map.addLayer(drawnItems); |
||||
|
||||
var promiseObjectEdit = $.ajax({ url: "assets/dataservice/read_one_polygon.php", |
||||
method: "GET", |
||||
dataType: "json", |
||||
data: {command:"POLYGON",id:objectgid}, |
||||
username: null, |
||||
password: null |
||||
}); |
||||
|
||||
promiseObjectEdit.then(function (data) { |
||||
L.geoJson(data, { |
||||
style: function (feature) { |
||||
return { |
||||
color: "#FF0000" |
||||
}; |
||||
}, |
||||
onEachFeature: _onEachFeature |
||||
}); |
||||
}); |
||||
|
||||
var drawControl = new L.Control.Draw({ |
||||
draw: { |
||||
position: 'topleft', |
||||
polyline: false, |
||||
polygon: false, |
||||
rectangle: false, |
||||
circle: false, |
||||
marker: false, |
||||
circlemarker: false |
||||
}, |
||||
edit: { |
||||
featureGroup: drawnItems, |
||||
edit: true, |
||||
remove: false |
||||
} |
||||
}); |
||||
|
||||
map.addControl(drawControl); |
||||
|
||||
/* edit functions */ |
||||
map.on('draw:edited', function (e) { |
||||
var layers = e.layers; |
||||
layers.eachLayer(function(layer) { |
||||
var drawnJSONObject = layer.toGeoJSON(); |
||||
var objectGeometry = Terraformer.WKT.convert(drawnJSONObject.geometry); |
||||
var objectGIDToEdit = $("#editobjectgid").val(); |
||||
$.ajax({ url: "assets/dataservice/update_polygon.php", |
||||
method: "GET", |
||||
dataType: "json", |
||||
data: {command:"UPDATE",id:objectGIDToEdit,geometry:objectGeometry}, |
||||
success: function (data) { |
||||
if (data.response == "200") { |
||||
map.off(); |
||||
map.remove(); |
||||
_displayMapRead('app'); |
||||
} else { |
||||
map.off(); |
||||
map.remove(); |
||||
_displayMapRead('app'); |
||||
console.log('Update feature failed.'); |
||||
} |
||||
}, |
||||
username: null, |
||||
password: null |
||||
}); |
||||
}); |
||||
}); |
||||
|
||||
function _onEachFeature (feature, layer) { |
||||
drawnItems.addLayer(layer); |
||||
map.fitBounds(drawnItems.getBounds()); |
||||
if (feature.properties) { |
||||
layer.on({ |
||||
click: function (e) { |
||||
var notes = feature.properties.notes; |
||||
_buildDigitiseModalBox('modalform','UPDATE POLYGON',notes); |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
|
||||
function _buildDigitiseModalBox (targetmodal,context,notes) { |
||||
targetmodal = typeof targetmodal !== 'undefined' ? targetmodal : 'modalbox'; |
||||
context = typeof context !== 'undefined' ? context : 'UPDATE POLYGON'; |
||||
notes = typeof notes !== 'undefined' ? notes : ''; |
||||
|
||||
var htmlformcomponent = "" + |
||||
"<input type='hidden' id='command' name='command' value='"+context+"'/>" + |
||||
"<table id='feature_data' class='table table-condensed table-bordered table-striped'>" + |
||||
"<thead>" + |
||||
"<tr>" + |
||||
"<th colspan='2' class='text-center'>Feature Data</th>" + |
||||
"</tr>" + |
||||
"</thead>" + |
||||
"<tbody>" + |
||||
"<tr>" + |
||||
"<td class=''>Notes</td>" + |
||||
"<td class='text-center'><input type='text' id='notes' name='notes' class='form-control' value='"+notes+"'/></td>" + |
||||
"</tr>" + |
||||
"</tbody>" + |
||||
"</table>" + |
||||
""; |
||||
var modalfooter = "" + |
||||
"<button type='button' id='canceldigitize' class='btn btn-default' data-dismiss='modal'><i class='fa fa-power-off'></i> Cancel</button>" + |
||||
"<button type='button' id='saveattributedata' class='btn btn-primary'><i class='fa fa-floppy-o'></i> Save</button>" + |
||||
""; |
||||
$("#form_modal_body").empty(); |
||||
$("#form_modal_footer").empty().html(modalfooter); |
||||
$("#form_modal_body").removeClass().addClass('modal-body'); |
||||
$("#form_modal_size").removeClass().addClass('modal-dialog'); |
||||
$("#form_modal_body").html(htmlformcomponent); |
||||
$("#form_modal_label").html("<i class='fa fa-pencil'></i> "+context+""); |
||||
|
||||
$('#'+targetmodal+'').modal({show:true, backdrop:'static', keyboard:false}); |
||||
} |
||||
|
||||
$("#modalform").on('shown.bs.modal', function(){ |
||||
_activateFeatureSave(); |
||||
}); |
||||
|
||||
function _activateFeatureSave () { |
||||
$("#saveattributedata").on('click', function(evt){ |
||||
evt.stopImmediatePropagation(); |
||||
var gid = $("#editobjectgid").val(); |
||||
var noteString = $('#notes').val(); |
||||
$.ajax({ url: "assets/dataservice/update_data_polygon.php", |
||||
method: "GET", |
||||
dataType: "json", |
||||
data: {id:gid, command:"UPDATE", notes:noteString}, |
||||
success: function (data) { |
||||
if (data.response=="200") { |
||||
$("#modalform").modal('hide'); |
||||
_displayMapRead('app'); |
||||
} else { |
||||
$("#modalform").modal('hide'); |
||||
console.log('Failed to save.'); |
||||
} |
||||
}, |
||||
username: null, |
||||
password: null |
||||
}); |
||||
return false; |
||||
}); |
||||
} |
||||
} |
||||
File binario non mostrato.
@ -0,0 +1,187 @@
|
||||
table.dataTable { |
||||
clear: both; |
||||
margin-top: 6px !important; |
||||
margin-bottom: 6px !important; |
||||
max-width: none !important; |
||||
border-collapse: separate !important; |
||||
} |
||||
table.dataTable td, |
||||
table.dataTable th { |
||||
-webkit-box-sizing: content-box; |
||||
box-sizing: content-box; |
||||
} |
||||
table.dataTable td.dataTables_empty, |
||||
table.dataTable th.dataTables_empty { |
||||
text-align: center; |
||||
} |
||||
table.dataTable.nowrap th, |
||||
table.dataTable.nowrap td { |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
div.dataTables_wrapper div.dataTables_length label { |
||||
font-weight: normal; |
||||
text-align: left; |
||||
white-space: nowrap; |
||||
} |
||||
div.dataTables_wrapper div.dataTables_length select { |
||||
width: 75px; |
||||
display: inline-block; |
||||
} |
||||
div.dataTables_wrapper div.dataTables_filter { |
||||
text-align: right; |
||||
} |
||||
div.dataTables_wrapper div.dataTables_filter label { |
||||
font-weight: normal; |
||||
white-space: nowrap; |
||||
text-align: left; |
||||
} |
||||
div.dataTables_wrapper div.dataTables_filter input { |
||||
margin-left: 0.5em; |
||||
display: inline-block; |
||||
width: auto; |
||||
} |
||||
div.dataTables_wrapper div.dataTables_info { |
||||
padding-top: 8px; |
||||
white-space: nowrap; |
||||
} |
||||
div.dataTables_wrapper div.dataTables_paginate { |
||||
margin: 0; |
||||
white-space: nowrap; |
||||
text-align: right; |
||||
} |
||||
div.dataTables_wrapper div.dataTables_paginate ul.pagination { |
||||
margin: 2px 0; |
||||
white-space: nowrap; |
||||
} |
||||
div.dataTables_wrapper div.dataTables_processing { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
width: 200px; |
||||
margin-left: -100px; |
||||
margin-top: -26px; |
||||
text-align: center; |
||||
padding: 1em 0; |
||||
} |
||||
|
||||
table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting, |
||||
table.dataTable thead > tr > td.sorting_asc, |
||||
table.dataTable thead > tr > td.sorting_desc, |
||||
table.dataTable thead > tr > td.sorting { |
||||
padding-right: 30px; |
||||
} |
||||
table.dataTable thead > tr > th:active, |
||||
table.dataTable thead > tr > td:active { |
||||
outline: none; |
||||
} |
||||
table.dataTable thead .sorting, |
||||
table.dataTable thead .sorting_asc, |
||||
table.dataTable thead .sorting_desc, |
||||
table.dataTable thead .sorting_asc_disabled, |
||||
table.dataTable thead .sorting_desc_disabled { |
||||
cursor: pointer; |
||||
position: relative; |
||||
} |
||||
table.dataTable thead .sorting:after, |
||||
table.dataTable thead .sorting_asc:after, |
||||
table.dataTable thead .sorting_desc:after, |
||||
table.dataTable thead .sorting_asc_disabled:after, |
||||
table.dataTable thead .sorting_desc_disabled:after { |
||||
position: absolute; |
||||
bottom: 8px; |
||||
right: 8px; |
||||
display: block; |
||||
font-family: 'Glyphicons Halflings'; |
||||
opacity: 0.5; |
||||
} |
||||
table.dataTable thead .sorting:after { |
||||
opacity: 0.2; |
||||
content: "\e150"; |
||||
/* sort */ |
||||
} |
||||
table.dataTable thead .sorting_asc:after { |
||||
content: "\e155"; |
||||
/* sort-by-attributes */ |
||||
} |
||||
table.dataTable thead .sorting_desc:after { |
||||
content: "\e156"; |
||||
/* sort-by-attributes-alt */ |
||||
} |
||||
table.dataTable thead .sorting_asc_disabled:after, |
||||
table.dataTable thead .sorting_desc_disabled:after { |
||||
color: #eee; |
||||
} |
||||
|
||||
div.dataTables_scrollHead table.dataTable { |
||||
margin-bottom: 0 !important; |
||||
} |
||||
|
||||
div.dataTables_scrollBody > table { |
||||
border-top: none; |
||||
margin-top: 0 !important; |
||||
margin-bottom: 0 !important; |
||||
} |
||||
div.dataTables_scrollBody > table > thead .sorting:after, |
||||
div.dataTables_scrollBody > table > thead .sorting_asc:after, |
||||
div.dataTables_scrollBody > table > thead .sorting_desc:after { |
||||
display: none; |
||||
} |
||||
div.dataTables_scrollBody > table > tbody > tr:first-child > th, |
||||
div.dataTables_scrollBody > table > tbody > tr:first-child > td { |
||||
border-top: none; |
||||
} |
||||
|
||||
div.dataTables_scrollFoot > .dataTables_scrollFootInner { |
||||
box-sizing: content-box; |
||||
} |
||||
div.dataTables_scrollFoot > .dataTables_scrollFootInner > table { |
||||
margin-top: 0 !important; |
||||
border-top: none; |
||||
} |
||||
|
||||
@media screen and (max-width: 767px) { |
||||
div.dataTables_wrapper div.dataTables_length, |
||||
div.dataTables_wrapper div.dataTables_filter, |
||||
div.dataTables_wrapper div.dataTables_info, |
||||
div.dataTables_wrapper div.dataTables_paginate { |
||||
text-align: center; |
||||
} |
||||
} |
||||
table.dataTable.table-condensed > thead > tr > th { |
||||
padding-right: 20px; |
||||
} |
||||
table.dataTable.table-condensed .sorting:after, |
||||
table.dataTable.table-condensed .sorting_asc:after, |
||||
table.dataTable.table-condensed .sorting_desc:after { |
||||
top: 6px; |
||||
right: 6px; |
||||
} |
||||
|
||||
table.table-bordered.dataTable th, |
||||
table.table-bordered.dataTable td { |
||||
border-left-width: 0; |
||||
} |
||||
table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable th:last-child, |
||||
table.table-bordered.dataTable td:last-child, |
||||
table.table-bordered.dataTable td:last-child { |
||||
border-right-width: 0; |
||||
} |
||||
table.table-bordered.dataTable tbody th, |
||||
table.table-bordered.dataTable tbody td { |
||||
border-bottom-width: 0; |
||||
} |
||||
|
||||
div.dataTables_scrollHead table.table-bordered { |
||||
border-bottom-width: 0; |
||||
} |
||||
|
||||
div.table-responsive > div.dataTables_wrapper > div.row { |
||||
margin: 0; |
||||
} |
||||
div.table-responsive > div.dataTables_wrapper > div.row > div[class^="col-"]:first-child { |
||||
padding-left: 0; |
||||
} |
||||
div.table-responsive > div.dataTables_wrapper > div.row > div[class^="col-"]:last-child { |
||||
padding-right: 0; |
||||
} |
||||
@ -0,0 +1 @@
|
||||
table.dataTable{clear:both;margin-top:6px !important;margin-bottom:6px !important;max-width:none !important;border-collapse:separate !important}table.dataTable td,table.dataTable th{-webkit-box-sizing:content-box;box-sizing:content-box}table.dataTable td.dataTables_empty,table.dataTable th.dataTables_empty{text-align:center}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}div.dataTables_wrapper div.dataTables_length label{font-weight:normal;text-align:left;white-space:nowrap}div.dataTables_wrapper div.dataTables_length select{width:75px;display:inline-block}div.dataTables_wrapper div.dataTables_filter{text-align:right}div.dataTables_wrapper div.dataTables_filter label{font-weight:normal;white-space:nowrap;text-align:left}div.dataTables_wrapper div.dataTables_filter input{margin-left:0.5em;display:inline-block;width:auto}div.dataTables_wrapper div.dataTables_info{padding-top:8px;white-space:nowrap}div.dataTables_wrapper div.dataTables_paginate{margin:0;white-space:nowrap;text-align:right}div.dataTables_wrapper div.dataTables_paginate ul.pagination{margin:2px 0;white-space:nowrap}div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-26px;text-align:center;padding:1em 0}table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc,table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>td.sorting{padding-right:30px}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled{cursor:pointer;position:relative}table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:after{position:absolute;bottom:8px;right:8px;display:block;font-family:'Glyphicons Halflings';opacity:0.5}table.dataTable thead .sorting:after{opacity:0.2;content:"\e150"}table.dataTable thead .sorting_asc:after{content:"\e155"}table.dataTable thead .sorting_desc:after{content:"\e156"}table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:after{color:#eee}div.dataTables_scrollHead table.dataTable{margin-bottom:0 !important}div.dataTables_scrollBody>table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}div.dataTables_scrollBody>table>thead .sorting:after,div.dataTables_scrollBody>table>thead .sorting_asc:after,div.dataTables_scrollBody>table>thead .sorting_desc:after{display:none}div.dataTables_scrollBody>table>tbody>tr:first-child>th,div.dataTables_scrollBody>table>tbody>tr:first-child>td{border-top:none}div.dataTables_scrollFoot>.dataTables_scrollFootInner{box-sizing:content-box}div.dataTables_scrollFoot>.dataTables_scrollFootInner>table{margin-top:0 !important;border-top:none}@media screen and (max-width: 767px){div.dataTables_wrapper div.dataTables_length,div.dataTables_wrapper div.dataTables_filter,div.dataTables_wrapper div.dataTables_info,div.dataTables_wrapper div.dataTables_paginate{text-align:center}}table.dataTable.table-condensed>thead>tr>th{padding-right:20px}table.dataTable.table-condensed .sorting:after,table.dataTable.table-condensed .sorting_asc:after,table.dataTable.table-condensed .sorting_desc:after{top:6px;right:6px}table.table-bordered.dataTable th,table.table-bordered.dataTable td{border-left-width:0}table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable td:last-child,table.table-bordered.dataTable td:last-child{border-right-width:0}table.table-bordered.dataTable tbody th,table.table-bordered.dataTable tbody td{border-bottom-width:0}div.dataTables_scrollHead table.table-bordered{border-bottom-width:0}div.table-responsive>div.dataTables_wrapper>div.row{margin:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:first-child{padding-left:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:last-child{padding-right:0} |
||||
@ -0,0 +1,206 @@
|
||||
table.dataTable { |
||||
clear: both; |
||||
margin-top: 6px !important; |
||||
margin-bottom: 6px !important; |
||||
max-width: none !important; |
||||
border-collapse: separate !important; |
||||
border-spacing: 0; |
||||
} |
||||
table.dataTable td, |
||||
table.dataTable th { |
||||
-webkit-box-sizing: content-box; |
||||
box-sizing: content-box; |
||||
} |
||||
table.dataTable td.dataTables_empty, |
||||
table.dataTable th.dataTables_empty { |
||||
text-align: center; |
||||
} |
||||
table.dataTable.nowrap th, |
||||
table.dataTable.nowrap td { |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
div.dataTables_wrapper div.dataTables_length label { |
||||
font-weight: normal; |
||||
text-align: left; |
||||
white-space: nowrap; |
||||
} |
||||
div.dataTables_wrapper div.dataTables_length select { |
||||
width: auto; |
||||
display: inline-block; |
||||
} |
||||
div.dataTables_wrapper div.dataTables_filter { |
||||
text-align: right; |
||||
} |
||||
div.dataTables_wrapper div.dataTables_filter label { |
||||
font-weight: normal; |
||||
white-space: nowrap; |
||||
text-align: left; |
||||
} |
||||
div.dataTables_wrapper div.dataTables_filter input { |
||||
margin-left: 0.5em; |
||||
display: inline-block; |
||||
width: auto; |
||||
} |
||||
div.dataTables_wrapper div.dataTables_info { |
||||
padding-top: 0.85em; |
||||
white-space: nowrap; |
||||
} |
||||
div.dataTables_wrapper div.dataTables_paginate { |
||||
margin: 0; |
||||
white-space: nowrap; |
||||
text-align: right; |
||||
} |
||||
div.dataTables_wrapper div.dataTables_paginate ul.pagination { |
||||
margin: 2px 0; |
||||
white-space: nowrap; |
||||
justify-content: flex-end; |
||||
} |
||||
div.dataTables_wrapper div.dataTables_processing { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
width: 200px; |
||||
margin-left: -100px; |
||||
margin-top: -26px; |
||||
text-align: center; |
||||
padding: 1em 0; |
||||
} |
||||
|
||||
table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting, |
||||
table.dataTable thead > tr > td.sorting_asc, |
||||
table.dataTable thead > tr > td.sorting_desc, |
||||
table.dataTable thead > tr > td.sorting { |
||||
padding-right: 30px; |
||||
} |
||||
table.dataTable thead > tr > th:active, |
||||
table.dataTable thead > tr > td:active { |
||||
outline: none; |
||||
} |
||||
table.dataTable thead .sorting, |
||||
table.dataTable thead .sorting_asc, |
||||
table.dataTable thead .sorting_desc, |
||||
table.dataTable thead .sorting_asc_disabled, |
||||
table.dataTable thead .sorting_desc_disabled { |
||||
cursor: pointer; |
||||
position: relative; |
||||
} |
||||
table.dataTable thead .sorting:before, table.dataTable thead .sorting:after, |
||||
table.dataTable thead .sorting_asc:before, |
||||
table.dataTable thead .sorting_asc:after, |
||||
table.dataTable thead .sorting_desc:before, |
||||
table.dataTable thead .sorting_desc:after, |
||||
table.dataTable thead .sorting_asc_disabled:before, |
||||
table.dataTable thead .sorting_asc_disabled:after, |
||||
table.dataTable thead .sorting_desc_disabled:before, |
||||
table.dataTable thead .sorting_desc_disabled:after { |
||||
position: absolute; |
||||
bottom: 0.9em; |
||||
display: block; |
||||
opacity: 0.3; |
||||
} |
||||
table.dataTable thead .sorting:before, |
||||
table.dataTable thead .sorting_asc:before, |
||||
table.dataTable thead .sorting_desc:before, |
||||
table.dataTable thead .sorting_asc_disabled:before, |
||||
table.dataTable thead .sorting_desc_disabled:before { |
||||
right: 1em; |
||||
content: "\2191"; |
||||
} |
||||
table.dataTable thead .sorting:after, |
||||
table.dataTable thead .sorting_asc:after, |
||||
table.dataTable thead .sorting_desc:after, |
||||
table.dataTable thead .sorting_asc_disabled:after, |
||||
table.dataTable thead .sorting_desc_disabled:after { |
||||
right: 0.5em; |
||||
content: "\2193"; |
||||
} |
||||
table.dataTable thead .sorting_asc:before, |
||||
table.dataTable thead .sorting_desc:after { |
||||
opacity: 1; |
||||
} |
||||
table.dataTable thead .sorting_asc_disabled:before, |
||||
table.dataTable thead .sorting_desc_disabled:after { |
||||
opacity: 0; |
||||
} |
||||
|
||||
div.dataTables_scrollHead table.dataTable { |
||||
margin-bottom: 0 !important; |
||||
} |
||||
|
||||
div.dataTables_scrollBody table { |
||||
border-top: none; |
||||
margin-top: 0 !important; |
||||
margin-bottom: 0 !important; |
||||
} |
||||
div.dataTables_scrollBody table thead .sorting:before, |
||||
div.dataTables_scrollBody table thead .sorting_asc:before, |
||||
div.dataTables_scrollBody table thead .sorting_desc:before, |
||||
div.dataTables_scrollBody table thead .sorting:after, |
||||
div.dataTables_scrollBody table thead .sorting_asc:after, |
||||
div.dataTables_scrollBody table thead .sorting_desc:after { |
||||
display: none; |
||||
} |
||||
div.dataTables_scrollBody table tbody tr:first-child th, |
||||
div.dataTables_scrollBody table tbody tr:first-child td { |
||||
border-top: none; |
||||
} |
||||
|
||||
div.dataTables_scrollFoot > .dataTables_scrollFootInner { |
||||
box-sizing: content-box; |
||||
} |
||||
div.dataTables_scrollFoot > .dataTables_scrollFootInner > table { |
||||
margin-top: 0 !important; |
||||
border-top: none; |
||||
} |
||||
|
||||
@media screen and (max-width: 767px) { |
||||
div.dataTables_wrapper div.dataTables_length, |
||||
div.dataTables_wrapper div.dataTables_filter, |
||||
div.dataTables_wrapper div.dataTables_info, |
||||
div.dataTables_wrapper div.dataTables_paginate { |
||||
text-align: center; |
||||
} |
||||
} |
||||
table.dataTable.table-sm > thead > tr > th { |
||||
padding-right: 20px; |
||||
} |
||||
table.dataTable.table-sm .sorting:before, |
||||
table.dataTable.table-sm .sorting_asc:before, |
||||
table.dataTable.table-sm .sorting_desc:before { |
||||
top: 5px; |
||||
right: 0.85em; |
||||
} |
||||
table.dataTable.table-sm .sorting:after, |
||||
table.dataTable.table-sm .sorting_asc:after, |
||||
table.dataTable.table-sm .sorting_desc:after { |
||||
top: 5px; |
||||
} |
||||
|
||||
table.table-bordered.dataTable th, |
||||
table.table-bordered.dataTable td { |
||||
border-left-width: 0; |
||||
} |
||||
table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable th:last-child, |
||||
table.table-bordered.dataTable td:last-child, |
||||
table.table-bordered.dataTable td:last-child { |
||||
border-right-width: 0; |
||||
} |
||||
table.table-bordered.dataTable tbody th, |
||||
table.table-bordered.dataTable tbody td { |
||||
border-bottom-width: 0; |
||||
} |
||||
|
||||
div.dataTables_scrollHead table.table-bordered { |
||||
border-bottom-width: 0; |
||||
} |
||||
|
||||
div.table-responsive > div.dataTables_wrapper > div.row { |
||||
margin: 0; |
||||
} |
||||
div.table-responsive > div.dataTables_wrapper > div.row > div[class^="col-"]:first-child { |
||||
padding-left: 0; |
||||
} |
||||
div.table-responsive > div.dataTables_wrapper > div.row > div[class^="col-"]:last-child { |
||||
padding-right: 0; |
||||
} |
||||
File diff suppressed because one or more lines are too long
File diff soppresso perché troppo grande
Load Diff
File diff soppresso perché troppo grande
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
Dopo Larghezza: | Altezza: | Dimensione: 160 B |
|
Dopo Larghezza: | Altezza: | Dimensione: 148 B |
|
Dopo Larghezza: | Altezza: | Dimensione: 201 B |
|
Dopo Larghezza: | Altezza: | Dimensione: 158 B |
|
Dopo Larghezza: | Altezza: | Dimensione: 146 B |
@ -0,0 +1,182 @@
|
||||
/*! DataTables Bootstrap 3 integration |
||||
* ©2011-2015 SpryMedia Ltd - datatables.net/license |
||||
*/ |
||||
|
||||
/** |
||||
* DataTables integration for Bootstrap 3. This requires Bootstrap 3 and |
||||
* DataTables 1.10 or newer. |
||||
* |
||||
* This file sets the defaults and adds options to DataTables to style its |
||||
* controls using Bootstrap. See http://datatables.net/manual/styling/bootstrap
|
||||
* for further information. |
||||
*/ |
||||
(function( factory ){ |
||||
if ( typeof define === 'function' && define.amd ) { |
||||
// AMD
|
||||
define( ['jquery', 'datatables.net'], function ( $ ) { |
||||
return factory( $, window, document ); |
||||
} ); |
||||
} |
||||
else if ( typeof exports === 'object' ) { |
||||
// CommonJS
|
||||
module.exports = function (root, $) { |
||||
if ( ! root ) { |
||||
root = window; |
||||
} |
||||
|
||||
if ( ! $ || ! $.fn.dataTable ) { |
||||
// Require DataTables, which attaches to jQuery, including
|
||||
// jQuery if needed and have a $ property so we can access the
|
||||
// jQuery object that is used
|
||||
$ = require('datatables.net')(root, $).$; |
||||
} |
||||
|
||||
return factory( $, root, root.document ); |
||||
}; |
||||
} |
||||
else { |
||||
// Browser
|
||||
factory( jQuery, window, document ); |
||||
} |
||||
}(function( $, window, document, undefined ) { |
||||
'use strict'; |
||||
var DataTable = $.fn.dataTable; |
||||
|
||||
|
||||
/* Set the defaults for DataTables initialisation */ |
||||
$.extend( true, DataTable.defaults, { |
||||
dom: |
||||
"<'row'<'col-sm-6'l><'col-sm-6'f>>" + |
||||
"<'row'<'col-sm-12'tr>>" + |
||||
"<'row'<'col-sm-5'i><'col-sm-7'p>>", |
||||
renderer: 'bootstrap' |
||||
} ); |
||||
|
||||
|
||||
/* Default class modification */ |
||||
$.extend( DataTable.ext.classes, { |
||||
sWrapper: "dataTables_wrapper form-inline dt-bootstrap", |
||||
sFilterInput: "form-control input-sm", |
||||
sLengthSelect: "form-control input-sm", |
||||
sProcessing: "dataTables_processing panel panel-default" |
||||
} ); |
||||
|
||||
|
||||
/* Bootstrap paging button renderer */ |
||||
DataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, buttons, page, pages ) { |
||||
var api = new DataTable.Api( settings ); |
||||
var classes = settings.oClasses; |
||||
var lang = settings.oLanguage.oPaginate; |
||||
var aria = settings.oLanguage.oAria.paginate || {}; |
||||
var btnDisplay, btnClass, counter=0; |
||||
|
||||
var attach = function( container, buttons ) { |
||||
var i, ien, node, button; |
||||
var clickHandler = function ( e ) { |
||||
e.preventDefault(); |
||||
if ( !$(e.currentTarget).hasClass('disabled') && api.page() != e.data.action ) { |
||||
api.page( e.data.action ).draw( 'page' ); |
||||
} |
||||
}; |
||||
|
||||
for ( i=0, ien=buttons.length ; i<ien ; i++ ) { |
||||
button = buttons[i]; |
||||
|
||||
if ( $.isArray( button ) ) { |
||||
attach( container, button ); |
||||
} |
||||
else { |
||||
btnDisplay = ''; |
||||
btnClass = ''; |
||||
|
||||
switch ( button ) { |
||||
case 'ellipsis': |
||||
btnDisplay = '…'; |
||||
btnClass = 'disabled'; |
||||
break; |
||||
|
||||
case 'first': |
||||
btnDisplay = lang.sFirst; |
||||
btnClass = button + (page > 0 ? |
||||
'' : ' disabled'); |
||||
break; |
||||
|
||||
case 'previous': |
||||
btnDisplay = lang.sPrevious; |
||||
btnClass = button + (page > 0 ? |
||||
'' : ' disabled'); |
||||
break; |
||||
|
||||
case 'next': |
||||
btnDisplay = lang.sNext; |
||||
btnClass = button + (page < pages-1 ? |
||||
'' : ' disabled'); |
||||
break; |
||||
|
||||
case 'last': |
||||
btnDisplay = lang.sLast; |
||||
btnClass = button + (page < pages-1 ? |
||||
'' : ' disabled'); |
||||
break; |
||||
|
||||
default: |
||||
btnDisplay = button + 1; |
||||
btnClass = page === button ? |
||||
'active' : ''; |
||||
break; |
||||
} |
||||
|
||||
if ( btnDisplay ) { |
||||
node = $('<li>', { |
||||
'class': classes.sPageButton+' '+btnClass, |
||||
'id': idx === 0 && typeof button === 'string' ? |
||||
settings.sTableId +'_'+ button : |
||||
null |
||||
} ) |
||||
.append( $('<a>', { |
||||
'href': '#', |
||||
'aria-controls': settings.sTableId, |
||||
'aria-label': aria[ button ], |
||||
'data-dt-idx': counter, |
||||
'tabindex': settings.iTabIndex |
||||
} ) |
||||
.html( btnDisplay ) |
||||
) |
||||
.appendTo( container ); |
||||
|
||||
settings.oApi._fnBindAction( |
||||
node, {action: button}, clickHandler |
||||
); |
||||
|
||||
counter++; |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
|
||||
// IE9 throws an 'unknown error' if document.activeElement is used
|
||||
// inside an iframe or frame.
|
||||
var activeEl; |
||||
|
||||
try { |
||||
// Because this approach is destroying and recreating the paging
|
||||
// elements, focus is lost on the select button which is bad for
|
||||
// accessibility. So we want to restore focus once the draw has
|
||||
// completed
|
||||
activeEl = $(host).find(document.activeElement).data('dt-idx'); |
||||
} |
||||
catch (e) {} |
||||
|
||||
attach( |
||||
$(host).empty().html('<ul class="pagination"/>').children('ul'), |
||||
buttons |
||||
); |
||||
|
||||
if ( activeEl !== undefined ) { |
||||
$(host).find( '[data-dt-idx='+activeEl+']' ).focus(); |
||||
} |
||||
}; |
||||
|
||||
|
||||
return DataTable; |
||||
})); |
||||
@ -0,0 +1,8 @@
|
||||
/*! |
||||
DataTables Bootstrap 3 integration |
||||
©2011-2015 SpryMedia Ltd - datatables.net/license |
||||
*/ |
||||
(function(b){"function"===typeof define&&define.amd?define(["jquery","datatables.net"],function(a){return b(a,window,document)}):"object"===typeof exports?module.exports=function(a,d){a||(a=window);if(!d||!d.fn.dataTable)d=require("datatables.net")(a,d).$;return b(d,a,a.document)}:b(jQuery,window,document)})(function(b,a,d,m){var f=b.fn.dataTable;b.extend(!0,f.defaults,{dom:"<'row'<'col-sm-6'l><'col-sm-6'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-5'i><'col-sm-7'p>>",renderer:"bootstrap"});b.extend(f.ext.classes, |
||||
{sWrapper:"dataTables_wrapper form-inline dt-bootstrap",sFilterInput:"form-control input-sm",sLengthSelect:"form-control input-sm",sProcessing:"dataTables_processing panel panel-default"});f.ext.renderer.pageButton.bootstrap=function(a,h,r,s,j,n){var o=new f.Api(a),t=a.oClasses,k=a.oLanguage.oPaginate,u=a.oLanguage.oAria.paginate||{},e,g,p=0,q=function(d,f){var l,h,i,c,m=function(a){a.preventDefault();!b(a.currentTarget).hasClass("disabled")&&o.page()!=a.data.action&&o.page(a.data.action).draw("page")}; |
||||
l=0;for(h=f.length;l<h;l++)if(c=f[l],b.isArray(c))q(d,c);else{g=e="";switch(c){case "ellipsis":e="…";g="disabled";break;case "first":e=k.sFirst;g=c+(0<j?"":" disabled");break;case "previous":e=k.sPrevious;g=c+(0<j?"":" disabled");break;case "next":e=k.sNext;g=c+(j<n-1?"":" disabled");break;case "last":e=k.sLast;g=c+(j<n-1?"":" disabled");break;default:e=c+1,g=j===c?"active":""}e&&(i=b("<li>",{"class":t.sPageButton+" "+g,id:0===r&&"string"===typeof c?a.sTableId+"_"+c:null}).append(b("<a>",{href:"#", |
||||
"aria-controls":a.sTableId,"aria-label":u[c],"data-dt-idx":p,tabindex:a.iTabIndex}).html(e)).appendTo(d),a.oApi._fnBindAction(i,{action:c},m),p++)}},i;try{i=b(h).find(d.activeElement).data("dt-idx")}catch(v){}q(b(h).empty().html('<ul class="pagination"/>').children("ul"),s);i!==m&&b(h).find("[data-dt-idx="+i+"]").focus()};return f}); |
||||
@ -0,0 +1,184 @@
|
||||
/*! DataTables Bootstrap 4 integration |
||||
* ©2011-2017 SpryMedia Ltd - datatables.net/license |
||||
*/ |
||||
|
||||
/** |
||||
* DataTables integration for Bootstrap 4. This requires Bootstrap 4 and |
||||
* DataTables 1.10 or newer. |
||||
* |
||||
* This file sets the defaults and adds options to DataTables to style its |
||||
* controls using Bootstrap. See http://datatables.net/manual/styling/bootstrap
|
||||
* for further information. |
||||
*/ |
||||
(function( factory ){ |
||||
if ( typeof define === 'function' && define.amd ) { |
||||
// AMD
|
||||
define( ['jquery', 'datatables.net'], function ( $ ) { |
||||
return factory( $, window, document ); |
||||
} ); |
||||
} |
||||
else if ( typeof exports === 'object' ) { |
||||
// CommonJS
|
||||
module.exports = function (root, $) { |
||||
if ( ! root ) { |
||||
root = window; |
||||
} |
||||
|
||||
if ( ! $ || ! $.fn.dataTable ) { |
||||
// Require DataTables, which attaches to jQuery, including
|
||||
// jQuery if needed and have a $ property so we can access the
|
||||
// jQuery object that is used
|
||||
$ = require('datatables.net')(root, $).$; |
||||
} |
||||
|
||||
return factory( $, root, root.document ); |
||||
}; |
||||
} |
||||
else { |
||||
// Browser
|
||||
factory( jQuery, window, document ); |
||||
} |
||||
}(function( $, window, document, undefined ) { |
||||
'use strict'; |
||||
var DataTable = $.fn.dataTable; |
||||
|
||||
|
||||
/* Set the defaults for DataTables initialisation */ |
||||
$.extend( true, DataTable.defaults, { |
||||
dom: |
||||
"<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" + |
||||
"<'row'<'col-sm-12'tr>>" + |
||||
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>", |
||||
renderer: 'bootstrap' |
||||
} ); |
||||
|
||||
|
||||
/* Default class modification */ |
||||
$.extend( DataTable.ext.classes, { |
||||
sWrapper: "dataTables_wrapper dt-bootstrap4", |
||||
sFilterInput: "form-control form-control-sm", |
||||
sLengthSelect: "custom-select custom-select-sm form-control form-control-sm", |
||||
sProcessing: "dataTables_processing card", |
||||
sPageButton: "paginate_button page-item" |
||||
} ); |
||||
|
||||
|
||||
/* Bootstrap paging button renderer */ |
||||
DataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, buttons, page, pages ) { |
||||
var api = new DataTable.Api( settings ); |
||||
var classes = settings.oClasses; |
||||
var lang = settings.oLanguage.oPaginate; |
||||
var aria = settings.oLanguage.oAria.paginate || {}; |
||||
var btnDisplay, btnClass, counter=0; |
||||
|
||||
var attach = function( container, buttons ) { |
||||
var i, ien, node, button; |
||||
var clickHandler = function ( e ) { |
||||
e.preventDefault(); |
||||
if ( !$(e.currentTarget).hasClass('disabled') && api.page() != e.data.action ) { |
||||
api.page( e.data.action ).draw( 'page' ); |
||||
} |
||||
}; |
||||
|
||||
for ( i=0, ien=buttons.length ; i<ien ; i++ ) { |
||||
button = buttons[i]; |
||||
|
||||
if ( $.isArray( button ) ) { |
||||
attach( container, button ); |
||||
} |
||||
else { |
||||
btnDisplay = ''; |
||||
btnClass = ''; |
||||
|
||||
switch ( button ) { |
||||
case 'ellipsis': |
||||
btnDisplay = '…'; |
||||
btnClass = 'disabled'; |
||||
break; |
||||
|
||||
case 'first': |
||||
btnDisplay = lang.sFirst; |
||||
btnClass = button + (page > 0 ? |
||||
'' : ' disabled'); |
||||
break; |
||||
|
||||
case 'previous': |
||||
btnDisplay = lang.sPrevious; |
||||
btnClass = button + (page > 0 ? |
||||
'' : ' disabled'); |
||||
break; |
||||
|
||||
case 'next': |
||||
btnDisplay = lang.sNext; |
||||
btnClass = button + (page < pages-1 ? |
||||
'' : ' disabled'); |
||||
break; |
||||
|
||||
case 'last': |
||||
btnDisplay = lang.sLast; |
||||
btnClass = button + (page < pages-1 ? |
||||
'' : ' disabled'); |
||||
break; |
||||
|
||||
default: |
||||
btnDisplay = button + 1; |
||||
btnClass = page === button ? |
||||
'active' : ''; |
||||
break; |
||||
} |
||||
|
||||
if ( btnDisplay ) { |
||||
node = $('<li>', { |
||||
'class': classes.sPageButton+' '+btnClass, |
||||
'id': idx === 0 && typeof button === 'string' ? |
||||
settings.sTableId +'_'+ button : |
||||
null |
||||
} ) |
||||
.append( $('<a>', { |
||||
'href': '#', |
||||
'aria-controls': settings.sTableId, |
||||
'aria-label': aria[ button ], |
||||
'data-dt-idx': counter, |
||||
'tabindex': settings.iTabIndex, |
||||
'class': 'page-link' |
||||
} ) |
||||
.html( btnDisplay ) |
||||
) |
||||
.appendTo( container ); |
||||
|
||||
settings.oApi._fnBindAction( |
||||
node, {action: button}, clickHandler |
||||
); |
||||
|
||||
counter++; |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
|
||||
// IE9 throws an 'unknown error' if document.activeElement is used
|
||||
// inside an iframe or frame.
|
||||
var activeEl; |
||||
|
||||
try { |
||||
// Because this approach is destroying and recreating the paging
|
||||
// elements, focus is lost on the select button which is bad for
|
||||
// accessibility. So we want to restore focus once the draw has
|
||||
// completed
|
||||
activeEl = $(host).find(document.activeElement).data('dt-idx'); |
||||
} |
||||
catch (e) {} |
||||
|
||||
attach( |
||||
$(host).empty().html('<ul class="pagination"/>').children('ul'), |
||||
buttons |
||||
); |
||||
|
||||
if ( activeEl !== undefined ) { |
||||
$(host).find( '[data-dt-idx='+activeEl+']' ).focus(); |
||||
} |
||||
}; |
||||
|
||||
|
||||
return DataTable; |
||||
})); |
||||
@ -0,0 +1,8 @@
|
||||
/*! |
||||
DataTables Bootstrap 4 integration |
||||
©2011-2017 SpryMedia Ltd - datatables.net/license |
||||
*/ |
||||
(function(b){"function"===typeof define&&define.amd?define(["jquery","datatables.net"],function(a){return b(a,window,document)}):"object"===typeof exports?module.exports=function(a,d){a||(a=window);if(!d||!d.fn.dataTable)d=require("datatables.net")(a,d).$;return b(d,a,a.document)}:b(jQuery,window,document)})(function(b,a,d,m){var f=b.fn.dataTable;b.extend(!0,f.defaults,{dom:"<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>", |
||||
renderer:"bootstrap"});b.extend(f.ext.classes,{sWrapper:"dataTables_wrapper dt-bootstrap4",sFilterInput:"form-control form-control-sm",sLengthSelect:"custom-select custom-select-sm form-control form-control-sm",sProcessing:"dataTables_processing card",sPageButton:"paginate_button page-item"});f.ext.renderer.pageButton.bootstrap=function(a,h,r,s,j,n){var o=new f.Api(a),t=a.oClasses,k=a.oLanguage.oPaginate,u=a.oLanguage.oAria.paginate||{},e,g,p=0,q=function(d,f){var l,h,i,c,m=function(a){a.preventDefault(); |
||||
!b(a.currentTarget).hasClass("disabled")&&o.page()!=a.data.action&&o.page(a.data.action).draw("page")};l=0;for(h=f.length;l<h;l++)if(c=f[l],b.isArray(c))q(d,c);else{g=e="";switch(c){case "ellipsis":e="…";g="disabled";break;case "first":e=k.sFirst;g=c+(0<j?"":" disabled");break;case "previous":e=k.sPrevious;g=c+(0<j?"":" disabled");break;case "next":e=k.sNext;g=c+(j<n-1?"":" disabled");break;case "last":e=k.sLast;g=c+(j<n-1?"":" disabled");break;default:e=c+1,g=j===c?"active":""}e&&(i=b("<li>", |
||||
{"class":t.sPageButton+" "+g,id:0===r&&"string"===typeof c?a.sTableId+"_"+c:null}).append(b("<a>",{href:"#","aria-controls":a.sTableId,"aria-label":u[c],"data-dt-idx":p,tabindex:a.iTabIndex,"class":"page-link"}).html(e)).appendTo(d),a.oApi._fnBindAction(i,{action:c},m),p++)}},i;try{i=b(h).find(d.activeElement).data("dt-idx")}catch(v){}q(b(h).empty().html('<ul class="pagination"/>').children("ul"),s);i!==m&&b(h).find("[data-dt-idx="+i+"]").focus()};return f}); |
||||
@ -0,0 +1,13 @@
|
||||
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE |
||||
Version 2, December 2004 |
||||
|
||||
Copyright (C) 2004 Sam Hocevar <sam@hocevar.net> |
||||
|
||||
Everyone is permitted to copy and distribute verbatim or modified |
||||
copies of this license document, and changing it is allowed as long |
||||
as the name is changed. |
||||
|
||||
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE |
||||
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION |
||||
|
||||
0. You just DO WHAT THE FUCK YOU WANT TO. |
||||
@ -0,0 +1,3 @@
|
||||
# jquery.multi-select.js |
||||
|
||||
Usage and Demos [http://loudev.com](http://loudev.com "jquery.multi-select.js") |
||||
@ -0,0 +1,101 @@
|
||||
.ms-container{ |
||||
background: transparent url('../img/switch.png') no-repeat 10% 10%; |
||||
background-color: red; |
||||
padding: 10px; |
||||
margin: 10px; |
||||
width: 700px; |
||||
} |
||||
|
||||
.ms-container:after{ |
||||
content: "."; |
||||
display: block; |
||||
height: 0; |
||||
line-height: 0; |
||||
font-size: 0; |
||||
clear: both; |
||||
min-height: 0; |
||||
visibility: hidden; |
||||
} |
||||
|
||||
.ms-container .ms-selectable, .ms-container .ms-selection{ |
||||
background: #fff; |
||||
color: #555555; |
||||
float: left; |
||||
width: 45%; |
||||
} |
||||
.ms-container .ms-selection{ |
||||
float: right; |
||||
} |
||||
|
||||
.ms-container .ms-list{ |
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); |
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); |
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); |
||||
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s; |
||||
-moz-transition: border linear 0.2s, box-shadow linear 0.2s; |
||||
-ms-transition: border linear 0.2s, box-shadow linear 0.2s; |
||||
-o-transition: border linear 0.2s, box-shadow linear 0.2s; |
||||
transition: border linear 0.2s, box-shadow linear 0.2s; |
||||
border: 1px solid #ccc; |
||||
-webkit-border-radius: 3px; |
||||
-moz-border-radius: 3px; |
||||
border-radius: 3px; |
||||
position: relative; |
||||
height: 300px; |
||||
padding: 0; |
||||
overflow-y: auto; |
||||
} |
||||
|
||||
.ms-container .ms-list.ms-focus{ |
||||
border-color: rgba(82, 168, 236, 0.8); |
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); |
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); |
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); |
||||
outline: 0; |
||||
outline: thin dotted \9; |
||||
} |
||||
|
||||
.ms-container ul{ |
||||
margin: 0; |
||||
list-style-type: none; |
||||
padding: 0; |
||||
} |
||||
|
||||
.ms-container .ms-optgroup-container{ |
||||
width: 100%; |
||||
} |
||||
|
||||
.ms-container .ms-optgroup-label{ |
||||
margin: 0; |
||||
padding: 5px 0px 0px 5px; |
||||
cursor: pointer; |
||||
color: #999; |
||||
} |
||||
|
||||
.ms-container .ms-selectable li.ms-elem-selectable, |
||||
.ms-container .ms-selection li.ms-elem-selection{ |
||||
border-bottom: 1px #eee solid; |
||||
padding: 2px 10px; |
||||
color: #555; |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.ms-container .ms-selectable li.ms-hover, |
||||
.ms-container .ms-selection li.ms-hover{ |
||||
cursor: pointer; |
||||
color: #fff; |
||||
text-decoration: none; |
||||
background-color: #08c; |
||||
} |
||||
|
||||
.ms-container .ms-selectable li.disabled, |
||||
.ms-container .ms-selection li.disabled{ |
||||
background-color: #eee; |
||||
color: #aaa; |
||||
cursor: text; |
||||
} |
||||
|
||||
.multi-select { |
||||
right: auto !important; |
||||
left: -9999px !important; |
||||
} |
||||
|
Dopo Larghezza: | Altezza: | Dimensione: 236 B |
|
Dopo Larghezza: | Altezza: | Dimensione: 3.0 KiB |
@ -0,0 +1,532 @@
|
||||
/* |
||||
* MultiSelect v0.9.11 |
||||
* Copyright (c) 2012 Louis Cuny |
||||
* |
||||
* This program is free software. It comes without any warranty, to |
||||
* the extent permitted by applicable law. You can redistribute it |
||||
* and/or modify it under the terms of the Do What The Fuck You Want |
||||
* To Public License, Version 2, as published by Sam Hocevar. See |
||||
* http://sam.zoy.org/wtfpl/COPYING for more details.
|
||||
*/ |
||||
|
||||
!function ($) { |
||||
|
||||
"use strict"; |
||||
|
||||
|
||||
/* MULTISELECT CLASS DEFINITION |
||||
* ====================== */ |
||||
|
||||
var MultiSelect = function (element, options) { |
||||
this.options = options; |
||||
this.$element = $(element); |
||||
this.$container = $('<div/>', { 'class': "ms-container" }); |
||||
this.$selectableContainer = $('<div/>', { 'class': 'ms-selectable' }); |
||||
this.$selectionContainer = $('<div/>', { 'class': 'ms-selection' }); |
||||
this.$selectableUl = $('<ul/>', { 'class': "ms-list", 'tabindex' : '-1' }); |
||||
this.$selectionUl = $('<ul/>', { 'class': "ms-list", 'tabindex' : '-1' }); |
||||
this.scrollTo = 0; |
||||
this.elemsSelector = 'li:visible:not(.ms-optgroup-label,.ms-optgroup-container,.'+options.disabledClass+')'; |
||||
}; |
||||
|
||||
MultiSelect.prototype = { |
||||
constructor: MultiSelect, |
||||
|
||||
init: function(){ |
||||
var that = this, |
||||
ms = this.$element; |
||||
|
||||
if (ms.next('.ms-container').length === 0){ |
||||
ms.css({ position: 'absolute', left: '-9999px' }); |
||||
ms.attr('id', ms.attr('id') ? ms.attr('id') : Math.ceil(Math.random()*1000)+'multiselect'); |
||||
this.$container.attr('id', 'ms-'+ms.attr('id')); |
||||
this.$container.addClass(that.options.cssClass); |
||||
ms.find('option').each(function(){ |
||||
that.generateLisFromOption(this); |
||||
}); |
||||
|
||||
this.$selectionUl.find('.ms-optgroup-label').hide(); |
||||
|
||||
if (that.options.selectableHeader){ |
||||
that.$selectableContainer.append(that.options.selectableHeader); |
||||
} |
||||
that.$selectableContainer.append(that.$selectableUl); |
||||
if (that.options.selectableFooter){ |
||||
that.$selectableContainer.append(that.options.selectableFooter); |
||||
} |
||||
|
||||
if (that.options.selectionHeader){ |
||||
that.$selectionContainer.append(that.options.selectionHeader); |
||||
} |
||||
that.$selectionContainer.append(that.$selectionUl); |
||||
if (that.options.selectionFooter){ |
||||
that.$selectionContainer.append(that.options.selectionFooter); |
||||
} |
||||
|
||||
that.$container.append(that.$selectableContainer); |
||||
that.$container.append(that.$selectionContainer); |
||||
ms.after(that.$container); |
||||
|
||||
that.activeMouse(that.$selectableUl); |
||||
that.activeKeyboard(that.$selectableUl); |
||||
|
||||
var action = that.options.dblClick ? 'dblclick' : 'click'; |
||||
|
||||
that.$selectableUl.on(action, '.ms-elem-selectable', function(){ |
||||
that.select($(this).data('ms-value')); |
||||
}); |
||||
that.$selectionUl.on(action, '.ms-elem-selection', function(){ |
||||
that.deselect($(this).data('ms-value')); |
||||
}); |
||||
|
||||
that.activeMouse(that.$selectionUl); |
||||
that.activeKeyboard(that.$selectionUl); |
||||
|
||||
ms.on('focus', function(){ |
||||
that.$selectableUl.focus(); |
||||
}) |
||||
} |
||||
|
||||
var selectedValues = ms.find('option:selected').map(function(){ return $(this).val(); }).get(); |
||||
that.select(selectedValues, 'init'); |
||||
|
||||
if (typeof that.options.afterInit === 'function') { |
||||
that.options.afterInit.call(this, this.$container); |
||||
} |
||||
}, |
||||
|
||||
'generateLisFromOption' : function(option, index, $container){ |
||||
var that = this, |
||||
ms = that.$element, |
||||
attributes = "", |
||||
$option = $(option); |
||||
|
||||
for (var cpt = 0; cpt < option.attributes.length; cpt++){ |
||||
var attr = option.attributes[cpt]; |
||||
|
||||
if(attr.name !== 'value' && attr.name !== 'disabled'){ |
||||
attributes += attr.name+'="'+attr.value+'" '; |
||||
} |
||||
} |
||||
var selectableLi = $('<li '+attributes+'><span>'+that.escapeHTML($option.text())+'</span></li>'), |
||||
selectedLi = selectableLi.clone(), |
||||
value = $option.val(), |
||||
elementId = that.sanitize(value); |
||||
|
||||
selectableLi |
||||
.data('ms-value', value) |
||||
.addClass('ms-elem-selectable') |
||||
.attr('id', elementId+'-selectable'); |
||||
|
||||
selectedLi |
||||
.data('ms-value', value) |
||||
.addClass('ms-elem-selection') |
||||
.attr('id', elementId+'-selection') |
||||
.hide(); |
||||
|
||||
if ($option.prop('disabled') || ms.prop('disabled')){ |
||||
selectedLi.addClass(that.options.disabledClass); |
||||
selectableLi.addClass(that.options.disabledClass); |
||||
} |
||||
|
||||
var $optgroup = $option.parent('optgroup'); |
||||
|
||||
if ($optgroup.length > 0){ |
||||
var optgroupLabel = $optgroup.attr('label'), |
||||
optgroupId = that.sanitize(optgroupLabel), |
||||
$selectableOptgroup = that.$selectableUl.find('#optgroup-selectable-'+optgroupId), |
||||
$selectionOptgroup = that.$selectionUl.find('#optgroup-selection-'+optgroupId); |
||||
|
||||
if ($selectableOptgroup.length === 0){ |
||||
var optgroupContainerTpl = '<li class="ms-optgroup-container"></li>', |
||||
optgroupTpl = '<ul class="ms-optgroup"><li class="ms-optgroup-label"><span>'+optgroupLabel+'</span></li></ul>'; |
||||
|
||||
$selectableOptgroup = $(optgroupContainerTpl); |
||||
$selectionOptgroup = $(optgroupContainerTpl); |
||||
$selectableOptgroup.attr('id', 'optgroup-selectable-'+optgroupId); |
||||
$selectionOptgroup.attr('id', 'optgroup-selection-'+optgroupId); |
||||
$selectableOptgroup.append($(optgroupTpl)); |
||||
$selectionOptgroup.append($(optgroupTpl)); |
||||
if (that.options.selectableOptgroup){ |
||||
$selectableOptgroup.find('.ms-optgroup-label').on('click', function(){ |
||||
var values = $optgroup.children(':not(:selected, :disabled)').map(function(){ return $(this).val() }).get(); |
||||
that.select(values); |
||||
}); |
||||
$selectionOptgroup.find('.ms-optgroup-label').on('click', function(){ |
||||
var values = $optgroup.children(':selected:not(:disabled)').map(function(){ return $(this).val() }).get(); |
||||
that.deselect(values); |
||||
}); |
||||
} |
||||
that.$selectableUl.append($selectableOptgroup); |
||||
that.$selectionUl.append($selectionOptgroup); |
||||
} |
||||
index = index == undefined ? $selectableOptgroup.find('ul').children().length : index + 1; |
||||
selectableLi.insertAt(index, $selectableOptgroup.children()); |
||||
selectedLi.insertAt(index, $selectionOptgroup.children()); |
||||
} else { |
||||
index = index == undefined ? that.$selectableUl.children().length : index; |
||||
|
||||
selectableLi.insertAt(index, that.$selectableUl); |
||||
selectedLi.insertAt(index, that.$selectionUl); |
||||
} |
||||
}, |
||||
|
||||
'addOption' : function(options){ |
||||
var that = this; |
||||
|
||||
if (options.value) options = [options]; |
||||
$.each(options, function(index, option){ |
||||
if (option.value && that.$element.find("option[value='"+option.value+"']").length === 0){ |
||||
var $option = $('<option value="'+option.value+'">'+option.text+'</option>'), |
||||
index = parseInt((typeof option.index === 'undefined' ? that.$element.children().length : option.index)), |
||||
$container = option.nested == undefined ? that.$element : $("optgroup[label='"+option.nested+"']") |
||||
|
||||
$option.insertAt(index, $container); |
||||
that.generateLisFromOption($option.get(0), index, option.nested); |
||||
} |
||||
}) |
||||
}, |
||||
|
||||
'escapeHTML' : function(text){ |
||||
return $("<div>").text(text).html(); |
||||
}, |
||||
|
||||
'activeKeyboard' : function($list){ |
||||
var that = this; |
||||
|
||||
$list.on('focus', function(){ |
||||
$(this).addClass('ms-focus'); |
||||
}) |
||||
.on('blur', function(){ |
||||
$(this).removeClass('ms-focus'); |
||||
}) |
||||
.on('keydown', function(e){ |
||||
switch (e.which) { |
||||
case 40: |
||||
case 38: |
||||
e.preventDefault(); |
||||
e.stopPropagation(); |
||||
that.moveHighlight($(this), (e.which === 38) ? -1 : 1); |
||||
return; |
||||
case 37: |
||||
case 39: |
||||
e.preventDefault(); |
||||
e.stopPropagation(); |
||||
that.switchList($list); |
||||
return; |
||||
case 9: |
||||
if(that.$element.is('[tabindex]')){ |
||||
e.preventDefault(); |
||||
var tabindex = parseInt(that.$element.attr('tabindex'), 10); |
||||
tabindex = (e.shiftKey) ? tabindex-1 : tabindex+1; |
||||
$('[tabindex="'+(tabindex)+'"]').focus(); |
||||
return; |
||||
}else{ |
||||
if(e.shiftKey){ |
||||
that.$element.trigger('focus'); |
||||
} |
||||
} |
||||
} |
||||
if($.inArray(e.which, that.options.keySelect) > -1){ |
||||
e.preventDefault(); |
||||
e.stopPropagation(); |
||||
that.selectHighlighted($list); |
||||
return; |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
'moveHighlight': function($list, direction){ |
||||
var $elems = $list.find(this.elemsSelector), |
||||
$currElem = $elems.filter('.ms-hover'), |
||||
$nextElem = null, |
||||
elemHeight = $elems.first().outerHeight(), |
||||
containerHeight = $list.height(), |
||||
containerSelector = '#'+this.$container.prop('id'); |
||||
|
||||
$elems.removeClass('ms-hover'); |
||||
if (direction === 1){ // DOWN
|
||||
|
||||
$nextElem = $currElem.nextAll(this.elemsSelector).first(); |
||||
if ($nextElem.length === 0){ |
||||
var $optgroupUl = $currElem.parent(); |
||||
|
||||
if ($optgroupUl.hasClass('ms-optgroup')){ |
||||
var $optgroupLi = $optgroupUl.parent(), |
||||
$nextOptgroupLi = $optgroupLi.next(':visible'); |
||||
|
||||
if ($nextOptgroupLi.length > 0){ |
||||
$nextElem = $nextOptgroupLi.find(this.elemsSelector).first(); |
||||
} else { |
||||
$nextElem = $elems.first(); |
||||
} |
||||
} else { |
||||
$nextElem = $elems.first(); |
||||
} |
||||
} |
||||
} else if (direction === -1){ // UP
|
||||
|
||||
$nextElem = $currElem.prevAll(this.elemsSelector).first(); |
||||
if ($nextElem.length === 0){ |
||||
var $optgroupUl = $currElem.parent(); |
||||
|
||||
if ($optgroupUl.hasClass('ms-optgroup')){ |
||||
var $optgroupLi = $optgroupUl.parent(), |
||||
$prevOptgroupLi = $optgroupLi.prev(':visible'); |
||||
|
||||
if ($prevOptgroupLi.length > 0){ |
||||
$nextElem = $prevOptgroupLi.find(this.elemsSelector).last(); |
||||
} else { |
||||
$nextElem = $elems.last(); |
||||
} |
||||
} else { |
||||
$nextElem = $elems.last(); |
||||
} |
||||
} |
||||
} |
||||
if ($nextElem.length > 0){ |
||||
$nextElem.addClass('ms-hover'); |
||||
var scrollTo = $list.scrollTop() + $nextElem.position().top -
|
||||
containerHeight / 2 + elemHeight / 2; |
||||
|
||||
$list.scrollTop(scrollTo); |
||||
} |
||||
}, |
||||
|
||||
'selectHighlighted' : function($list){ |
||||
var $elems = $list.find(this.elemsSelector), |
||||
$highlightedElem = $elems.filter('.ms-hover').first(); |
||||
|
||||
if ($highlightedElem.length > 0){ |
||||
if ($list.parent().hasClass('ms-selectable')){ |
||||
this.select($highlightedElem.data('ms-value')); |
||||
} else { |
||||
this.deselect($highlightedElem.data('ms-value')); |
||||
} |
||||
$elems.removeClass('ms-hover'); |
||||
} |
||||
}, |
||||
|
||||
'switchList' : function($list){ |
||||
$list.blur(); |
||||
this.$container.find(this.elemsSelector).removeClass('ms-hover'); |
||||
if ($list.parent().hasClass('ms-selectable')){ |
||||
this.$selectionUl.focus(); |
||||
} else { |
||||
this.$selectableUl.focus(); |
||||
} |
||||
}, |
||||
|
||||
'activeMouse' : function($list){ |
||||
var that = this; |
||||
|
||||
$('body').on('mouseenter', that.elemsSelector, function(){ |
||||
$(this).parents('.ms-container').find(that.elemsSelector).removeClass('ms-hover'); |
||||
$(this).addClass('ms-hover'); |
||||
}); |
||||
|
||||
$('body').on('mouseleave', that.elemsSelector, function () { |
||||
$(this).parents('.ms-container').find(that.elemsSelector).removeClass('ms-hover');; |
||||
}); |
||||
}, |
||||
|
||||
'refresh' : function() { |
||||
this.destroy(); |
||||
this.$element.multiSelect(this.options); |
||||
}, |
||||
|
||||
'destroy' : function(){ |
||||
$("#ms-"+this.$element.attr("id")).remove(); |
||||
this.$element.css('position', '').css('left', '') |
||||
this.$element.removeData('multiselect'); |
||||
}, |
||||
|
||||
'select' : function(value, method){ |
||||
if (typeof value === 'string'){ value = [value]; } |
||||
|
||||
var that = this, |
||||
ms = this.$element, |
||||
msIds = $.map(value, function(val){ return(that.sanitize(val)); }), |
||||
selectables = this.$selectableUl.find('#' + msIds.join('-selectable, #')+'-selectable').filter(':not(.'+that.options.disabledClass+')'), |
||||
selections = this.$selectionUl.find('#' + msIds.join('-selection, #') + '-selection').filter(':not(.'+that.options.disabledClass+')'), |
||||
options = ms.find('option:not(:disabled)').filter(function(){ return($.inArray(this.value, value) > -1); }); |
||||
|
||||
if (method === 'init'){ |
||||
selectables = this.$selectableUl.find('#' + msIds.join('-selectable, #')+'-selectable'), |
||||
selections = this.$selectionUl.find('#' + msIds.join('-selection, #') + '-selection'); |
||||
} |
||||
|
||||
if (selectables.length > 0){ |
||||
selectables.addClass('ms-selected').hide(); |
||||
selections.addClass('ms-selected').show(); |
||||
|
||||
options.prop('selected', true); |
||||
|
||||
that.$container.find(that.elemsSelector).removeClass('ms-hover'); |
||||
|
||||
var selectableOptgroups = that.$selectableUl.children('.ms-optgroup-container'); |
||||
if (selectableOptgroups.length > 0){ |
||||
selectableOptgroups.each(function(){ |
||||
var selectablesLi = $(this).find('.ms-elem-selectable'); |
||||
if (selectablesLi.length === selectablesLi.filter('.ms-selected').length){ |
||||
$(this).find('.ms-optgroup-label').hide(); |
||||
} |
||||
}); |
||||
|
||||
var selectionOptgroups = that.$selectionUl.children('.ms-optgroup-container'); |
||||
selectionOptgroups.each(function(){ |
||||
var selectionsLi = $(this).find('.ms-elem-selection'); |
||||
if (selectionsLi.filter('.ms-selected').length > 0){ |
||||
$(this).find('.ms-optgroup-label').show(); |
||||
} |
||||
}); |
||||
} else { |
||||
if (that.options.keepOrder && method !== 'init'){ |
||||
var selectionLiLast = that.$selectionUl.find('.ms-selected'); |
||||
if((selectionLiLast.length > 1) && (selectionLiLast.last().get(0) != selections.get(0))) { |
||||
selections.insertAfter(selectionLiLast.last()); |
||||
} |
||||
} |
||||
} |
||||
if (method !== 'init'){ |
||||
ms.trigger('change'); |
||||
if (typeof that.options.afterSelect === 'function') { |
||||
that.options.afterSelect.call(this, value); |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
|
||||
'deselect' : function(value){ |
||||
if (typeof value === 'string'){ value = [value]; } |
||||
|
||||
var that = this, |
||||
ms = this.$element, |
||||
msIds = $.map(value, function(val){ return(that.sanitize(val)); }), |
||||
selectables = this.$selectableUl.find('#' + msIds.join('-selectable, #')+'-selectable'), |
||||
selections = this.$selectionUl.find('#' + msIds.join('-selection, #')+'-selection').filter('.ms-selected').filter(':not(.'+that.options.disabledClass+')'), |
||||
options = ms.find('option').filter(function(){ return($.inArray(this.value, value) > -1); }); |
||||
|
||||
if (selections.length > 0){ |
||||
selectables.removeClass('ms-selected').show(); |
||||
selections.removeClass('ms-selected').hide(); |
||||
options.prop('selected', false); |
||||
|
||||
that.$container.find(that.elemsSelector).removeClass('ms-hover'); |
||||
|
||||
var selectableOptgroups = that.$selectableUl.children('.ms-optgroup-container'); |
||||
if (selectableOptgroups.length > 0){ |
||||
selectableOptgroups.each(function(){ |
||||
var selectablesLi = $(this).find('.ms-elem-selectable'); |
||||
if (selectablesLi.filter(':not(.ms-selected)').length > 0){ |
||||
$(this).find('.ms-optgroup-label').show(); |
||||
} |
||||
}); |
||||
|
||||
var selectionOptgroups = that.$selectionUl.children('.ms-optgroup-container'); |
||||
selectionOptgroups.each(function(){ |
||||
var selectionsLi = $(this).find('.ms-elem-selection'); |
||||
if (selectionsLi.filter('.ms-selected').length === 0){ |
||||
$(this).find('.ms-optgroup-label').hide(); |
||||
} |
||||
}); |
||||
} |
||||
ms.trigger('change'); |
||||
if (typeof that.options.afterDeselect === 'function') { |
||||
that.options.afterDeselect.call(this, value); |
||||
} |
||||
} |
||||
}, |
||||
|
||||
'select_all' : function(){ |
||||
var ms = this.$element, |
||||
values = ms.val(); |
||||
|
||||
ms.find('option:not(":disabled")').prop('selected', true); |
||||
this.$selectableUl.find('.ms-elem-selectable').filter(':not(.'+this.options.disabledClass+')').addClass('ms-selected').hide(); |
||||
this.$selectionUl.find('.ms-optgroup-label').show(); |
||||
this.$selectableUl.find('.ms-optgroup-label').hide(); |
||||
this.$selectionUl.find('.ms-elem-selection').filter(':not(.'+this.options.disabledClass+')').addClass('ms-selected').show(); |
||||
this.$selectionUl.focus(); |
||||
ms.trigger('change'); |
||||
if (typeof this.options.afterSelect === 'function') { |
||||
var selectedValues = $.grep(ms.val(), function(item){ |
||||
return $.inArray(item, values) < 0; |
||||
}); |
||||
this.options.afterSelect.call(this, selectedValues); |
||||
} |
||||
}, |
||||
|
||||
'deselect_all' : function(){ |
||||
var ms = this.$element, |
||||
values = ms.val(); |
||||
|
||||
ms.find('option').prop('selected', false); |
||||
this.$selectableUl.find('.ms-elem-selectable').removeClass('ms-selected').show(); |
||||
this.$selectionUl.find('.ms-optgroup-label').hide(); |
||||
this.$selectableUl.find('.ms-optgroup-label').show(); |
||||
this.$selectionUl.find('.ms-elem-selection').removeClass('ms-selected').hide(); |
||||
this.$selectableUl.focus(); |
||||
ms.trigger('change'); |
||||
if (typeof this.options.afterDeselect === 'function') { |
||||
this.options.afterDeselect.call(this, values); |
||||
} |
||||
}, |
||||
|
||||
sanitize: function(value){ |
||||
var hash = 0, i, character; |
||||
if (value.length == 0) return hash; |
||||
var ls = 0; |
||||
for (i = 0, ls = value.length; i < ls; i++) { |
||||
character = value.charCodeAt(i); |
||||
hash = ((hash<<5)-hash)+character; |
||||
hash |= 0; // Convert to 32bit integer
|
||||
} |
||||
return hash; |
||||
} |
||||
}; |
||||
|
||||
/* MULTISELECT PLUGIN DEFINITION |
||||
* ======================= */ |
||||
|
||||
$.fn.multiSelect = function () { |
||||
var option = arguments[0], |
||||
args = arguments; |
||||
|
||||
return this.each(function () { |
||||
var $this = $(this), |
||||
data = $this.data('multiselect'), |
||||
options = $.extend({}, $.fn.multiSelect.defaults, $this.data(), typeof option === 'object' && option); |
||||
|
||||
if (!data){ $this.data('multiselect', (data = new MultiSelect(this, options))); } |
||||
|
||||
if (typeof option === 'string'){ |
||||
data[option](args[1]); |
||||
} else { |
||||
data.init(); |
||||
} |
||||
}); |
||||
}; |
||||
|
||||
$.fn.multiSelect.defaults = { |
||||
keySelect: [32], |
||||
selectableOptgroup: false, |
||||
disabledClass : 'disabled', |
||||
dblClick : false, |
||||
keepOrder: false, |
||||
cssClass: '' |
||||
}; |
||||
|
||||
$.fn.multiSelect.Constructor = MultiSelect; |
||||
|
||||
$.fn.insertAt = function(index, $parent) { |
||||
return this.each(function() { |
||||
if (index === 0) { |
||||
$parent.prepend(this); |
||||
} else { |
||||
$parent.children().eq(index - 1).after(this); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
}(window.jQuery); |
||||
File diff suppressed because one or more lines are too long
|
Dopo Larghezza: | Altezza: | Dimensione: 1.2 KiB |
|
Dopo Larghezza: | Altezza: | Dimensione: 696 B |
|
Dopo Larghezza: | Altezza: | Dimensione: 2.4 KiB |
|
Dopo Larghezza: | Altezza: | Dimensione: 1.4 KiB |
|
Dopo Larghezza: | Altezza: | Dimensione: 618 B |
File diff soppresso perché troppo grande
Load Diff
File diff suppressed because one or more lines are too long
File diff soppresso perché troppo grande
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,635 @@
|
||||
/* required styles */ |
||||
|
||||
.leaflet-pane, |
||||
.leaflet-tile, |
||||
.leaflet-marker-icon, |
||||
.leaflet-marker-shadow, |
||||
.leaflet-tile-container, |
||||
.leaflet-pane > svg, |
||||
.leaflet-pane > canvas, |
||||
.leaflet-zoom-box, |
||||
.leaflet-image-layer, |
||||
.leaflet-layer { |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
} |
||||
.leaflet-container { |
||||
overflow: hidden; |
||||
} |
||||
.leaflet-tile, |
||||
.leaflet-marker-icon, |
||||
.leaflet-marker-shadow { |
||||
-webkit-user-select: none; |
||||
-moz-user-select: none; |
||||
user-select: none; |
||||
-webkit-user-drag: none; |
||||
} |
||||
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */ |
||||
.leaflet-safari .leaflet-tile { |
||||
image-rendering: -webkit-optimize-contrast; |
||||
} |
||||
/* hack that prevents hw layers "stretching" when loading new tiles */ |
||||
.leaflet-safari .leaflet-tile-container { |
||||
width: 1600px; |
||||
height: 1600px; |
||||
-webkit-transform-origin: 0 0; |
||||
} |
||||
.leaflet-marker-icon, |
||||
.leaflet-marker-shadow { |
||||
display: block; |
||||
} |
||||
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */ |
||||
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */ |
||||
.leaflet-container .leaflet-overlay-pane svg, |
||||
.leaflet-container .leaflet-marker-pane img, |
||||
.leaflet-container .leaflet-shadow-pane img, |
||||
.leaflet-container .leaflet-tile-pane img, |
||||
.leaflet-container img.leaflet-image-layer, |
||||
.leaflet-container .leaflet-tile { |
||||
max-width: none !important; |
||||
max-height: none !important; |
||||
} |
||||
|
||||
.leaflet-container.leaflet-touch-zoom { |
||||
-ms-touch-action: pan-x pan-y; |
||||
touch-action: pan-x pan-y; |
||||
} |
||||
.leaflet-container.leaflet-touch-drag { |
||||
-ms-touch-action: pinch-zoom; |
||||
/* Fallback for FF which doesn't support pinch-zoom */ |
||||
touch-action: none; |
||||
touch-action: pinch-zoom; |
||||
} |
||||
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom { |
||||
-ms-touch-action: none; |
||||
touch-action: none; |
||||
} |
||||
.leaflet-container { |
||||
-webkit-tap-highlight-color: transparent; |
||||
} |
||||
.leaflet-container a { |
||||
-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4); |
||||
} |
||||
.leaflet-tile { |
||||
filter: inherit; |
||||
visibility: hidden; |
||||
} |
||||
.leaflet-tile-loaded { |
||||
visibility: inherit; |
||||
} |
||||
.leaflet-zoom-box { |
||||
width: 0; |
||||
height: 0; |
||||
-moz-box-sizing: border-box; |
||||
box-sizing: border-box; |
||||
z-index: 800; |
||||
} |
||||
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */ |
||||
.leaflet-overlay-pane svg { |
||||
-moz-user-select: none; |
||||
} |
||||
|
||||
.leaflet-pane { z-index: 400; } |
||||
|
||||
.leaflet-tile-pane { z-index: 200; } |
||||
.leaflet-overlay-pane { z-index: 400; } |
||||
.leaflet-shadow-pane { z-index: 500; } |
||||
.leaflet-marker-pane { z-index: 600; } |
||||
.leaflet-tooltip-pane { z-index: 650; } |
||||
.leaflet-popup-pane { z-index: 700; } |
||||
|
||||
.leaflet-map-pane canvas { z-index: 100; } |
||||
.leaflet-map-pane svg { z-index: 200; } |
||||
|
||||
.leaflet-vml-shape { |
||||
width: 1px; |
||||
height: 1px; |
||||
} |
||||
.lvml { |
||||
behavior: url(#default#VML); |
||||
display: inline-block; |
||||
position: absolute; |
||||
} |
||||
|
||||
|
||||
/* control positioning */ |
||||
|
||||
.leaflet-control { |
||||
position: relative; |
||||
z-index: 800; |
||||
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */ |
||||
pointer-events: auto; |
||||
} |
||||
.leaflet-top, |
||||
.leaflet-bottom { |
||||
position: absolute; |
||||
z-index: 1000; |
||||
pointer-events: none; |
||||
} |
||||
.leaflet-top { |
||||
top: 0; |
||||
} |
||||
.leaflet-right { |
||||
right: 0; |
||||
} |
||||
.leaflet-bottom { |
||||
bottom: 0; |
||||
} |
||||
.leaflet-left { |
||||
left: 0; |
||||
} |
||||
.leaflet-control { |
||||
float: left; |
||||
clear: both; |
||||
} |
||||
.leaflet-right .leaflet-control { |
||||
float: right; |
||||
} |
||||
.leaflet-top .leaflet-control { |
||||
margin-top: 10px; |
||||
} |
||||
.leaflet-bottom .leaflet-control { |
||||
margin-bottom: 10px; |
||||
} |
||||
.leaflet-left .leaflet-control { |
||||
margin-left: 10px; |
||||
} |
||||
.leaflet-right .leaflet-control { |
||||
margin-right: 10px; |
||||
} |
||||
|
||||
|
||||
/* zoom and fade animations */ |
||||
|
||||
.leaflet-fade-anim .leaflet-tile { |
||||
will-change: opacity; |
||||
} |
||||
.leaflet-fade-anim .leaflet-popup { |
||||
opacity: 0; |
||||
-webkit-transition: opacity 0.2s linear; |
||||
-moz-transition: opacity 0.2s linear; |
||||
transition: opacity 0.2s linear; |
||||
} |
||||
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup { |
||||
opacity: 1; |
||||
} |
||||
.leaflet-zoom-animated { |
||||
-webkit-transform-origin: 0 0; |
||||
-ms-transform-origin: 0 0; |
||||
transform-origin: 0 0; |
||||
} |
||||
.leaflet-zoom-anim .leaflet-zoom-animated { |
||||
will-change: transform; |
||||
} |
||||
.leaflet-zoom-anim .leaflet-zoom-animated { |
||||
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1); |
||||
-moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1); |
||||
transition: transform 0.25s cubic-bezier(0,0,0.25,1); |
||||
} |
||||
.leaflet-zoom-anim .leaflet-tile, |
||||
.leaflet-pan-anim .leaflet-tile { |
||||
-webkit-transition: none; |
||||
-moz-transition: none; |
||||
transition: none; |
||||
} |
||||
|
||||
.leaflet-zoom-anim .leaflet-zoom-hide { |
||||
visibility: hidden; |
||||
} |
||||
|
||||
|
||||
/* cursors */ |
||||
|
||||
.leaflet-interactive { |
||||
cursor: pointer; |
||||
} |
||||
.leaflet-grab { |
||||
cursor: -webkit-grab; |
||||
cursor: -moz-grab; |
||||
cursor: grab; |
||||
} |
||||
.leaflet-crosshair, |
||||
.leaflet-crosshair .leaflet-interactive { |
||||
cursor: crosshair; |
||||
} |
||||
.leaflet-popup-pane, |
||||
.leaflet-control { |
||||
cursor: auto; |
||||
} |
||||
.leaflet-dragging .leaflet-grab, |
||||
.leaflet-dragging .leaflet-grab .leaflet-interactive, |
||||
.leaflet-dragging .leaflet-marker-draggable { |
||||
cursor: move; |
||||
cursor: -webkit-grabbing; |
||||
cursor: -moz-grabbing; |
||||
cursor: grabbing; |
||||
} |
||||
|
||||
/* marker & overlays interactivity */ |
||||
.leaflet-marker-icon, |
||||
.leaflet-marker-shadow, |
||||
.leaflet-image-layer, |
||||
.leaflet-pane > svg path, |
||||
.leaflet-tile-container { |
||||
pointer-events: none; |
||||
} |
||||
|
||||
.leaflet-marker-icon.leaflet-interactive, |
||||
.leaflet-image-layer.leaflet-interactive, |
||||
.leaflet-pane > svg path.leaflet-interactive { |
||||
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */ |
||||
pointer-events: auto; |
||||
} |
||||
|
||||
/* visual tweaks */ |
||||
|
||||
.leaflet-container { |
||||
background: #ddd; |
||||
outline: 0; |
||||
} |
||||
.leaflet-container a { |
||||
color: #0078A8; |
||||
} |
||||
.leaflet-container a.leaflet-active { |
||||
outline: 2px solid orange; |
||||
} |
||||
.leaflet-zoom-box { |
||||
border: 2px dotted #38f; |
||||
background: rgba(255,255,255,0.5); |
||||
} |
||||
|
||||
|
||||
/* general typography */ |
||||
.leaflet-container { |
||||
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; |
||||
} |
||||
|
||||
|
||||
/* general toolbar styles */ |
||||
|
||||
.leaflet-bar { |
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.65); |
||||
border-radius: 4px; |
||||
} |
||||
.leaflet-bar a, |
||||
.leaflet-bar a:hover { |
||||
background-color: #fff; |
||||
border-bottom: 1px solid #ccc; |
||||
width: 26px; |
||||
height: 26px; |
||||
line-height: 26px; |
||||
display: block; |
||||
text-align: center; |
||||
text-decoration: none; |
||||
color: black; |
||||
} |
||||
.leaflet-bar a, |
||||
.leaflet-control-layers-toggle { |
||||
background-position: 50% 50%; |
||||
background-repeat: no-repeat; |
||||
display: block; |
||||
} |
||||
.leaflet-bar a:hover { |
||||
background-color: #f4f4f4; |
||||
} |
||||
.leaflet-bar a:first-child { |
||||
border-top-left-radius: 4px; |
||||
border-top-right-radius: 4px; |
||||
} |
||||
.leaflet-bar a:last-child { |
||||
border-bottom-left-radius: 4px; |
||||
border-bottom-right-radius: 4px; |
||||
border-bottom: none; |
||||
} |
||||
.leaflet-bar a.leaflet-disabled { |
||||
cursor: default; |
||||
background-color: #f4f4f4; |
||||
color: #bbb; |
||||
} |
||||
|
||||
.leaflet-touch .leaflet-bar a { |
||||
width: 30px; |
||||
height: 30px; |
||||
line-height: 30px; |
||||
} |
||||
.leaflet-touch .leaflet-bar a:first-child { |
||||
border-top-left-radius: 2px; |
||||
border-top-right-radius: 2px; |
||||
} |
||||
.leaflet-touch .leaflet-bar a:last-child { |
||||
border-bottom-left-radius: 2px; |
||||
border-bottom-right-radius: 2px; |
||||
} |
||||
|
||||
/* zoom control */ |
||||
|
||||
.leaflet-control-zoom-in, |
||||
.leaflet-control-zoom-out { |
||||
font: bold 18px 'Lucida Console', Monaco, monospace; |
||||
text-indent: 1px; |
||||
} |
||||
|
||||
.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out { |
||||
font-size: 22px; |
||||
} |
||||
|
||||
|
||||
/* layers control */ |
||||
|
||||
.leaflet-control-layers { |
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.4); |
||||
background: #fff; |
||||
border-radius: 5px; |
||||
} |
||||
.leaflet-control-layers-toggle { |
||||
background-image: url(images/layers.png); |
||||
width: 36px; |
||||
height: 36px; |
||||
} |
||||
.leaflet-retina .leaflet-control-layers-toggle { |
||||
background-image: url(images/layers-2x.png); |
||||
background-size: 26px 26px; |
||||
} |
||||
.leaflet-touch .leaflet-control-layers-toggle { |
||||
width: 44px; |
||||
height: 44px; |
||||
} |
||||
.leaflet-control-layers .leaflet-control-layers-list, |
||||
.leaflet-control-layers-expanded .leaflet-control-layers-toggle { |
||||
display: none; |
||||
} |
||||
.leaflet-control-layers-expanded .leaflet-control-layers-list { |
||||
display: block; |
||||
position: relative; |
||||
} |
||||
.leaflet-control-layers-expanded { |
||||
padding: 6px 10px 6px 6px; |
||||
color: #333; |
||||
background: #fff; |
||||
} |
||||
.leaflet-control-layers-scrollbar { |
||||
overflow-y: scroll; |
||||
overflow-x: hidden; |
||||
padding-right: 5px; |
||||
} |
||||
.leaflet-control-layers-selector { |
||||
margin-top: 2px; |
||||
position: relative; |
||||
top: 1px; |
||||
} |
||||
.leaflet-control-layers label { |
||||
display: block; |
||||
} |
||||
.leaflet-control-layers-separator { |
||||
height: 0; |
||||
border-top: 1px solid #ddd; |
||||
margin: 5px -10px 5px -6px; |
||||
} |
||||
|
||||
/* Default icon URLs */ |
||||
.leaflet-default-icon-path { |
||||
background-image: url(images/marker-icon.png); |
||||
} |
||||
|
||||
|
||||
/* attribution and scale controls */ |
||||
|
||||
.leaflet-container .leaflet-control-attribution { |
||||
background: #fff; |
||||
background: rgba(255, 255, 255, 0.7); |
||||
margin: 0; |
||||
} |
||||
.leaflet-control-attribution, |
||||
.leaflet-control-scale-line { |
||||
padding: 0 5px; |
||||
color: #333; |
||||
} |
||||
.leaflet-control-attribution a { |
||||
text-decoration: none; |
||||
} |
||||
.leaflet-control-attribution a:hover { |
||||
text-decoration: underline; |
||||
} |
||||
.leaflet-container .leaflet-control-attribution, |
||||
.leaflet-container .leaflet-control-scale { |
||||
font-size: 11px; |
||||
} |
||||
.leaflet-left .leaflet-control-scale { |
||||
margin-left: 5px; |
||||
} |
||||
.leaflet-bottom .leaflet-control-scale { |
||||
margin-bottom: 5px; |
||||
} |
||||
.leaflet-control-scale-line { |
||||
border: 2px solid #777; |
||||
border-top: none; |
||||
line-height: 1.1; |
||||
padding: 2px 5px 1px; |
||||
font-size: 11px; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
-moz-box-sizing: border-box; |
||||
box-sizing: border-box; |
||||
|
||||
background: #fff; |
||||
background: rgba(255, 255, 255, 0.5); |
||||
} |
||||
.leaflet-control-scale-line:not(:first-child) { |
||||
border-top: 2px solid #777; |
||||
border-bottom: none; |
||||
margin-top: -2px; |
||||
} |
||||
.leaflet-control-scale-line:not(:first-child):not(:last-child) { |
||||
border-bottom: 2px solid #777; |
||||
} |
||||
|
||||
.leaflet-touch .leaflet-control-attribution, |
||||
.leaflet-touch .leaflet-control-layers, |
||||
.leaflet-touch .leaflet-bar { |
||||
box-shadow: none; |
||||
} |
||||
.leaflet-touch .leaflet-control-layers, |
||||
.leaflet-touch .leaflet-bar { |
||||
border: 2px solid rgba(0,0,0,0.2); |
||||
background-clip: padding-box; |
||||
} |
||||
|
||||
|
||||
/* popup */ |
||||
|
||||
.leaflet-popup { |
||||
position: absolute; |
||||
text-align: center; |
||||
margin-bottom: 20px; |
||||
} |
||||
.leaflet-popup-content-wrapper { |
||||
padding: 1px; |
||||
text-align: left; |
||||
border-radius: 12px; |
||||
} |
||||
.leaflet-popup-content { |
||||
margin: 13px 19px; |
||||
line-height: 1.4; |
||||
} |
||||
.leaflet-popup-content p { |
||||
margin: 18px 0; |
||||
} |
||||
.leaflet-popup-tip-container { |
||||
width: 40px; |
||||
height: 20px; |
||||
position: absolute; |
||||
left: 50%; |
||||
margin-left: -20px; |
||||
overflow: hidden; |
||||
pointer-events: none; |
||||
} |
||||
.leaflet-popup-tip { |
||||
width: 17px; |
||||
height: 17px; |
||||
padding: 1px; |
||||
|
||||
margin: -10px auto 0; |
||||
|
||||
-webkit-transform: rotate(45deg); |
||||
-moz-transform: rotate(45deg); |
||||
-ms-transform: rotate(45deg); |
||||
transform: rotate(45deg); |
||||
} |
||||
.leaflet-popup-content-wrapper, |
||||
.leaflet-popup-tip { |
||||
background: white; |
||||
color: #333; |
||||
box-shadow: 0 3px 14px rgba(0,0,0,0.4); |
||||
} |
||||
.leaflet-container a.leaflet-popup-close-button { |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
padding: 4px 4px 0 0; |
||||
border: none; |
||||
text-align: center; |
||||
width: 18px; |
||||
height: 14px; |
||||
font: 16px/14px Tahoma, Verdana, sans-serif; |
||||
color: #c3c3c3; |
||||
text-decoration: none; |
||||
font-weight: bold; |
||||
background: transparent; |
||||
} |
||||
.leaflet-container a.leaflet-popup-close-button:hover { |
||||
color: #999; |
||||
} |
||||
.leaflet-popup-scrolled { |
||||
overflow: auto; |
||||
border-bottom: 1px solid #ddd; |
||||
border-top: 1px solid #ddd; |
||||
} |
||||
|
||||
.leaflet-oldie .leaflet-popup-content-wrapper { |
||||
zoom: 1; |
||||
} |
||||
.leaflet-oldie .leaflet-popup-tip { |
||||
width: 24px; |
||||
margin: 0 auto; |
||||
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)"; |
||||
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678); |
||||
} |
||||
.leaflet-oldie .leaflet-popup-tip-container { |
||||
margin-top: -1px; |
||||
} |
||||
|
||||
.leaflet-oldie .leaflet-control-zoom, |
||||
.leaflet-oldie .leaflet-control-layers, |
||||
.leaflet-oldie .leaflet-popup-content-wrapper, |
||||
.leaflet-oldie .leaflet-popup-tip { |
||||
border: 1px solid #999; |
||||
} |
||||
|
||||
|
||||
/* div icon */ |
||||
|
||||
.leaflet-div-icon { |
||||
background: #fff; |
||||
border: 1px solid #666; |
||||
} |
||||
|
||||
|
||||
/* Tooltip */ |
||||
/* Base styles for the element that has a tooltip */ |
||||
.leaflet-tooltip { |
||||
position: absolute; |
||||
padding: 6px; |
||||
background-color: #fff; |
||||
border: 1px solid #fff; |
||||
border-radius: 3px; |
||||
color: #222; |
||||
white-space: nowrap; |
||||
-webkit-user-select: none; |
||||
-moz-user-select: none; |
||||
-ms-user-select: none; |
||||
user-select: none; |
||||
pointer-events: none; |
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.4); |
||||
} |
||||
.leaflet-tooltip.leaflet-clickable { |
||||
cursor: pointer; |
||||
pointer-events: auto; |
||||
} |
||||
.leaflet-tooltip-top:before, |
||||
.leaflet-tooltip-bottom:before, |
||||
.leaflet-tooltip-left:before, |
||||
.leaflet-tooltip-right:before { |
||||
position: absolute; |
||||
pointer-events: none; |
||||
border: 6px solid transparent; |
||||
background: transparent; |
||||
content: ""; |
||||
} |
||||
|
||||
/* Directions */ |
||||
|
||||
.leaflet-tooltip-bottom { |
||||
margin-top: 6px; |
||||
} |
||||
.leaflet-tooltip-top { |
||||
margin-top: -6px; |
||||
} |
||||
.leaflet-tooltip-bottom:before, |
||||
.leaflet-tooltip-top:before { |
||||
left: 50%; |
||||
margin-left: -6px; |
||||
} |
||||
.leaflet-tooltip-top:before { |
||||
bottom: 0; |
||||
margin-bottom: -12px; |
||||
border-top-color: #fff; |
||||
} |
||||
.leaflet-tooltip-bottom:before { |
||||
top: 0; |
||||
margin-top: -12px; |
||||
margin-left: -6px; |
||||
border-bottom-color: #fff; |
||||
} |
||||
.leaflet-tooltip-left { |
||||
margin-left: -6px; |
||||
} |
||||
.leaflet-tooltip-right { |
||||
margin-left: 6px; |
||||
} |
||||
.leaflet-tooltip-left:before, |
||||
.leaflet-tooltip-right:before { |
||||
top: 50%; |
||||
margin-top: -6px; |
||||
} |
||||
.leaflet-tooltip-left:before { |
||||
right: 0; |
||||
margin-right: -12px; |
||||
border-left-color: #fff; |
||||
} |
||||
.leaflet-tooltip-right:before { |
||||
left: 0; |
||||
margin-left: -12px; |
||||
border-right-color: #fff; |
||||
} |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,231 @@
|
||||
L.LabelTextCollision = L.Canvas |
||||
.extend({ |
||||
|
||||
options : { |
||||
/** |
||||
* Collision detection |
||||
*/ |
||||
collisionFlg : true |
||||
}, |
||||
|
||||
initialize : function(options) { |
||||
options = L.Util.setOptions(this, options); |
||||
}, |
||||
|
||||
_handleMouseHover : function(e, point) { |
||||
var id, layer; |
||||
|
||||
for (id in this._drawnLayers) { |
||||
layer = this._drawnLayers[id]; |
||||
if (layer.options.interactive |
||||
&& layer._containsPoint(point)) { |
||||
L.DomUtil.addClass(this._containerText, |
||||
'leaflet-interactive'); // change cursor
|
||||
this._fireEvent([ layer ], e, 'mouseover'); |
||||
this._hoveredLayer = layer; |
||||
} |
||||
} |
||||
|
||||
if (this._hoveredLayer) { |
||||
this._fireEvent([ this._hoveredLayer ], e); |
||||
} |
||||
}, |
||||
|
||||
_handleMouseOut : function(e, point) { |
||||
var layer = this._hoveredLayer; |
||||
if (layer |
||||
&& (e.type === 'mouseout' || !layer |
||||
._containsPoint(point))) { |
||||
// if we're leaving the layer, fire mouseout
|
||||
L.DomUtil.removeClass(this._containerText, |
||||
'leaflet-interactive'); |
||||
this._fireEvent([ layer ], e, 'mouseout'); |
||||
this._hoveredLayer = null; |
||||
} |
||||
}, |
||||
|
||||
_updateTransform : function(center, zoom) { |
||||
|
||||
L.Canvas.prototype._updateTransform.call(this, center, zoom); |
||||
|
||||
var scale = this._map.getZoomScale(zoom, this._zoom), position = L.DomUtil |
||||
.getPosition(this._container), viewHalf = this._map |
||||
.getSize().multiplyBy(0.5 + this.options.padding), currentCenterPoint = this._map |
||||
.project(this._center, zoom), destCenterPoint = this._map |
||||
.project(center, zoom), centerOffset = destCenterPoint |
||||
.subtract(currentCenterPoint), |
||||
|
||||
topLeftOffset = viewHalf.multiplyBy(-scale).add(position).add( |
||||
viewHalf).subtract(centerOffset); |
||||
|
||||
if (L.Browser.any3d) { |
||||
L.DomUtil.setTransform(this._containerText, topLeftOffset, |
||||
scale); |
||||
} else { |
||||
L.DomUtil.setPosition(this._containerText, topLeftOffset); |
||||
} |
||||
}, |
||||
_initContainer : function(options) { |
||||
L.Canvas.prototype._initContainer.call(this); |
||||
|
||||
this._containerText = document.createElement('canvas'); |
||||
|
||||
L.DomEvent.on(this._containerText, 'mousemove', |
||||
L.Util.throttle(this._onMouseMove, 32, this), this).on( |
||||
this._containerText, |
||||
'click dblclick mousedown mouseup contextmenu', |
||||
this._onClick, this).on(this._containerText, |
||||
'mouseout', this._handleMouseOut, this); |
||||
|
||||
this._ctxLabel = this._containerText.getContext('2d'); |
||||
|
||||
L.DomUtil |
||||
.addClass(this._containerText, 'leaflet-zoom-animated'); |
||||
this.getPane().appendChild(this._containerText); |
||||
|
||||
}, |
||||
|
||||
_update : function() { |
||||
// textList
|
||||
this._textList = []; |
||||
|
||||
L.Renderer.prototype._update.call(this); |
||||
var b = this._bounds, container = this._containerText, size = b |
||||
.getSize(), m = L.Browser.retina ? 2 : 1; |
||||
|
||||
L.DomUtil.setPosition(container, b.min); |
||||
|
||||
// set canvas size (also clearing it); use double size on retina
|
||||
container.width = m * size.x; |
||||
container.height = m * size.y; |
||||
container.style.width = size.x + 'px'; |
||||
container.style.height = size.y + 'px'; |
||||
|
||||
// display text on the whole surface
|
||||
container.style.zIndex = '4'; |
||||
this._container.style.zIndex = '3'; |
||||
|
||||
if (L.Browser.retina) { |
||||
this._ctxLabel.scale(2, 2); |
||||
} |
||||
|
||||
// translate so we use the same path coordinates after canvas
|
||||
// element moves
|
||||
this._ctxLabel.translate(-b.min.x, -b.min.y); |
||||
L.Canvas.prototype._update.call(this); |
||||
|
||||
}, |
||||
|
||||
_updatePoly : function(layer, closed) { |
||||
L.Canvas.prototype._updatePoly.call(this, layer, closed); |
||||
this._text(this._ctxLabel, layer); |
||||
}, |
||||
|
||||
_updateCircle : function(layer) { |
||||
L.Canvas.prototype._updateCircle.call(this, layer); |
||||
this._text(this._ctxLabel, layer); |
||||
}, |
||||
|
||||
_text : function(ctx, layer) { |
||||
|
||||
if (layer.options.text != undefined) { |
||||
|
||||
ctx.globalAlpha = 1; |
||||
|
||||
var p = layer._point; |
||||
var textPoint; |
||||
|
||||
if (p == undefined) { |
||||
// polygon or polyline
|
||||
if (layer._parts.length == 0 |
||||
|| layer._parts[0].length == 0) { |
||||
return; |
||||
} |
||||
p = this._getCenter(layer._parts[0]); |
||||
} |
||||
|
||||
// label bounds offset
|
||||
var offsetX = 0; |
||||
var offsetY = 0; |
||||
|
||||
/** |
||||
* TODO setting for custom font |
||||
*/ |
||||
ctx.lineWidth = 4.0; |
||||
ctx.font = "16px 'Meiryo'"; |
||||
|
||||
// Collision detection
|
||||
var textWidth = (ctx.measureText(layer.options.text).width) |
||||
+ p.x;// + offsetX;
|
||||
|
||||
var textHeight = p.y + offsetY + 20; |
||||
|
||||
var bounds = L.bounds( |
||||
L.point(p.x + offsetX, p.y + offsetY), L.point( |
||||
textWidth, textHeight)); |
||||
|
||||
if (this.options.collisionFlg) { |
||||
|
||||
for ( var index in this._textList) { |
||||
var pointBounds = this._textList[index]; |
||||
if (pointBounds.intersects(bounds)) { |
||||
return; |
||||
} |
||||
} |
||||
} |
||||
|
||||
this._textList.push(bounds); |
||||
|
||||
ctx.strokeStyle = "white"; |
||||
ctx.strokeText(layer.options.text, p.x + offsetX, p.y |
||||
+ offsetY); |
||||
|
||||
if (layer.options.textColor == undefined) { |
||||
ctx.fillStyle = "blue"; |
||||
} else { |
||||
ctx.fillStyle = layer.options.textColor; |
||||
} |
||||
|
||||
ctx.fillText(layer.options.text, p.x + offsetX, p.y |
||||
+ offsetY); |
||||
} |
||||
}, |
||||
|
||||
_getCenter : function(points) { |
||||
|
||||
var i, halfDist, segDist, dist, p1, p2, ratio, len = points.length; |
||||
|
||||
if (!len) { |
||||
return null; |
||||
} |
||||
|
||||
// polyline centroid algorithm; only uses the first ring if
|
||||
// there are multiple
|
||||
|
||||
for (i = 0, halfDist = 0; i < len - 1; i++) { |
||||
halfDist += points[i].distanceTo(points[i + 1]) / 2; |
||||
} |
||||
|
||||
// The line is so small in the current view that all points are
|
||||
// on the same pixel.
|
||||
if (halfDist === 0) { |
||||
return points[0]; |
||||
} |
||||
|
||||
for (i = 0, dist = 0; i < len - 1; i++) { |
||||
p1 = points[i]; |
||||
p2 = points[i + 1]; |
||||
segDist = p1.distanceTo(p2); |
||||
dist += segDist; |
||||
|
||||
if (dist > halfDist) { |
||||
ratio = (dist - halfDist) / segDist; |
||||
var resutl = [ p2.x - ratio * (p2.x - p1.x), |
||||
p2.y - ratio * (p2.y - p1.y) ]; |
||||
|
||||
return L.point(resutl[0], resutl[1]); |
||||
} |
||||
} |
||||
}, |
||||
|
||||
}); |
||||
@ -0,0 +1,269 @@
|
||||
/* |
||||
* Extends L.Map to synchronize the interaction on one map to one or more other maps. |
||||
*/ |
||||
|
||||
(function () { |
||||
var NO_ANIMATION = { |
||||
animate: false, |
||||
reset: true, |
||||
disableViewprereset: true |
||||
}; |
||||
|
||||
L.Sync = function () {}; |
||||
/* |
||||
* Helper function to compute the offset easily. |
||||
* |
||||
* The arguments are relative positions with respect to reference and target maps of |
||||
* the point to sync. If you provide ratioRef=[0, 1], ratioTarget=[1, 0] will sync the |
||||
* bottom left corner of the reference map with the top right corner of the target map. |
||||
* The values can be less than 0 or greater than 1. It will sync points out of the map. |
||||
*/ |
||||
L.Sync.offsetHelper = function (ratioRef, ratioTarget) { |
||||
var or = L.Util.isArray(ratioRef) ? ratioRef : [0.5, 0.5]; |
||||
var ot = L.Util.isArray(ratioTarget) ? ratioTarget : [0.5, 0.5]; |
||||
return function (center, zoom, refMap, targetMap) { |
||||
var rs = refMap.getSize(); |
||||
var ts = targetMap.getSize(); |
||||
var pt = refMap.project(center, zoom) |
||||
.subtract([(0.5 - or[0]) * rs.x, (0.5 - or[1]) * rs.y]) |
||||
.add([(0.5 - ot[0]) * ts.x, (0.5 - ot[1]) * ts.y]); |
||||
return refMap.unproject(pt, zoom); |
||||
}; |
||||
}; |
||||
|
||||
|
||||
L.Map.include({ |
||||
sync: function (map, options) { |
||||
this._initSync(); |
||||
options = L.extend({ |
||||
noInitialSync: false, |
||||
syncCursor: false, |
||||
syncCursorMarkerOptions: { |
||||
radius: 10, |
||||
fillOpacity: 0.3, |
||||
color: '#da291c', |
||||
fillColor: '#fff' |
||||
}, |
||||
offsetFn: function (center, zoom, refMap, targetMap) { |
||||
// no transformation at all
|
||||
return center; |
||||
} |
||||
}, options); |
||||
|
||||
// prevent double-syncing the map:
|
||||
if (this._syncMaps.indexOf(map) === -1) { |
||||
this._syncMaps.push(map); |
||||
this._syncOffsetFns[L.Util.stamp(map)] = options.offsetFn; |
||||
} |
||||
|
||||
if (!options.noInitialSync) { |
||||
map.setView( |
||||
options.offsetFn(this.getCenter(), this.getZoom(), this, map), |
||||
this.getZoom(), NO_ANIMATION); |
||||
} |
||||
if (options.syncCursor) { |
||||
if (typeof map.cursor === 'undefined') { |
||||
map.cursor = L.circleMarker([0, 0], options.syncCursorMarkerOptions).addTo(map); |
||||
} |
||||
|
||||
this._cursors.push(map.cursor); |
||||
|
||||
this.on('mousemove', this._cursorSyncMove, this); |
||||
this.on('mouseout', this._cursorSyncOut, this); |
||||
} |
||||
|
||||
// on these events, we should reset the view on every synced map
|
||||
// dragstart is due to inertia
|
||||
this.on('resize zoomend', this._selfSetView); |
||||
this.on('moveend', this._syncOnMoveend); |
||||
this.on('dragend', this._syncOnDragend); |
||||
return this; |
||||
}, |
||||
|
||||
|
||||
// unsync maps from each other
|
||||
unsync: function (map) { |
||||
var self = this; |
||||
|
||||
if (this._cursors) { |
||||
this._cursors.forEach(function (cursor, indx, _cursors) { |
||||
if (cursor === map.cursor) { |
||||
_cursors.splice(indx, 1); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
// TODO: hide cursor in stead of moving to 0, 0
|
||||
if (map.cursor) { |
||||
map.cursor.setLatLng([0, 0]); |
||||
} |
||||
|
||||
if (this._syncMaps) { |
||||
this._syncMaps.forEach(function (synced, id) { |
||||
if (map === synced) { |
||||
delete self._syncOffsetFns[L.Util.stamp(map)]; |
||||
self._syncMaps.splice(id, 1); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
if (!this._syncMaps || this._syncMaps.length == 0) { |
||||
// no more synced maps, so these events are not needed.
|
||||
this.off('resize zoomend', this._selfSetView); |
||||
this.off('moveend', this._syncOnMoveend); |
||||
this.off('dragend', this._syncOnDragend); |
||||
} |
||||
|
||||
return this; |
||||
}, |
||||
|
||||
// Checks if the map is synced with anything or a specifyc map
|
||||
isSynced: function (otherMap) { |
||||
var has = (this.hasOwnProperty('_syncMaps') && Object.keys(this._syncMaps).length > 0); |
||||
if (has && otherMap) { |
||||
// Look for this specific map
|
||||
has = false; |
||||
this._syncMaps.forEach(function (synced) { |
||||
if (otherMap == synced) { has = true; } |
||||
}); |
||||
} |
||||
return has; |
||||
}, |
||||
|
||||
|
||||
// Callbacks for events...
|
||||
_cursorSyncMove: function (e) { |
||||
this._cursors.forEach(function (cursor) { |
||||
cursor.setLatLng(e.latlng); |
||||
}); |
||||
}, |
||||
|
||||
_cursorSyncOut: function (e) { |
||||
this._cursors.forEach(function (cursor) { |
||||
// TODO: hide cursor in stead of moving to 0, 0
|
||||
cursor.setLatLng([0, 0]); |
||||
}); |
||||
}, |
||||
|
||||
_selfSetView: function (e) { |
||||
// reset the map, and let setView synchronize the others.
|
||||
this.setView(this.getCenter(), this.getZoom(), NO_ANIMATION); |
||||
}, |
||||
|
||||
_syncOnMoveend: function (e) { |
||||
if (this._syncDragend) { |
||||
// This is 'the moveend' after the dragend.
|
||||
// Without inertia, it will be right after,
|
||||
// but when inertia is on, we need this to detect that.
|
||||
this._syncDragend = false; // before calling setView!
|
||||
this._selfSetView(e); |
||||
this._syncMaps.forEach(function (toSync) { |
||||
toSync.fire('moveend'); |
||||
}); |
||||
} |
||||
}, |
||||
|
||||
_syncOnDragend: function (e) { |
||||
// It is ugly to have state, but we need it in case of inertia.
|
||||
this._syncDragend = true; |
||||
}, |
||||
|
||||
|
||||
// overload methods on originalMap to replay interactions on _syncMaps;
|
||||
_initSync: function () { |
||||
if (this._syncMaps) { |
||||
return; |
||||
} |
||||
var originalMap = this; |
||||
|
||||
this._syncMaps = []; |
||||
this._cursors = []; |
||||
this._syncOffsetFns = {}; |
||||
|
||||
L.extend(originalMap, { |
||||
setView: function (center, zoom, options, sync) { |
||||
// Use this sandwich to disable and enable viewprereset
|
||||
// around setView call
|
||||
function sandwich (obj, fn) { |
||||
var viewpreresets = []; |
||||
var doit = options && options.disableViewprereset && obj && obj._events; |
||||
if (doit) { |
||||
// The event viewpreresets does an invalidateAll,
|
||||
// that reloads all the tiles.
|
||||
// That causes an annoying flicker.
|
||||
viewpreresets = obj._events.viewprereset; |
||||
obj._events.viewprereset = []; |
||||
} |
||||
var ret = fn(obj); |
||||
if (doit) { |
||||
// restore viewpreresets event to its previous values
|
||||
obj._events.viewprereset = viewpreresets; |
||||
} |
||||
return ret; |
||||
} |
||||
|
||||
// Looks better if the other maps 'follow' the active one,
|
||||
// so call this before _syncMaps
|
||||
var ret = sandwich(this, function (obj) { |
||||
return L.Map.prototype.setView.call(obj, center, zoom, options); |
||||
}); |
||||
|
||||
if (!sync) { |
||||
originalMap._syncMaps.forEach(function (toSync) { |
||||
sandwich(toSync, function (obj) { |
||||
return toSync.setView( |
||||
originalMap._syncOffsetFns[L.Util.stamp(toSync)](center, zoom, originalMap, toSync), |
||||
zoom, options, true); |
||||
}); |
||||
}); |
||||
} |
||||
|
||||
return ret; |
||||
}, |
||||
|
||||
panBy: function (offset, options, sync) { |
||||
if (!sync) { |
||||
originalMap._syncMaps.forEach(function (toSync) { |
||||
toSync.panBy(offset, options, true); |
||||
}); |
||||
} |
||||
return L.Map.prototype.panBy.call(this, offset, options); |
||||
}, |
||||
|
||||
_onResize: function (event, sync) { |
||||
if (!sync) { |
||||
originalMap._syncMaps.forEach(function (toSync) { |
||||
toSync._onResize(event, true); |
||||
}); |
||||
} |
||||
return L.Map.prototype._onResize.call(this, event); |
||||
}, |
||||
|
||||
_stop: function (sync) { |
||||
L.Map.prototype._stop.call(this); |
||||
if (!sync) { |
||||
originalMap._syncMaps.forEach(function (toSync) { |
||||
toSync._stop(true); |
||||
}); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
originalMap.dragging._draggable._updatePosition = function () { |
||||
L.Draggable.prototype._updatePosition.call(this); |
||||
var self = this; |
||||
originalMap._syncMaps.forEach(function (toSync) { |
||||
L.DomUtil.setPosition(toSync.dragging._draggable._element, self._newPos); |
||||
toSync.eachLayer(function (layer) { |
||||
if (layer._google !== undefined) { |
||||
var offsetFn = originalMap._syncOffsetFns[L.Util.stamp(toSync)]; |
||||
var center = offsetFn(originalMap.getCenter(), originalMap.getZoom(), originalMap, toSync); |
||||
layer._google.setCenter(center); |
||||
} |
||||
}); |
||||
toSync.fire('move'); |
||||
}); |
||||
}; |
||||
} |
||||
}); |
||||
})(); |
||||
@ -0,0 +1,95 @@
|
||||
L.TileLayer.BetterWMS = L.TileLayer.WMS.extend({ |
||||
|
||||
onAdd: function (map) { |
||||
// Triggered when the layer is added to a map.
|
||||
// Register a click listener, then do all the upstream WMS things
|
||||
L.TileLayer.WMS.prototype.onAdd.call(this, map); |
||||
map.on('click', this.getFeatureInfo, this); |
||||
}, |
||||
|
||||
onRemove: function (map) { |
||||
// Triggered when the layer is removed from a map.
|
||||
// Unregister a click listener, then do all the upstream WMS things
|
||||
L.TileLayer.WMS.prototype.onRemove.call(this, map); |
||||
map.off('click', this.getFeatureInfo, this); |
||||
}, |
||||
|
||||
/* |
||||
getFeatureInfo: function (evt) { |
||||
// Make an AJAX request to the server and hope for the best
|
||||
var url = this.getFeatureInfoUrl(evt.latlng), |
||||
showResults = L.Util.bind(this.showGetFeatureInfo, this); |
||||
$.ajax({ |
||||
url: url, |
||||
success: function (data, status, xhr) { |
||||
var err = typeof data === 'string' ? null : data; |
||||
showResults(err, evt.latlng, data); |
||||
}, |
||||
error: function (xhr, status, error) { |
||||
showResults(error);
|
||||
} |
||||
}); |
||||
}, |
||||
*/ |
||||
|
||||
getFeatureInfo: function (evt) { |
||||
// Make an AJAX request to the server and hope for the best
|
||||
var url = this.getFeatureInfoUrl(evt.latlng), |
||||
showResults = L.Util.bind(this.showGetFeatureInfo, this); |
||||
$.ajax({ |
||||
url: url, |
||||
success: function (data, status, xhr) { |
||||
var err = typeof data === 'string' ? null : data; |
||||
//Fix for blank popup window
|
||||
var doc = (new DOMParser()).parseFromString(data, "text/html");
|
||||
if (doc.body.innerHTML.trim().length > 0) |
||||
showResults(err, evt.latlng, data); |
||||
}, |
||||
error: function (xhr, status, error) { |
||||
showResults(error); |
||||
} |
||||
}); |
||||
},
|
||||
|
||||
|
||||
getFeatureInfoUrl: function (latlng) { |
||||
// Construct a GetFeatureInfo request URL given a point
|
||||
var point = this._map.latLngToContainerPoint(latlng, this._map.getZoom()), |
||||
size = this._map.getSize(), |
||||
|
||||
params = { |
||||
request: 'GetFeatureInfo', |
||||
service: 'WMS', |
||||
srs: 'EPSG:4326', |
||||
styles: this.wmsParams.styles, |
||||
transparent: this.wmsParams.transparent, |
||||
version: this.wmsParams.version,
|
||||
format: this.wmsParams.format, |
||||
bbox: this._map.getBounds().toBBoxString(), |
||||
height: size.y, |
||||
width: size.x, |
||||
layers: this.wmsParams.layers, |
||||
query_layers: this.wmsParams.layers, |
||||
info_format: 'text/html' |
||||
}; |
||||
|
||||
params[params.version === '1.3.0' ? 'i' : 'x'] = point.x; |
||||
params[params.version === '1.3.0' ? 'j' : 'y'] = point.y; |
||||
|
||||
return this._url + L.Util.getParamString(params, this._url, true); |
||||
}, |
||||
|
||||
showGetFeatureInfo: function (err, latlng, content) { |
||||
if (err) { console.log(err); return; } // do nothing if there's an error
|
||||
|
||||
// Otherwise show the content in a popup, or something.
|
||||
L.popup({ maxWidth: 800}) |
||||
.setLatLng(latlng) |
||||
.setContent(content) |
||||
.openOn(this._map); |
||||
} |
||||
}); |
||||
|
||||
L.tileLayer.betterWms = function (url, options) { |
||||
return new L.TileLayer.BetterWMS(url, options);
|
||||
}; |
||||
File binario non mostrato.
@ -0,0 +1,131 @@
|
||||
.leaflet-control-accordionlegend-panel,.leaflet-control-accordionlegend-button { |
||||
color: #444 !important; |
||||
box-shadow: 0px 1px 5px rgba(0,0,0,0.65); |
||||
border-radius:3px; |
||||
font-weight: bold; |
||||
background-color:white; |
||||
border-radius:3px; |
||||
} |
||||
|
||||
.leaflet-control-accordionlegend-button { |
||||
cursor:pointer; |
||||
padding: 0.25em .75em 0.25em .75em; |
||||
font-size:13px; |
||||
line-height: 2.3; |
||||
} |
||||
|
||||
.leaflet-control-accordionlegend-panel-hidden, |
||||
.leaflet-control-accordionlegend-panel div.accordionlegend-section-hidden, |
||||
.leaflet-control-accordionlegend-panel div.accordionlegend-section div.accordionlegend-layer div.accordionlegend-legend-hidden |
||||
{ |
||||
display:none !important; |
||||
} |
||||
|
||||
.leaflet-control-accordionlegend-panel { |
||||
padding: 0.25em .75em 0.25em .75em; |
||||
font-size:13px; |
||||
|
||||
max-height:75%; /* actual maxHeight is set in resize handler code */ |
||||
overflow:auto; |
||||
} |
||||
|
||||
.leaflet-control-accordionlegend-panel label { |
||||
cursor:pointer; |
||||
} |
||||
|
||||
.leaflet-control-accordionlegend-panel h2 { |
||||
font-weight:bold; |
||||
font-size:15px; |
||||
|
||||
white-space:nowrap; |
||||
|
||||
cursor:pointer; |
||||
|
||||
padding:0 1em 0 0; |
||||
margin:0; |
||||
} |
||||
|
||||
.leaflet-control-accordionlegend-panel h2 i { |
||||
margin-right:0.5em; |
||||
} |
||||
|
||||
.leaflet-control-accordionlegend-panel div.accordionlegend-section { |
||||
margin-left:2em; |
||||
font-weight:normal; |
||||
} |
||||
|
||||
.leaflet-control-accordionlegend-panel div.accordionlegend-section div.accordionlegend-layer { |
||||
} |
||||
|
||||
.leaflet-control-accordionlegend-panel div.accordionlegend-section div.accordionlegend-layer label { |
||||
white-space:nowrap; |
||||
} |
||||
|
||||
.leaflet-control-accordionlegend-panel div.accordionlegend-section div.accordionlegend-layer div.accordionlegend-legend { |
||||
margin-left:1.5em; |
||||
font-weight:normal; |
||||
margin-bottom:1em; |
||||
} |
||||
|
||||
.leaflet-control-accordionlegend-panel div.accordionlegend-section div.accordionlegend-layer div.accordionlegend-legend div.accordionlegend-slider { |
||||
margin-bottom:0.75em; |
||||
} |
||||
|
||||
.leaflet-control-accordionlegend-panel div.accordionlegend-section div.accordionlegend-layer div.accordionlegend-legend div.accordionlegend-classification { |
||||
} |
||||
|
||||
.leaflet-control-accordionlegend-panel div.accordionlegend-section div.accordionlegend-layer div.accordionlegend-swatch { |
||||
display:inline-block; |
||||
width:1em; |
||||
height:1em; |
||||
vertical-align:text-top; |
||||
} |
||||
|
||||
.leaflet-control-accordionlegend-panel div.accordionlegend-section div.accordionlegend-layer img.accordionlegend-swatch { |
||||
display:inline; |
||||
width:1em; |
||||
height:1em; |
||||
vertical-align:text-top; |
||||
} |
||||
|
||||
.leaflet-control-accordionlegend-panel div.accordionlegend-section div.accordionlegend-layer label > div.accordionlegend-swatch { |
||||
margin-left:0.5em; |
||||
} |
||||
|
||||
.leaflet-control-accordionlegend-panel div.accordionlegend-section div.accordionlegend-layer label > img.accordionlegend-swatch { |
||||
margin-left:0.5em; |
||||
} |
||||
|
||||
.leaflet-control-accordionlegend-panel div.accordionlegend-section div.accordionlegend-layer div.accordionlegend-swatch.accordionlegend-swatch-circle { |
||||
border-radius:50%; |
||||
} |
||||
|
||||
.leaflet-control-accordionlegend-panel div.accordionlegend-section div.accordionlegend-layer div.accordionlegend-swatch.accordionlegend-swatch-line { |
||||
height: 0.25em; |
||||
margin-top: 0.5em; |
||||
} |
||||
|
||||
.leaflet-control-accordionlegend-panel div.accordionlegend-section div.accordionlegend-layer div.accordionlegend-swatch-text { |
||||
display: inline-block; |
||||
margin-left: 0.5em; |
||||
} |
||||
|
||||
|
||||
.leaflet-control-accordionlegend-panel .noUi-horizontal { |
||||
height: 8px; |
||||
} |
||||
|
||||
.leaflet-control-accordionlegend-panel .noUi-horizontal .noUi-handle { |
||||
width: 16px; |
||||
height: 16px; |
||||
left: -8px; |
||||
top: -6px; |
||||
} |
||||
|
||||
.leaflet-control-accordionlegend-panel .noUi-handle { |
||||
border-radius: 50%; |
||||
} |
||||
|
||||
.leaflet-control-accordionlegend-panel .noUi-handle:after, .leaflet-control-accordionlegend-panel .noUi-handle:before { |
||||
width: 0; |
||||
} |
||||
@ -0,0 +1,337 @@
|
||||
/* |
||||
* https://github.com/GreenInfo-Network/L.Control.AccordionLegend
|
||||
*/ |
||||
|
||||
L.Control.AccordionLegend = L.Control.extend({ |
||||
options: { |
||||
position: 'topleft', |
||||
title: 'Map Layers' |
||||
}, |
||||
initialize: function(options) { |
||||
if (! options.content || ! Array.isArray(options.content) ) throw "L.Control.AccordionLegend: missing content list"; |
||||
L.setOptions(this,options); |
||||
|
||||
this.map = null; // linkage to our containing L.Map instance
|
||||
}, |
||||
onAdd: function (map) { |
||||
// add a linkage to the map, since we'll be managing map layers
|
||||
// and initialize our local registries of buttons, checkboxes, etc. for random access later
|
||||
var control = this; |
||||
control.map = map; |
||||
control.layerRegistry = {}; |
||||
control.checkboxRegistry = {}; |
||||
control.titlebarRegistry = {}; |
||||
control.legendRegistry = {}; |
||||
|
||||
// first and foremost
|
||||
// we need to in fact create the L.TileLayer.WMS instances!
|
||||
this.options.content.forEach(function (section) { |
||||
section.layers.forEach(function (layer) { |
||||
control.layerRegistry[layer.title] = layer.layer; |
||||
}); |
||||
}); |
||||
|
||||
// okay
|
||||
// now we're good to start building the control
|
||||
|
||||
// create our main container; the real action is inside the button and the panel, but they share this parent container
|
||||
var maindiv = L.DomUtil.create('div', 'leaflet-control-accordionlegend'); |
||||
|
||||
// first, the button
|
||||
var button = L.DomUtil.create('div', 'leaflet-control-accordionlegend-button', maindiv); |
||||
button.control = this; |
||||
button.innerHTML = this.options.title; |
||||
L.DomEvent |
||||
.addListener(button, 'mousedown', L.DomEvent.stopPropagation) |
||||
.addListener(button, 'click', L.DomEvent.stopPropagation) |
||||
.addListener(button, 'click', L.DomEvent.preventDefault) |
||||
.addListener(button, 'click', function () { |
||||
this.control.toggleUI(); |
||||
}); |
||||
|
||||
// the panel
|
||||
// iterate over the accordion sections...
|
||||
// then iterate over layers within the section, generating both the map's L.TileLayer and also the legend entry with colored swatches and all
|
||||
var panel = L.DomUtil.create('div', 'leaflet-control-accordionlegend-panel', maindiv); |
||||
panel.control = this; |
||||
|
||||
var sections = []; |
||||
this.options.content.forEach(function (section) { |
||||
// part 1
|
||||
// the title and toggle behavior, which itself is more complicated than it should be cuz of the toggling triangles
|
||||
// the 'sectitle' title bars get logged into titlebarRegistry
|
||||
// this is a mapping of name => [titlebar,div] and is used to random-access so one can toggle a section by name
|
||||
var sectitle = L.DomUtil.create('h2', 'accordionlegend-section-title', panel); |
||||
var triangle = L.DomUtil.create('i', '+', sectitle); |
||||
var title = L.DomUtil.create('span', '', sectitle); |
||||
title.innerHTML = section.title; |
||||
|
||||
var secdiv = L.DomUtil.create('div', 'accordionlegend-section accordionlegend-section-hidden', panel); |
||||
|
||||
control.titlebarRegistry[section.title] = [ sectitle, secdiv, triangle ]; |
||||
L.DomEvent |
||||
.addListener(sectitle, 'mousedown', L.DomEvent.stopPropagation) |
||||
.addListener(sectitle, 'click', L.DomEvent.stopPropagation) |
||||
.addListener(sectitle, 'click', L.DomEvent.preventDefault) |
||||
.addListener(sectitle, 'click', function () { |
||||
control.toggleSection(section.title); |
||||
}); |
||||
|
||||
L.DomEvent |
||||
.addListener(secdiv, 'mousedown', L.DomEvent.stopPropagation) |
||||
.addListener(secdiv, 'click', L.DomEvent.stopPropagation); |
||||
|
||||
// part 2
|
||||
// the 'secdiv' content of the layer-legends and layer-checkboxes
|
||||
// keep a registry of checkboxes, cuz toggleLayer() will need random access to them
|
||||
section.layers.forEach(function (layer) { |
||||
var layerdiv = L.DomUtil.create('div', 'accordionlegend-layer', secdiv); |
||||
var clbl = L.DomUtil.create('label', '', layerdiv); |
||||
var cbox = L.DomUtil.create('input', '', clbl); |
||||
cbox.type = 'checkbox'; |
||||
cbox.value = layer.title; |
||||
|
||||
// the text label (the layer title) for the checkbox
|
||||
// if we have only 1 legend entry with no 'text', this includes an inline legend
|
||||
// otherwise, it's just the layer title and the legend happens below inside the toggle-able legend DIV
|
||||
var swatch; |
||||
if (layer.legend.length == 1 && ! layer.legend[0].text) { |
||||
var classification = layer.legend[0]; |
||||
switch (classification.type) { |
||||
case 'circle': |
||||
swatch = L.DomUtil.create('div', 'accordionlegend-swatch accordionlegend-swatch-inline', clbl); |
||||
swatch.style.backgroundColor = classification.color; |
||||
L.DomUtil.addClass(swatch, 'accordionlegend-swatch-circle'); |
||||
break; |
||||
case 'square': |
||||
swatch = L.DomUtil.create('div', 'accordionlegend-swatch accordionlegend-swatch-inline', clbl); |
||||
swatch.style.backgroundColor = classification.color; |
||||
break; |
||||
case 'line': |
||||
swatch = L.DomUtil.create('div', 'accordionlegend-swatch', clbl); |
||||
swatch.style.backgroundColor = classification.color; |
||||
L.DomUtil.addClass(swatch, 'accordionlegend-swatch-line'); |
||||
break; |
||||
case 'image': |
||||
swatch = L.DomUtil.create('img', 'accordionlegend-swatch accordionlegend-swatch-inline', clbl); |
||||
swatch.src = classification.url; |
||||
break; |
||||
default: |
||||
console.error("L.Control.AccordionLegend unknown legend type: " + classification.type); |
||||
} |
||||
} |
||||
|
||||
// the checkbox's label as usual, whether there was an inline legend or not
|
||||
var ctxt = L.DomUtil.create('span', '', clbl); |
||||
ctxt.innerHTML = ' ' + layer.title; |
||||
|
||||
control.checkboxRegistry[layer.title] = cbox; // the checkbox registry for toggleLayer()
|
||||
|
||||
var legend = L.DomUtil.create('div', 'accordionlegend-legend accordionlegend-legend-hidden', layerdiv); |
||||
control.legendRegistry[layer.title] = legend; |
||||
|
||||
var startingOpacity = layer.type == 'point' ? 100 : 66; |
||||
var slider = L.DomUtil.create('input', 'accordionlegend-slider', legend); |
||||
slider.type = 'range'; |
||||
slider.min = '0'; |
||||
slider.max = '100'; |
||||
slider.title = 'Adjust the layer opacity'; |
||||
slider.value = layer.layer.options.opacity ? 100 * layer.layer.options.opacity : 100; |
||||
L.DomEvent.addListener(slider, 'change', function() { |
||||
var opacity = 0.01 * this.value; |
||||
control.setOpacity(layer.title,opacity); |
||||
}); |
||||
|
||||
L.DomEvent.addListener(cbox, 'change', function () { |
||||
var layername = this.value; |
||||
var onoff = this.checked; |
||||
control.toggleLayer(layername,onoff); |
||||
}); |
||||
|
||||
// now construct the legend
|
||||
// if there's only 1 legend entry and it has no 'text' then use an inline legend instead
|
||||
if (layer.legend.length > 1 || (layer.legend.length == 1 && layer.legend[0].text)) { |
||||
layer.legend.forEach(function (classification) { |
||||
var swatch; |
||||
var swatchline = L.DomUtil.create('div', 'accordionlegend-classification', legend); |
||||
|
||||
switch (classification.type) { |
||||
case 'circle': |
||||
swatch = L.DomUtil.create('div', 'accordionlegend-swatch', swatchline); |
||||
swatch.style.backgroundColor = classification.color; |
||||
L.DomUtil.addClass(swatch, 'accordionlegend-swatch-circle'); |
||||
break; |
||||
case 'square': |
||||
swatch = L.DomUtil.create('div', 'accordionlegend-swatch', swatchline); |
||||
swatch.style.backgroundColor = classification.color; |
||||
break; |
||||
case 'line': |
||||
swatch = L.DomUtil.create('div', 'accordionlegend-swatch', swatchline); |
||||
swatch.style.backgroundColor = classification.color; |
||||
L.DomUtil.addClass(swatch, 'accordionlegend-swatch-line'); |
||||
break; |
||||
case 'image': |
||||
swatch = L.DomUtil.create('img', 'accordionlegend-swatch', swatchline); |
||||
swatch.src = classification.url; |
||||
break; |
||||
default: |
||||
console.error("L.Control.AccordionLegend unknown legend type: " + classification.type); |
||||
} |
||||
|
||||
var text = L.DomUtil.create('div', 'accordionlegend-swatch-text', swatchline); |
||||
text.innerHTML = classification.text; |
||||
}); |
||||
} |
||||
}); |
||||
sections.push(secdiv); |
||||
}); |
||||
|
||||
// assign all our buttons, panels, and DIVs where we can find them later
|
||||
// by "later" we mean a few lines below whrere we do final cleanup work
|
||||
this.maindiv = maindiv; |
||||
this.button = button; |
||||
this.panel = panel; |
||||
|
||||
// panel afterthought: on window resize try and make the panel have a height no more than 75% of the window height, to reduce the likelihood of over-length content pushing it past the bottom of the screen
|
||||
// 75% is a wild guess at a height that won't overflow past the bottom: an exact height depends on headers and footers, font sizes, ...
|
||||
var handleResize = function () { |
||||
control.panel.style.maxHeight = (0.75 * window.innerHeight)+'px'; |
||||
}; |
||||
L.DomEvent.addListener(window, 'resize', handleResize); |
||||
handleResize(); |
||||
|
||||
// collapse the UI
|
||||
// and trigger a section now so as to update the + and - signs on the sections
|
||||
this.collapseUI(); |
||||
this.expandSection(sections[0].title); |
||||
|
||||
// and we're done!
|
||||
return maindiv; |
||||
}, |
||||
toggleLayer: function (layername,onoff) { |
||||
var map = this.map; |
||||
var layer = this.layerRegistry[layername]; |
||||
var legend = this.legendRegistry[layername]; |
||||
var cbox = this.checkboxRegistry[layername]; |
||||
|
||||
if (onoff) { |
||||
cbox.checked = true; |
||||
map.addLayer(layer); |
||||
L.DomUtil.removeClass(legend, 'accordionlegend-legend-hidden'); |
||||
} |
||||
else { |
||||
cbox.checked = false; |
||||
map.removeLayer(layer); |
||||
L.DomUtil.addClass(legend, 'accordionlegend-legend-hidden'); |
||||
} |
||||
|
||||
// return myself cuz method chaining is awesome
|
||||
return this; |
||||
}, |
||||
listLayersStates: function () { |
||||
var layerStates = {}; |
||||
var map = this.map; |
||||
var layerRegistry = this.layerRegistry; |
||||
|
||||
// returns assoc: layername => opacity/false
|
||||
Object.keys(this.layerRegistry).forEach(function (layername) { |
||||
layerStates[layername] = map.hasLayer(layerRegistry[layername]) ? Math.round(100*layerRegistry[layername].options.opacity) : false; |
||||
}); |
||||
return layerStates; |
||||
}, |
||||
setOpacity: function (layername,opacity) { |
||||
var layer = this.layerRegistry[layername]; |
||||
layer.setOpacity(opacity); |
||||
|
||||
// return myself cuz method chaining is awesome
|
||||
return this; |
||||
}, |
||||
toggleUI: function () { |
||||
var viz = L.DomUtil.hasClass(this.panel, 'leaflet-control-accordionlegend-panel-hidden'); |
||||
if (viz) { |
||||
this.expandUI(); |
||||
} |
||||
else { |
||||
this.collapseUI(); |
||||
} |
||||
|
||||
// return myself cuz method chaining is awesome
|
||||
return this; |
||||
}, |
||||
expandSection: function (sectionname) { |
||||
// collapse all section and expand the selected one
|
||||
// if the expanded one doesn't match e.g. "" or null or some such, then expanding nothing is a useful outcome
|
||||
var control = this; |
||||
Object.keys(this.titlebarRegistry).forEach(function (thistitle) { |
||||
var sectitle = control.titlebarRegistry[thistitle][0]; |
||||
var secdiv = control.titlebarRegistry[thistitle][1]; |
||||
var triangle = control.titlebarRegistry[thistitle][2]; |
||||
|
||||
if (sectionname === thistitle) { |
||||
L.DomUtil.removeClass(secdiv, 'accordionlegend-section-hidden'); |
||||
triangle.innerHTML = '-'; |
||||
} |
||||
else { |
||||
L.DomUtil.addClass(secdiv, 'accordionlegend-section-hidden'); |
||||
triangle.innerHTML = '+'; |
||||
} |
||||
}); |
||||
|
||||
// return myself cuz method chaining is awesome
|
||||
return this; |
||||
}, |
||||
collapseSection: function (sectionname) { |
||||
var control = this; |
||||
Object.keys(this.titlebarRegistry).forEach(function (thistitle) { |
||||
if (sectionname !== thistitle) return; // not the one we want, not interested
|
||||
|
||||
// collapse this section, plain and simple
|
||||
var sectitle = control.titlebarRegistry[sectionname][0]; |
||||
var secdiv = control.titlebarRegistry[sectionname][1]; |
||||
var triangle = control.titlebarRegistry[sectionname][2]; |
||||
|
||||
L.DomUtil.addClass(secdiv, 'accordionlegend-section-hidden'); |
||||
triangle.innerHTML = '+'; |
||||
}); |
||||
|
||||
// return myself cuz method chaining is awesome
|
||||
return this; |
||||
}, |
||||
toggleSection: function (sectionname) { |
||||
var control = this; |
||||
Object.keys(this.titlebarRegistry).forEach(function (thistitle) { |
||||
if (sectionname !== thistitle) return; // not the one we want, not interested
|
||||
|
||||
// now we've found the section, the titlebar, etc.
|
||||
// and can decide whether we really wanted collapseSection() or expandSection()
|
||||
var secdiv = control.titlebarRegistry[thistitle][1]; |
||||
var hidden = L.DomUtil.hasClass(secdiv, 'accordionlegend-section-hidden'); |
||||
if (hidden) { |
||||
control.expandSection(sectionname); |
||||
} |
||||
else { |
||||
control.collapseSection(sectionname); |
||||
} |
||||
}); |
||||
|
||||
// return myself cuz method chaining is awesome
|
||||
return this; |
||||
}, |
||||
collapseUI: function () { |
||||
// add the CSS which hides the legend panel
|
||||
L.DomUtil.addClass(this.panel,'leaflet-control-accordionlegend-panel-hidden'); |
||||
|
||||
// return myself cuz method chaining is awesome
|
||||
return this; |
||||
}, |
||||
expandUI: function (sectionname) { |
||||
// add the CSS which hides the legend panel
|
||||
L.DomUtil.removeClass(this.panel,'leaflet-control-accordionlegend-panel-hidden'); |
||||
|
||||
// if a section name was given, then toggle the accordion to open that section
|
||||
if (sectionname) this.expandSection(sectionname); |
||||
|
||||
// return myself cuz method chaining is awesome
|
||||
return this; |
||||
} |
||||
}); |
||||
@ -0,0 +1 @@
|
||||
L.Control.Basemaps=L.Control.extend({_map:null,includes:L.Evented?L.Evented.prototype:L.Mixin.Event,options:{position:"bottomright",tileX:0,tileY:0,tileZ:0,layers:[]},basemap:null,onAdd:function(e){this._map=e;var t=L.DomUtil.create("div","basemaps leaflet-control closed");return L.DomEvent.disableClickPropagation(t),L.Browser.touch||L.DomEvent.disableScrollPropagation(t),this.options.basemaps.forEach(function(s,o){var a,i="basemap";if(0===o?(this.basemap=s,this._map.addLayer(s),i+=" active"):1===o&&(i+=" alt"),s.options.iconURL)a=s.options.iconURL;else{var l={x:this.options.tileX,y:this.options.tileY};if(a=L.Util.template(s._url,L.extend({s:s._getSubdomain(l),x:l.x,y:s.options.tms?s._globalTileRange.max.y-l.y:l.y,z:this.options.tileZ},s.options)),s instanceof L.TileLayer.WMS){s._map=e;var n=s.options.crs||e.options.crs,r=L.extend({},s.wmsParams),m=parseFloat(r.version);r[m>=1.3?"crs":"srs"]=n.code;var p=L.point(l);p.z=this.options.tileZ;var c=s._tileCoordsToBounds(p),d=n.project(c.getNorthWest()),h=n.project(c.getSouthEast()),v=(m>=1.3&&n===L.CRS.EPSG4326?[h.y,d.x,d.y,h.x]:[d.x,h.y,h.x,d.y]).join(",");a+=L.Util.getParamString(r,a,s.options.uppercase)+(s.options.uppercase?"&BBOX=":"&bbox=")+v}}var b=L.DomUtil.create("div",i,t),u=L.DomUtil.create("img",null,b);u.src=a,s.options&&s.options.label&&(u.title=s.options.label),L.DomEvent.on(b,"click",function(){if(this.options.basemaps.length>2&&L.Browser.mobile&&L.DomUtil.hasClass(t,"closed"))L.DomUtil.removeClass(t,"closed");else if(s!=this.basemap){e.removeLayer(this.basemap),e.addLayer(s),s.bringToBack(),e.fire("baselayerchange",s),this.basemap=s,L.DomUtil.removeClass(t.getElementsByClassName("basemap active")[0],"active"),L.DomUtil.addClass(b,"active");var a=(o+1)%this.options.basemaps.length;L.DomUtil.removeClass(t.getElementsByClassName("basemap alt")[0],"alt"),L.DomUtil.addClass(t.getElementsByClassName("basemap")[a],"alt"),L.DomUtil.addClass(t,"closed")}},this)},this),this.options.basemaps.length>2&&!L.Browser.mobile&&(L.DomEvent.on(t,"mouseenter",function(){L.DomUtil.removeClass(t,"closed")},this),L.DomEvent.on(t,"mouseleave",function(){L.DomUtil.addClass(t,"closed")},this)),this._container=t,this._container}}),L.control.basemaps=function(e){return new L.Control.Basemaps(e)}; |
||||
@ -0,0 +1,28 @@
|
||||
.basemaps { |
||||
padding: 4px; |
||||
} |
||||
.basemaps.closed .basemap { |
||||
display: none; |
||||
} |
||||
.basemaps.closed .basemap.alt { |
||||
display: inline-block; |
||||
} |
||||
.basemaps.closed .basemap.alt h4 { |
||||
display: none; |
||||
} |
||||
|
||||
.basemap { |
||||
display: inline-block; /* todo: flexbox? */ |
||||
cursor: pointer; |
||||
} |
||||
.basemap.active img { |
||||
border-color: orange; |
||||
box-shadow: 2px 2px 4px #000; |
||||
} |
||||
.basemap img { |
||||
width: 64px; |
||||
border: 2px solid #FFF; |
||||
margin: 0 2px; |
||||
border-radius: 40px; |
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.65) |
||||
} |
||||
@ -0,0 +1,150 @@
|
||||
L.Control.Basemaps = L.Control.extend({ |
||||
_map: null, |
||||
includes: L.Evented ? L.Evented.prototype : L.Mixin.Event, |
||||
options: { |
||||
position: "bottomleft", |
||||
tileX: 0, |
||||
tileY: 0, |
||||
tileZ: 0, |
||||
layers: [] // list of basemap layer objects, first in list is default and added to map with this control
|
||||
}, |
||||
basemap: null, |
||||
onAdd: function(map) { |
||||
this._map = map; |
||||
var container = L.DomUtil.create("div", "basemaps leaflet-control closed"); |
||||
|
||||
// disable events
|
||||
L.DomEvent.disableClickPropagation(container); |
||||
if (!L.Browser.touch) { |
||||
L.DomEvent.disableScrollPropagation(container); |
||||
} |
||||
|
||||
this.options.basemaps.forEach(function(d, i) { |
||||
var basemapClass = "basemap"; |
||||
|
||||
if (i === 0) { |
||||
this.basemap = d; |
||||
this._map.addLayer(d); |
||||
basemapClass += " active"; |
||||
} else if (i === 1) { |
||||
basemapClass += " alt"; |
||||
} |
||||
var url; |
||||
if (d.options.iconURL) { |
||||
url = d.options.iconURL; |
||||
} else { |
||||
var coords = { x: this.options.tileX, y: this.options.tileY }; |
||||
url = L.Util.template( |
||||
d._url, |
||||
L.extend( |
||||
{ |
||||
s: d._getSubdomain(coords), |
||||
x: coords.x, |
||||
y: d.options.tms ? d._globalTileRange.max.y - coords.y : coords.y, |
||||
z: this.options.tileZ |
||||
}, |
||||
d.options |
||||
) |
||||
); |
||||
|
||||
if (d instanceof L.TileLayer.WMS) { |
||||
// d may not yet be initialized, yet functions below expect ._map to be set
|
||||
d._map = map; |
||||
|
||||
// unfortunately, calling d.getTileUrl() does not work due to scope issues
|
||||
// have to replicate some of the logic from L.TileLayer.WMS
|
||||
|
||||
// adapted from L.TileLayer.WMS::onAdd
|
||||
var crs = d.options.crs || map.options.crs; |
||||
var wmsParams = L.extend({}, d.wmsParams); |
||||
var wmsVersion = parseFloat(wmsParams.version); |
||||
var projectionKey = wmsVersion >= 1.3 ? "crs" : "srs"; |
||||
wmsParams[projectionKey] = crs.code; |
||||
|
||||
// adapted from L.TileLayer.WMS::getTileUrl
|
||||
var coords2 = L.point(coords); |
||||
coords2.z = this.options.tileZ; |
||||
var tileBounds = d._tileCoordsToBounds(coords2); |
||||
var nw = crs.project(tileBounds.getNorthWest()); |
||||
var se = crs.project(tileBounds.getSouthEast()); |
||||
var bbox = (wmsVersion >= 1.3 && crs === L.CRS.EPSG4326 |
||||
? [se.y, nw.x, nw.y, se.x] |
||||
: [nw.x, se.y, se.x, nw.y] |
||||
).join(","); |
||||
|
||||
url += |
||||
L.Util.getParamString(wmsParams, url, d.options.uppercase) + |
||||
(d.options.uppercase ? "&BBOX=" : "&bbox=") + |
||||
bbox; |
||||
} |
||||
} |
||||
|
||||
var basemapNode = L.DomUtil.create("div", basemapClass, container); |
||||
var imgNode = L.DomUtil.create("img", null, basemapNode); |
||||
imgNode.src = url; |
||||
if (d.options && d.options.label) { |
||||
imgNode.title = d.options.label; |
||||
} |
||||
|
||||
L.DomEvent.on( |
||||
basemapNode, |
||||
"click", |
||||
function() { |
||||
// intercept open click on mobile devices and show options
|
||||
if (this.options.basemaps.length > 2 && L.Browser.mobile) { |
||||
if (L.DomUtil.hasClass(container, "closed")) { |
||||
L.DomUtil.removeClass(container, "closed"); |
||||
return; |
||||
} |
||||
} |
||||
|
||||
//if different, remove previous basemap, and add new one
|
||||
if (d != this.basemap) { |
||||
map.removeLayer(this.basemap); |
||||
map.addLayer(d); |
||||
d.bringToBack(); |
||||
map.fire("baselayerchange", d); |
||||
this.basemap = d; |
||||
|
||||
L.DomUtil.removeClass(container.getElementsByClassName("basemap active")[0], "active"); |
||||
L.DomUtil.addClass(basemapNode, "active"); |
||||
|
||||
var altIdx = (i + 1) % this.options.basemaps.length; |
||||
L.DomUtil.removeClass(container.getElementsByClassName("basemap alt")[0], "alt"); |
||||
L.DomUtil.addClass(container.getElementsByClassName("basemap")[altIdx], "alt"); |
||||
|
||||
L.DomUtil.addClass(container, "closed"); |
||||
} |
||||
}, |
||||
this |
||||
); |
||||
}, this); |
||||
|
||||
if (this.options.basemaps.length > 2 && !L.Browser.mobile) { |
||||
L.DomEvent.on( |
||||
container, |
||||
"mouseenter", |
||||
function() { |
||||
L.DomUtil.removeClass(container, "closed"); |
||||
}, |
||||
this |
||||
); |
||||
|
||||
L.DomEvent.on( |
||||
container, |
||||
"mouseleave", |
||||
function() { |
||||
L.DomUtil.addClass(container, "closed"); |
||||
}, |
||||
this |
||||
); |
||||
} |
||||
|
||||
this._container = container; |
||||
return this._container; |
||||
} |
||||
}); |
||||
|
||||
L.control.basemaps = function(options) { |
||||
return new L.Control.Basemaps(options); |
||||
}; |
||||
@ -0,0 +1,32 @@
|
||||
.leaflet-control-coordinates { |
||||
background-color: #D8D8D8; |
||||
background-color: rgba(255, 255, 255, .8); |
||||
cursor: pointer |
||||
} |
||||
|
||||
.leaflet-control-coordinates, |
||||
.leaflet-control-coordinates .uiElement input { |
||||
-webkit-border-radius: 3px; |
||||
-moz-border-radius: 3px; |
||||
border-radius: 3px |
||||
} |
||||
|
||||
.leaflet-control-coordinates .uiElement { |
||||
margin: 4px |
||||
} |
||||
|
||||
.leaflet-control-coordinates .uiElement .labelFirst { |
||||
margin-right: 4px |
||||
} |
||||
|
||||
.leaflet-control-coordinates .uiHidden { |
||||
display: none |
||||
} |
||||
|
||||
.leaflet-control-coordinates .uiElement.label { |
||||
color: inherit; |
||||
font-weight: inherit; |
||||
font-size: inherit; |
||||
padding: 0; |
||||
display: inherit |
||||
} |
||||
@ -0,0 +1 @@
|
||||
.leaflet-control-coordinates{background-color:#D8D8D8} |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,349 @@
|
||||
/* |
||||
* L.Control.Coordinates is used for displaying current mouse coordinates on the map. |
||||
*/ |
||||
|
||||
L.Control.Coordinates = L.Control.extend({ |
||||
options: { |
||||
position: 'bottomright', |
||||
//decimals used if not using DMS or labelFormatter functions
|
||||
decimals: 4, |
||||
//decimalseperator used if not using DMS or labelFormatter functions
|
||||
decimalSeperator: ".", |
||||
//label templates for usage if no labelFormatter function is defined
|
||||
labelTemplateLat: "Lat: {y}", |
||||
labelTemplateLng: "Lng: {x}", |
||||
//label formatter functions
|
||||
labelFormatterLat: undefined, |
||||
labelFormatterLng: undefined, |
||||
//switch on/off input fields on click
|
||||
enableUserInput: true, |
||||
//use Degree-Minute-Second
|
||||
useDMS: false, |
||||
//if true lat-lng instead of lng-lat label ordering is used
|
||||
useLatLngOrder: false, |
||||
//if true user given coordinates are centered directly
|
||||
centerUserCoordinates: true, |
||||
//leaflet marker type
|
||||
markerType: L.marker, |
||||
//leaflet marker properties
|
||||
markerProps: {}//,
|
||||
//customLabelFcn: function(latLonObj, opts) { "Geohash: " + encodeGeoHash(latLonObj.lat, latLonObj.lng)} //optional default none
|
||||
}, |
||||
|
||||
onAdd: function(map) { |
||||
this._map = map; |
||||
|
||||
var className = 'leaflet-control-coordinates', |
||||
container = this._container = L.DomUtil.create('div', className), |
||||
options = this.options; |
||||
|
||||
//label containers
|
||||
this._labelcontainer = L.DomUtil.create("div", "uiElement label", container); |
||||
this._label = L.DomUtil.create("span", "labelFirst", this._labelcontainer); |
||||
|
||||
|
||||
//input containers
|
||||
this._inputcontainer = L.DomUtil.create("div", "uiElement input uiHidden", container); |
||||
var xSpan, ySpan; |
||||
if (options.useLatLngOrder) { |
||||
ySpan = L.DomUtil.create("span", "", this._inputcontainer); |
||||
this._inputY = this._createInput("inputY", this._inputcontainer); |
||||
xSpan = L.DomUtil.create("span", "", this._inputcontainer); |
||||
this._inputX = this._createInput("inputX", this._inputcontainer); |
||||
} else { |
||||
xSpan = L.DomUtil.create("span", "", this._inputcontainer); |
||||
this._inputX = this._createInput("inputX", this._inputcontainer); |
||||
ySpan = L.DomUtil.create("span", "", this._inputcontainer); |
||||
this._inputY = this._createInput("inputY", this._inputcontainer); |
||||
} |
||||
xSpan.innerHTML = options.labelTemplateLng.replace("{x}", ""); |
||||
ySpan.innerHTML = options.labelTemplateLat.replace("{y}", ""); |
||||
|
||||
L.DomEvent.on(this._inputX, 'keyup', this._handleKeypress, this); |
||||
L.DomEvent.on(this._inputY, 'keyup', this._handleKeypress, this); |
||||
|
||||
//connect to mouseevents
|
||||
map.on("mousemove", this._update, this); |
||||
map.on('dragstart', this.collapse, this); |
||||
|
||||
map.whenReady(this._update, this); |
||||
|
||||
this._showsCoordinates = true; |
||||
//wether or not to show inputs on click
|
||||
if (options.enableUserInput) { |
||||
L.DomEvent.addListener(this._container, "click", this._switchUI, this); |
||||
} |
||||
|
||||
return container; |
||||
}, |
||||
|
||||
/** |
||||
* Creates an input HTML element in given container with given classname |
||||
*/ |
||||
_createInput: function(classname, container) { |
||||
var input = L.DomUtil.create("input", classname, container); |
||||
input.type = "text"; |
||||
L.DomEvent.disableClickPropagation(input); |
||||
return input; |
||||
}, |
||||
|
||||
_clearMarker: function() { |
||||
this._map.removeLayer(this._marker); |
||||
}, |
||||
|
||||
/** |
||||
* Called onkeyup of input fields |
||||
*/ |
||||
_handleKeypress: function(e) { |
||||
switch (e.keyCode) { |
||||
case 27: //Esc
|
||||
this.collapse(); |
||||
break; |
||||
case 13: //Enter
|
||||
this._handleSubmit(); |
||||
this.collapse(); |
||||
break; |
||||
default: //All keys
|
||||
this._handleSubmit(); |
||||
break; |
||||
} |
||||
}, |
||||
|
||||
/** |
||||
* Called on each keyup except ESC |
||||
*/ |
||||
_handleSubmit: function() { |
||||
var x = L.NumberFormatter.createValidNumber(this._inputX.value, this.options.decimalSeperator); |
||||
var y = L.NumberFormatter.createValidNumber(this._inputY.value, this.options.decimalSeperator); |
||||
if (x !== undefined && y !== undefined) { |
||||
var marker = this._marker; |
||||
if (!marker) { |
||||
marker = this._marker = this._createNewMarker(); |
||||
marker.on("click", this._clearMarker, this); |
||||
} |
||||
var ll = new L.LatLng(y, x); |
||||
marker.setLatLng(ll); |
||||
marker.addTo(this._map); |
||||
if (this.options.centerUserCoordinates) { |
||||
this._map.setView(ll, this._map.getZoom()); |
||||
} |
||||
} |
||||
}, |
||||
|
||||
/** |
||||
* Shows inputs fields |
||||
*/ |
||||
expand: function() { |
||||
this._showsCoordinates = false; |
||||
|
||||
this._map.off("mousemove", this._update, this); |
||||
|
||||
L.DomEvent.addListener(this._container, "mousemove", L.DomEvent.stop); |
||||
L.DomEvent.removeListener(this._container, "click", this._switchUI, this); |
||||
|
||||
L.DomUtil.addClass(this._labelcontainer, "uiHidden"); |
||||
L.DomUtil.removeClass(this._inputcontainer, "uiHidden"); |
||||
}, |
||||
|
||||
/** |
||||
* Creates the label according to given options and formatters |
||||
*/ |
||||
_createCoordinateLabel: function(ll) { |
||||
var opts = this.options, |
||||
x, y; |
||||
if (opts.customLabelFcn) { |
||||
return opts.customLabelFcn(ll, opts); |
||||
} |
||||
if (opts.labelLng) { |
||||
x = opts.labelFormatterLng(ll.lng); |
||||
} else { |
||||
x = L.Util.template(opts.labelTemplateLng, { |
||||
x: this._getNumber(ll.lng, opts) |
||||
}); |
||||
} |
||||
if (opts.labelFormatterLat) { |
||||
y = opts.labelFormatterLat(ll.lat); |
||||
} else { |
||||
y = L.Util.template(opts.labelTemplateLat, { |
||||
y: this._getNumber(ll.lat, opts) |
||||
}); |
||||
} |
||||
if (opts.useLatLngOrder) { |
||||
return y + " " + x; |
||||
} |
||||
return x + " " + y; |
||||
}, |
||||
|
||||
/** |
||||
* Returns a Number according to options (DMS or decimal) |
||||
*/ |
||||
_getNumber: function(n, opts) { |
||||
var res; |
||||
if (opts.useDMS) { |
||||
res = L.NumberFormatter.toDMS(n); |
||||
} else { |
||||
res = L.NumberFormatter.round(n, opts.decimals, opts.decimalSeperator); |
||||
} |
||||
return res; |
||||
}, |
||||
|
||||
/** |
||||
* Shows coordinate labels after user input has ended. Also |
||||
* displays a marker with popup at the last input position. |
||||
*/ |
||||
collapse: function() { |
||||
if (!this._showsCoordinates) { |
||||
this._map.on("mousemove", this._update, this); |
||||
this._showsCoordinates = true; |
||||
var opts = this.options; |
||||
L.DomEvent.addListener(this._container, "click", this._switchUI, this); |
||||
L.DomEvent.removeListener(this._container, "mousemove", L.DomEvent.stop); |
||||
|
||||
L.DomUtil.addClass(this._inputcontainer, "uiHidden"); |
||||
L.DomUtil.removeClass(this._labelcontainer, "uiHidden"); |
||||
|
||||
if (this._marker) { |
||||
var m = this._createNewMarker(), |
||||
ll = this._marker.getLatLng(); |
||||
m.setLatLng(ll); |
||||
|
||||
var container = L.DomUtil.create("div", ""); |
||||
var label = L.DomUtil.create("div", "", container); |
||||
label.innerHTML = this._ordinateLabel(ll); |
||||
|
||||
var close = L.DomUtil.create("a", "", container); |
||||
close.innerHTML = "Remove"; |
||||
close.href = "#"; |
||||
var stop = L.DomEvent.stopPropagation; |
||||
|
||||
L.DomEvent |
||||
.on(close, 'click', stop) |
||||
.on(close, 'mousedown', stop) |
||||
.on(close, 'dblclick', stop) |
||||
.on(close, 'click', L.DomEvent.preventDefault) |
||||
.on(close, 'click', function() { |
||||
this._map.removeLayer(m); |
||||
}, this); |
||||
|
||||
m.bindPopup(container); |
||||
m.addTo(this._map); |
||||
this._map.removeLayer(this._marker); |
||||
this._marker = null; |
||||
} |
||||
} |
||||
}, |
||||
|
||||
/** |
||||
* Click callback for UI |
||||
*/ |
||||
_switchUI: function(evt) { |
||||
L.DomEvent.stop(evt); |
||||
L.DomEvent.stopPropagation(evt); |
||||
L.DomEvent.preventDefault(evt); |
||||
if (this._showsCoordinates) { |
||||
//show textfields
|
||||
this.expand(); |
||||
} else { |
||||
//show coordinates
|
||||
this.collapse(); |
||||
} |
||||
}, |
||||
|
||||
onRemove: function(map) { |
||||
map.off("mousemove", this._update, this); |
||||
}, |
||||
|
||||
/** |
||||
* Mousemove callback function updating labels and input elements |
||||
*/ |
||||
_update: function(evt) { |
||||
var pos = evt.latlng, |
||||
opts = this.options; |
||||
if (pos) { |
||||
pos = pos.wrap(); |
||||
this._currentPos = pos; |
||||
this._inputY.value = L.NumberFormatter.round(pos.lat, opts.decimals, opts.decimalSeperator); |
||||
this._inputX.value = L.NumberFormatter.round(pos.lng, opts.decimals, opts.decimalSeperator); |
||||
this._label.innerHTML = this._createCoordinateLabel(pos); |
||||
} |
||||
}, |
||||
|
||||
_createNewMarker: function() { |
||||
return this.options.markerType(null, this.options.markerProps); |
||||
} |
||||
|
||||
}); |
||||
|
||||
//constructor registration
|
||||
L.control.coordinates = function(options) { |
||||
return new L.Control.Coordinates(options); |
||||
}; |
||||
|
||||
//map init hook
|
||||
L.Map.mergeOptions({ |
||||
coordinateControl: false |
||||
}); |
||||
|
||||
L.Map.addInitHook(function() { |
||||
if (this.options.coordinateControl) { |
||||
this.coordinateControl = new L.Control.Coordinates(); |
||||
this.addControl(this.coordinateControl); |
||||
} |
||||
}); |
||||
L.NumberFormatter = { |
||||
round: function(num, dec, sep) { |
||||
var res = L.Util.formatNum(num, dec) + "", |
||||
numbers = res.split("."); |
||||
if (numbers[1]) { |
||||
var d = dec - numbers[1].length; |
||||
for (; d > 0; d--) { |
||||
numbers[1] += "0"; |
||||
} |
||||
res = numbers.join(sep || "."); |
||||
} |
||||
return res; |
||||
}, |
||||
|
||||
toDMS: function(deg) { |
||||
var d = Math.floor(Math.abs(deg)); |
||||
var minfloat = (Math.abs(deg) - d) * 60; |
||||
var m = Math.floor(minfloat); |
||||
var secfloat = (minfloat - m) * 60; |
||||
var s = Math.round(secfloat); |
||||
if (s == 60) { |
||||
m++; |
||||
s = "00"; |
||||
} |
||||
if (m == 60) { |
||||
d++; |
||||
m = "00"; |
||||
} |
||||
if (s < 10) { |
||||
s = "0" + s; |
||||
} |
||||
if (m < 10) { |
||||
m = "0" + m; |
||||
} |
||||
var dir = ""; |
||||
if (deg < 0) { |
||||
dir = "-"; |
||||
} |
||||
return ("" + dir + d + "° " + m + "' " + s + "''"); |
||||
}, |
||||
|
||||
createValidNumber: function(num, sep) { |
||||
if (num && num.length > 0) { |
||||
var numbers = num.split(sep || "."); |
||||
try { |
||||
var numRes = Number(numbers.join(".")); |
||||
if (isNaN(numRes)) { |
||||
return undefined; |
||||
} |
||||
return numRes; |
||||
} catch (e) { |
||||
return undefined; |
||||
} |
||||
} |
||||
return undefined; |
||||
} |
||||
}; |
||||
@ -0,0 +1,38 @@
|
||||
module.exports = function (grunt) { |
||||
grunt.initConfig({ |
||||
pkg: grunt.file.readJSON('package.json'), |
||||
clean: ["dist"], |
||||
uglify: { |
||||
options: { |
||||
banner: '/* <%= pkg.name %>\n<%= pkg.homepage %>\nVersion: <%= pkg.version %> - Date: <%= grunt.template.today("yyyy-mm-dd") %> */\n' |
||||
}, |
||||
dist: { |
||||
files: { |
||||
'dist/L.Control.MapCenterCoord.min.js': 'src/L.Control.MapCenterCoord.js' |
||||
} |
||||
} |
||||
}, |
||||
cssmin: { |
||||
dist: { |
||||
files: { |
||||
'dist/L.Control.MapCenterCoord.min.css': 'src/L.Control.MapCenterCoord.css' |
||||
} |
||||
} |
||||
}, |
||||
copy: { |
||||
icons: { |
||||
cwd: 'src/icons', |
||||
src: '**', |
||||
dest: 'dist/icons/', |
||||
expand: true |
||||
} |
||||
} |
||||
}); |
||||
|
||||
grunt.loadNpmTasks('grunt-contrib-clean'); |
||||
grunt.loadNpmTasks('grunt-contrib-uglify'); |
||||
grunt.loadNpmTasks('grunt-contrib-cssmin'); |
||||
grunt.loadNpmTasks('grunt-contrib-copy'); |
||||
|
||||
grunt.registerTask('default', ['clean', 'uglify', 'cssmin', 'copy']); |
||||
}; |
||||
@ -0,0 +1,21 @@
|
||||
.leaflet-container .leaflet-control-mapcentercoord { |
||||
background-color: rgba(255, 255, 255, 0.8); |
||||
box-shadow: 0 0 5px #bbb; |
||||
padding: 0 10px; |
||||
margin: 0; |
||||
color: #333; |
||||
font: 13px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; |
||||
font-weight: 700; |
||||
} |
||||
.leaflet-control-mapcentercoord-icon { |
||||
background: url(icons/MapCenterCoordIcon1.svg) 50% 50% no-repeat; |
||||
margin: -18px 0 0 -18px; |
||||
width: 36px; |
||||
height: 36px; |
||||
left: 50%; |
||||
top: 50%; |
||||
content: ''; |
||||
display: block; |
||||
position: absolute; |
||||
z-index: -1; |
||||
} |
||||
@ -0,0 +1,222 @@
|
||||
L.Control.MapCenterCoord = L.Control.extend({ |
||||
// Defaults
|
||||
options: { |
||||
position: 'bottomright', |
||||
icon: true, |
||||
onMove: false, |
||||
template: '{y} | {x}', // https://en.wikipedia.org/wiki/ISO_6709
|
||||
projected: false, |
||||
formatProjected: '#.##0,000', |
||||
latlngFormat: 'DD', // DD, DM, DMS
|
||||
latlngDesignators: false, |
||||
latLngFormatter: undefined |
||||
}, |
||||
|
||||
onAdd: function (map) { |
||||
if (this.options.icon) { |
||||
// create a DOM element and put it into overlayPane
|
||||
this._iconEl = L.DomUtil.create('div', 'leaflet-control-mapcentercoord-icon leaflet-zoom-hide'); |
||||
map.getPanes().overlayPane.appendChild(this._iconEl); |
||||
|
||||
// add a viewreset event listener for updating icon's position
|
||||
map.on('viewreset', this._onReset, this); |
||||
this._onReset(); |
||||
} |
||||
|
||||
// Control container
|
||||
this._container = L.DomUtil.create('div', 'leaflet-control-mapcentercoord'); |
||||
L.DomEvent.disableClickPropagation(this._container); |
||||
|
||||
// Add events listeners for updating coordinates & icon's position
|
||||
map.on('move', this._onMapMove, this); |
||||
map.on('moveend', this._onMapMoveEnd, this); |
||||
|
||||
this._container.innerHTML = this._getMapCenterCoord(); |
||||
return this._container; |
||||
}, |
||||
|
||||
onRemove: function (map) { |
||||
// remove icon's DOM elements and listeners
|
||||
if (this.options.icon) { |
||||
map.getPanes().overlayPane.removeChild(this._iconEl); |
||||
map.off('viewreset', this._onReset, this); |
||||
} |
||||
map.off('move', this._onMapMove, this); |
||||
map.off('moveend', this._onMapMove, this); |
||||
}, |
||||
|
||||
_onReset: function (e) { |
||||
// update icon's position
|
||||
var pos = this._map.latLngToLayerPoint(this._map.getCenter()); |
||||
L.DomUtil.setPosition(this._iconEl, pos); |
||||
}, |
||||
|
||||
_onMapMove: function (e) { |
||||
if (this.options.icon) { |
||||
// update icon's position
|
||||
var pos = this._map.latLngToLayerPoint(this._map.getCenter()); |
||||
L.DomUtil.setPosition(this._iconEl, pos); |
||||
} |
||||
if (this.options.onMove) { |
||||
// update coordinates
|
||||
this._container.innerHTML = this._getMapCenterCoord(); |
||||
} |
||||
}, |
||||
|
||||
_onMapMoveEnd: function (e) { |
||||
if (this.options.icon) { |
||||
// update icon's position
|
||||
var pos = this._map.latLngToLayerPoint(this._map.getCenter()); |
||||
L.DomUtil.setPosition(this._iconEl, pos); |
||||
} |
||||
// update coordinates
|
||||
this._container.innerHTML = this._getMapCenterCoord(); |
||||
}, |
||||
|
||||
_getMapCenterCoord: function () { |
||||
if (this.options.projected) return this._getProjectedCoord(this._map.options.crs.project(this._map.getCenter())); |
||||
return this._getLatLngCoord(this._map.getCenter()); |
||||
}, |
||||
|
||||
_getProjectedCoord: function (center) { |
||||
return L.Util.template(this.options.template, { |
||||
x: this._format(this.options.formatProjected, center.x), |
||||
y: this._format(this.options.formatProjected, center.y) |
||||
}); |
||||
}, |
||||
|
||||
|
||||
_getLatLngCoord: function (center) { |
||||
|
||||
if (this.options.latLngFormatter != undefined) return this.options.latLngFormatter(center.lat, center.lng); |
||||
|
||||
var lat, lng, deg, min; |
||||
|
||||
//make a copy of center so we aren't affecting leaflet's internal state
|
||||
var centerCopy = { |
||||
lat: center.lat, |
||||
lng: center.lng |
||||
}; |
||||
|
||||
// 180 degrees & negative
|
||||
if (centerCopy.lng < 0) { |
||||
centerCopy.lng_neg = true; |
||||
centerCopy.lng = Math.abs(centerCopy.lng); |
||||
} else centerCopy.lng_neg = false; |
||||
if (centerCopy.lat < 0) { |
||||
centerCopy.lat_neg = true; |
||||
centerCopy.lat = Math.abs(centerCopy.lat); |
||||
} else centerCopy.lat_neg = false; |
||||
if (centerCopy.lng > 180) { |
||||
centerCopy.lng = 360 - centerCopy.lng; |
||||
centerCopy.lng_neg = !centerCopy.lng_neg; |
||||
} |
||||
|
||||
// format
|
||||
if (this.options.latlngFormat === 'DM') { |
||||
deg = parseInt(centerCopy.lng); |
||||
lng = deg + 'º ' + this._format('00.000', (centerCopy.lng - deg) * 60) + "'"; |
||||
deg = parseInt(centerCopy.lat); |
||||
lat = deg + 'º ' + this._format('00.000', (centerCopy.lat - deg) * 60) + "'"; |
||||
} else if (this.options.latlngFormat === 'DMS') { |
||||
deg = parseInt(centerCopy.lng); |
||||
min = (centerCopy.lng - deg) * 60; |
||||
lng = deg + 'º ' + this._format('00', parseInt(min)) + "' " + this._format('00.0', (min - parseInt(min)) * 60) + "''"; |
||||
deg = parseInt(centerCopy.lat); |
||||
min = (centerCopy.lat - deg) * 60; |
||||
lat = deg + 'º ' + this._format('00', parseInt(min)) + "' " + this._format('00.0', (min - parseInt(min)) * 60) + "''"; |
||||
} else { // 'DD'
|
||||
lng = this._format('#0.00000', centerCopy.lng) + 'º'; |
||||
lat = this._format('##0.00000', centerCopy.lat) + 'º'; |
||||
} |
||||
|
||||
return L.Util.template(this.options.template, { |
||||
x: (!this.options.latlngDesignators && centerCopy.lng_neg ? '-' : '') + lng + (this.options.latlngDesignators ? (centerCopy.lng_neg ? ' W' : ' E') : ''), |
||||
y: (!this.options.latlngDesignators && centerCopy.lat_neg ? '-' : '') + lat + (this.options.latlngDesignators ? (centerCopy.lat_neg ? ' S' : ' N') : '') |
||||
}); |
||||
}, |
||||
|
||||
/* |
||||
IntegraXor Web SCADA - JavaScript Number Formatter |
||||
https://code.google.com/p/javascript-number-formatter/
|
||||
author: KPL, KHL |
||||
*/ |
||||
_format: function (m, v) { |
||||
if (!m || isNaN(+v)) { |
||||
return v; //return as it is.
|
||||
} |
||||
//convert any string to number according to formation sign.
|
||||
var v = m.charAt(0) == '-' ? -v : +v; |
||||
var isNegative = v < 0 ? v = -v : 0; //process only abs(), and turn on flag.
|
||||
|
||||
//search for separator for grp & decimal, anything not digit, not +/- sign, not #.
|
||||
var result = m.match(/[^\d\-\+#]/g); |
||||
var Decimal = (result && result[result.length - 1]) || '.'; //treat the right most symbol as decimal
|
||||
var Group = (result && result[1] && result[0]) || ','; //treat the left most symbol as group separator
|
||||
|
||||
//split the decimal for the format string if any.
|
||||
var m = m.split(Decimal); |
||||
//Fix the decimal first, toFixed will auto fill trailing zero.
|
||||
v = v.toFixed(m[1] && m[1].length); |
||||
v = +(v) + ''; //convert number to string to trim off *all* trailing decimal zero(es)
|
||||
|
||||
//fill back any trailing zero according to format
|
||||
var pos_trail_zero = m[1] && m[1].lastIndexOf('0'); //look for last zero in format
|
||||
var part = v.split('.'); |
||||
//integer will get !part[1]
|
||||
if (!part[1] || part[1] && part[1].length <= pos_trail_zero) { |
||||
v = (+v).toFixed(pos_trail_zero + 1); |
||||
} |
||||
var szSep = m[0].split(Group); //look for separator
|
||||
m[0] = szSep.join(''); //join back without separator for counting the pos of any leading 0.
|
||||
|
||||
var pos_lead_zero = m[0] && m[0].indexOf('0'); |
||||
if (pos_lead_zero > -1) { |
||||
while (part[0].length < (m[0].length - pos_lead_zero)) { |
||||
part[0] = '0' + part[0]; |
||||
} |
||||
} else if (+part[0] == 0) { |
||||
part[0] = ''; |
||||
} |
||||
|
||||
v = v.split('.'); |
||||
v[0] = part[0]; |
||||
|
||||
//process the first group separator from decimal (.) only, the rest ignore.
|
||||
//get the length of the last slice of split result.
|
||||
var pos_separator = (szSep[1] && szSep[szSep.length - 1].length); |
||||
if (pos_separator) { |
||||
var integer = v[0]; |
||||
var str = ''; |
||||
var offset = integer.length % pos_separator; |
||||
for (var i = 0, l = integer.length; i < l; i++) { |
||||
|
||||
str += integer.charAt(i); //ie6 only support charAt for sz.
|
||||
//-pos_separator so that won't trail separator on full length
|
||||
if (!((i - offset + 1) % pos_separator) && i < l - pos_separator) { |
||||
str += Group; |
||||
} |
||||
} |
||||
v[0] = str; |
||||
} |
||||
|
||||
v[1] = (m[1] && v[1]) ? Decimal + v[1] : ""; |
||||
return (isNegative ? '-' : '') + v[0] + v[1]; //put back any negation and combine integer and fraction.
|
||||
} |
||||
|
||||
}); |
||||
|
||||
L.Map.mergeOptions({ |
||||
MapCenterCoordControl: false |
||||
}); |
||||
|
||||
L.Map.addInitHook(function () { |
||||
if (this.options.MapCenterCoordControl) { |
||||
this.MapCenterCoordControl = new L.Control.MapCenterCoord(); |
||||
this.addControl(this.MapCenterCoordControl); |
||||
} |
||||
}); |
||||
|
||||
L.control.mapCenterCoord = function (options) { |
||||
return new L.Control.MapCenterCoord(options); |
||||
}; |
||||
@ -0,0 +1,21 @@
|
||||
The MIT License (MIT) |
||||
|
||||
Copyright (c) 2015 Xisco Guaita |
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||
of this software and associated documentation files (the "Software"), to deal |
||||
in the Software without restriction, including without limitation the rights |
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||
copies of the Software, and to permit persons to whom the Software is |
||||
furnished to do so, subject to the following conditions: |
||||
|
||||
The above copyright notice and this permission notice shall be included in all |
||||
copies or substantial portions of the Software. |
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||
SOFTWARE. |
||||
@ -0,0 +1,66 @@
|
||||
# Leaflet.MapCenterCoord |
||||
|
||||
A Leaflet control to display the coordinates of the map center, especially useful on **touch/mobile devices**. |
||||
|
||||
The initial idea was based on the plugin [Leaflet.MousePosition](https://github.com/ardhi/Leaflet.MousePosition). |
||||
|
||||
## Requirements |
||||
|
||||
Leaflet v7.x |
||||
Tested ok on Leaflet 1.0 beta2 |
||||
|
||||
#### Some tested platforms |
||||
|
||||
Android 4.4.2: Google Chrome 47 and stock browser |
||||
iOS 9.2: Safari |
||||
|
||||
Desktops: Windows 7, Windows 10, Ubuntu 14.04 LTS |
||||
Google Chrome 47, Firefox 43, Microsoft Internet Explorer 10, 11 and Edge 25 |
||||
|
||||
## Examples |
||||
|
||||
http://xguaita.github.io/Leaflet.MapCenterCoord/ |
||||
|
||||
Sources in [/examples](/xguaita/Leaflet.MapCenterCoord/tree/master/examples) folder |
||||
|
||||
## Install |
||||
|
||||
+ [Download](https://github.com/xguaita/Leaflet.MapCenterCoord/releases/latest) latest release |
||||
- Source code in `/src` folder |
||||
- Minified versions in `/dist` |
||||
|
||||
+ Include js and css files located in the `/dist` folder (production) or `/src` (development) |
||||
|
||||
+ If you want to change the code and build minified versions: |
||||
First, install node.js on your system. Then run `npm install` to build the minified js and css into `/dist` |
||||
|
||||
## Usage |
||||
|
||||
Add the following line to your map initialization: |
||||
|
||||
``` js |
||||
L.control.mapCenterCoord().addTo(map); |
||||
``` |
||||
You can also pass a configuration. |
||||
|
||||
|
||||
## Configuration options |
||||
|
||||
The MapCenterCoord control inherits options from [Leaflet Controls](http://leafletjs.com/reference.html#control-options). |
||||
|
||||
| Option | Type | Default | Description |
||||
| --- | --- | --- | --- |
||||
| position | String | `'bottomleft'` | The standard Leaflet.Control [position parameter](http://leafletjs.com/reference.html#control-positions) |
||||
| icon | Boolean | `true` | Shows crosshair icon on map center |
||||
| onMove | Boolean | `false` | Update the coordinates of the map center while dragging |
||||
| template | String | <code>'{y} | {x}'</code> | Display template |
||||
| latlngFormat | String | `'DD'` | Show lat/lng coordinates in 3 possible formats:<br>Decimal degrees `'DD'` (DDD.DDDDD°)<br>Degrees and decimal minutes `'DM'` (DDD° MM.MMM')<br>Degrees, minutes and seconds `'DMS'` (DDD° MM' SS.S") |
||||
| latlngDesignators | Boolean | `false` | Show N-S and E-W |
||||
| projected | Boolean | `false` | Show projected coordinates |
||||
| formatProjected | String | `'#.##0,0'` | Number format mask for projected coordinates.<br>[JavaScript Number Formatter](https://code.google.com/p/javascript-number-formatter/) project: [sample/help page](http://www.integraxor.com/developer/codes/js-formatter/format-sample.htm ) |
||||
| latLngFormatter | Function | `undefined` | Function that takes the lattitude and longitude as arguments and returns a single formatted string, e.g.<pre>function (lat, lng) {<br> return lat + " north and " + lng + " west";<br>}</pre> |
||||
|
||||
|
||||
## License |
||||
|
||||
This software is released under the [MIT license](http://opensource.org/licenses/mit-license.php). |
||||
@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
|
||||
<head> |
||||
<title>Center Position Control - DDMM</title> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> |
||||
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" /> |
||||
<link rel="stylesheet" href="http://xguaita.github.io/Leaflet.MapCenterCoord/dist/L.Control.MapCenterCoord.min.css" /> |
||||
<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script> |
||||
<script src="http://xguaita.github.io/Leaflet.MapCenterCoord/dist/L.Control.MapCenterCoord.min.js"></script> |
||||
<style> |
||||
body { |
||||
padding: 0; |
||||
margin: 0; |
||||
} |
||||
html, body, #map { |
||||
height: 100%; |
||||
} |
||||
</style> |
||||
</head> |
||||
|
||||
<body> |
||||
|
||||
<div id="map" class="map"></div> |
||||
|
||||
<script> |
||||
var map = L.map('map').setView([39.588, 2.935], 9); |
||||
|
||||
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { |
||||
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' |
||||
}).addTo(map); |
||||
|
||||
L.control.mapCenterCoord({ |
||||
latlngFormat: 'DM', |
||||
latlngDesignators: true |
||||
}).addTo(map); |
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
|
||||
<head> |
||||
<title>Center Position Control - DDMMSS</title> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> |
||||
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" /> |
||||
<link rel="stylesheet" href="http://xguaita.github.io/Leaflet.MapCenterCoord/dist/L.Control.MapCenterCoord.min.css" /> |
||||
<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script> |
||||
<script src="http://xguaita.github.io/Leaflet.MapCenterCoord/dist/L.Control.MapCenterCoord.min.js"></script> |
||||
<style> |
||||
body { |
||||
padding: 0; |
||||
margin: 0; |
||||
} |
||||
html, body, #map { |
||||
height: 100%; |
||||
} |
||||
</style> |
||||
</head> |
||||
|
||||
<body> |
||||
|
||||
<div id="map" class="map"></div> |
||||
|
||||
<script> |
||||
var map = L.map('map').setView([39.588, 2.935], 9); |
||||
|
||||
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { |
||||
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' |
||||
}).addTo(map); |
||||
|
||||
L.control.mapCenterCoord({ |
||||
latlngFormat: 'DMS' |
||||
}).addTo(map); |
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
|
||||
<head> |
||||
<title>Center Position Control - ETRS89_UTM31N</title> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> |
||||
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" /> |
||||
<link rel="stylesheet" href="http://xguaita.github.io/Leaflet.MapCenterCoord/dist/L.Control.MapCenterCoord.min.css" /> |
||||
<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.12/proj4.js"></script> |
||||
<script src="./lib/proj4leaflet.min.js"></script> |
||||
<script src="http://xguaita.github.io/Leaflet.MapCenterCoord/dist/L.Control.MapCenterCoord.min.js"></script> |
||||
<style> |
||||
body { |
||||
padding: 0; |
||||
margin: 0; |
||||
} |
||||
html, body, #map { |
||||
height: 100%; |
||||
} |
||||
.leaflet-control-mapcentercoord-icon { |
||||
background: url(http://xguaita.github.io/Leaflet.MapCenterCoord/dist/icons/MapCenterCoordIcon2.svg) 50% 50% no-repeat; |
||||
} |
||||
</style> |
||||
</head> |
||||
|
||||
<body> |
||||
|
||||
<div id="map" class="map"></div> |
||||
|
||||
<script> |
||||
var etrs89N31 = new L.Proj.CRS("EPSG:25831", "+proj=utm +zone=31 +ellps=GRS80 +units=m +no_defs", { |
||||
origin: [238379.2278, 4265559.3497], |
||||
resolutions: [305.75, 152.87, 76.437, 38.219, 19.109, 9.5546, 4.7773, 2.3887, 1.1943, 0.5972] |
||||
}); |
||||
|
||||
//Ortofoto ideib |
||||
var orto = new L.TileLayer.WMS("http://ideib.caib.es/pub_ideib/public/Ortofoto/MapServer/WMSServer", { |
||||
layers: '0,1,2', |
||||
format: 'image/jpeg', |
||||
attribution: "© IDEIB", |
||||
maxZoom: 9, |
||||
minZoom: 0, |
||||
continuousWorld: true |
||||
}); |
||||
|
||||
var map = L.map('map', { |
||||
crs: etrs89N31, |
||||
center: [39.588, 2.935], |
||||
zoom: 0, |
||||
layers: [orto], |
||||
continuousWorld: true |
||||
}); |
||||
|
||||
L.control.mapCenterCoord({ |
||||
iconFile: 'MapCenterCoordIcon2.png', |
||||
template: '<b>ETRS89 UTM31N</b><br>x:{x} y:{y}', |
||||
projected: true, |
||||
onMove: true, |
||||
formatProjected: '#.##0,' |
||||
}).addTo(map); |
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
|
||||
<head> |
||||
<title>Center Position Control - Single lat/lng formatter</title> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> |
||||
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" /> |
||||
<link rel="stylesheet" href="http://xguaita.github.io/Leaflet.MapCenterCoord/dist/L.Control.MapCenterCoord.min.css" /> |
||||
<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script> |
||||
<script src="../src/L.Control.MapCenterCoord.js"></script> |
||||
<script src="https://cdn.rawgit.com/davetroy/geohash-js/cffd38621a27505f471493229037205f282b4397/geohash.js"></script> |
||||
<style> |
||||
body { |
||||
padding: 0; |
||||
margin: 0; |
||||
} |
||||
html, body, #map { |
||||
height: 100%; |
||||
} |
||||
</style> |
||||
</head> |
||||
|
||||
<body> |
||||
|
||||
<div id="map" class="map"></div> |
||||
|
||||
<script> |
||||
var map = L.map('map').setView([43.0799, -79.0747], 9); |
||||
|
||||
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { |
||||
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' |
||||
}).addTo(map); |
||||
|
||||
L.control.mapCenterCoord({ |
||||
latLngFormatter: function (lat, lng) { |
||||
//calculate the geo hash (to show combining lat and long); display it as a link (to show how to customise the display) |
||||
var geohash = encodeGeoHash(lat, lng); |
||||
return '<a href="https://www.flickr.com/nearby/' + lat + ',' + lng + '?taken=alltime">' + geohash + '</a>' |
||||
}, |
||||
onMove: true |
||||
}).addTo(map); |
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -0,0 +1,15 @@
|
||||
(function(factory){var L,proj4;if(typeof define==='function'&&define.amd){define(['leaflet','proj4'],factory);}else if(typeof module!=='undefined'){L=require('leaflet');proj4=require('proj4');module.exports=factory(L,proj4);}else{if(typeof window.L==='undefined'||typeof window.proj4==='undefined') |
||||
throw'Leaflet and proj4 must be loaded first';factory(window.L,window.proj4);}}(function(L,proj4){L.Proj={};L.Proj._isProj4Obj=function(a){return(typeof a.inverse!=='undefined'&&typeof a.forward!=='undefined');};L.Proj.ScaleDependantTransformation=function(scaleTransforms){this.scaleTransforms=scaleTransforms;};L.Proj.ScaleDependantTransformation.prototype.transform=function(point,scale){return this.scaleTransforms[scale].transform(point,scale);};L.Proj.ScaleDependantTransformation.prototype.untransform=function(point,scale){return this.scaleTransforms[scale].untransform(point,scale);};L.Proj.Projection=L.Class.extend({initialize:function(a,def){if(L.Proj._isProj4Obj(a)){this._proj=a;}else{var code=a;if(def){proj4.defs(code,def);}else if(proj4.defs[code]===undefined){var urn=code.split(':');if(urn.length>3){code=urn[urn.length-3]+':'+urn[urn.length-1];} |
||||
if(proj4.defs[code]===undefined){throw'No projection definition for code '+code;}} |
||||
this._proj=proj4(code);}},project:function(latlng){var point=this._proj.forward([latlng.lng,latlng.lat]);return new L.Point(point[0],point[1]);},unproject:function(point,unbounded){var point2=this._proj.inverse([point.x,point.y]);return new L.LatLng(point2[1],point2[0],unbounded);}});L.Proj.CRS=L.Class.extend({includes:L.CRS,options:{transformation:new L.Transformation(1,0,-1,0)},initialize:function(a,b,c){var code,proj,def,options;if(L.Proj._isProj4Obj(a)){proj=a;code=proj.srsCode;options=b||{};this.projection=new L.Proj.Projection(proj);}else{code=a;def=b;options=c||{};this.projection=new L.Proj.Projection(code,def);} |
||||
L.Util.setOptions(this,options);this.code=code;this.transformation=this.options.transformation;if(this.options.origin){this.transformation=new L.Transformation(1,-this.options.origin[0],-1,this.options.origin[1]);} |
||||
if(this.options.scales){this._scales=this.options.scales;}else if(this.options.resolutions){this._scales=[];for(var i=this.options.resolutions.length-1;i>=0;i--){if(this.options.resolutions[i]){this._scales[i]=1/this.options.resolutions[i];}}}},scale:function(zoom){var iZoom=Math.floor(zoom),baseScale,nextScale,scaleDiff,zDiff;if(zoom===iZoom){return this._scales[zoom];}else{baseScale=this._scales[iZoom];nextScale=this._scales[iZoom+1];scaleDiff=nextScale-baseScale;zDiff=(zoom-iZoom);return baseScale+scaleDiff*zDiff;}},getSize:function(zoom){var b=this.options.bounds,s,min,max;if(b){s=this.scale(zoom);min=this.transformation.transform(b.min,s);max=this.transformation.transform(b.max,s);return L.point(Math.abs(max.x-min.x),Math.abs(max.y-min.y));}else{s=256*Math.pow(2,zoom);return L.point(s,s);}}});L.Proj.CRS.TMS=L.Proj.CRS.extend({options:{tileSize:256},initialize:function(a,b,c,d){var code,def,proj,projectedBounds,options;if(L.Proj._isProj4Obj(a)){proj=a;projectedBounds=b;options=c||{};options.origin=[projectedBounds[0],projectedBounds[3]];L.Proj.CRS.prototype.initialize.call(this,proj,options);}else{code=a;def=b;projectedBounds=c;options=d||{};options.origin=[projectedBounds[0],projectedBounds[3]];L.Proj.CRS.prototype.initialize.call(this,code,def,options);} |
||||
this.projectedBounds=projectedBounds;this._sizes=this._calculateSizes();},_calculateSizes:function(){var sizes=[],crsBounds=this.projectedBounds,projectedTileSize,i,x,y;for(i=this._scales.length-1;i>=0;i--){if(this._scales[i]){projectedTileSize=this.options.tileSize/this._scales[i];x=Math.ceil(parseFloat((crsBounds[2]-crsBounds[0])/projectedTileSize).toPrecision(3))*projectedTileSize*this._scales[i];y=Math.ceil(parseFloat((crsBounds[3]-crsBounds[1])/projectedTileSize).toPrecision(3))*projectedTileSize*this._scales[i];sizes[i]=L.point(x,y);}} |
||||
return sizes;},getSize:function(zoom){return this._sizes[zoom];}});L.Proj.TileLayer={};L.Proj.TileLayer.TMS=L.TileLayer.extend({options:{continuousWorld:true},initialize:function(urlTemplate,crs,options){var boundsMatchesGrid=true,scaleTransforms,upperY,crsBounds,i;if(!(crs instanceof L.Proj.CRS.TMS)){throw'CRS is not L.Proj.CRS.TMS.';} |
||||
L.TileLayer.prototype.initialize.call(this,urlTemplate,options);this.options.tms=false;this.crs=crs;crsBounds=this.crs.projectedBounds;for(i=this.options.minZoom;i<this.options.maxZoom&&boundsMatchesGrid;i++){var gridHeight=(crsBounds[3]-crsBounds[1])/this._projectedTileSize(i);boundsMatchesGrid=Math.abs(gridHeight-Math.round(gridHeight))>1e-3;} |
||||
if(!boundsMatchesGrid){scaleTransforms={};for(i=this.options.minZoom;i<this.options.maxZoom;i++){upperY=crsBounds[1]+Math.ceil((crsBounds[3]-crsBounds[1])/this._projectedTileSize(i))*this._projectedTileSize(i);scaleTransforms[this.crs.scale(i)]=new L.Transformation(1,-crsBounds[0],-1,upperY);} |
||||
this.crs=new L.Proj.CRS.TMS(this.crs.projection._proj,crsBounds,this.crs.options);this.crs.transformation=new L.Proj.ScaleDependantTransformation(scaleTransforms);}},getTileUrl:function(tilePoint){var zoom=this._map.getZoom(),gridHeight=Math.ceil((this.crs.projectedBounds[3]-this.crs.projectedBounds[1])/this._projectedTileSize(zoom));return L.Util.template(this._url,L.Util.extend({s:this._getSubdomain(tilePoint),z:this._getZoomForUrl(),x:tilePoint.x,y:gridHeight-tilePoint.y-1},this.options));},_projectedTileSize:function(zoom){return(this.options.tileSize/this.crs.scale(zoom));}});L.Proj.GeoJSON=L.GeoJSON.extend({initialize:function(geojson,options){this._callLevel=0;L.GeoJSON.prototype.initialize.call(this,null,options);if(geojson){this.addData(geojson);}},addData:function(geojson){var crs;if(geojson){if(geojson.crs&&geojson.crs.type==='name'){crs=new L.Proj.CRS(geojson.crs.properties.name);}else if(geojson.crs&&geojson.crs.type){crs=new L.Proj.CRS(geojson.crs.type+':'+geojson.crs.properties.code);} |
||||
if(crs!==undefined){this.options.coordsToLatLng=function(coords){var point=L.point(coords[0],coords[1]);return crs.projection.unproject(point);};}} |
||||
this._callLevel++;try{L.GeoJSON.prototype.addData.call(this,geojson);}finally{this._callLevel--;if(this._callLevel===0){delete this.options.coordsToLatLng;}}}});L.Proj.geoJson=function(geojson,options){return new L.Proj.GeoJSON(geojson,options);};L.Proj.ImageOverlay=L.ImageOverlay.extend({initialize:function(url,bounds,options){L.ImageOverlay.prototype.initialize.call(this,url,null,options);this._projBounds=bounds;},_animateZoom:function(e){var northwest=L.point(this._projBounds.min.x,this._projBounds.max.y),southeast=L.point(this._projBounds.max.x,this._projBounds.min.y),topLeft=this._projectedToNewLayerPoint(northwest,e.zoom,e.center),size=this._projectedToNewLayerPoint(southeast,e.zoom,e.center).subtract(topLeft),origin=topLeft.add(size._multiplyBy((1-1/e.scale)/2));this._image.style[L.DomUtil.TRANSFORM]=L.DomUtil.getTranslateString(origin)+' scale('+this._map.getZoomScale(e.zoom)+') ';},_reset:function(){var zoom=this._map.getZoom(),pixelOrigin=this._map.getPixelOrigin(),bounds=L.bounds(this._transform(this._projBounds.min,zoom)._subtract(pixelOrigin),this._transform(this._projBounds.max,zoom)._subtract(pixelOrigin)),size=bounds.getSize(),image=this._image;L.DomUtil.setPosition(image,bounds.min);image.style.width=size.x+'px';image.style.height=size.y+'px';},_projectedToNewLayerPoint:function(point,newZoom,newCenter){var topLeft=this._map._getNewTopLeftPoint(newCenter,newZoom).add(this._map._getMapPanePos());return this._transform(point,newZoom)._subtract(topLeft);},_transform:function(p,zoom){var crs=this._map.options.crs,transformation=crs.transformation,scale=crs.scale(zoom);return transformation.transform(p,scale);}});L.Proj.imageOverlay=function(url,bounds,options){return new L.Proj.ImageOverlay(url,bounds,options);};if(typeof L.CRS!=='undefined'){L.CRS.proj4js=(function(){return function(code,def,transformation,options){options=options||{};if(transformation){options.transformation=transformation;} |
||||
return new L.Proj.CRS(code,def,options);};}());} |
||||
return L.Proj;})); |
||||
@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
|
||||
<head> |
||||
<title>Center Position Control - Simple</title> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> |
||||
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" /> |
||||
<link rel="stylesheet" href="http://xguaita.github.io/Leaflet.MapCenterCoord/dist/L.Control.MapCenterCoord.min.css" /> |
||||
<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script> |
||||
<script src="http://xguaita.github.io/Leaflet.MapCenterCoord/dist/L.Control.MapCenterCoord.min.js"></script> |
||||
<style> |
||||
body { |
||||
padding: 0; |
||||
margin: 0; |
||||
} |
||||
html, body, #map { |
||||
height: 100%; |
||||
} |
||||
</style> |
||||
</head> |
||||
|
||||
<body> |
||||
|
||||
<div id="map" class="map"></div> |
||||
|
||||
<script> |
||||
var map = L.map('map').setView([39.588, 2.935], 9); |
||||
|
||||
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { |
||||
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' |
||||
}).addTo(map); |
||||
|
||||
L.control.mapCenterCoord().addTo(map); |
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
|
Dopo Larghezza: | Altezza: | Dimensione: 3.9 KiB |
|
Dopo Larghezza: | Altezza: | Dimensione: 2.1 KiB |
@ -0,0 +1,37 @@
|
||||
{ |
||||
"name": "Leaflet.MapCenterCoord", |
||||
"version": "0.7.0", |
||||
"description": "A Leaflet control to display the coordinates of the map center, designed for mobile devices", |
||||
"main": "dist/L.Control.MapCenterCoord.min.js", |
||||
"author": "Xisco Guaita", |
||||
"license": "MIT", |
||||
"homepage": "https://github.com/xguaita/Leaflet.MapCenterCoord", |
||||
"repository": { |
||||
"type": "git", |
||||
"url": "https://github.com/xguaita/Leaflet.MapCenterCoord.git" |
||||
}, |
||||
"keywords": [ |
||||
"leaflet", |
||||
"plugin", |
||||
"control", |
||||
"center map", |
||||
"coordinates", |
||||
"mobile" |
||||
], |
||||
"bugs": { |
||||
"url": "https://github.com/xguaita/Leaflet.MapCenterCoord/issues" |
||||
}, |
||||
"scripts": { |
||||
"prepublish": "grunt default" |
||||
}, |
||||
"devDependencies": { |
||||
"grunt": "^0.4.5", |
||||
"grunt-contrib-clean": "^0.6.0", |
||||
"grunt-contrib-cssmin": "^0.12.0", |
||||
"grunt-contrib-uglify": "^0.8.0", |
||||
"grunt-contrib-copy": "^0.8.0" |
||||
}, |
||||
"dependencies": { |
||||
"leaflet": "~0.7.5" |
||||
} |
||||
} |
||||
|
Dopo Larghezza: | Altezza: | Dimensione: 31 KiB |
|
Dopo Larghezza: | Altezza: | Dimensione: 19 KiB |
|
Dopo Larghezza: | Altezza: | Dimensione: 797 B |
@ -0,0 +1,340 @@
|
||||
(function (window, document, undefined) { |
||||
var editMarkerToolbarAction = L.Toolbar2.Action.extend({ |
||||
initialize: function (map, marker, options) { |
||||
this._map = map; |
||||
this._marker = marker; |
||||
|
||||
options = options || { |
||||
toolbarIcon: { |
||||
tooltip: 'Edit' |
||||
} |
||||
}; |
||||
|
||||
if (this._marker.options.toolbarEditIconClass) { |
||||
options.toolbarIcon.className = this._marker.options.toolbarEditIconClass |
||||
} else { |
||||
options.toolbarIcon.html = 'Edit'; |
||||
} |
||||
|
||||
L.Util.setOptions(this, options); |
||||
|
||||
L.Toolbar2.Action.prototype.initialize.call(this, map, options); |
||||
}, |
||||
|
||||
addHooks: function () { |
||||
var that = this; |
||||
|
||||
that._marker._popupToolbar._onMarkerDrag = function (e) { |
||||
that._marker._popupToolbar.setLatLng(that._marker.getLatLng()); |
||||
if (that._marker.label) { |
||||
that._marker.updateLabelContent(that._marker.options.getLabelContent()); |
||||
} |
||||
that._marker._dragged = true; |
||||
}; |
||||
that._marker._popupToolbar._onMarkerDragEnd = function (e) { |
||||
if (that._marker._popupToolbar._bringToFront) { |
||||
that._marker._popupToolbar._bringToFront(); |
||||
} |
||||
}; |
||||
|
||||
if (!that._marker._enableEditMode) { |
||||
that._marker._enableEditMode = function () { |
||||
that._marker._editModeEnabled = true; |
||||
|
||||
that._marker.options.clusterGroup.removeLayer(that._marker); |
||||
that._map.addLayer(that._marker); |
||||
|
||||
if (that._marker.options.editModeIcon) { |
||||
that._marker.setIcon(that._marker.options.editModeIcon); |
||||
} |
||||
|
||||
if (that._marker._popupToolbar._bringToFront) { |
||||
that._marker._popupToolbar._bringToFront(); |
||||
} |
||||
|
||||
that._marker.options.draggable = true; |
||||
that._marker.dragging.enable(); |
||||
|
||||
if (that._marker.options.showLabelOnEdit && !that._marker.label) { |
||||
that._marker.bindLabel(that._marker.options.getLabelContent(), { |
||||
noHide: true, |
||||
direction: 'auto', |
||||
pane: that._map.getPanes.popupPane |
||||
}); |
||||
} |
||||
if (that._marker.label) { |
||||
that._marker.showLabel(); |
||||
} |
||||
|
||||
that._marker.on('drag', that._marker._popupToolbar._onMarkerDrag); |
||||
|
||||
that._marker.on('dragend', that._marker._popupToolbar._onMarkerDragEnd); |
||||
}; |
||||
} |
||||
|
||||
if (!that._marker._disableEditMode) { |
||||
that._marker._disableEditMode = function () { |
||||
that._marker._editModeEnabled = false; |
||||
|
||||
if (that._marker.options.normalModeIcon) { |
||||
that._marker.setIcon(that._marker.options.normalModeIcon); |
||||
} else { |
||||
that._marker.setIcon(new L.Icon.Default); |
||||
} |
||||
|
||||
that._marker.options.draggable = false; |
||||
that._marker.dragging.disable(); |
||||
|
||||
that._marker.off('drag', that._marker._popupToolbar._onMarkerDrag); |
||||
that._marker.off('dragend', that._marker._popupToolbar._onMarkerDragEnd); |
||||
|
||||
that._map.removeLayer(that._marker); |
||||
that._marker.options.clusterGroup.addLayer(that._marker); |
||||
|
||||
if (that._marker.label) { |
||||
that._marker.hideLabel(); |
||||
that._marker.unbindLabel(); |
||||
} |
||||
|
||||
if (that._marker._popupToolbar._bringToFront) { |
||||
that._marker._popupToolbar._bringToFront(); |
||||
} |
||||
|
||||
var visibleOne = that._marker.options.clusterGroup.getVisibleParent(that._marker); |
||||
if (visibleOne && that._marker && !visibleOne.getLatLng().equals(that._marker.getLatLng()) && that._marker._popupToolbar) { |
||||
that._marker._popupToolbar._removeToolbar(); |
||||
} |
||||
|
||||
if (that._marker.options.hideToolbarAfterEdit && that._marker._popupToolbar && that._marker._popupToolbar._removeToolbar) { |
||||
that._marker._popupToolbar._removeToolbar(); |
||||
} |
||||
}; |
||||
} |
||||
|
||||
if (that._marker._editModeEnabled) { |
||||
that._marker._disableEditMode(); |
||||
|
||||
if (that._marker._dragged) { |
||||
that._marker._dragged = undefined; |
||||
that._marker.fire('marker:edited'); |
||||
} |
||||
} else { |
||||
that._marker._enableEditMode(); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
var deleteMarkerToolbarAction = L.Toolbar2.Action.extend({ |
||||
initialize: function (map, marker, options) { |
||||
this._map = map; |
||||
this._marker = marker; |
||||
|
||||
options = options || { |
||||
toolbarIcon: { |
||||
tooltip: 'Delete' |
||||
} |
||||
}; |
||||
|
||||
if (this._marker.options.toolbarDeleteIconClass) { |
||||
options.toolbarIcon.className = this._marker.options.toolbarDeleteIconClass |
||||
} else { |
||||
options.toolbarIcon.html = 'Delete'; |
||||
} |
||||
|
||||
L.Util.setOptions(this, options); |
||||
|
||||
L.Toolbar2.Action.prototype.initialize.call(this, map, options); |
||||
}, |
||||
|
||||
addHooks: function () { |
||||
if (this._marker._popupToolbar && this._marker._popupToolbar._removeToolbar) { |
||||
this._marker._popupToolbar._removeToolbar(); |
||||
} |
||||
|
||||
var deleted = false; |
||||
if (this._marker.options.clusterGroup.hasLayer(this._marker)) { |
||||
this._marker.options.clusterGroup.removeLayer(this._marker); |
||||
deleted = deleted || true; |
||||
} |
||||
|
||||
if (this._map.hasLayer(this._marker)) { |
||||
this._map.removeLayer(this._marker); |
||||
deleted = deleted || true; |
||||
} |
||||
|
||||
if (deleted) { |
||||
this._marker.fire('marker:deleted'); |
||||
|
||||
this._marker.off('marker:edited'); |
||||
this._marker.off('marker:deleted'); |
||||
this._marker.off('popuptoolbar:shown'); |
||||
this._marker.off('popuptoolbar:closed'); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
var closeMarkerToolbarAction = L.Toolbar2.Action.extend({ |
||||
initialize: function (map, marker, options) { |
||||
this._map = map; |
||||
this._marker = marker; |
||||
|
||||
options = options || { |
||||
toolbarIcon: { |
||||
tooltip: 'Close' |
||||
} |
||||
}; |
||||
|
||||
if (this._marker.options.toolbarCloseIconClass) { |
||||
options.toolbarIcon.className = this._marker.options.toolbarCloseIconClass |
||||
} else { |
||||
options.toolbarIcon.html = 'Close'; |
||||
} |
||||
|
||||
L.Util.setOptions(this, options); |
||||
|
||||
L.Toolbar2.Action.prototype.initialize.call(this, map, options); |
||||
}, |
||||
|
||||
addHooks: function () { |
||||
if (this._marker._popupToolbar && this._marker._popupToolbar._removeToolbar) { |
||||
this._marker._popupToolbar._removeToolbar(); |
||||
} |
||||
if (this._marker._dragged) { |
||||
this._marker._dragged = undefined; |
||||
this._marker.fire('marker:edited'); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
var editableMarkerPopupToolbar = L.Toolbar2.Popup.extend({ |
||||
options: { |
||||
actions: [ |
||||
editMarkerToolbarAction, |
||||
deleteMarkerToolbarAction, |
||||
closeMarkerToolbarAction |
||||
] |
||||
}, |
||||
|
||||
onAdd: function (map) { |
||||
var that = this; |
||||
var marker = this._arguments[1]; |
||||
|
||||
if (marker instanceof L.Marker) { |
||||
// Adjust the toolbar position so that it doesn't cover the marker.
|
||||
var popupAnchor = marker.options.icon.options.popupAnchor; |
||||
this.options.anchor = L.point([popupAnchor[0], popupAnchor[1] - 6]); |
||||
} |
||||
|
||||
L.Toolbar2.Popup.prototype.onAdd.call(this, map); |
||||
|
||||
if (marker.options.clusterGroup) { |
||||
that._onClusterGroupAnimationEnd = function (e) { |
||||
// Remove popup only if owner-marker clustered, otherwise don't remove.
|
||||
var visibleOne = marker.options.clusterGroup.getVisibleParent(marker); |
||||
if (visibleOne && marker && !visibleOne.getLatLng().equals(marker.getLatLng()) && that._removeToolbar) { |
||||
that._removeToolbar(); |
||||
} |
||||
}; |
||||
|
||||
marker.options.clusterGroup.on('animationend', that._onClusterGroupAnimationEnd); |
||||
} |
||||
|
||||
that._removeToolbar = function () { |
||||
if (that._onClusterGroupAnimationEnd) { |
||||
marker.options.clusterGroup.off('animationend', that._onClusterGroupAnimationEnd); |
||||
that._onClusterGroupAnimationEnd = undefined; |
||||
} |
||||
|
||||
if (that._removeToolbar) { |
||||
map.off('click', that._removeToolbar); |
||||
} |
||||
|
||||
if (that._bringToFront) { |
||||
that._bringToFront = undefined; |
||||
} |
||||
|
||||
if (marker._editModeEnabled && marker._disableEditMode) { |
||||
marker._disableEditMode(); |
||||
|
||||
marker._editModeEnabled = undefined; |
||||
marker._enableEditMode = undefined; |
||||
marker._disableEditMode = undefined; |
||||
} |
||||
|
||||
map.removeLayer(that); |
||||
|
||||
that._removeToolbar = undefined; |
||||
marker._popupToolbar = undefined; |
||||
|
||||
marker.fire('popuptoolbar:closed'); |
||||
}; |
||||
|
||||
// Bring to front imitation.
|
||||
that._bringToFront = function () { |
||||
map.removeLayer(that); |
||||
map.addLayer(that); |
||||
}; |
||||
|
||||
map.once('click', that._removeToolbar); |
||||
} |
||||
}); |
||||
|
||||
// L.MarkerClusterGroup doesn't support draggable markers.
|
||||
// This extension fixes this problem.
|
||||
L.MarkerClusterGroup.EditableMarker = L.Marker.extend({ |
||||
options: { |
||||
normalModeIcon: undefined, |
||||
editModeIcon: undefined, |
||||
toolbarEditIconClass: undefined, |
||||
toolbarDeleteIconClass: undefined, |
||||
toolbarCloseIconClass: undefined, |
||||
|
||||
clusterGroup: undefined, |
||||
getLabelContent: function () { |
||||
return 'This is editable marker for cluster group.' |
||||
}, |
||||
showLabelOnEdit: true, |
||||
hideToolbarAfterEdit: false, |
||||
dontShowToolbarOnFirstClick: false |
||||
}, |
||||
|
||||
initialize: function (latlng, options) { |
||||
L.Util.setOptions(this, options); |
||||
|
||||
if (!(this.options.clusterGroup instanceof L.MarkerClusterGroup)) { |
||||
throw new TypeError('Wrong type for \'clustrGroup\' option.'); |
||||
} |
||||
|
||||
if (!(this.options.normalModeIcon instanceof L.Icon)) { |
||||
this.options.normalModeIcon = new L.Icon.Default; |
||||
} |
||||
|
||||
this.options.icon = this.options.normalModeIcon; |
||||
|
||||
if (!(this.options.editModeIcon instanceof L.Icon)) { |
||||
this.options.editModeIcon = new L.Icon.Default; |
||||
} |
||||
|
||||
L.Marker.prototype.initialize.call(this, latlng, options); |
||||
|
||||
var markerWasClicked = false; |
||||
|
||||
this.on('click', function (e) { |
||||
if (!this._popupToolbar && (!this.options.dontShowToolbarOnFirstClick || this.options.dontShowToolbarOnFirstClick && markerWasClicked)) { |
||||
var prevMarker = this.options.clusterGroup._prevEditedMarker = this.options.clusterGroup._currentEditedMarker || {}; |
||||
this.options.clusterGroup._currentEditedMarker = this; |
||||
|
||||
if (prevMarker._popupToolbar && prevMarker._popupToolbar._removeToolbar) { |
||||
prevMarker._popupToolbar._removeToolbar(); |
||||
} |
||||
|
||||
this._popupToolbar = (new editableMarkerPopupToolbar(e.latlng)).addTo(map, this); |
||||
|
||||
this.fire('popuptoolbar:shown'); |
||||
} |
||||
|
||||
markerWasClicked = true; |
||||
}); |
||||
} |
||||
}); |
||||
})(window, document); |
||||
|
Dopo Larghezza: | Altezza: | Dimensione: 1.2 KiB |
|
Dopo Larghezza: | Altezza: | Dimensione: 696 B |
|
Dopo Larghezza: | Altezza: | Dimensione: 2.4 KiB |
|
Dopo Larghezza: | Altezza: | Dimensione: 1.4 KiB |
|
Dopo Larghezza: | Altezza: | Dimensione: 618 B |
|
Dopo Larghezza: | Altezza: | Dimensione: 1.7 KiB |
|
Dopo Larghezza: | Altezza: | Dimensione: 7.0 KiB |
|
Dopo Larghezza: | Altezza: | Dimensione: 3.5 KiB |
|
Dopo Larghezza: | Altezza: | Dimensione: 1.9 KiB |
|
Dopo Larghezza: | Altezza: | Dimensione: 1.6 KiB |
@ -0,0 +1,241 @@
|
||||
.leaflet-draw-section { |
||||
position: relative; |
||||
} |
||||
.leaflet-draw-toolbar { |
||||
margin-top: 12px; |
||||
} |
||||
.leaflet-draw-toolbar-top { |
||||
margin-top: 0; |
||||
} |
||||
.leaflet-draw-toolbar-notop a:first-child { |
||||
border-top-right-radius: 0; |
||||
} |
||||
.leaflet-draw-toolbar-nobottom a:last-child { |
||||
border-bottom-right-radius: 0; |
||||
} |
||||
.leaflet-draw-toolbar a { |
||||
background-image: url("images/spritesheet.svg"); |
||||
background-image: linear-gradient(transparent, transparent), url("images/spritesheet.svg"); |
||||
background-repeat: no-repeat; |
||||
background-size: 500px 50px; |
||||
background-clip: padding-box; |
||||
} |
||||
.leaflet-retina .leaflet-draw-toolbar a { |
||||
background-image: url("images/spritesheet.svg"); |
||||
background-image: linear-gradient(transparent, transparent), url("images/spritesheet.svg"); |
||||
} |
||||
.leaflet-draw a { |
||||
display: block; |
||||
text-align: center; |
||||
text-decoration: none; |
||||
} |
||||
.leaflet-draw a .sr-only { |
||||
position: absolute; |
||||
width: 1px; |
||||
height: 1px; |
||||
padding: 0; |
||||
margin: -1px; |
||||
overflow: hidden; |
||||
clip: rect(0, 0, 0, 0); |
||||
border: 0; |
||||
} |
||||
.leaflet-draw-actions { |
||||
display: none; |
||||
list-style: none; |
||||
margin: 0; |
||||
padding: 0; |
||||
position: absolute; |
||||
left: 26px; |
||||
top: 0; |
||||
white-space: nowrap; |
||||
} |
||||
.leaflet-touch .leaflet-draw-actions { |
||||
left: 32px; |
||||
} |
||||
.leaflet-right .leaflet-draw-actions { |
||||
right: 26px; |
||||
left: auto; |
||||
} |
||||
.leaflet-touch .leaflet-right .leaflet-draw-actions { |
||||
right: 32px; |
||||
left: auto; |
||||
} |
||||
.leaflet-draw-actions li { |
||||
display: inline-block; |
||||
} |
||||
.leaflet-draw-actions li:first-child a { |
||||
border-left: 0; |
||||
} |
||||
.leaflet-draw-actions li:last-child a { |
||||
-webkit-border-radius: 0 4px 4px 0; |
||||
border-radius: 0 4px 4px 0; |
||||
} |
||||
.leaflet-right .leaflet-draw-actions li:last-child a { |
||||
-webkit-border-radius: 0; |
||||
border-radius: 0; |
||||
} |
||||
.leaflet-right .leaflet-draw-actions li:first-child a { |
||||
-webkit-border-radius: 4px 0 0 4px; |
||||
border-radius: 4px 0 0 4px; |
||||
} |
||||
.leaflet-draw-actions a { |
||||
background-color: #919187; |
||||
border-left: 1px solid #aaa; |
||||
color: #fff; |
||||
font: 14px/22px "Helvetica Neue", Arial, Helvetica, sans-serif; |
||||
line-height: 28px; |
||||
text-decoration: none; |
||||
padding-left: 10px; |
||||
padding-right: 10px; |
||||
height: 28px; |
||||
} |
||||
.leaflet-touch .leaflet-draw-actions a { |
||||
font-size: 12px; |
||||
line-height: 30px; |
||||
height: 30px; |
||||
} |
||||
.leaflet-draw-actions-bottom { |
||||
margin-top: 0; |
||||
} |
||||
.leaflet-draw-actions-top { |
||||
margin-top: 1px; |
||||
} |
||||
.leaflet-draw-actions-top a, |
||||
.leaflet-draw-actions-bottom a { |
||||
height: 27px; |
||||
line-height: 27px; |
||||
} |
||||
.leaflet-draw-actions a:hover { |
||||
background-color: #a0a098; |
||||
} |
||||
.leaflet-draw-actions-top.leaflet-draw-actions-bottom a { |
||||
height: 26px; |
||||
line-height: 26px; |
||||
} |
||||
.leaflet-draw-toolbar .leaflet-draw-draw-polyline { |
||||
background-position: -2px -2px; |
||||
} |
||||
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polyline { |
||||
background-position: -3px -6px; |
||||
} |
||||
.leaflet-draw-toolbar .leaflet-draw-draw-polygon { |
||||
background-position: -31px -2px; |
||||
} |
||||
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polygon { |
||||
background-position: -52px -6px; |
||||
} |
||||
.leaflet-draw-toolbar .leaflet-draw-draw-rectangle { |
||||
background-position: -62px -2px; |
||||
} |
||||
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-rectangle { |
||||
background-position: -105px -6px; |
||||
} |
||||
.leaflet-draw-toolbar .leaflet-draw-draw-circle { |
||||
background-position: -92px -2px; |
||||
} |
||||
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circle { |
||||
background-position: -156px -6px; |
||||
} |
||||
.leaflet-draw-toolbar .leaflet-draw-draw-marker { |
||||
background-position: -207px -7px; |
||||
} |
||||
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-marker { |
||||
background-position: -207px -7px; |
||||
} |
||||
.leaflet-draw-toolbar .leaflet-draw-draw-circlemarker { |
||||
background-position: -273px -2px; |
||||
} |
||||
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circlemarker { |
||||
background-position: -463px -6px; |
||||
} |
||||
.leaflet-draw-toolbar .leaflet-draw-edit-edit { |
||||
background-position: -182px -2px; |
||||
} |
||||
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-edit { |
||||
background-position: -257px -6px; |
||||
} |
||||
.leaflet-draw-toolbar .leaflet-draw-edit-remove { |
||||
background-position: -222px -2px; |
||||
} |
||||
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-remove { |
||||
background-position: -309px -6px; |
||||
} |
||||
.leaflet-draw-toolbar .leaflet-draw-edit-edit.leaflet-disabled { |
||||
background-position: -212px -2px; |
||||
} |
||||
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-edit.leaflet-disabled { |
||||
background-position: -257px -6px; |
||||
} |
||||
.leaflet-draw-toolbar .leaflet-draw-edit-remove.leaflet-disabled { |
||||
background-position: -242px -2px; |
||||
} |
||||
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-remove.leaflet-disabled { |
||||
background-position: -309px -6px; |
||||
} |
||||
.leaflet-mouse-marker { |
||||
background-color: #fff; |
||||
cursor: crosshair; |
||||
} |
||||
.leaflet-draw-tooltip { |
||||
background: #363636; |
||||
background: rgba(0, 0, 0, 0.5); |
||||
border: 1px solid transparent; |
||||
-webkit-border-radius: 4px; |
||||
border-radius: 4px; |
||||
color: #fff; |
||||
font: 12px/18px "Helvetica Neue", Arial, Helvetica, sans-serif; |
||||
margin-left: 20px; |
||||
margin-top: -21px; |
||||
padding: 4px 8px; |
||||
position: absolute; |
||||
visibility: hidden; |
||||
white-space: nowrap; |
||||
z-index: 6; |
||||
} |
||||
.leaflet-draw-tooltip:before { |
||||
border-right: 6px solid black; |
||||
border-right-color: rgba(0, 0, 0, 0.5); |
||||
border-top: 6px solid transparent; |
||||
border-bottom: 6px solid transparent; |
||||
content: ""; |
||||
position: absolute; |
||||
top: 7px; |
||||
left: -7px; |
||||
} |
||||
.leaflet-error-draw-tooltip { |
||||
background-color: #f2dede; |
||||
border: 1px solid #e6b6bd; |
||||
color: #b94a48; |
||||
} |
||||
.leaflet-error-draw-tooltip:before { |
||||
border-right-color: #e6b6bd; |
||||
} |
||||
.leaflet-draw-tooltip-single { |
||||
margin-top: -12px; |
||||
} |
||||
.leaflet-draw-tooltip-subtext { |
||||
color: #f8d5e4; |
||||
} |
||||
.leaflet-draw-guide-dash { |
||||
font-size: 1%; |
||||
opacity: 0.6; |
||||
position: absolute; |
||||
width: 5px; |
||||
height: 5px; |
||||
} |
||||
.leaflet-edit-marker-selected { |
||||
background-color: rgba(254, 87, 161, 0.1); |
||||
border: 4px dashed rgba(254, 87, 161, 0.6); |
||||
-webkit-border-radius: 4px; |
||||
border-radius: 4px; |
||||
box-sizing: content-box; |
||||
} |
||||
.leaflet-edit-move { |
||||
cursor: move; |
||||
} |
||||
.leaflet-edit-resize { |
||||
cursor: pointer; |
||||
} |
||||
.leaflet-oldie .leaflet-draw-toolbar { |
||||
border: 1px solid #999; |
||||
} |
||||
File diff soppresso perché troppo grande
Load Diff
@ -0,0 +1,91 @@
|
||||
/** |
||||
* Created by PRadostev on 10.03.2015. |
||||
*/ |
||||
var idlayer;
|
||||
L.DeletePopup = L.Toolbar2.Action.extend({ |
||||
options: { |
||||
toolbarIcon: {className: 'fal fa-trash-alt fa-3x'} |
||||
}, |
||||
|
||||
initialize: function (map, shape, options) { |
||||
this._map = map; |
||||
this._layer = shape; |
||||
|
||||
L.Toolbar2.Action.prototype.initialize.call(this, map, options); |
||||
}, |
||||
|
||||
addHooks: function () { |
||||
this._map.removeLayer(this._layer); |
||||
this._map.removeLayer(this.toolbar); |
||||
this._map.fire('editable:delete', {layer: this._layer}); |
||||
} |
||||
}); |
||||
|
||||
L.LinkPopup = L.Toolbar2.Action.extend({ |
||||
options: { |
||||
toolbarIcon: {className: 'fal fa-passport fa-3x', tooltip: 'COMPLETA DATI DELLA SCHEDA'} |
||||
}, |
||||
|
||||
initialize: function (map, shape, options) { |
||||
this._map = map; |
||||
this._layer = shape; |
||||
|
||||
L.Toolbar2.Action.prototype.initialize.call(this, map, options); |
||||
}, |
||||
|
||||
addHooks: function () { |
||||
var idlayer = this._layer.feature.id; |
||||
window.open('routine_feature?mode=new&id=' + idlayer, '_top'); |
||||
} |
||||
|
||||
}); |
||||
|
||||
L.EditPopup = L.Toolbar2.Action.extend({ |
||||
options: { |
||||
toolbarIcon: {className: 'fal fa-edit fa-3x'} |
||||
}, |
||||
|
||||
initialize: function (map, shape, options) { |
||||
this._map = map; |
||||
this._layer = shape; |
||||
|
||||
L.Toolbar2.Action.prototype.initialize.call(this, map, options); |
||||
}, |
||||
|
||||
enable: function () { |
||||
var map = this._map, |
||||
layer = this._layer; |
||||
|
||||
layer.enableEdit(); |
||||
map.removeLayer(this.toolbar); //?????????????????
|
||||
|
||||
map.once('click', function () { |
||||
layer.disableEdit(); |
||||
}); |
||||
} |
||||
}); |
||||
|
||||
L.EditPopupToolbar = L.Toolbar2.Popup.extend({ |
||||
options: { |
||||
actions: [ |
||||
L.EditPopup, |
||||
L.LinkPopup, |
||||
L.DeletePopup |
||||
] |
||||
}, |
||||
|
||||
onAdd: function (map) { |
||||
var shape = this._arguments[1]; |
||||
|
||||
if (shape instanceof L.Marker) { |
||||
/* Adjust the toolbar position so that it doesn't cover the marker. */ |
||||
this.options.anchor = L.point(shape.options.icon.options.popupAnchor); |
||||
} |
||||
var that = this; |
||||
map.once('click', function () { |
||||
map.removeLayer(that); |
||||
}); |
||||
|
||||
L.Toolbar2.Popup.prototype.onAdd.call(this, map); |
||||
} |
||||
}); |
||||
@ -0,0 +1,102 @@
|
||||
.leaflet-sidebar { |
||||
position: absolute; |
||||
height: 100%; |
||||
-webkit-box-sizing: border-box; |
||||
-moz-box-sizing: border-box; |
||||
box-sizing: border-box; |
||||
padding: 10px; |
||||
z-index: 2000; } |
||||
.leaflet-sidebar.left { |
||||
left: -500px; |
||||
transition: left 0.5s, width 0.5s; |
||||
padding-right: 0; } |
||||
.leaflet-sidebar.left.visible { |
||||
left: 0; } |
||||
.leaflet-sidebar.right { |
||||
right: -500px; |
||||
transition: right 0.5s, width 0.5s; |
||||
padding-left: 0; } |
||||
.leaflet-sidebar.right.visible { |
||||
right: 0; } |
||||
.leaflet-sidebar > .leaflet-control { |
||||
height: 100%; |
||||
width: 100%; |
||||
overflow: auto; |
||||
-webkit-overflow-scrolling: touch; |
||||
-webkit-box-sizing: border-box; |
||||
-moz-box-sizing: border-box; |
||||
box-sizing: border-box; |
||||
padding: 8px 24px; |
||||
font-size: 1.1em; |
||||
background: white; |
||||
box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65); |
||||
-webkit-border-radius: 4px; |
||||
border-radius: 4px; } |
||||
.leaflet-touch .leaflet-sidebar > .leaflet-control { |
||||
box-shadow: none; |
||||
border: 2px solid rgba(0, 0, 0, 0.2); |
||||
background-clip: padding-box; } |
||||
@media (max-width: 767px) { |
||||
.leaflet-sidebar { |
||||
width: 100%; |
||||
padding: 0; } |
||||
.leaflet-sidebar.left.visible ~ .leaflet-left { |
||||
left: 100%; } |
||||
.leaflet-sidebar.right.visible ~ .leaflet-right { |
||||
right: 100%; } |
||||
.leaflet-sidebar.left { |
||||
left: -100%; } |
||||
.leaflet-sidebar.left.visible { |
||||
left: 0; } |
||||
.leaflet-sidebar.right { |
||||
right: -100%; } |
||||
.leaflet-sidebar.right.visible { |
||||
right: 0; } |
||||
.leaflet-sidebar > .leaflet-control { |
||||
box-shadow: none; |
||||
-webkit-border-radius: 0; |
||||
border-radius: 0; } |
||||
.leaflet-touch .leaflet-sidebar > .leaflet-control { |
||||
border: 0; } } |
||||
@media (min-width: 768px) and (max-width: 991px) { |
||||
.leaflet-sidebar { |
||||
width: 305px; } |
||||
.leaflet-sidebar.left.visible ~ .leaflet-left { |
||||
left: 305px; } |
||||
.leaflet-sidebar.right.visible ~ .leaflet-right { |
||||
right: 305px; } } |
||||
@media (min-width: 992px) and (max-width: 1199px) { |
||||
.leaflet-sidebar { |
||||
width: 390px; } |
||||
.leaflet-sidebar.left.visible ~ .leaflet-left { |
||||
left: 390px; } |
||||
.leaflet-sidebar.right.visible ~ .leaflet-right { |
||||
right: 390px; } } |
||||
@media (min-width: 1200px) { |
||||
.leaflet-sidebar { |
||||
width: 460px; } |
||||
.leaflet-sidebar.left.visible ~ .leaflet-left { |
||||
left: 460px; } |
||||
.leaflet-sidebar.right.visible ~ .leaflet-right { |
||||
right: 460px; } } |
||||
.leaflet-sidebar .close { |
||||
position: absolute; |
||||
right: 20px; |
||||
top: 20px; |
||||
width: 31px; |
||||
height: 31px; |
||||
color: #333; |
||||
font-size: 25px; |
||||
line-height: 1em; |
||||
text-align: center; |
||||
background: white; |
||||
-webkit-border-radius: 16px; |
||||
border-radius: 16px; |
||||
cursor: pointer; |
||||
z-index: 8; } |
||||
|
||||
.leaflet-left { |
||||
transition: left 0.5s; } |
||||
|
||||
.leaflet-right { |
||||
transition: right 0.5s; } |
||||
@ -0,0 +1,197 @@
|
||||
L.Control.Sidebar = L.Control.extend({ |
||||
|
||||
includes: L.Mixin.Events, |
||||
|
||||
options: { |
||||
closeButton: true, |
||||
position: 'left', |
||||
autoPan: true, |
||||
}, |
||||
|
||||
initialize: function (placeholder, options) { |
||||
L.setOptions(this, options); |
||||
|
||||
// Find content container
|
||||
var content = this._contentContainer = L.DomUtil.get(placeholder); |
||||
|
||||
// Remove the content container from its original parent
|
||||
content.parentNode.removeChild(content); |
||||
|
||||
var l = 'leaflet-'; |
||||
|
||||
// Create sidebar container
|
||||
var container = this._container = |
||||
L.DomUtil.create('div', l + 'sidebar ' + this.options.position); |
||||
|
||||
// Style and attach content container
|
||||
L.DomUtil.addClass(content, l + 'control'); |
||||
container.appendChild(content); |
||||
|
||||
// Create close button and attach it if configured
|
||||
if (this.options.closeButton) { |
||||
var close = this._closeButton = |
||||
L.DomUtil.create('a', 'close', container); |
||||
close.innerHTML = '×'; |
||||
} |
||||
}, |
||||
|
||||
addTo: function (map) { |
||||
var container = this._container; |
||||
var content = this._contentContainer; |
||||
|
||||
// Attach event to close button
|
||||
if (this.options.closeButton) { |
||||
var close = this._closeButton; |
||||
|
||||
L.DomEvent.on(close, 'click', this.hide, this); |
||||
} |
||||
|
||||
L.DomEvent |
||||
.on(container, 'transitionend', |
||||
this._handleTransitionEvent, this) |
||||
.on(container, 'webkitTransitionEnd', |
||||
this._handleTransitionEvent, this); |
||||
|
||||
// Attach sidebar container to controls container
|
||||
var controlContainer = map._controlContainer; |
||||
controlContainer.insertBefore(container, controlContainer.firstChild); |
||||
|
||||
this._map = map; |
||||
|
||||
// Make sure we don't drag the map when we interact with the content
|
||||
var stop = L.DomEvent.stopPropagation; |
||||
var fakeStop = L.DomEvent._fakeStop || stop; |
||||
L.DomEvent |
||||
.on(content, 'contextmenu', stop) |
||||
.on(content, 'click', fakeStop) |
||||
.on(content, 'mousedown', stop) |
||||
.on(content, 'touchstart', stop) |
||||
.on(content, 'dblclick', fakeStop) |
||||
.on(content, 'mousewheel', stop) |
||||
.on(content, 'MozMousePixelScroll', stop); |
||||
|
||||
return this; |
||||
}, |
||||
|
||||
removeFrom: function (map) { |
||||
//if the control is visible, hide it before removing it.
|
||||
this.hide(); |
||||
|
||||
var container = this._container; |
||||
var content = this._contentContainer; |
||||
|
||||
// Remove sidebar container from controls container
|
||||
var controlContainer = map._controlContainer; |
||||
controlContainer.removeChild(container); |
||||
|
||||
//disassociate the map object
|
||||
this._map = null; |
||||
|
||||
// Unregister events to prevent memory leak
|
||||
var stop = L.DomEvent.stopPropagation; |
||||
var fakeStop = L.DomEvent._fakeStop || stop; |
||||
L.DomEvent |
||||
.off(content, 'contextmenu', stop) |
||||
.off(content, 'click', fakeStop) |
||||
.off(content, 'mousedown', stop) |
||||
.off(content, 'touchstart', stop) |
||||
.off(content, 'dblclick', fakeStop) |
||||
.off(content, 'mousewheel', stop) |
||||
.off(content, 'MozMousePixelScroll', stop); |
||||
|
||||
L.DomEvent |
||||
.off(container, 'transitionend', |
||||
this._handleTransitionEvent, this) |
||||
.off(container, 'webkitTransitionEnd', |
||||
this._handleTransitionEvent, this); |
||||
|
||||
if (this._closeButton && this._close) { |
||||
var close = this._closeButton; |
||||
|
||||
L.DomEvent.off(close, 'click', this.hide, this); |
||||
} |
||||
|
||||
return this; |
||||
}, |
||||
|
||||
isVisible: function () { |
||||
return L.DomUtil.hasClass(this._container, 'visible'); |
||||
}, |
||||
|
||||
show: function () { |
||||
if (!this.isVisible()) { |
||||
L.DomUtil.addClass(this._container, 'visible'); |
||||
if (this.options.autoPan) { |
||||
this._map.panBy([-this.getOffset() / 2, 0], { |
||||
duration: 0.5 |
||||
}); |
||||
} |
||||
this.fire('show'); |
||||
} |
||||
}, |
||||
|
||||
hide: function (e) { |
||||
if (this.isVisible()) { |
||||
L.DomUtil.removeClass(this._container, 'visible'); |
||||
if (this.options.autoPan) { |
||||
this._map.panBy([this.getOffset() / 2, 0], { |
||||
duration: 0.5 |
||||
}); |
||||
} |
||||
this.fire('hide'); |
||||
} |
||||
if(e) { |
||||
L.DomEvent.stopPropagation(e); |
||||
} |
||||
}, |
||||
|
||||
toggle: function () { |
||||
if (this.isVisible()) { |
||||
this.hide(); |
||||
} else { |
||||
this.show(); |
||||
} |
||||
}, |
||||
|
||||
getContainer: function () { |
||||
return this._contentContainer; |
||||
}, |
||||
|
||||
getCloseButton: function () { |
||||
return this._closeButton; |
||||
}, |
||||
|
||||
setContent: function (content) { |
||||
var container = this.getContainer(); |
||||
|
||||
if (typeof content === 'string') { |
||||
container.innerHTML = content; |
||||
} else { |
||||
// clean current content
|
||||
while (container.firstChild) { |
||||
container.removeChild(container.firstChild); |
||||
} |
||||
|
||||
container.appendChild(content); |
||||
} |
||||
|
||||
return this; |
||||
}, |
||||
|
||||
getOffset: function () { |
||||
if (this.options.position === 'right') { |
||||
return -this._container.offsetWidth; |
||||
} else { |
||||
return this._container.offsetWidth; |
||||
} |
||||
}, |
||||
|
||||
_handleTransitionEvent: function (e) { |
||||
if (e.propertyName == 'left' || e.propertyName == 'right') |
||||
this.fire(this.isVisible() ? 'shown' : 'hidden'); |
||||
} |
||||
}); |
||||
|
||||
L.control.sidebar = function (placeholder, options) { |
||||
return new L.Control.Sidebar(placeholder, options); |
||||
}; |
||||
File diff soppresso perché troppo grande
Load Diff
@ -0,0 +1,60 @@
|
||||
.marker-cluster-small { |
||||
background-color: rgba(181, 226, 140, 0.6); |
||||
} |
||||
.marker-cluster-small div { |
||||
background-color: rgba(110, 204, 57, 0.6); |
||||
} |
||||
|
||||
.marker-cluster-medium { |
||||
background-color: rgba(241, 211, 87, 0.6); |
||||
} |
||||
.marker-cluster-medium div { |
||||
background-color: rgba(240, 194, 12, 0.6); |
||||
} |
||||
|
||||
.marker-cluster-large { |
||||
background-color: rgba(253, 156, 115, 0.6); |
||||
} |
||||
.marker-cluster-large div { |
||||
background-color: rgba(241, 128, 23, 0.6); |
||||
} |
||||
|
||||
/* IE 6-8 fallback colors */ |
||||
.leaflet-oldie .marker-cluster-small { |
||||
background-color: rgb(181, 226, 140); |
||||
} |
||||
.leaflet-oldie .marker-cluster-small div { |
||||
background-color: rgb(110, 204, 57); |
||||
} |
||||
|
||||
.leaflet-oldie .marker-cluster-medium { |
||||
background-color: rgb(241, 211, 87); |
||||
} |
||||
.leaflet-oldie .marker-cluster-medium div { |
||||
background-color: rgb(240, 194, 12); |
||||
} |
||||
|
||||
.leaflet-oldie .marker-cluster-large { |
||||
background-color: rgb(253, 156, 115); |
||||
} |
||||
.leaflet-oldie .marker-cluster-large div { |
||||
background-color: rgb(241, 128, 23); |
||||
} |
||||
|
||||
.marker-cluster { |
||||
background-clip: padding-box; |
||||
border-radius: 20px; |
||||
} |
||||
.marker-cluster div { |
||||
width: 30px; |
||||
height: 30px; |
||||
margin-left: 5px; |
||||
margin-top: 5px; |
||||
|
||||
text-align: center; |
||||
border-radius: 15px; |
||||
font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif; |
||||
} |
||||
.marker-cluster span { |
||||
line-height: 30px; |
||||
} |
||||
@ -0,0 +1,6 @@
|
||||
.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow { |
||||
-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in; |
||||
-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in; |
||||
-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in; |
||||
transition: transform 0.3s ease-out, opacity 0.3s ease-in; |
||||
} |
||||
File diff soppresso perché troppo grande
Load Diff
@ -0,0 +1,52 @@
|
||||
.leaflet-label { |
||||
background: rgb(235, 235, 235); |
||||
background: rgba(235, 235, 235, 0.81); |
||||
background-clip: padding-box; |
||||
border-color: #777; |
||||
border-color: rgba(0,0,0,0.25); |
||||
border-radius: 4px; |
||||
border-style: solid; |
||||
border-width: 4px; |
||||
color: #111; |
||||
display: block; |
||||
font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif; |
||||
font-weight: bold; |
||||
padding: 1px 6px; |
||||
position: absolute; |
||||
-webkit-user-select: none; |
||||
-moz-user-select: none; |
||||
-ms-user-select: none; |
||||
user-select: none; |
||||
white-space: nowrap; |
||||
z-index: 6; |
||||
} |
||||
|
||||
.leaflet-label.leaflet-clickable { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.leaflet-label:before, |
||||
.leaflet-label:after { |
||||
border-top: 6px solid transparent; |
||||
border-bottom: 6px solid transparent; |
||||
content: none; |
||||
position: absolute; |
||||
top: 5px; |
||||
} |
||||
|
||||
.leaflet-label:before { |
||||
border-right: 6px solid black; |
||||
border-right-color: inherit; |
||||
left: -10px; |
||||
} |
||||
|
||||
.leaflet-label:after { |
||||
border-left: 6px solid black; |
||||
border-left-color: inherit; |
||||
right: -10px; |
||||
} |
||||
|
||||
.leaflet-label-right:before, |
||||
.leaflet-label-left:after { |
||||
content: ""; |
||||
} |
||||
@ -0,0 +1,209 @@
|
||||
/* |
||||
Leaflet.label, a plugin that adds labels to markers and vectors for Leaflet powered maps. |
||||
(c) 2012-2013, Jacob Toye, Smartrak |
||||
|
||||
https://github.com/Leaflet/Leaflet.label
|
||||
http://leafletjs.com
|
||||
https://github.com/jacobtoye
|
||||
*/ |
||||
(function() { |
||||
L.labelVersion = "0.2.1", L.Label = L.Class.extend({ |
||||
includes: L.Mixin.Events, |
||||
options: { |
||||
className: "", |
||||
clickable: !1, |
||||
direction: "right", |
||||
noHide: !1, |
||||
offset: [12, -15], |
||||
opacity: 1, |
||||
zoomAnimation: !0 |
||||
}, |
||||
initialize: function(t, e) { |
||||
L.setOptions(this, t), this._source = e, this._animated = L.Browser.any3d && this.options.zoomAnimation, this._isOpen = !1 |
||||
}, |
||||
onAdd: function(t) { |
||||
this._map = t, this._pane = this._source instanceof L.Marker ? t._panes.markerPane : t._panes.popupPane, this._container || this._initLayout(), this._pane.appendChild(this._container), this._initInteraction(), this._update(), this.setOpacity(this.options.opacity), t.on("moveend", this._onMoveEnd, this).on("viewreset", this._onViewReset, this), this._animated && t.on("zoomanim", this._zoomAnimation, this), L.Browser.touch && !this.options.noHide && L.DomEvent.on(this._container, "click", this.close, this) |
||||
}, |
||||
onRemove: function(t) { |
||||
this._pane.removeChild(this._container), t.off({ |
||||
zoomanim: this._zoomAnimation, |
||||
moveend: this._onMoveEnd, |
||||
viewreset: this._onViewReset |
||||
}, this), this._removeInteraction(), this._map = null |
||||
}, |
||||
setLatLng: function(t) { |
||||
return this._latlng = L.latLng(t), this._map && this._updatePosition(), this |
||||
}, |
||||
setContent: function(t) { |
||||
return this._previousContent = this._content, this._content = t, this._updateContent(), this |
||||
}, |
||||
close: function() { |
||||
var t = this._map; |
||||
t && (L.Browser.touch && !this.options.noHide && L.DomEvent.off(this._container, "click", this.close), t.removeLayer(this)) |
||||
}, |
||||
updateZIndex: function(t) { |
||||
this._zIndex = t, this._container && this._zIndex && (this._container.style.zIndex = t) |
||||
}, |
||||
setOpacity: function(t) { |
||||
this.options.opacity = t, this._container && L.DomUtil.setOpacity(this._container, t) |
||||
}, |
||||
_initLayout: function() { |
||||
this._container = L.DomUtil.create("div", "leaflet-label " + this.options.className + " leaflet-zoom-animated"), this.updateZIndex(this._zIndex) |
||||
}, |
||||
_update: function() { |
||||
this._map && (this._container.style.visibility = "hidden", this._updateContent(), this._updatePosition(), this._container.style.visibility = "") |
||||
}, |
||||
_updateContent: function() { |
||||
this._content && this._map && this._prevContent !== this._content && "string" == typeof this._content && (this._container.innerHTML = this._content, this._prevContent = this._content, this._labelWidth = this._container.offsetWidth) |
||||
}, |
||||
_updatePosition: function() { |
||||
var t = this._map.latLngToLayerPoint(this._latlng); |
||||
this._setPosition(t) |
||||
}, |
||||
_setPosition: function(t) { |
||||
var e = this._map, |
||||
i = this._container, |
||||
n = e.latLngToContainerPoint(e.getCenter()), |
||||
o = e.layerPointToContainerPoint(t), |
||||
s = this.options.direction, |
||||
a = this._labelWidth, |
||||
l = L.point(this.options.offset); |
||||
"right" === s || "auto" === s && o.x < n.x ? (L.DomUtil.addClass(i, "leaflet-label-right"), L.DomUtil.removeClass(i, "leaflet-label-left"), t = t.add(l)) : (L.DomUtil.addClass(i, "leaflet-label-left"), L.DomUtil.removeClass(i, "leaflet-label-right"), t = t.add(L.point(-l.x - a, l.y))), L.DomUtil.setPosition(i, t) |
||||
}, |
||||
_zoomAnimation: function(t) { |
||||
var e = this._map._latLngToNewLayerPoint(this._latlng, t.zoom, t.center).round(); |
||||
this._setPosition(e) |
||||
}, |
||||
_onMoveEnd: function() { |
||||
this._animated && "auto" !== this.options.direction || this._updatePosition() |
||||
}, |
||||
_onViewReset: function(t) { |
||||
t && t.hard && this._update() |
||||
}, |
||||
_initInteraction: function() { |
||||
if (this.options.clickable) { |
||||
var t = this._container, |
||||
e = ["dblclick", "mousedown", "mouseover", "mouseout", "contextmenu"]; |
||||
L.DomUtil.addClass(t, "leaflet-clickable"), L.DomEvent.on(t, "click", this._onMouseClick, this); |
||||
for (var i = 0; e.length > i; i++) L.DomEvent.on(t, e[i], this._fireMouseEvent, this) |
||||
} |
||||
}, |
||||
_removeInteraction: function() { |
||||
if (this.options.clickable) { |
||||
var t = this._container, |
||||
e = ["dblclick", "mousedown", "mouseover", "mouseout", "contextmenu"]; |
||||
L.DomUtil.removeClass(t, "leaflet-clickable"), L.DomEvent.off(t, "click", this._onMouseClick, this); |
||||
for (var i = 0; e.length > i; i++) L.DomEvent.off(t, e[i], this._fireMouseEvent, this) |
||||
} |
||||
}, |
||||
_onMouseClick: function(t) { |
||||
this.hasEventListeners(t.type) && L.DomEvent.stopPropagation(t), this.fire(t.type, { |
||||
originalEvent: t |
||||
}) |
||||
}, |
||||
_fireMouseEvent: function(t) { |
||||
this.fire(t.type, { |
||||
originalEvent: t |
||||
}), "contextmenu" === t.type && this.hasEventListeners(t.type) && L.DomEvent.preventDefault(t), "mousedown" !== t.type ? L.DomEvent.stopPropagation(t) : L.DomEvent.preventDefault(t) |
||||
} |
||||
}), L.BaseMarkerMethods = { |
||||
showLabel: function() { |
||||
return this.label && this._map && (this.label.setLatLng(this._latlng), this._map.showLabel(this.label)), this |
||||
}, |
||||
hideLabel: function() { |
||||
return this.label && this.label.close(), this |
||||
}, |
||||
setLabelNoHide: function(t) { |
||||
this._labelNoHide !== t && (this._labelNoHide = t, t ? (this._removeLabelRevealHandlers(), this.showLabel()) : (this._addLabelRevealHandlers(), this.hideLabel())) |
||||
}, |
||||
bindLabel: function(t, e) { |
||||
var i = this.options.icon ? this.options.icon.options.labelAnchor : this.options.labelAnchor, |
||||
n = L.point(i) || L.point(0, 0); |
||||
return n = n.add(L.Label.prototype.options.offset), e && e.offset && (n = n.add(e.offset)), e = L.Util.extend({ |
||||
offset: n |
||||
}, e), this._labelNoHide = e.noHide, this.label || (this._labelNoHide || this._addLabelRevealHandlers(), this.on("remove", this.hideLabel, this).on("move", this._moveLabel, this).on("add", this._onMarkerAdd, this), this._hasLabelHandlers = !0), this.label = new L.Label(e, this).setContent(t), this |
||||
}, |
||||
unbindLabel: function() { |
||||
return this.label && (this.hideLabel(), this.label = null, this._hasLabelHandlers && (this._labelNoHide || this._removeLabelRevealHandlers(), this.off("remove", this.hideLabel, this).off("move", this._moveLabel, this).off("add", this._onMarkerAdd, this)), this._hasLabelHandlers = !1), this |
||||
}, |
||||
updateLabelContent: function(t) { |
||||
this.label && this.label.setContent(t) |
||||
}, |
||||
getLabel: function() { |
||||
return this.label |
||||
}, |
||||
_onMarkerAdd: function() { |
||||
this._labelNoHide && this.showLabel() |
||||
}, |
||||
_addLabelRevealHandlers: function() { |
||||
this.on("mouseover", this.showLabel, this).on("mouseout", this.hideLabel, this), L.Browser.touch && this.on("click", this.showLabel, this) |
||||
}, |
||||
_removeLabelRevealHandlers: function() { |
||||
this.off("mouseover", this.showLabel, this).off("mouseout", this.hideLabel, this), L.Browser.touch && this.off("click", this.showLabel, this) |
||||
}, |
||||
_moveLabel: function(t) { |
||||
this.label.setLatLng(t.latlng) |
||||
} |
||||
}, L.Icon.Default.mergeOptions({ |
||||
labelAnchor: new L.Point(9, -20) |
||||
}), L.Marker.mergeOptions({ |
||||
icon: new L.Icon.Default |
||||
}), L.Marker.include(L.BaseMarkerMethods), L.Marker.include({ |
||||
_originalUpdateZIndex: L.Marker.prototype._updateZIndex, |
||||
_updateZIndex: function(t) { |
||||
var e = this._zIndex + t; |
||||
this._originalUpdateZIndex(t), this.label && this.label.updateZIndex(e) |
||||
}, |
||||
_originalSetOpacity: L.Marker.prototype.setOpacity, |
||||
setOpacity: function(t, e) { |
||||
this.options.labelHasSemiTransparency = e, this._originalSetOpacity(t) |
||||
}, |
||||
_originalUpdateOpacity: L.Marker.prototype._updateOpacity, |
||||
_updateOpacity: function() { |
||||
var t = 0 === this.options.opacity ? 0 : 1; |
||||
this._originalUpdateOpacity(), this.label && this.label.setOpacity(this.options.labelHasSemiTransparency ? this.options.opacity : t) |
||||
}, |
||||
_originalSetLatLng: L.Marker.prototype.setLatLng, |
||||
setLatLng: function(t) { |
||||
return this.label && !this._labelNoHide && this.hideLabel(), this._originalSetLatLng(t) |
||||
} |
||||
}), L.CircleMarker.mergeOptions({ |
||||
labelAnchor: new L.Point(0, 0) |
||||
}), L.CircleMarker.include(L.BaseMarkerMethods), L.Path.include({ |
||||
bindLabel: function(t, e) { |
||||
return this.label && this.label.options === e || (this.label = new L.Label(e, this)), this.label.setContent(t), this._showLabelAdded || (this.on("mouseover", this._showLabel, this).on("mousemove", this._moveLabel, this).on("mouseout remove", this._hideLabel, this), L.Browser.touch && this.on("click", this._showLabel, this), this._showLabelAdded = !0), this |
||||
}, |
||||
unbindLabel: function() { |
||||
return this.label && (this._hideLabel(), this.label = null, this._showLabelAdded = !1, this.off("mouseover", this._showLabel, this).off("mousemove", this._moveLabel, this).off("mouseout remove", this._hideLabel, this)), this |
||||
}, |
||||
updateLabelContent: function(t) { |
||||
this.label && this.label.setContent(t) |
||||
}, |
||||
_showLabel: function(t) { |
||||
this.label.setLatLng(t.latlng), this._map.showLabel(this.label) |
||||
}, |
||||
_moveLabel: function(t) { |
||||
this.label.setLatLng(t.latlng) |
||||
}, |
||||
_hideLabel: function() { |
||||
this.label.close() |
||||
} |
||||
}), L.Map.include({ |
||||
showLabel: function(t) { |
||||
return this.addLayer(t) |
||||
} |
||||
}), L.FeatureGroup.include({ |
||||
clearLayers: function() { |
||||
return this.unbindLabel(), this.eachLayer(this.removeLayer, this), this |
||||
}, |
||||
bindLabel: function(t, e) { |
||||
return this.invoke("bindLabel", t, e) |
||||
}, |
||||
unbindLabel: function() { |
||||
return this.invoke("unbindLabel") |
||||
}, |
||||
updateLabelContent: function(t) { |
||||
this.invoke("updateLabelContent", t) |
||||
} |
||||
}) |
||||
})(this, document); |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,384 @@
|
||||
(function(window, document, undefined) { |
||||
|
||||
"use strict"; |
||||
|
||||
// L.Layer was introduced in Leaflet 1.0 and is not present in earlier releases.
|
||||
window.L.Toolbar2 = (L.Layer || L.Class).extend({ |
||||
statics: { |
||||
baseClass: 'leaflet-toolbar' |
||||
}, |
||||
|
||||
options: { |
||||
className: '', |
||||
filter: function() { return true; }, |
||||
actions: [] |
||||
}, |
||||
|
||||
initialize: function(options) { |
||||
L.setOptions(this, options); |
||||
this._toolbar_type = this.constructor._toolbar_class_id; |
||||
}, |
||||
|
||||
addTo: function(map) { |
||||
this._arguments = [].slice.call(arguments); |
||||
|
||||
map.addLayer(this); |
||||
|
||||
return this; |
||||
}, |
||||
|
||||
onAdd: function(map) { |
||||
var currentToolbar = map._toolbars[this._toolbar_type]; |
||||
|
||||
if (this._calculateDepth() === 0) { |
||||
if (currentToolbar) { map.removeLayer(currentToolbar); } |
||||
map._toolbars[this._toolbar_type] = this; |
||||
} |
||||
}, |
||||
|
||||
onRemove: function(map) { |
||||
/* |
||||
* TODO: Cleanup event listeners.
|
||||
* For some reason, this throws: |
||||
* "Uncaught TypeError: Cannot read property 'dragging' of null" |
||||
* on this._marker when a toolbar icon is clicked. |
||||
*/ |
||||
// for (var i = 0, l = this._disabledEvents.length; i < l; i++) {
|
||||
// L.DomEvent.off(this._ul, this._disabledEvents[i], L.DomEvent.stopPropagation);
|
||||
// }
|
||||
|
||||
if (this._calculateDepth() === 0) { |
||||
delete map._toolbars[this._toolbar_type]; |
||||
} |
||||
}, |
||||
|
||||
appendToContainer: function(container) { |
||||
var baseClass = this.constructor.baseClass + '-' + this._calculateDepth(), |
||||
className = baseClass + ' ' + this.options.className, |
||||
Action, action, |
||||
i, j, l, m; |
||||
|
||||
this._container = container; |
||||
this._ul = L.DomUtil.create('ul', className, container); |
||||
|
||||
// Ensure that clicks, drags, etc. don't bubble up to the map.
|
||||
// These are the map events that the L.Draw.Polyline handler listens for.
|
||||
// Note that L.Draw.Polyline listens to 'mouseup', not 'mousedown', but
|
||||
// if only 'mouseup' is silenced, then the map gets stuck in a halfway
|
||||
// state because it receives a 'mousedown' event and is waiting for the
|
||||
// corresponding 'mouseup' event.
|
||||
this._disabledEvents = [ |
||||
'click', 'mousemove', 'dblclick', |
||||
'mousedown', 'mouseup', 'touchstart' |
||||
]; |
||||
|
||||
for (j = 0, m = this._disabledEvents.length; j < m; j++) { |
||||
L.DomEvent.on(this._ul, this._disabledEvents[j], L.DomEvent.stopPropagation); |
||||
} |
||||
|
||||
/* Instantiate each toolbar action and add its corresponding toolbar icon. */ |
||||
for (i = 0, l = this.options.actions.length; i < l; i++) { |
||||
Action = this._getActionConstructor(this.options.actions[i]); |
||||
|
||||
action = new Action(); |
||||
action._createIcon(this, this._ul, this._arguments); |
||||
} |
||||
}, |
||||
|
||||
_getActionConstructor: function(Action) { |
||||
var args = this._arguments, |
||||
toolbar = this; |
||||
|
||||
return Action.extend({ |
||||
initialize: function() { |
||||
Action.prototype.initialize.apply(this, args); |
||||
}, |
||||
enable: function(e) { |
||||
/* Ensure that only one action in a toolbar will be active at a time. */ |
||||
if (toolbar._active) { toolbar._active.disable(); } |
||||
toolbar._active = this; |
||||
|
||||
Action.prototype.enable.call(this, e); |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
/* Used to hide subToolbars without removing them from the map. */ |
||||
_hide: function() { |
||||
this._ul.style.display = 'none'; |
||||
}, |
||||
|
||||
/* Used to show subToolbars without removing them from the map. */ |
||||
_show: function() { |
||||
this._ul.style.display = 'block'; |
||||
}, |
||||
|
||||
_calculateDepth: function() { |
||||
var depth = 0, |
||||
toolbar = this.parentToolbar; |
||||
|
||||
while (toolbar) { |
||||
depth += 1; |
||||
toolbar = toolbar.parentToolbar; |
||||
} |
||||
|
||||
return depth; |
||||
} |
||||
}); |
||||
|
||||
// L.Mixin.Events is replaced by L.Evented in Leaflet 1.0. L.Layer (also
|
||||
// introduced in Leaflet 1.0) inherits from L.Evented, so if L.Layer is
|
||||
// present, then L.Toolbar2 will already support events.
|
||||
if (!L.Evented) { |
||||
L.Toolbar2.include(L.Mixin.Events); |
||||
} |
||||
|
||||
L.toolbar = {}; |
||||
|
||||
var toolbar_class_id = 0; |
||||
|
||||
L.Toolbar2.extend = function extend(props) { |
||||
var statics = L.extend({}, props.statics, { |
||||
"_toolbar_class_id": toolbar_class_id |
||||
}); |
||||
|
||||
toolbar_class_id += 1; |
||||
L.extend(props, { statics: statics }); |
||||
|
||||
return L.Class.extend.call(this, props); |
||||
}; |
||||
|
||||
L.Map.addInitHook(function() { |
||||
this._toolbars = {}; |
||||
}); |
||||
|
||||
L.Toolbar2.Action = L.Handler.extend({ |
||||
statics: { |
||||
baseClass: 'leaflet-toolbar-icon' |
||||
}, |
||||
|
||||
options: { |
||||
toolbarIcon: { |
||||
html: '', |
||||
className: '', |
||||
tooltip: '' |
||||
}, |
||||
subToolbar: new L.Toolbar2() |
||||
}, |
||||
|
||||
initialize: function(options) { |
||||
var defaultIconOptions = L.Toolbar2.Action.prototype.options.toolbarIcon; |
||||
|
||||
L.setOptions(this, options); |
||||
this.options.toolbarIcon = L.extend({}, defaultIconOptions, this.options.toolbarIcon); |
||||
}, |
||||
|
||||
enable: function(e) { |
||||
if (e) { L.DomEvent.preventDefault(e); } |
||||
if (this._enabled) { return; } |
||||
this._enabled = true; |
||||
|
||||
if (this.addHooks) { this.addHooks(); } |
||||
}, |
||||
|
||||
disable: function() { |
||||
if (!this._enabled) { return; } |
||||
this._enabled = false; |
||||
|
||||
if (this.removeHooks) { this.removeHooks(); } |
||||
}, |
||||
|
||||
_createIcon: function(toolbar, container, args) { |
||||
var iconOptions = this.options.toolbarIcon; |
||||
|
||||
this.toolbar = toolbar; |
||||
this._icon = L.DomUtil.create('li', '', container); |
||||
this._link = L.DomUtil.create('a', '', this._icon); |
||||
|
||||
this._link.innerHTML = iconOptions.html; |
||||
this._link.setAttribute('href', '#'); |
||||
this._link.setAttribute('title', iconOptions.tooltip); |
||||
|
||||
L.DomUtil.addClass(this._link, this.constructor.baseClass); |
||||
if (iconOptions.className) { |
||||
L.DomUtil.addClass(this._link, iconOptions.className); |
||||
} |
||||
|
||||
L.DomEvent.on(this._link, 'click', this.enable, this); |
||||
|
||||
/* Add secondary toolbar */ |
||||
this._addSubToolbar(toolbar, this._icon, args); |
||||
}, |
||||
|
||||
_addSubToolbar: function(toolbar, container, args) { |
||||
var subToolbar = this.options.subToolbar, |
||||
addHooks = this.addHooks, |
||||
removeHooks = this.removeHooks; |
||||
|
||||
/* For calculating the nesting depth. */ |
||||
subToolbar.parentToolbar = toolbar; |
||||
|
||||
if (subToolbar.options.actions.length > 0) { |
||||
/* Make a copy of args so as not to pollute the args array used by other actions. */ |
||||
args = [].slice.call(args); |
||||
args.push(this); |
||||
|
||||
subToolbar.addTo.apply(subToolbar, args); |
||||
subToolbar.appendToContainer(container); |
||||
|
||||
this.addHooks = function(map) { |
||||
if (typeof addHooks === 'function') { addHooks.call(this, map); } |
||||
subToolbar._show(); |
||||
}; |
||||
|
||||
this.removeHooks = function(map) { |
||||
if (typeof removeHooks === 'function') { removeHooks.call(this, map); } |
||||
subToolbar._hide(); |
||||
}; |
||||
} |
||||
} |
||||
}); |
||||
|
||||
L.toolbarAction = function toolbarAction(options) { |
||||
return new L.Toolbar2.Action(options); |
||||
}; |
||||
|
||||
L.Toolbar2.Action.extendOptions = function(options) { |
||||
return this.extend({ options: options }); |
||||
}; |
||||
|
||||
L.Toolbar2.Control = L.Toolbar2.extend({ |
||||
statics: { |
||||
baseClass: 'leaflet-control-toolbar ' + L.Toolbar2.baseClass |
||||
}, |
||||
|
||||
initialize: function(options) { |
||||
L.Toolbar2.prototype.initialize.call(this, options); |
||||
|
||||
this._control = new L.Control.Toolbar(this.options); |
||||
}, |
||||
|
||||
onAdd: function(map) { |
||||
this._control.addTo(map); |
||||
|
||||
L.Toolbar2.prototype.onAdd.call(this, map); |
||||
|
||||
this.appendToContainer(this._control.getContainer()); |
||||
}, |
||||
|
||||
onRemove: function(map) { |
||||
L.Toolbar2.prototype.onRemove.call(this, map); |
||||
if (this._control.remove) {this._control.remove();} // Leaflet 1.0
|
||||
else {this._control.removeFrom(map);} |
||||
} |
||||
}); |
||||
|
||||
L.Control.Toolbar = L.Control.extend({ |
||||
onAdd: function() { |
||||
return L.DomUtil.create('div', ''); |
||||
} |
||||
}); |
||||
|
||||
L.toolbar.control = function(options) { |
||||
return new L.Toolbar2.Control(options); |
||||
}; |
||||
|
||||
// A convenience class for built-in popup toolbars.
|
||||
|
||||
L.Toolbar2.Popup = L.Toolbar2.extend({ |
||||
statics: { |
||||
baseClass: 'leaflet-popup-toolbar ' + L.Toolbar2.baseClass |
||||
}, |
||||
|
||||
options: { |
||||
anchor: [0, 0] |
||||
}, |
||||
|
||||
initialize: function(latlng, options) { |
||||
L.Toolbar2.prototype.initialize.call(this, options); |
||||
|
||||
/* |
||||
* Developers can't pass a DivIcon in the options for L.Toolbar2.Popup |
||||
* (the use of DivIcons is an implementation detail which may change). |
||||
*/ |
||||
this._marker = new L.Marker(latlng, { |
||||
icon : new L.DivIcon({ |
||||
className: this.options.className, |
||||
iconAnchor: [0, 0] |
||||
}) |
||||
}); |
||||
}, |
||||
|
||||
onAdd: function(map) { |
||||
this._map = map; |
||||
this._marker.addTo(map); |
||||
|
||||
L.Toolbar2.prototype.onAdd.call(this, map); |
||||
|
||||
this.appendToContainer(this._marker._icon); |
||||
|
||||
this._setStyles(); |
||||
}, |
||||
|
||||
onRemove: function(map) { |
||||
map.removeLayer(this._marker); |
||||
|
||||
L.Toolbar2.prototype.onRemove.call(this, map); |
||||
|
||||
delete this._map; |
||||
}, |
||||
|
||||
setLatLng: function(latlng) { |
||||
this._marker.setLatLng(latlng); |
||||
|
||||
return this; |
||||
}, |
||||
|
||||
_setStyles: function() { |
||||
var container = this._container, |
||||
toolbar = this._ul, |
||||
anchor = L.point(this.options.anchor), |
||||
icons = toolbar.querySelectorAll('.leaflet-toolbar-icon'), |
||||
buttonHeights = [], |
||||
toolbarWidth = 0, |
||||
toolbarHeight, |
||||
tipSize, |
||||
tipAnchor; |
||||
/* Calculate the dimensions of the toolbar. */ |
||||
for (var i = 0, l = icons.length; i < l; i++) { |
||||
if (icons[i].parentNode.parentNode === toolbar) { |
||||
buttonHeights.push(parseInt(L.DomUtil.getStyle(icons[i], 'height'), 10)); |
||||
toolbarWidth += Math.ceil(parseFloat(L.DomUtil.getStyle(icons[i], 'width'))); |
||||
toolbarWidth += Math.ceil(parseFloat(L.DomUtil.getStyle(icons[i], 'border-right-width'))); |
||||
} |
||||
} |
||||
toolbar.style.width = toolbarWidth + 'px'; |
||||
|
||||
/* Create and place the toolbar tip. */ |
||||
this._tipContainer = L.DomUtil.create('div', 'leaflet-toolbar-tip-container', container); |
||||
this._tipContainer.style.width = toolbarWidth + |
||||
Math.ceil(parseFloat(L.DomUtil.getStyle(toolbar, 'border-left-width'))) + |
||||
'px'; |
||||
|
||||
this._tip = L.DomUtil.create('div', 'leaflet-toolbar-tip', this._tipContainer); |
||||
|
||||
/* Set the tipAnchor point. */ |
||||
toolbarHeight = Math.max.apply(undefined, buttonHeights); |
||||
// Ensure that the border completely surrounds its relative-positioned children.
|
||||
toolbar.style.height = toolbarHeight + 'px'; |
||||
tipSize = parseInt(L.DomUtil.getStyle(this._tip, 'width'), 10); |
||||
// The tip should be anchored exactly where the click event was received.
|
||||
tipAnchor = new L.Point(toolbarWidth/2, toolbarHeight + 1.414*tipSize); |
||||
|
||||
/* The anchor option allows app developers to adjust the toolbar's position. */ |
||||
container.style.marginLeft = (anchor.x - tipAnchor.x) + 'px'; |
||||
container.style.marginTop = (anchor.y - tipAnchor.y) + 'px'; |
||||
}, |
||||
}); |
||||
|
||||
L.toolbar.popup = function(options) { |
||||
return new L.Toolbar2.Popup(options); |
||||
}; |
||||
|
||||
|
||||
})(window, document); |
||||
Some files were not shown because too many files have changed in this diff Show More
Caricamento…
Reference in new issue