Skip to content
GitLab
Commit f4fadffb authored by Santhanavanich's avatar Santhanavanich
Browse files

update

parent abe537c0
Pipeline #6174 passed with stage
in 6 seconds
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 20111 additions and 0 deletions
+20111 -0
public/bbox-leaflet.html 0 → 100644
+ 197
- 0
View file @ f4fadffb
<!DOCTYPE html>
<html>
<head>
<title>Joe BBOX Finder</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="libs/leaflet.css" />
<link rel="stylesheet" href="./src/leaflet.draw.css" />
<script src="libs/leaflet-src.js"></script>
<script src="./src/Leaflet.draw.js"></script>
<script src="./src/Leaflet.Draw.Event.js"></script>
<script src="./src/edit/handler/Edit.Poly.js"></script>
<script src="./src/edit/handler/Edit.SimpleShape.js"></script>
<script src="./src/edit/handler/Edit.Rectangle.js"></script>
<script src="./src/edit/handler/Edit.Marker.js"></script>
<script src="./src/edit/handler/Edit.CircleMarker.js"></script>
<script src="./src/edit/handler/Edit.Circle.js"></script>
<script src="./src/draw/handler/Draw.Feature.js"></script>
<script src="./src/draw/handler/Draw.Polyline.js"></script>
<script src="./src/draw/handler/Draw.Polygon.js"></script>
<script src="./src/draw/handler/Draw.SimpleShape.js"></script>
<script src="./src/draw/handler/Draw.Rectangle.js"></script>
<script src="./src/draw/handler/Draw.Circle.js"></script>
<script src="./src/draw/handler/Draw.Marker.js"></script>
<script src="./src/draw/handler/Draw.CircleMarker.js"></script>
<script src="./src/ext/TouchEvents.js"></script>
<script src="./src/ext/LatLngUtil.js"></script>
<script src="./src/ext/GeometryUtil.js"></script>
<script src="./src/ext/LineUtil.Intersect.js"></script>
<script src="./src/ext/Polyline.Intersect.js"></script>
<script src="./src/ext/Polygon.Intersect.js"></script>
<script src="./src/Control.Draw.js"></script>
<script src="./src/Tooltip.js"></script>
<script src="./src/Toolbar.js"></script>
<script src="./src/draw/DrawToolbar.js"></script>
<script src="./src/edit/EditToolbar.js"></script>
<script src="./src/edit/handler/EditToolbar.Edit.js"></script>
<script src="./src/edit/handler/EditToolbar.Delete.js"></script>
</head>
<body>
<style>
.calculation-box {
height: 90px;
width: 600px;
position: absolute;
bottom: 25px;
left: 25px;
background-color: rgba(255, 255, 255, 0.9);
padding: 15px;
text-align: center;
z-index: 1000;
}
p {
/* font-family: 'Open Sans'; */
margin: 0;
font-size: 13px;
font-weight: 600;
}
</style>
<div id="map" style="width: 100%; height: 100vh;"></div>
<div class="calculation-box text-left">
<p class="text-bold text-wrap"> <b>BBOX Finder <i class="bi bi-bounding-box"></i></b>
<br>
<span id="calculated_area">[Hint: Draw a bbox using tool on the right-bottom menu.]</span>
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="./libs/proj4js.min.js"></script>
<script>
var Stadia_Outdoors = L.tileLayer('https://tiles.stadiamaps.com/tiles/outdoors/{z}/{x}/{y}{r}.png', {
maxZoom: 20,
attribution: '&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
});
var tmp_layer
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {
maxZoom: 18,
attribution: osmAttrib
}),
map = new L.Map('map', {
layers: [Stadia_Outdoors],
center: new L.LatLng(48.7758, 9.1829),
zoom: 15
});
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
// Set the title to show on the polygon button
L.drawLocal.draw.toolbar.buttons.polygon = 'Draw a polygon!';
var drawControl = new L.Control.Draw({
position: 'bottomright',
draw: {
polyline: false,
polygon: false,
circle: false,
marker: false,
circlemarker: false
},
edit: {
featureGroup: drawnItems,
remove: true
}
});
map.addControl(drawControl);
map.on(L.Draw.Event.CREATED, function (e) {
if (tmp_layer !== undefined) {
try {
map.removeLayer(tmp_layer)
} catch (error) {}
}
var type = e.layerType,
layer = e.layer;
tmp_layer = layer
if (type === 'marker') {
layer.bindPopup('A popup!');
}
drawnItems.addLayer(layer);
const answer = document.getElementById('calculated_area');
// $("#")
var source = new proj4.Proj('EPSG:4326'); //source coordinates will be in Longitude/Latitude
proj4.defs("EPSG:31463",
"+proj=tmerc +lat_0=0 +lon_0=9 +k=1 +x_0=3500000 +y_0=0 +ellps=bessel +towgs84=598.1,73.7,418.2,0.202,0.045,-2.455,6.7 +units=m +no_defs"
);
var dest = new proj4.Proj('EPSG:31463'); //source coordinates will be in Longitude/Latitude
var p_min = new proj4.toPoint([tmp_layer._bounds._southWest.lng, tmp_layer._bounds._southWest
.lat
]); //any object will do as long as it has 'x' and 'y' properties
var p_max = new proj4.toPoint([tmp_layer._bounds._southWest.lng, tmp_layer._bounds._southWest
.lat
]); //any object will do as long as it has 'x' and 'y' properties
p_dest_min = proj4.transform(source, dest,
p_min); //do the transformation. x and y are modified in place
p_dest_max = proj4.transform(source, dest,
p_max); //do the transformation. x and y are modified in place
answer.innerHTML = `
BBOX (4326):
<input type="text" value="${tmp_layer._bounds._southWest.lng.toFixed(6)},${tmp_layer._bounds._southWest.lat.toFixed(6)},${tmp_layer._bounds._northEast.lng.toFixed(6)},${tmp_layer._bounds._northEast.lat.toFixed(6)}" id="4326" size="60">
<button class="badge bg-secondary" onclick="clickToCopy('4326')">click to copy</button>
<br>
BBOX (31463):
<input type="text" value="${p_dest_min.x.toFixed(4)},${p_dest_min.y.toFixed(4)},${p_dest_max.x.toFixed(4)},${p_dest_max.y.toFixed(4)}" id="31463" size="60">
<button class="badge bg-secondary" onclick="clickToCopy('31463')">click to copy</button>
`;
});
map.on(L.Draw.Event.EDITED, function (e) {
var layers = e.layers;
var countOfEditedLayers = 0;
layers.eachLayer(function (layer) {
countOfEditedLayers++;
});
console.log("Edited " + countOfEditedLayers + " layers");
});
function clickToCopy(id) {
/* Get the text field */
var copyText = document.getElementById(id);
/* Select the text field */
copyText.select();
copyText.setSelectionRange(0, 99999); /* For mobile devices */
/* Copy the text inside the text field */
navigator.clipboard.writeText(copyText.value);
/* Alert the copied text */
alert("BBox Copied:<br>" + copyText.value);
}
</script>
</body>
</html>
\ No newline at end of file
public/bbox.html 0 → 100644
+ 121
- 0
View file @ f4fadffb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Draw a polygon and calculate its area</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<style>
.calculation-box {
height: 150px;
width: 350px;
position: absolute;
bottom: 40px;
left: 10px;
background-color: rgba(255, 255, 255, 0.9);
padding: 15px;
text-align: center;
}
p {
font-family: 'Open Sans';
margin: 0;
font-size: 13px;
}
</style>
<script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.2/mapbox-gl-draw.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.2/mapbox-gl-draw.css"
type="text/css">
<div id="map"></div>
<div class="calculation-box">
<p>Click the map to draw a polygon.</p>
<div id="calculated-area"></div>
</div>
<script>
var tmp;
mapboxgl.accessToken =
'pk.eyJ1IjoidGh1bnlhdGhlcCIsImEiOiJjamFpOWV4a2gxd21vMndxdXd2M3VoY3hmIn0.jLlCscei0yH-ZHwcfxF_ug';
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/streets-v11', // style URL
center: [9.1829, 48.7758], // starting position [lng, lat] ° N, ° E
zoom: 12 // starting zoom
});
const draw = new MapboxDraw({
displayControlsDefault: false,
// Select which mapbox-gl-draw control buttons to add to the map.
controls: {
polygon: true,
trash: true
},
// Set mapbox-gl-draw to draw by default.
// The user does not have to click the polygon control button first.
defaultMode: 'draw_polygon'
});
map.addControl(draw);
map.on('draw.create', updateArea);
map.on('draw.delete', updateArea);
map.on('draw.update', updateArea);
function updateArea(e) {
const data = draw.getAll();
tmp = data
coord = tmp.features[0].geometry.coordinates[0]
var maxlat = 0
var maxlng = 0
var minlat = 999
var minlng = 999
for (let index = 0; index < coord.length; index++) {
const element = coord[index];
lat = element[1]
lng = element[0]
if (lat> maxlat) {maxlat = lat}
if (lat< minlat) {minlat = lat}
if (lng> maxlng) {maxlng = lng}
if (lng< minlng) {minlng = lng}
}
const answer = document.getElementById('calculated-area');
if (data.features.length > 0) {
const area = turf.area(data);
// Restrict the area to 2 decimal points.
const rounded_area = Math.round(area * 100) / 100;
answer.innerHTML = `
<p><strong>${rounded_area}</strong></p><p>square meters</p>
min: ${minlat},${minlng}
max: ${maxlat},${maxlng}
`;
} else {
answer.innerHTML = '';
if (e.type !== 'draw.delete')
alert('Click the map to draw a polygon.');
}
}
</script>
</body>
</html>
\ No newline at end of file
public/libs/Leaflet.draw.drag-src.js 0 → 100644
+ 894
- 0
View file @ f4fadffb
This diff is collapsed.
public/libs/images/layers-2x.png 0 → 100644
+ 0
- 0
View file @ f4fadffb
public/libs/images/layers-2x.png

1.23 KB

public/libs/images/layers.png 0 → 100644
+ 0
- 0
View file @ f4fadffb
public/libs/images/layers.png

696 Bytes

public/libs/images/marker-icon-2x.png 0 → 100644
+ 0
- 0
View file @ f4fadffb
public/libs/images/marker-icon-2x.png

2.53 KB

public/libs/images/marker-icon.png 0 → 100644
+ 0
- 0
View file @ f4fadffb
public/libs/images/marker-icon.png

1.43 KB

public/libs/images/marker-shadow.png 0 → 100644
+ 0
- 0
View file @ f4fadffb
public/libs/images/marker-shadow.png

618 Bytes

public/libs/leaflet-src.js 0 → 100644
+ 13802
- 0
View file @ f4fadffb
This diff is collapsed.
public/libs/leaflet-src.map 0 → 100644
+ 1
- 0
View file @ f4fadffb
This source diff could not be displayed because it is too large. You can view the blob instead.
public/libs/leaflet.css 0 → 100644
+ 636
- 0
View file @ f4fadffb
/* 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 {
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;
-o-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);
-o-transition: -o-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;
-o-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;
}
.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;
}
/* 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);
-o-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;
}
public/libs/leaflet.geometryutil.js 0 → 100644
+ 682
- 0
View file @ f4fadffb
This diff is collapsed.
public/libs/leaflet.snap.js 0 → 100644
+ 360
- 0
View file @ f4fadffb
(function () {
L.Handler.MarkerSnap = L.Handler.extend({
options: {
snapDistance: 15, // in pixels
snapVertices: true
},
initialize: function (map, marker, options) {
L.Handler.prototype.initialize.call(this, map);
this._markers = [];
this._guides = [];
if (arguments.length == 2) {
if (!(marker instanceof L.Class)) {
options = marker;
marker = null;
}
}
L.Util.setOptions(this, options || {});
if (marker) {
// new markers should be draggable !
if (!marker.dragging) marker.dragging = new L.Handler.MarkerDrag(marker);
marker.dragging.enable();
this.watchMarker(marker);
}
// Convert snap distance in pixels into buffer in degres, for searching around mouse
// It changes at each zoom change.
function computeBuffer() {
this._buffer = map.layerPointToLatLng(new L.Point(0,0)).lat -
map.layerPointToLatLng(new L.Point(this.options.snapDistance, 0)).lat;
}
map.on('zoomend', computeBuffer, this);
map.whenReady(computeBuffer, this);
computeBuffer.call(this);
},
enable: function () {
this.disable();
for (var i=0; i<this._markers.length; i++) {
this.watchMarker(this._markers[i]);
}
},
disable: function () {
for (var i=0; i<this._markers.length; i++) {
this.unwatchMarker(this._markers[i]);
}
},
watchMarker: function (marker) {
if (this._markers.indexOf(marker) == -1)
this._markers.push(marker);
marker.on('move', this._snapMarker, this);
},
unwatchMarker: function (marker) {
marker.off('move', this._snapMarker, this);
delete marker['snap'];
},
addGuideLayer: function (layer) {
for (var i=0, n=this._guides.length; i<n; i++)
if (L.stamp(layer) === L.stamp(this._guides[i]))
return;
this._guides.push(layer);
},
_snapMarker: function(e) {
var marker = e.target,
latlng = marker.getLatLng(),
snaplist = [];
function isDifferentLayer(layer) {
if (layer.getLatLng) {
return L.stamp(marker) !== L.stamp(layer);
} else {
if (layer.editing && layer.editing._enabled) {
var points = layer.editing._verticesHandlers[0]._markerGroup.getLayers();
for(var i = 0, n = points.length; i < n; i++) {
if (L.stamp(points[i]) === L.stamp(marker)) { return false; }
}
}
}
return true;
}
function processGuide(guide) {
if ((guide._layers !== undefined) &&
(typeof guide.searchBuffer !== 'function')) {
// Guide is a layer group and has no L.LayerIndexMixin (from Leaflet.LayerIndex)
for (var id in guide._layers) {
processGuide(guide._layers[id]);
}
}
else if (typeof guide.searchBuffer === 'function') {
// Search snaplist around mouse
var nearlayers = guide.searchBuffer(latlng, this._buffer);
snaplist = snaplist.concat(nearlayers.filter(function(layer) {
return isDifferentLayer(layer);
}));
}
// Make sure the marker doesn't snap to itself or the associated polyline layer
else if (isDifferentLayer(guide)) {
snaplist.push(guide);
}
}
for (var i=0, n = this._guides.length; i < n; i++) {
var guide = this._guides[i];
processGuide.call(this, guide);
}
var closest = this._findClosestLayerSnap(this._map,
snaplist,
latlng,
this.options.snapDistance,
this.options.snapVertices);
closest = closest || {layer: null, latlng: null};
this._updateSnap(marker, closest.layer, closest.latlng);
},
_findClosestLayerSnap: function (map, layers, latlng, tolerance, withVertices) {
return L.GeometryUtil.closestLayerSnap(map, layers, latlng, tolerance, withVertices);
},
_updateSnap: function (marker, layer, latlng) {
if (layer && latlng) {
marker._latlng = L.latLng(latlng);
marker.update();
if (marker.snap != layer) {
marker.snap = layer;
if (marker._icon) L.DomUtil.addClass(marker._icon, 'marker-snapped');
marker.fire('snap', {layer:layer, latlng: latlng});
}
}
else {
if (marker.snap) {
if (marker._icon) L.DomUtil.removeClass(marker._icon, 'marker-snapped');
marker.fire('unsnap', {layer:marker.snap});
}
delete marker['snap'];
}
}
});
if (!L.Edit) {
// Leaflet.Draw not available.
return;
}
L.Handler.PolylineSnap = L.Edit.Poly.extend({
initialize: function (map, poly, options) {
var that = this;
L.Edit.Poly.prototype.initialize.call(this, poly, options);
this._snapper = new L.Handler.MarkerSnap(map, options);
poly.on('remove', function() {
that.disable();
});
},
addGuideLayer: function (layer) {
this._snapper.addGuideLayer(layer);
},
_initHandlers: function () {
this._verticesHandlers = [];
for (var i = 0; i < this.latlngs.length; i++) {
this._verticesHandlers.push(new L.Edit.PolyVerticesEditSnap(this._poly, this.latlngs[i], this.options));
}
}
});
L.Edit.PolyVerticesEditSnap = L.Edit.PolyVerticesEdit.extend({
_createMarker: function (latlng, index) {
var marker = L.Edit.PolyVerticesEdit.prototype._createMarker.call(this, latlng, index);
// Treat middle markers differently
var isMiddle = index === undefined;
if (isMiddle) {
// Snap middle markers, only once they were touched
marker.on('dragstart', function () {
this._poly.snapediting._snapper.watchMarker(marker);
}, this);
}
else {
this._poly.snapediting._snapper.watchMarker(marker);
}
return marker;
}
});
L.EditToolbar.SnapEdit = L.EditToolbar.Edit.extend({
snapOptions: {
snapDistance: 15, // in pixels
snapVertices: true
},
initialize: function(map, options) {
L.EditToolbar.Edit.prototype.initialize.call(this, map, options);
if (options.snapOptions) {
L.Util.extend(this.snapOptions, options.snapOptions);
}
if (Array.isArray(this.snapOptions.guideLayers)) {
this._guideLayers = this.snapOptions.guideLayers;
} else if (options.guideLayers instanceof L.LayerGroup) {
this._guideLayers = this.snapOptions.guideLayers.getLayers();
} else {
this._guideLayers = [];
}
},
addGuideLayer: function(layer) {
var index = this._guideLayers.findIndex(function(guideLayer) {
return L.stamp(layer) === L.stamp(guideLayer);
});
if (index === -1) {
this._guideLayers.push(layer);
this._featureGroup.eachLayer(function(layer) {
if (layer.snapediting) { layer.snapediting._guides.push(layer); }
});
}
},
removeGuideLayer: function(layer) {
var index = this._guideLayers.findIndex(function(guideLayer) {
return L.stamp(layer) === L.stamp(guideLayer);
});
if (index !== -1) {
this._guideLayers.splice(index, 1);
this._featureGroup.eachLayer(function(layer) {
if (layer.snapediting) { layer.snapediting._guides.splice(index, 1); }
});
}
},
clearGuideLayers: function() {
this._guideLayers = [];
this._featureGroup.eachLayer(function(layer) {
if (layer.snapediting) { layer.snapediting._guides = []; }
});
},
_enableLayerEdit: function(e) {
L.EditToolbar.Edit.prototype._enableLayerEdit.call(this, e);
var layer = e.layer || e.target || e;
if (!layer.snapediting) {
if (layer.getLatLng) {
layer.snapediting = new L.Handler.MarkerSnap(layer._map, layer, this.snapOptions);
} else {
if (layer.editing) {
layer.editing._verticesHandlers[0]._markerGroup.clearLayers();
delete layer.editing;
}
layer.editing = layer.snapediting = new L.Handler.PolylineSnap(layer._map, layer, this.snapOptions);
}
for (var i = 0, n = this._guideLayers.length; i < n; i++) {
layer.snapediting.addGuideLayer(this._guideLayers[i]);
}
}
layer.snapediting.enable();
}
});
L.Draw.Feature.SnapMixin = {
_snap_initialize: function () {
this.on('enabled', this._snap_on_enabled, this);
this.on('disabled', this._snap_on_disabled, this);
},
_snap_on_enabled: function () {
if (!this.options.guideLayers) {
return;
}
if (!this._mouseMarker) {
this._map.on('layeradd', this._snap_on_enabled, this);
return;
}else{
this._map.off('layeradd', this._snap_on_enabled, this);
}
if (!this._snapper) {
this._snapper = new L.Handler.MarkerSnap(this._map);
if (this.options.snapDistance) {
this._snapper.options.snapDistance = this.options.snapDistance;
}
if (this.options.snapVertices) {
this._snapper.options.snapVertices = this.options.snapVertices;
}
}
for (var i=0, n=this.options.guideLayers.length; i<n; i++)
this._snapper.addGuideLayer(this.options.guideLayers[i]);
var marker = this._mouseMarker;
this._snapper.watchMarker(marker);
// Show marker when (snap for user feedback)
var icon = marker.options.icon;
marker.on('snap', function (e) {
marker.setIcon(this.options.icon);
marker.setOpacity(1);
}, this)
.on('unsnap', function (e) {
marker.setIcon(icon);
marker.setOpacity(0);
}, this);
marker.on('click', this._snap_on_click, this);
},
_snap_on_click: function (e) {
if (this._markers) {
var markerCount = this._markers.length,
marker = this._markers[markerCount - 1];
if (this._mouseMarker.snap) {
if(e){
// update the feature being drawn to reflect the snapped location:
marker.setLatLng(e.target._latlng);
if(this._poly){
var polyPointsCount = this._poly._latlngs.length;
this._poly._latlngs[polyPointsCount - 1] = e.target._latlng;
this._poly.redraw();
}
}
L.DomUtil.addClass(marker._icon, 'marker-snapped');
}
}
},
_snap_on_disabled: function () {
delete this._snapper;
},
};
L.Draw.Feature.include(L.Draw.Feature.SnapMixin);
L.Draw.Feature.addInitHook('_snap_initialize');
})();
public/libs/proj4js.min.js 0 → 100644
+ 1
- 0
View file @ f4fadffb
This diff is collapsed.
public/libs/spectrum.css 0 → 100644
+ 519
- 0
View file @ f4fadffb
/***
Spectrum Colorpicker v1.3.4
https://github.com/bgrins/spectrum
Author: Brian Grinstead
License: MIT
***/
.sp-container {
position:absolute;
top:0;
left:0;
display:inline-block;
*display: inline;
*zoom: 1;
/* https://github.com/bgrins/spectrum/issues/40 */
z-index: 9999994;
overflow: hidden;
}
.sp-container.sp-flat {
position: relative;
}
/* Fix for * { box-sizing: border-box; } */
.sp-container,
.sp-container * {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
.sp-top {
position:relative;
width: 100%;
display:inline-block;
}
.sp-top-inner {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
}
.sp-color {
position: absolute;
top:0;
left:0;
bottom:0;
right:20%;
}
.sp-hue {
position: absolute;
top:0;
right:0;
bottom:0;
left:84%;
height: 100%;
}
.sp-clear-enabled .sp-hue {
top:33px;
height: 77.5%;
}
.sp-fill {
padding-top: 80%;
}
.sp-sat, .sp-val {
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.sp-alpha-enabled .sp-top {
margin-bottom: 18px;
}
.sp-alpha-enabled .sp-alpha {
display: block;
}
.sp-alpha-handle {
position:absolute;
top:-4px;
bottom: -4px;
width: 6px;
left: 50%;
cursor: pointer;
border: 1px solid black;
background: white;
opacity: .8;
}
.sp-alpha {
display: none;
position: absolute;
bottom: -14px;
right: 0;
left: 0;
height: 8px;
}
.sp-alpha-inner {
border: solid 1px #333;
}
.sp-clear {
display: none;
}
.sp-clear.sp-clear-display {
background-position: center;
}
.sp-clear-enabled .sp-clear {
display: block;
position:absolute;
top:0px;
right:0;
bottom:0;
left:84%;
height: 28px;
}
/* Don't allow text selection */
.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button {
-webkit-user-select:none;
-moz-user-select: -moz-none;
-o-user-select:none;
user-select: none;
}
.sp-container.sp-input-disabled .sp-input-container {
display: none;
}
.sp-container.sp-buttons-disabled .sp-button-container {
display: none;
}
.sp-palette-only .sp-picker-container {
display: none;
}
.sp-palette-disabled .sp-palette-container {
display: none;
}
.sp-initial-disabled .sp-initial {
display: none;
}
/* Gradients for hue, saturation and value instead of images. Not pretty... but it works */
.sp-sat {
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
}
.sp-val {
background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
}
.sp-hue {
background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}
/* IE filters do not support multiple color stops.
Generate 6 divs, line them up, and do two color gradients for each.
Yes, really.
*/
.sp-1 {
height:17%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
}
.sp-2 {
height:16%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
}
.sp-3 {
height:17%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
}
.sp-4 {
height:17%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
}
.sp-5 {
height:16%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
}
.sp-6 {
height:17%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
}
.sp-hidden {
display: none !important;
}
/* Clearfix hack */
.sp-cf:before, .sp-cf:after { content: ""; display: table; }
.sp-cf:after { clear: both; }
.sp-cf { *zoom: 1; }
/* Mobile devices, make hue slider bigger so it is easier to slide */
@media (max-device-width: 480px) {
.sp-color { right: 40%; }
.sp-hue { left: 63%; }
.sp-fill { padding-top: 60%; }
}
.sp-dragger {
border-radius: 5px;
height: 5px;
width: 5px;
border: 1px solid #fff;
background: #000;
cursor: pointer;
position:absolute;
top:0;
left: 0;
}
.sp-slider {
position: absolute;
top:0;
cursor:pointer;
height: 3px;
left: -1px;
right: -1px;
border: 1px solid #000;
background: white;
opacity: .8;
}
/*
Theme authors:
Here are the basic themeable display options (colors, fonts, global widths).
See http://bgrins.github.io/spectrum/themes/ for instructions.
*/
.sp-container {
border-radius: 0;
background-color: #ECECEC;
border: solid 1px #f0c49B;
padding: 0;
}
.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear
{
font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.sp-top
{
margin-bottom: 3px;
}
.sp-color, .sp-hue, .sp-clear
{
border: solid 1px #666;
}
/* Input */
.sp-input-container {
float:right;
width: 100px;
margin-bottom: 4px;
}
.sp-initial-disabled .sp-input-container {
width: 100%;
}
.sp-input {
font-size: 12px !important;
border: 1px inset;
padding: 4px 5px;
margin: 0;
width: 100%;
background:transparent;
border-radius: 3px;
color: #222;
}
.sp-input:focus {
border: 1px solid orange;
}
.sp-input.sp-validation-error
{
border: 1px solid red;
background: #fdd;
}
.sp-picker-container , .sp-palette-container
{
float:left;
position: relative;
padding: 10px;
padding-bottom: 300px;
margin-bottom: -290px;
}
.sp-picker-container
{
width: 172px;
border-left: solid 1px #fff;
}
/* Palettes */
.sp-palette-container
{
border-right: solid 1px #ccc;
}
.sp-palette .sp-thumb-el {
display: block;
position:relative;
float:left;
width: 24px;
height: 15px;
margin: 3px;
cursor: pointer;
border:solid 2px transparent;
}
.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
border-color: orange;
}
.sp-thumb-el
{
position:relative;
}
/* Initial */
.sp-initial
{
float: left;
border: solid 1px #333;
}
.sp-initial span {
width: 30px;
height: 25px;
border:none;
display:block;
float:left;
margin:0;
}
.sp-initial .sp-clear-display {
background-position: center;
}
/* Buttons */
.sp-button-container {
float: right;
}
/* Replacer (the little preview div that shows up instead of the <input>) */
.sp-replacer {
margin:0;
overflow:hidden;
cursor:pointer;
padding: 4px;
display:inline-block;
*zoom: 1;
*display: inline;
border: solid 1px #91765d;
background: #eee;
color: #333;
vertical-align: middle;
}
.sp-replacer:hover, .sp-replacer.sp-active {
border-color: #F0C49B;
color: #111;
}
.sp-replacer.sp-disabled {
cursor:default;
border-color: silver;
color: silver;
}
.sp-dd {
padding: 2px 0;
height: 16px;
line-height: 16px;
float:left;
font-size:10px;
}
.sp-preview
{
position:relative;
width:25px;
height: 20px;
border: solid 1px #222;
margin-right: 5px;
float:left;
z-index: 0;
}
.sp-palette
{
*width: 220px;
max-width: 220px;
}
.sp-palette .sp-thumb-el
{
width:16px;
height: 16px;
margin:2px 1px;
border: solid 1px #d0d0d0;
}
.sp-container
{
padding-bottom:0;
}
/* Buttons: http://hellohappy.org/css3-buttons/ */
.sp-container button {
background-color: #eeeeee;
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
border: 1px solid #ccc;
border-bottom: 1px solid #bbb;
border-radius: 3px;
color: #333;
font-size: 14px;
line-height: 1;
padding: 5px 4px;
text-align: center;
text-shadow: 0 1px 0 #eee;
vertical-align: middle;
}
.sp-container button:hover {
background-color: #dddddd;
background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
border: 1px solid #bbb;
border-bottom: 1px solid #999;
cursor: pointer;
text-shadow: 0 1px 0 #ddd;
}
.sp-container button:active {
border: 1px solid #aaa;
border-bottom: 1px solid #888;
-webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
}
.sp-cancel
{
font-size: 11px;
color: #d93f3f !important;
margin:0;
padding:2px;
margin-right: 5px;
vertical-align: middle;
text-decoration:none;
}
.sp-cancel:hover
{
color: #d93f3f !important;
text-decoration: underline;
}
.sp-palette span:hover, .sp-palette span.sp-thumb-active
{
border-color: #000;
}
.sp-preview, .sp-alpha, .sp-thumb-el
{
position:relative;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
}
.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner
{
display:block;
position:absolute;
top:0;left:0;bottom:0;right:0;
}
.sp-palette .sp-thumb-inner
{
background-position: 50% 50%;
background-repeat: no-repeat;
}
.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner
{
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
}
.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner
{
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
}
.sp-clear-display {
background-repeat:no-repeat;
background-position: center;
background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
}
public/libs/spectrum.js 0 → 100644
+ 2080
- 0
View file @ f4fadffb
This diff is collapsed.
public/src/Control.Draw.js 0 → 100644
+ 118
- 0
View file @ f4fadffb
/**
* @class L.Control.Draw
* @aka L.Draw
*/
L.Control.Draw = L.Control.extend({
// Options
options: {
position: 'topleft',
draw: {},
edit: false
},
// @method initialize(): void
// Initializes draw control, toolbars from the options
initialize: function (options) {
if (L.version < '0.7') {
throw new Error('Leaflet.draw 0.2.3+ requires Leaflet 0.7.0+. Download latest from https://github.com/Leaflet/Leaflet/');
}
L.Control.prototype.initialize.call(this, options);
var toolbar;
this._toolbars = {};
// Initialize toolbars
if (L.DrawToolbar && this.options.draw) {
toolbar = new L.DrawToolbar(this.options.draw);
this._toolbars[L.DrawToolbar.TYPE] = toolbar;
// Listen for when toolbar is enabled
this._toolbars[L.DrawToolbar.TYPE].on('enable', this._toolbarEnabled, this);
}
if (L.EditToolbar && this.options.edit) {
toolbar = new L.EditToolbar(this.options.edit);
this._toolbars[L.EditToolbar.TYPE] = toolbar;
// Listen for when toolbar is enabled
this._toolbars[L.EditToolbar.TYPE].on('enable', this._toolbarEnabled, this);
}
L.toolbar = this; //set global var for editing the toolbar
},
// @method onAdd(): container
// Adds the toolbar container to the map
onAdd: function (map) {
var container = L.DomUtil.create('div', 'leaflet-draw'),
addedTopClass = false,
topClassName = 'leaflet-draw-toolbar-top',
toolbarContainer;
for (var toolbarId in this._toolbars) {
if (this._toolbars.hasOwnProperty(toolbarId)) {
toolbarContainer = this._toolbars[toolbarId].addToolbar(map);
if (toolbarContainer) {
// Add class to the first toolbar to remove the margin
if (!addedTopClass) {
if (!L.DomUtil.hasClass(toolbarContainer, topClassName)) {
L.DomUtil.addClass(toolbarContainer.childNodes[0], topClassName);
}
addedTopClass = true;
}
container.appendChild(toolbarContainer);
}
}
}
return container;
},
// @method onRemove(): void
// Removes the toolbars from the map toolbar container
onRemove: function () {
for (var toolbarId in this._toolbars) {
if (this._toolbars.hasOwnProperty(toolbarId)) {
this._toolbars[toolbarId].removeToolbar();
}
}
},
// @method setDrawingOptions(options): void
// Sets options to all toolbar instances
setDrawingOptions: function (options) {
for (var toolbarId in this._toolbars) {
if (this._toolbars[toolbarId] instanceof L.DrawToolbar) {
this._toolbars[toolbarId].setOptions(options);
}
}
},
_toolbarEnabled: function (e) {
var enabledToolbar = e.target;
for (var toolbarId in this._toolbars) {
if (this._toolbars[toolbarId] !== enabledToolbar) {
this._toolbars[toolbarId].disable();
}
}
}
});
L.Map.mergeOptions({
drawControlTooltips: true,
drawControl: false
});
L.Map.addInitHook(function () {
if (this.options.drawControl) {
this.drawControl = new L.Control.Draw();
this.addControl(this.drawControl);
}
});
public/src/Leaflet.Draw.Event.js 0 → 100644
+ 177
- 0
View file @ f4fadffb
/**
* ### Events
* Once you have successfully added the Leaflet.draw plugin to your map you will want to respond to the different
* actions users can initiate. The following events will be triggered on the map:
*
* @class L.Draw.Event
* @aka Draw.Event
*
* Use `L.Draw.Event.EVENTNAME` constants to ensure events are correct.
*
* @example
* ```js
* map.on(L.Draw.Event.CREATED; function (e) {
* var type = e.layerType,
* layer = e.layer;
*
* if (type === 'marker') {
* // Do marker specific actions
* }
*
* // Do whatever else you need to. (save to db; add to map etc)
* map.addLayer(layer);
*});
* ```
*/
L.Draw.Event = {};
/**
* @event draw:created: PolyLine; Polygon; Rectangle; Circle; Marker | String
*
* Layer that was just created.
* The type of layer this is. One of: `polyline`; `polygon`; `rectangle`; `circle`; `marker`
* Triggered when a new vector or marker has been created.
*
*/
L.Draw.Event.CREATED = 'draw:created';
/**
* @event draw:edited: LayerGroup
*
* List of all layers just edited on the map.
*
*
* Triggered when layers in the FeatureGroup; initialised with the plugin; have been edited and saved.
*
* @example
* ```js
* map.on('draw:edited', function (e) {
* var layers = e.layers;
* layers.eachLayer(function (layer) {
* //do whatever you want; most likely save back to db
* });
* });
* ```
*/
L.Draw.Event.EDITED = 'draw:edited';
/**
* @event draw:deleted: LayerGroup
*
* List of all layers just removed from the map.
*
* Triggered when layers have been removed (and saved) from the FeatureGroup.
*/
L.Draw.Event.DELETED = 'draw:deleted';
/**
* @event draw:drawstart: String
*
* The type of layer this is. One of:`polyline`; `polygon`; `rectangle`; `circle`; `marker`
*
* Triggered when the user has chosen to draw a particular vector or marker.
*/
L.Draw.Event.DRAWSTART = 'draw:drawstart';
/**
* @event draw:drawstop: String
*
* The type of layer this is. One of: `polyline`; `polygon`; `rectangle`; `circle`; `marker`
*
* Triggered when the user has finished a particular vector or marker.
*/
L.Draw.Event.DRAWSTOP = 'draw:drawstop';
/**
* @event draw:drawvertex: LayerGroup
*
* List of all layers just being added from the map.
*
* Triggered when a vertex is created on a polyline or polygon.
*/
L.Draw.Event.DRAWVERTEX = 'draw:drawvertex';
/**
* @event draw:editstart: String
*
* The type of edit this is. One of: `edit`
*
* Triggered when the user starts edit mode by clicking the edit tool button.
*/
L.Draw.Event.EDITSTART = 'draw:editstart';
/**
* @event draw:editmove: ILayer
*
* Layer that was just moved.
*
* Triggered as the user moves a rectangle; circle or marker.
*/
L.Draw.Event.EDITMOVE = 'draw:editmove';
/**
* @event draw:editresize: ILayer
*
* Layer that was just moved.
*
* Triggered as the user resizes a rectangle or circle.
*/
L.Draw.Event.EDITRESIZE = 'draw:editresize';
/**
* @event draw:editvertex: LayerGroup
*
* List of all layers just being edited from the map.
*
* Triggered when a vertex is edited on a polyline or polygon.
*/
L.Draw.Event.EDITVERTEX = 'draw:editvertex';
/**
* @event draw:editstop: String
*
* The type of edit this is. One of: `edit`
*
* Triggered when the user has finshed editing (edit mode) and saves edits.
*/
L.Draw.Event.EDITSTOP = 'draw:editstop';
/**
* @event draw:deletestart: String
*
* The type of edit this is. One of: `remove`
*
* Triggered when the user starts remove mode by clicking the remove tool button.
*/
L.Draw.Event.DELETESTART = 'draw:deletestart';
/**
* @event draw:deletestop: String
*
* The type of edit this is. One of: `remove`
*
* Triggered when the user has finished removing shapes (remove mode) and saves.
*/
L.Draw.Event.DELETESTOP = 'draw:deletestop';
/**
* @event draw:toolbaropened: String
*
* Triggered when a toolbar is opened.
*/
L.Draw.Event.TOOLBAROPENED = 'draw:toolbaropened';
/**
* @event draw:toolbarclosed: String
*
* Triggered when a toolbar is closed.
*/
L.Draw.Event.TOOLBARCLOSED = 'draw:toolbarclosed';
/**
* @event draw:markercontext: String
*
* Triggered when a marker is right clicked.
*/
L.Draw.Event.MARKERCONTEXT = 'draw:markercontext';
\ No newline at end of file
public/src/Leaflet.draw.js 0 → 100644
+ 189
- 0
View file @ f4fadffb
/**
* Leaflet.draw assumes that you have already included the Leaflet library.
*/
L.drawVersion = '0.4.2';
/**
* @class L.Draw
* @aka Draw
*
*
* To add the draw toolbar set the option drawControl: true in the map options.
*
* @example
* ```js
* var map = L.map('map', {drawControl: true}).setView([51.505, -0.09], 13);
*
* L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
* attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
* }).addTo(map);
* ```
*
* ### Adding the edit toolbar
* To use the edit toolbar you must initialise the Leaflet.draw control and manually add it to the map.
*
* ```js
* var map = L.map('map').setView([51.505, -0.09], 13);
*
* L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
* attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
* }).addTo(map);
*
* // FeatureGroup is to store editable layers
* var drawnItems = new L.FeatureGroup();
* map.addLayer(drawnItems);
*
* var drawControl = new L.Control.Draw({
* edit: {
* featureGroup: drawnItems
* }
* });
* map.addControl(drawControl);
* ```
*
* The key here is the featureGroup option. This tells the plugin which FeatureGroup contains the layers that
* should be editable. The featureGroup can contain 0 or more features with geometry types Point, LineString, and Polygon.
* Leaflet.draw does not work with multigeometry features such as MultiPoint, MultiLineString, MultiPolygon,
* or GeometryCollection. If you need to add multigeometry features to the draw plugin, convert them to a
* FeatureCollection of non-multigeometries (Points, LineStrings, or Polygons).
*/
L.Draw = {};
/**
* @class L.drawLocal
* @aka L.drawLocal
*
* The core toolbar class of the API — it is used to create the toolbar ui
*
* @example
* ```js
* var modifiedDraw = L.drawLocal.extend({
* draw: {
* toolbar: {
* buttons: {
* polygon: 'Draw an awesome polygon'
* }
* }
* }
* });
* ```
*
* The default state for the control is the draw toolbar just below the zoom control.
* This will allow map users to draw vectors and markers.
* **Please note the edit toolbar is not enabled by default.**
*/
L.drawLocal = {
// format: {
// numeric: {
// delimiters: {
// thousands: ',',
// decimal: '.'
// }
// }
// },
draw: {
toolbar: {
// #TODO: this should be reorganized where actions are nested in actions
// ex: actions.undo or actions.cancel
actions: {
title: 'Cancel drawing',
text: 'Cancel'
},
finish: {
title: 'Finish drawing',
text: 'Finish'
},
undo: {
title: 'Delete last point drawn',
text: 'Delete last point'
},
buttons: {
polyline: 'Draw a polyline',
polygon: 'Draw a polygon',
rectangle: 'Draw a rectangle',
circle: 'Draw a circle',
marker: 'Draw a marker',
circlemarker: 'Draw a circlemarker'
}
},
handlers: {
circle: {
tooltip: {
start: 'Click and drag to draw circle.'
},
radius: 'Radius'
},
circlemarker: {
tooltip: {
start: 'Click map to place circle marker.'
}
},
marker: {
tooltip: {
start: 'Click map to place marker.'
}
},
polygon: {
tooltip: {
start: 'Click to start drawing shape.',
cont: 'Click to continue drawing shape.',
end: 'Click first point to close this shape.'
}
},
polyline: {
error: '<strong>Error:</strong> shape edges cannot cross!',
tooltip: {
start: 'Click to start drawing line.',
cont: 'Click to continue drawing line.',
end: 'Click last point to finish line.'
}
},
rectangle: {
tooltip: {
start: 'Click and drag to draw rectangle.'
}
},
simpleshape: {
tooltip: {
end: 'Release mouse to finish drawing.'
}
}
}
},
edit: {
toolbar: {
actions: {
save: {
title: 'Save changes',
text: 'Save'
},
cancel: {
title: 'Cancel editing, discards all changes',
text: 'Cancel'
},
clearAll: {
title: 'Clear all layers',
text: 'Clear All'
}
},
buttons: {
edit: 'Edit layers',
editDisabled: 'No layers to edit',
remove: 'Delete layers',
removeDisabled: 'No layers to delete'
}
},
handlers: {
edit: {
tooltip: {
text: 'Drag handles or markers to edit features.',
subtext: 'Click cancel to undo changes.'
}
},
remove: {
tooltip: {
text: 'Click on a feature to remove.'
}
}
}
}
};
public/src/Toolbar.js 0 → 100644
+ 334
- 0
View file @ f4fadffb
/**
* @class L.Draw.Toolbar
* @aka Toolbar
*
* The toolbar class of the API — it is used to create the ui
* This will be depreciated
*
* @example
*
* ```js
* var toolbar = L.Toolbar();
* toolbar.addToolbar(map);
* ```
*
* ### Disabling a toolbar
*
* If you do not want a particular toolbar in your app you can turn it off by setting the toolbar to false.
*
* ```js
* var drawControl = new L.Control.Draw({
* draw: false,
* edit: {
* featureGroup: editableLayers
* }
* });
* ```
*
* ### Disabling a toolbar item
*
* If you want to turn off a particular toolbar item, set it to false. The following disables drawing polygons and
* markers. It also turns off the ability to edit layers.
*
* ```js
* var drawControl = new L.Control.Draw({
* draw: {
* polygon: false,
* marker: false
* },
* edit: {
* featureGroup: editableLayers,
* edit: false
* }
* });
* ```
*/
L.Toolbar = L.Class.extend({
// @section Methods for modifying the toolbar
// @method initialize(options): void
// Toolbar constructor
initialize: function (options) {
L.setOptions(this, options);
this._modes = {};
this._actionButtons = [];
this._activeMode = null;
var version = L.version.split('.');
//If Version is >= 1.2.0
if (parseInt(version[0], 10) === 1 && parseInt(version[1], 10) >= 2) {
L.Toolbar.include(L.Evented.prototype);
} else {
L.Toolbar.include(L.Mixin.Events);
}
},
// @method enabled(): boolean
// Gets a true/false of whether the toolbar is enabled
enabled: function () {
return this._activeMode !== null;
},
// @method disable(): void
// Disables the toolbar
disable: function () {
if (!this.enabled()) {
return;
}
this._activeMode.handler.disable();
},
// @method addToolbar(map): L.DomUtil
// Adds the toolbar to the map and returns the toolbar dom element
addToolbar: function (map) {
var container = L.DomUtil.create('div', 'leaflet-draw-section'),
buttonIndex = 0,
buttonClassPrefix = this._toolbarClass || '',
modeHandlers = this.getModeHandlers(map),
i;
this._toolbarContainer = L.DomUtil.create('div', 'leaflet-draw-toolbar leaflet-bar');
this._map = map;
for (i = 0; i < modeHandlers.length; i++) {
if (modeHandlers[i].enabled) {
this._initModeHandler(
modeHandlers[i].handler,
this._toolbarContainer,
buttonIndex++,
buttonClassPrefix,
modeHandlers[i].title
);
}
}
// if no buttons were added, do not add the toolbar
if (!buttonIndex) {
return;
}
// Save button index of the last button, -1 as we would have ++ after the last button
this._lastButtonIndex = --buttonIndex;
// Create empty actions part of the toolbar
this._actionsContainer = L.DomUtil.create('ul', 'leaflet-draw-actions');
// Add draw and cancel containers to the control container
container.appendChild(this._toolbarContainer);
container.appendChild(this._actionsContainer);
return container;
},
// @method removeToolbar(): void
// Removes the toolbar and drops the handler event listeners
removeToolbar: function () {
// Dispose each handler
for (var handlerId in this._modes) {
if (this._modes.hasOwnProperty(handlerId)) {
// Unbind handler button
this._disposeButton(
this._modes[handlerId].button,
this._modes[handlerId].handler.enable,
this._modes[handlerId].handler
);
// Make sure is disabled
this._modes[handlerId].handler.disable();
// Unbind handler
this._modes[handlerId].handler
.off('enabled', this._handlerActivated, this)
.off('disabled', this._handlerDeactivated, this);
}
}
this._modes = {};
// Dispose the actions toolbar
for (var i = 0, l = this._actionButtons.length; i < l; i++) {
this._disposeButton(
this._actionButtons[i].button,
this._actionButtons[i].callback,
this
);
}
this._actionButtons = [];
this._actionsContainer = null;
},
_initModeHandler: function (handler, container, buttonIndex, classNamePredix, buttonTitle) {
var type = handler.type;
this._modes[type] = {};
this._modes[type].handler = handler;
this._modes[type].button = this._createButton({
type: type,
title: buttonTitle,
className: classNamePredix + '-' + type,
container: container,
callback: this._modes[type].handler.enable,
context: this._modes[type].handler
});
this._modes[type].buttonIndex = buttonIndex;
this._modes[type].handler
.on('enabled', this._handlerActivated, this)
.on('disabled', this._handlerDeactivated, this);
},
/* Detect iOS based on browser User Agent, based on:
* http://stackoverflow.com/a/9039885 */
_detectIOS: function () {
var iOS = (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream);
return iOS;
},
_createButton: function (options) {
var link = L.DomUtil.create('a', options.className || '', options.container);
// Screen reader tag
var sr = L.DomUtil.create('span', 'sr-only', options.container);
link.href = '#';
link.appendChild(sr);
if (options.title) {
link.title = options.title;
sr.innerHTML = options.title;
}
if (options.text) {
link.innerHTML = options.text;
sr.innerHTML = options.text;
}
/* iOS does not use click events */
var buttonEvent = this._detectIOS() ? 'touchstart' : 'click';
L.DomEvent
.on(link, 'click', L.DomEvent.stopPropagation)
.on(link, 'mousedown', L.DomEvent.stopPropagation)
.on(link, 'dblclick', L.DomEvent.stopPropagation)
.on(link, 'touchstart', L.DomEvent.stopPropagation)
.on(link, 'click', L.DomEvent.preventDefault)
.on(link, buttonEvent, options.callback, options.context);
return link;
},
_disposeButton: function (button, callback) {
/* iOS does not use click events */
var buttonEvent = this._detectIOS() ? 'touchstart' : 'click';
L.DomEvent
.off(button, 'click', L.DomEvent.stopPropagation)
.off(button, 'mousedown', L.DomEvent.stopPropagation)
.off(button, 'dblclick', L.DomEvent.stopPropagation)
.off(button, 'touchstart', L.DomEvent.stopPropagation)
.off(button, 'click', L.DomEvent.preventDefault)
.off(button, buttonEvent, callback);
},
_handlerActivated: function (e) {
// Disable active mode (if present)
this.disable();
// Cache new active feature
this._activeMode = this._modes[e.handler];
L.DomUtil.addClass(this._activeMode.button, 'leaflet-draw-toolbar-button-enabled');
this._showActionsToolbar();
this.fire('enable');
},
_handlerDeactivated: function () {
this._hideActionsToolbar();
L.DomUtil.removeClass(this._activeMode.button, 'leaflet-draw-toolbar-button-enabled');
this._activeMode = null;
this.fire('disable');
},
_createActions: function (handler) {
var container = this._actionsContainer,
buttons = this.getActions(handler),
l = buttons.length,
li, di, dl, button;
// Dispose the actions toolbar (todo: dispose only not used buttons)
for (di = 0, dl = this._actionButtons.length; di < dl; di++) {
this._disposeButton(this._actionButtons[di].button, this._actionButtons[di].callback);
}
this._actionButtons = [];
// Remove all old buttons
while (container.firstChild) {
container.removeChild(container.firstChild);
}
for (var i = 0; i < l; i++) {
if ('enabled' in buttons[i] && !buttons[i].enabled) {
continue;
}
li = L.DomUtil.create('li', '', container);
button = this._createButton({
title: buttons[i].title,
text: buttons[i].text,
container: li,
callback: buttons[i].callback,
context: buttons[i].context
});
this._actionButtons.push({
button: button,
callback: buttons[i].callback
});
}
},
_showActionsToolbar: function () {
var buttonIndex = this._activeMode.buttonIndex,
lastButtonIndex = this._lastButtonIndex,
toolbarPosition = this._activeMode.button.offsetTop - 1;
// Recreate action buttons on every click
this._createActions(this._activeMode.handler);
// Correctly position the cancel button
this._actionsContainer.style.top = toolbarPosition + 'px';
if (buttonIndex === 0) {
L.DomUtil.addClass(this._toolbarContainer, 'leaflet-draw-toolbar-notop');
L.DomUtil.addClass(this._actionsContainer, 'leaflet-draw-actions-top');
}
if (buttonIndex === lastButtonIndex) {
L.DomUtil.addClass(this._toolbarContainer, 'leaflet-draw-toolbar-nobottom');
L.DomUtil.addClass(this._actionsContainer, 'leaflet-draw-actions-bottom');
}
this._actionsContainer.style.display = 'block';
this._map.fire(L.Draw.Event.TOOLBAROPENED);
},
_hideActionsToolbar: function () {
this._actionsContainer.style.display = 'none';
L.DomUtil.removeClass(this._toolbarContainer, 'leaflet-draw-toolbar-notop');
L.DomUtil.removeClass(this._toolbarContainer, 'leaflet-draw-toolbar-nobottom');
L.DomUtil.removeClass(this._actionsContainer, 'leaflet-draw-actions-top');
L.DomUtil.removeClass(this._actionsContainer, 'leaflet-draw-actions-bottom');
this._map.fire(L.Draw.Event.TOOLBARCLOSED);
}
});
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal