Merge branch 'leaflet-upgrade'

This commit is contained in:
Dave Conway-Jones 2019-05-08 08:41:11 +01:00
commit aa4c0eed79
No known key found for this signature in database
GPG Key ID: 9E7F9C73F5168CD4
37 changed files with 1874 additions and 1987 deletions

View File

@ -1,6 +1,14 @@
### Change Log for Node-RED Worldmap
- v1.5.40 - Only enable on.location function when not in an iframe. Tidy html.
- v2.0.7-beta - Switch Ruler control to be independent of Draw library.
- v2.0.6-beta - Re-enable editing of draw layer, add rectangles to lines and areas. Make individual objects editable.
- v2.0.5-beta - Fix clustering on zoom (update old library)
- v2.0.4-beta - Add helicopter icon. Correct Leaflet.Coordinates file name. Fix right contextmenu.
- v2.0.3-beta - Let circles have popups. Better drawing of ellipses
- v2.0.2-beta - Let lines and areas also have popups
- v2.0.1-beta - Add optional graticule.
- v2.0.0-beta - Move to leaflet 1.4.x plus all plugins updated
- v1.5.40 - Only enable on.location function when not in an iframe. Issue #89. Tidy html.
- v1.5.39 - Add weather-lite icons
- v1.5.38 - Add Esri dark grey and ocean, re-add hikebike, layers
- v1.5.37 - Add .trackpoints to override default number in tracks node. Let tracks optionally be on different layers. Fix marker changing layers Issue #85

View File

@ -9,7 +9,15 @@ map web page for plotting "things" on.
### Updates
- v1.5.40 - Only enable on.location function when not in an iframe. Tidy html.
- v2.0.7-beta - Switch Ruler control to be independent of Draw library.
- v2.0.6-beta - Re-enable editing of draw layer, add rectangles to lines and areas. Make individual objects editable.
- v2.0.5-beta - Fix clustering on zoom (update old library)
- v2.0.4-beta - Add helicopter icon. Correct Leaflet.Coordinates file name. Fix right contextmenu.
- v2.0.3-beta - Let circles have popups. Better drawing of ellipses
- v2.0.2-beta - Let lines and areas also have popups
- v2.0.1-beta - Add optional graticule
- v2.0.0-beta - Move to leaflet 1.4.x plus all plugins updated
- v1.5.40 - Only enable on.location function when not in an iframe. Issue #89. Tidy html.
- v1.5.39 - Add weather-lite icons
- v1.5.38 - Add Esri dark grey and ocean, re-add hikebike, layers
- v1.5.37 - Add .trackpoints to override default in tracks node. Let tracks optionally be on different layers. Fix marker changing layers Issue #85
@ -88,6 +96,7 @@ There are also several special icons...
- **ship** : a ship icon that aligns with the bearing of travel.
- **car** : a car icon that aligns with the bearing of travel.
- **uav** : a small plane icon that aligns with the bearing of travel.
- **helicopter** : a small helicopter icon that aligns with the bearing of travel.
- **arrow** : a map GPS arrow type pointer that aligns with the bearing of travel.
- **wind** : a wind arrow that points in the direction the wind is coming FROM.
- **satellite** : a small satellite icon.
@ -179,46 +188,51 @@ in addition existing male, female, fa-male and fa-female icons are all represent
- As this uses the mapbox api you may wish to edit the index3d.html code to include your api key to remove any usage restrictions.
- This view is a side project to the Node-RED Worldmap project so I'm happy to take PRs but it probably won't be actively developed.
### Areas and Lines
### Areas, Lines and Rectangles
If the msg.payload contains an **area** property - that is an array of co-ordinates, e.g.
... , "area": [ [51.05, -0.08], [51.5, -1], [51.2, -0.047] ], ...
msg.payload = {"name": "zone1", "area": [ [51.05, -0.08], [51.5, -1], [51.2, -0.047] ]}
then rather than draw a point and icon it draws the polygon. Likewise if it contains a
**line** property it will draw the polyline.
then rather than draw a point and icon it draws the polygon. If the "area" array only has 2
elements, then it assumes this is a bounding box for a rectangle and draws a rectangle.
- **color** : can set the colour of the polygon or line.
- **fillColor** : can set the fill colour of the polygon.
- **fillOpacity** : can set the opacity of the polygon fill colour.
- **dashArray** : optional dash array for polyline.
- **name** : is used as the id key - so can be redrawn/moved.
- **layer** : declares which layer you put it on..
Likewise if it contains a **line** property it will draw the polyline.
### Circles
There are extra optional properties you can specify - see Options below.
### Circles and Ellipses
If the msg.payload contains a **radius** property, as well as name, lat and lon, then rather
than draw a point it will draw a circle. The *radius* property is specified in meters.
msg.payload = { "name":"A3090", "lat":51.05, "lon":-1.35, "radius":3000 }
As per Areas and Lines you may also specify *color*, *fillColor*, and *layer*.
As per Areas and Lines you may also specify *color*, *fillColor*, and *layer*, see Options below.
If the payload contains a **sdlat** and **sdlon** property instead of *radius* an ellipse will be drawn. The sdlat and sdlon propertys specify the semi-axes of the ellipse.
These are specified in the Latitude/Longitude format.
If the **radius** property is an array of two numbers, these specify the minor and major radii
of an ellipse, in meters. A **tilt** property can also be applied to rotate the ellipse by
a number of degrees.
msg.payload = { "name":"Bristol Channel", "lat":51.5, "lon":-2.9, "radius":[30000,70000], "tilt":45 };
### Options
Areas, Lines and Circles can also specify more optional properties:
- color
- fillColor
- stroke
- weight
- opacity
- fill
- fillOpacity
- dashArray
- clickable (if true sets the passed in name as Popup)
Areas, Rectangles, Lines, Circles and Ellipses can also specify more optional properties:
- **layer** : declares which layer you put it on.
- **color** : can set the colour of the polygon or line.
- **fillColor** : can set the fill colour of the polygon.
- **fillOpacity** : can set the opacity of the polygon fill colour.
- **dashArray** : optional dash array for polyline.
- **clickable** : boolean - set to true to allow click to show popup.
- **popup** : html string to display in popup (as well as name).
- **editable** : boolean - set to true to allow simple edit/delete right click contextmenu
- **contextmenu** : html string to display a more complex right click contextmenu
- **weight** : the width of the line (or outline)
Other properties can be found in the leaflet documentation.
## Drawing
@ -226,7 +240,8 @@ A single *right click* will allow you to add a point to the map - you must speci
Right-clicking on an icon will allow you to delete it.
If you select the **drawing** layer you can also add polylines, polygons and rectangles.
If you select the **drawing** layer you can also add and edit polylines, polygons, rectangles and circles.
Once an item is drawn you can right click to edit or delete it. Double click the object to exit edit mode.
## Events from the map
@ -250,10 +265,20 @@ The **worldmap in** node can be used to receive various events from the map. Exa
{ "action": "feedback", "name": "some name", "value": "some value" } // when a user calls the feedback function - see below
There is a function available to make sending data to Node-RED easier (e.g. from inside a user defined popup), called feedback() - it takes two (or three) parameters, name, value, and optionally an action name (defaults to "feedback"), and can be used inside something like an input tag - `onchange='feedback(this.name,this.value)'`. Value can be a more complex object if required as long as it is serialisable.
All actions also include a `msg._sessionid` property that indicates which client session they came from. Any msg sent out that includes this property will ONLY be sent to that session - so you can target map updates to specific sessions if required.
### Utility functions
There are some internal functions available to make interacting with Node-RED easier (e.g. from inside a user defined popup., these include:
- **feedback()** : it takes two (or three) parameters, name, value, and optionally an action name (defaults to "feedback"), and can be used inside something like an input tag - `onchange='feedback(this.name,this.value)'`. Value can be a more complex object if required as long as it is serialisable.
- **delMarker()** : takes the name of the marker as a parameter. In a popup this can be specified as `$name` for dynamic substitution.
- **editPoly()** : takes the name of the shape or line as a parameter. In a popup this can be specified as `$name` for dynamic substitution.
## Controlling the map
You can also control the map via the node, by sending in a msg.payload containing a **command** object. Multiple parameters can be specified in one command.
@ -354,9 +379,11 @@ To remove several layers, either base layers or overlays, you can pass an array
This can be used to tidy up the initial selections available to the user layer menu.
msg.payload.command.map = {
"delete":["Watercolor","Ship Nav","Heatmap"]
"delete":["Watercolor","ship nav","heatmap","Terrain","UK OS 1900","UK OS 1919-47"]
};
Note: layer names are case sensitive.
#### To add a WMS overlay layer - eg US weather radar
To add an overlay instead of a base layer - specify the `overlay` property instead of the `name`.
@ -438,6 +465,18 @@ in a function node:
opt: { opacity:0.8, attribution:"© University of Texas" }
};
#### To add a Lat/Lon Graticule overlay
A graticule can be enabled via the node configuration, and can also be set dynamically,
for example in a function node:
msg.payload = { command : { grid : {
showgrid: true,
opt: { showLabel:true, dashArray:[5, 5], fontColor:"#900" }
};
see https://github.com/cloudybay/leaflet.latlng-graticule for more details about options and demo.
#### To clear all markers from a layer, or an overlay from the map
msg.payload.command.clear = "name of your layer/overlay to remove";
@ -486,4 +525,4 @@ It also shows how to zoom and move the map or add a new layer.
[{"id":"86457344.50e6b","type":"inject","z":"745a133b.dd6dec","name":"","topic":"","payload":"","payloadType":"none","repeat":"","crontab":"","once":false,"x":190,"y":2420,"wires":[["9a142026.fa47f"]]},{"id":"9a142026.fa47f","type":"function","z":"745a133b.dd6dec","name":"add new layer","func":"msg.payload = {};\nmsg.payload.command = {};\n\nvar u = 'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png';\nvar o = { maxZoom: 19, attribution: '© OpenStreetMap'};\n\nmsg.payload.command.map = {name:\"OSMhot\", url:u, opt:o};\nmsg.payload.command.layer = \"OSMhot\";\n\nreturn msg;","outputs":1,"noerr":0,"x":420,"y":2420,"wires":[["c643e022.1816c"]]},{"id":"c643e022.1816c","type":"worldmap","z":"745a133b.dd6dec","name":"","x":750,"y":2460,"wires":[]},{"id":"2998e233.4ba64e","type":"function","z":"745a133b.dd6dec","name":"USGS Quake monitor csv re-parse","func":"msg.payload.lat = msg.payload.latitude;\nmsg.payload.lon = msg.payload.longitude;\nmsg.payload.layer = \"earthquake\";\nmsg.payload.name = msg.payload.id;\nmsg.payload.icon = \"globe\";\nmsg.payload.iconColor = \"orange\";\n\ndelete msg.payload.latitude;\ndelete msg.payload.longitude;\t\nreturn msg;","outputs":1,"noerr":0,"x":540,"y":2560,"wires":[["c643e022.1816c"]]},{"id":"e72c5732.9fa198","type":"function","z":"745a133b.dd6dec","name":"move and zoom","func":"msg.payload = { command:{layer:\"Esri Terrain\",lat:0,lon:0,zoom:3} };\nreturn msg;","outputs":1,"noerr":0,"x":420,"y":2460,"wires":[["c643e022.1816c"]]},{"id":"12317723.589249","type":"csv","z":"745a133b.dd6dec","name":"","sep":",","hdrin":true,"hdrout":"","multi":"one","ret":"\\n","temp":"","x":390,"y":2500,"wires":[["2998e233.4ba64e"]]},{"id":"10e5e5f0.8daeaa","type":"inject","z":"745a133b.dd6dec","name":"","topic":"","payload":"","payloadType":"none","repeat":"","crontab":"","once":false,"x":190,"y":2460,"wires":[["e72c5732.9fa198"]]},{"id":"b6917d83.d1bac","type":"http request","z":"745a133b.dd6dec","name":"","method":"GET","url":"http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.csv","x":270,"y":2560,"wires":[["12317723.589249"]]},{"id":"3842171.4d487e8","type":"inject","z":"745a133b.dd6dec","name":"Quakes","topic":"","payload":"","payloadType":"none","repeat":"900","crontab":"","once":false,"x":200,"y":2500,"wires":[["b6917d83.d1bac"]]}]
Car icon made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="mapinfo">CC 3.0 BY</a>.</div>
Car and Helicopter icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="mapinfo">CC 3.0 BY</a>.</div>

View File

@ -1,6 +1,6 @@
{
"name": "node-red-contrib-web-worldmap",
"version": "1.5.40",
"version": "2.0.7-beta",
"description": "A Node-RED node to provide a web page of a world map for plotting things on.",
"dependencies": {
"cgi": "0.3.1",

View File

@ -95,6 +95,11 @@
<option value="deg">Degrees</option>
<option value="dms">D.M.S</option>
</select>
<i class="fa fa-th" style="margin-left:22px;"></i> Graticule
<select id="node-input-showgrid" style="width:95px;">
<option value="false">Not shown</option>
<option value="true">Visible</option>
</select>
</div>
<div class="form-row">
<label for="node-input-path"><i class="fa fa-globe"></i> Web Path</label>
@ -173,6 +178,7 @@ then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the m
zoomlock: {value:"false"},
hiderightclick: {value:"false"},
coords: {value:"false"},
showgrid: {value:"false"},
path: {value:"/worldmap"}
},
inputs:1,

View File

@ -40,6 +40,7 @@ module.exports = function(RED) {
this.panit = n.panit || "false";
this.hiderightclick = n.hiderightclick || "false";
this.coords = n.coords || "none";
this.showgrid = n.showgrid || "false";
this.path = n.path || "/worldmap";
if (this.path.charAt(0) != "/") { this.path = "/" + this.path; }
if (!sockets[this.path]) {
@ -72,6 +73,7 @@ module.exports = function(RED) {
c.panlock = node.panlock;
c.zoomlock = node.zoomlock;
c.showlayers = node.layers;
c.grid = {showgrid:node.showgrid};
c.hiderightclick = node.hiderightclick;
c.coords = node.coords;
client.write(JSON.stringify({command:c}));

View File

@ -45,6 +45,10 @@ dialog > button {
vertical-align:middle;
}
.leaflet-tooltip {
padding: 1px 4px !important;
}
#topbar {
color:#c7c7c7;
background-color:black;
@ -73,14 +77,14 @@ dialog > button {
#map {
position:fixed;
top:40px;
bottom:0px;
bottom:1px;
min-width:100%;
display:block;
}
#foot {
position:absolute;
bottom:-1px;
bottom:0px;
left:-1px;
z-index:1;
font-size:9px;

View File

@ -21,34 +21,33 @@
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="css/map.css"/>
<link rel="stylesheet" type="text/css" href="leaflet/leaflet.css"/>
<link rel="stylesheet" type="text/css" href="leaflet/font-awesome/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="leaflet/weather-icons-lite/css/weather-icons-lite.min.css"/>
<link rel="stylesheet" type="text/css" href="leaflet/leaflet.css"/>
<link rel="stylesheet" type="text/css" href="leaflet/leaflet-vector-markers.css">
<link rel="stylesheet" type="text/css" href="leaflet/MarkerCluster.css">
<link rel="stylesheet" type="text/css" href="leaflet/MarkerCluster.Default.css">
<link rel="stylesheet" type="text/css" href="leaflet/leaflet.draw.css">
<link rel="stylesheet" type="text/css" href="leaflet/leaflet.measurecontrol.css">
<link rel="stylesheet" type="text/css" href="leaflet/leaflet-ruler.css">
<link rel="stylesheet" type="text/css" href="leaflet/easy-button.css">
<link rel="stylesheet" type="text/css" href="leaflet/leaflet.fullscreen.css">
<link rel="stylesheet" type="text/css" href="leaflet/Leaflet.Dialog.css">
<link rel="stylesheet" type="text/css" href="leaflet/leaflet-velocity.min.css">
<link rel="stylesheet" type="text/css" href="leaflet/leaflet.label.css">
<link rel="stylesheet" type="text/css" href="leaflet/Leaflet.Coordinates.css">
<link rel="shortcut icon" type="image/ico" href="favicon.ico"/>
<link rel="stylesheet" type="text/css" href="leaflet/dialog-polyfill.css"/>
<script src="leaflet/sockjs.min.js"></script>
<script src="leaflet/leaflet.js"></script>
<script src="leaflet/leaflet-vector-markers.min.js"></script>
<script src="leaflet/leaflet.boatmarker.js"></script>
<script src="leaflet/leaflet.markercluster.js"></script>
<script src="leaflet/leaflet.markercluster.freezable-src.js"></script>
<script src="leaflet/leaflet.markercluster.freezable.js"></script>
<script src="leaflet/leaflet.active-layers.min.js"></script>
<script src="leaflet/leaflet.select-layers.min.js"></script>
<script src="leaflet/leaflet.draw.js"></script>
<script src="leaflet/leaflet.measurecontrol.js"></script>
<script src="leaflet/leaflet-ruler.js"></script>
<script src="leaflet/easy-button.js"></script>
<script src="leaflet/Leaflet.fullscreen.min.js"></script>
<script src="leaflet/Leaflet.Dialog.js"></script>
@ -63,12 +62,12 @@
<script src="leaflet/leaflet-side-by-side.js"></script>
<script src="leaflet/OSMBuildings-Leaflet.js"></script>
<script src="leaflet/leaflet-omnivore.min.js"></script>
<script src="leaflet/leaflet.label.js"></script>
<script src="leaflet/Leaflet.Coordinates.js"></script>
<script src="leaflet/leaflet.latlng-graticule.js"></script>
<script src="leaflet/dialog-polyfill.js"></script>
<link rel="shortcut icon" type="image/ico" href="favicon.ico"/>
<script src="images/emoji.js"></script>
<link rel="stylesheet" type="text/css" href="leaflet/dialog-polyfill.css"/>
</head>
<body onunload="if (ws) ws.close();">
@ -183,7 +182,6 @@ var connect = function() {
if (Array.isArray(data)) {
//console.log("ARRAY");
// map.closePopup();
// popped = false;
// var bnds= L.latLngBounds([0,0]);
for (var prop in data) {
if (data[prop].command) { doCommand(data[prop].command); delete data[prop].command; }
@ -243,7 +241,11 @@ if (showUserMenu) {
// Create the Initial Map object.
map = new L.map('map').setView(startpos, startzoom);
// Create some buttons
var menuButton = L.easyButton({states:[{icon:'fa-bars fa-lg', onClick:function() { toggleMenu(); }, title:'Toggle menu'}], position:"topright"});
var fullscreenButton = L.control.fullscreen();
var rulerButton = L.control.ruler({position:"topleft"});
//var colorPickButton = L.easyButton({states:[{icon:'fa-tint fa-lg', onClick:function() { console.log("PICK"); }, title:'Pick Colour'}]});
var redButton = L.easyButton('fa-square wm-red', function(btn) { console.log("RED",btn); })
var blueButton = L.easyButton('fa-square wm-blue', function(btn) { console.log("BLUE",btn); })
@ -256,30 +258,24 @@ var colorControl = L.easyBar([redButton,blueButton,greenButton,yellowButton,blac
if (window.self !== window.top) {
console.log("IN an iframe");
inIframe = true;
(document.getElementById("topbar").style.display="none");
(document.getElementById("map").style.top="0px");
(document.getElementById("results").style.right="50px");
(document.getElementById("results").style.top="10px");
(document.getElementById("results").style.zIndex="1");
(document.getElementById("results").style.height="31px");
(document.getElementById("results").style.paddingTop="6px");
(document.getElementById("bars").style.display="none");
(document.getElementById("menu").style.right="8px");
(document.getElementById("menu").style.borderRadius="6px");
if (showUserMenu) { menuButton.addTo(map); }
document.getElementById("topbar").style.display="none";
document.getElementById("map").style.top="0px";
document.getElementById("results").style.right="50px";
document.getElementById("results").style.top="10px";
document.getElementById("results").style.zIndex="1";
document.getElementById("results").style.height="31px";
document.getElementById("results").style.paddingTop="6px";
document.getElementById("bars").style.display="none";
document.getElementById("menu").style.right="8px";
document.getElementById("menu").style.borderRadius="6px";
}
else {
console.log("NOT in an iframe");
// window.onbeforeunload = function(e) {
// return 'Reloading will delete all the local markers, including any drawing on the "drawing" layer';
// };
if (!showUserMenu) {
document.getElementById("bars").style.display="none";
}
}
if (!showUserMenu) { document.getElementById("bars").style.display="none"; }
if (!inIframe) {
// Add the fullscreen button
L.control.fullscreen().addTo(map);
fullscreenButton.addTo(map);
// Add the locate my position button
L.easyButton( 'fa-crosshairs fa-lg', function() {
@ -303,7 +299,7 @@ if (!inIframe) {
map.on('locationerror', onLocationError);
// Add the measure/ruler button
L.Control.measureControl().addTo(map);
rulerButton.addTo(map);
// Create the clear heatmap button
var clrHeat = L.easyButton( '<b>Reset Heatmap</b>', function() {
@ -311,8 +307,20 @@ if (!inIframe) {
heat.setLatLngs([]);
}, "Clears the current heatmap", "bottomright");
}
else { if (showUserMenu) { menuButton.addTo(map); } }
// Add graticule
var showGrid = false;
var Lgrid = L.latlngGraticule({
font: "Verdana",
fontColor: "#666",
zoomInterval: [
{start:1, end:2, interval:40},
{start:3, end:3, interval:20},
{start:4, end:4, interval:10},
{start:5, end:7, interval:5},
{start:8, end:20, interval:1}
]
});
// Handle the dialog for help box
var dialog = document.querySelector('dialog');
@ -526,13 +534,19 @@ document.getElementById("menu").style.display = 'none';
//}
//document.getElementById("heat").style.display = 'none';
var popped = false;
var popmark = null;
map.on('popupopen', function(e) {
popped = true;
popmark = e.popup._source;
popid = e.popup.dname;
});
// var popped = false;
// var popmark = null;
// map.on('popupopen', function(e) {
// popped = true;
// popmark = e.popup._source;
// popid = e.popup.dname;
// });
// map.on('popupopen', function(e) {
// console.log("OPEN",e);
// });
// map.on('popupclose', function(e) {
// console.log("CLOSE",e);
// });
map.on('overlayadd', function(e) {
if (typeof overlays[e.name].bringToFront === "function") {
@ -552,10 +566,8 @@ map.on('overlayadd', function(e) {
}
if (e.name == "drawing") {
overlays["drawing"].bringToFront();
// And the actual draw controls
map.addControl(drawControl);
// Add the color change buttons
//colorControl.addTo(map);
//map.addControl(colorControl);
}
ws.send(JSON.stringify({action:"addlayer", name:e.name}));
});
@ -627,7 +639,7 @@ var hiderightclick = false;
var addThing = function() {
var thing = document.getElementById('rinput').value;
map.closePopup();
popped = false;
//popped = false;
var bits = thing.split(",");
var icon = (bits[1] || "circle").trim();
var lay = (bits[2] || "_drawing").trim();
@ -817,28 +829,50 @@ overlays["day/night"] = layers["_daynight"];
// Add the drawing layer for fun...
layers["_drawing"] = new L.FeatureGroup();
overlays["drawing"] = layers["_drawing"];
map.options.drawControlTooltips = false;
var drawCount = 0;
var drawControl = new L.Control.Draw({
draw: {
polyline: { shapeOptions: { clickable:false } },
polyline: { shapeOptions: { clickable:true } },
marker: false,
circle: false,
// circle: { shapeOptions: { clickable:false } },
//circle: false,
circle: { shapeOptions: { clickable:false } },
circlemarker: false,
rectangle: { shapeOptions: { clickable:true } },
polygon: { shapeOptions: { clickable:true } },
polygon: { shapeOptions: { clickable:true } }
},
edit: {
featureGroup: layers["_drawing"],
remove: true,
edit: false
}
// {
// featureGroup: layers["_drawing"],
// remove: true,
// edit: true
// }
});
map.on('draw:created', function (e) {
var type = e.layerType;
var layer = e.layer;
//console.log(type, layer._latlngs);
//console.log(JSON.stringify(layer.toGeoJSON()));
ws.send(JSON.stringify({action:"draw", type:type, points:layer._latlngs}));
layers["_drawing"].addLayer(layer);
var name = e.layerType + drawCount;
drawCount = drawCount + 1;
var rightmenuMarker = L.popup({offset:[0,-12]}).setContent("<b>"+name+"</b><br/><button onclick='editPoly(\""+name+"\",true);'>Edit</button><button onclick='delMarker(\""+name+"\",true);'>Delete</button>");
e.layer.on('contextmenu', function(e) {
L.DomEvent.stopPropagation(e);
rightmenuMarker.setLatLng(e.latlng);
map.openPopup(rightmenuMarker);
});
var la, lo;
if (e.layer.hasOwnProperty("_latlng")) {
la = e.layer._latlng.lat;
lo = e.layer._latlng.lng;
}
var m = {action:"draw", name:name, layer:"_drawing", options:e.layer.options, radius:e.layer._mRadius, lat:la, lon:lo};
if (e.layer.hasOwnProperty("_latlngs")) {
if (e.layer.options.fill === false) { m.line = e.layer._latlngs; }
else { m.area = e.layer._latlngs[0]; }
}
ws.send(JSON.stringify(m));
polygons[name] = e.layer;
polygons[name].lay = "_drawing";
layers["_drawing"].addLayer(e.layer);
});
// Add the heatmap layer
@ -932,11 +966,64 @@ var delMarker = function(dname,note) {
}
delete allData[dname];
if (note) { ws.send(JSON.stringify({action:"delete", name:dname, deleted:true})); }
//map.closePopup();
}
var editPoly = function(pname) {
map.closePopup();
editFeatureGroup = L.featureGroup();
editToolbar = new L.EditToolbar({ featureGroup:editFeatureGroup });
editHandler = editToolbar.getModeHandlers()[0].handler;
editHandler._map = map;
polygons[pname].on("dblclick", function(e) {
editHandler.disable();
editFeatureGroup.removeLayer(polygons[pname]);
polygons[pname].off("dblclick");
L.DomEvent.stopPropagation(e);
var la, lo;
if (e.target.hasOwnProperty("_latlng")) {
la = e.target._latlng.lat;
lo = e.target._latlng.lng;
}
var m = {action:"draw", name:pname, layer:polygons[pname].lay, options:e.target.options, radius:e.target._mRadius, lat:la, lon:lo};
if (e.target.hasOwnProperty("_latlngs")) {
if (e.target.options.fill === false) { m.line = e.target._latlngs; }
else { m.area = e.target._latlngs[0]; }
}
ws.send(JSON.stringify(m));
})
editFeatureGroup.addLayer(polygons[pname]);
editHandler.enable();
}
// the MAIN add something to map function
function setMarker(data) {
var rightmenu = function(m) {
// customise right click context menu
var rightcontext = "";
if (polygons[data.name] == undefined) {
rightcontext = "<button id='delbutton' onclick='delMarker(\""+data.name+"\",true);'>Delete</button>";
}
else if (data.editable) {
rightcontext = "<button onclick='editPoly(\""+data.name+"\",true);'>Edit</button><button onclick='delMarker(\""+data.name+"\",true);'>Delete</button>";
}
if ((data.contextmenu !== undefined) && (typeof data.contextmenu === "string")) {
rightcontext = data.contextmenu.replace(/\$name/g,data.name);
delete data.contextmenu;
}
if (rightcontext.length > 0) {
var rightmenuMarker = L.popup({offset:[0,-12]}).setContent("<b>"+data.name+"</b><br/>"+rightcontext);
if (hiderightclick !== true) {
m.on('contextmenu', function(e) {
L.DomEvent.stopPropagation(e);
rightmenuMarker.setLatLng(e.latlng);
map.openPopup(rightmenuMarker);
});
}
}
return m;
}
//console.log("DATA" typeof data, data);
if (data.deleted) { // remove markers we are told to
delMarker(data.name);
@ -1017,45 +1104,44 @@ function setMarker(data) {
if (!data.hasOwnProperty("weight")) { opt.weight = 3; } //Standard settings different for lines
if (!data.hasOwnProperty("opacity")) { opt.opacity = 0.8; }
var polyln = L.polyline(data.line, opt);
if (opt.clickable) { polyln.bindPopup(data.name); }
polygons[data.name] = polyln;
polygons[data.name].lay = lay;
layers[lay].addLayer(polygons[data.name]);
}
else if (data.hasOwnProperty("area") && Array.isArray(data.area)) {
var polyarea = L.polygon(data.area, opt);
if (opt.clickable) { polyarea.bindPopup(data.name); }
var polyarea;
if (data.area.length === 2) { polyarea = L.rectangle(data.area, opt); }
else { polyarea = L.polygon(data.area, opt); }
polygons[data.name] = polyarea;
polygons[data.name].lay = lay;
layers[lay].addLayer(polygons[data.name]);
}
else if (data.hasOwnProperty("sdlat") && data.hasOwnProperty("sdlon")) {
if (!data.hasOwnProperty("iconColor")) { opt.color = "blue"; } //different standard Color Settings
if (!data.hasOwnProperty("fillColor")) { opt.fillColor = "blue"; }
delete opt.clickable;
var ellipse = L.ellipse(new L.LatLng((data.lat*1), (data.lon*1)), [200000*data.sdlon*Math.cos(data.lat*Math.PI/180), 200000*data.sdlat], 0, opt);
if (data.clickable != false) {
ellipse.on('click', function(e) {
var popup = L.popup()
.setLatLng(new L.LatLng((data.lat*1), (data.lon*1)))
.setContent('<p><b>'+data.name+'</b><br/>lat : '+data.lat+'<br/>lon : '+data.lon+'</p>')
.openOn(map);
});
}
polygons[data.name] = ellipse;
polygons[data.name].lay = lay;
layers[lay].addLayer(ellipse);
}
else if (data.hasOwnProperty("radius")) {
if (data.hasOwnProperty("lat") && data.hasOwnProperty("lon")) {
var polycirc;
if (Array.isArray(data.radius)) {
polycirc = L.ellipse(new L.LatLng((data.lat*1), (data.lon*1)), [data.radius[0]*Math.cos(data.lat*Math.PI/180), data.radius[1]], data.tilt || 0, opt);
}
else {
if (data.hasOwnProperty("radius")) {
if (data.hasOwnProperty("lat") && data.hasOwnProperty("lon")) {
var polycirc = L.circle(new L.LatLng((data.lat*1), (data.lon*1)), data.radius*1, opt);
if (opt.clickable) { polycirc.bindPopup(data.name); }
polycirc = L.circle(new L.LatLng((data.lat*1), (data.lon*1)), data.radius*1, opt);
}
polygons[data.name] = polycirc;
}
}
if (polygons[data.name] !== undefined) {
polygons[data.name].lay = lay;
layers[lay].addLayer(polycirc);
if (opt.clickable) {
var words = "<b>"+data.name+"</b>";
if (data.popup) { var words = words + "<br/>" + data.popup; }
polygons[data.name].bindPopup(words, {autoClose:false, closeButton:true, closeOnClick:false, minWidth:200});
}
polygons[data.name] = rightmenu(polygons[data.name]);
layers[lay].addLayer(polygons[data.name]);
}
else {
if (typeof data.coordinates == "object") { ll = new L.LatLng(data.coordinates[1],data.coordinates[0]); }
else if (data.hasOwnProperty("position") && data.position.hasOwnProperty("lat") && data.position.hasOwnProperty("lon")) {
data.lat = data.position.lat*1;
@ -1079,10 +1165,12 @@ function setMarker(data) {
var marker, myMarker;
var icon, q;
var words="";
var labelOffset = [20,-8];
var labelOffset = [12,0];
var drag = false;
if (data.draggable === true) { drag = true; }
//console.log("ICON",data.icon);
if (data.hasOwnProperty("icon")) {
if (data.icon === "ship") {
marker = L.boatMarker(ll, {
title: data.name,
@ -1108,6 +1196,20 @@ function setMarker(data) {
//q = 'https://www.bing.com/images/search?q='+data.icon+'%20'+encodeURIComponent(data.name);
//words += '<a href=\''+q+'\' target="_thingpic">Pictures</a><br>';
}
else if (data.icon === "helicopter") {
data.iconColor = data.iconColor || "black";
if (data.hasOwnProperty("squawk")) { data.iconColor = "red"; }
icon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="314" height="314" viewBox="0 0 314.5 314.5">';
icon += '<path d="M268.8 3c-3.1-3.1-8.3-2.9-11.7 0.5L204.9 55.7C198.5 23.3 180.8 0 159.9 0c-21.9 0-40.3 25.5-45.7 60.2L57.4 3.5c-3.4-3.4-8.6-3.6-11.7-0.5 -3.1 3.1-2.9 8.4 0.5 11.7l66.3 66.3c0 0.2 0 0.4 0 0.6 0 20.9 4.6 39.9 12.1 54.4l-78.4 78.4c-3.4 3.4-3.6 8.6-0.5 11.7 3.1 3.1 8.3 2.9 11.7-0.5l76.1-76.1c3.2 3.7 6.7 6.7 10.4 8.9v105.8l-47.7 32.2v18l50.2-22.3h26.9l50.2 22.3v-18L175.8 264.2v-105.8c2.7-1.7 5.4-3.8 7.8-6.2l73.4 73.4c3.4 3.4 8.6 3.6 11.7 0.5 3.1-3.1 2.9-8.3-0.5-11.7l-74.9-74.9c8.6-14.8 14-35.2 14-57.8 0-1.9-0.1-3.8-0.2-5.8l61.2-61.2C271.7 11.3 271.9 6.1 268.8 3z" fill="'+data.iconColor+'"/></svg>';
var svgheli = "data:image/svg+xml;base64," + btoa(icon);
var dir = parseFloat(data.hdg || data.bearing || "0");
myMarker = L.divIcon({
className:"heliicon",
iconAnchor: [16, 16],
html:'<img src="'+svgheli+'" style="width:32px; height:32px; -webkit-transform:rotate('+dir+'deg); -moz-transform:rotate('+dir+'deg);"/>'
});
marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
}
else if (data.icon === "uav") {
data.iconColor = data.iconColor || "black";
if (data.hasOwnProperty("squawk")) { data.iconColor = "red"; }
@ -1210,7 +1312,7 @@ function setMarker(data) {
html:'<img src="'+svglocate+'" style="width:32px; height:32px;"/>',
});
marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
labelOffset = [20,-12];
labelOffset = [12,-4];
}
else if (data.icon === "friend") {
marker = L.marker(ll, { icon: L.divIcon({ className: 'circle f', iconSize: [20, 12] }), title: data.name, draggable:drag });
@ -1230,22 +1332,7 @@ function setMarker(data) {
else if (data.icon === "earthquake") {
marker = L.marker(ll, { icon: L.divIcon({ className: 'circle e', iconSize: [data.mag*5, data.mag*5] }), title: data.name, draggable:drag });
}
else if (data.hasOwnProperty("SIDC")) {
// "SIDC":"SFGPU------E***","name":"1.C2 komp","fullname":"1.C2 komp/FTS/INSS"
myMarker = new ms.Symbol( data.SIDC.toUpperCase(), { uniqueDesignation:data.name });
// Now that we have a symbol we can ask for the echelon and set the symbol size
var opts = data.options || {};
opts.size = opts.size || iconSz[myMarker.getProperties().echelon] || 30;
opts.size = opts.size * (opts.scale || 1);
myMarker = myMarker.setOptions(opts);
var myicon = L.icon({
iconUrl: myMarker.toDataURL(),
iconAnchor: [myMarker.getAnchor().x, myMarker.getAnchor().y],
className: "natoicon",
});
marker = L.marker(ll, { title:data.name, icon:myicon, draggable:drag });
}
else if (data.icon && (data.icon.match(/^:.*:$/g))) {
else if (data.icon.match(/^:.*:$/g)) {
var em = emojify(data.icon);
var col = data.iconColor || "#910000";
myMarker = L.divIcon({
@ -1254,9 +1341,9 @@ function setMarker(data) {
iconSize: [32, 32]
});
marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
labelOffset = [20,-12];
labelOffset = [12,-4];
}
else if (data.icon && (data.icon.match(/^https?:.*$/))) {
else if (data.icon.match(/^https?:.*$/)) {
myMarker = L.icon({
iconUrl: data.icon,
iconSize: [32, 32],
@ -1264,9 +1351,9 @@ function setMarker(data) {
popupAnchor: [0, -16]
});
marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
labelOffset = [20,-12];
labelOffset = [12,-4];
}
else if (data.icon && (data.icon.substr(0,3) === "fa-")) {
else if (data.icon.substr(0,3) === "fa-") {
var col = data.iconColor || "#910000";
var imod = "";
if (data.icon.indexOf(" ") === -1) { imod = "fa-2x "; }
@ -1277,9 +1364,9 @@ function setMarker(data) {
popupAnchor: [0, -16]
});
marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
labelOffset = [16,-16];
labelOffset = [8,-8];
}
else if (data.icon && (data.icon.substr(0,3) === "wi-")) {
else if (data.icon.substr(0,3) === "wi-") {
var col = data.iconColor || "#910000";
var imod = "";
if (data.icon.indexOf(" ") === -1) { imod = "wi-2x "; }
@ -1300,7 +1387,23 @@ function setMarker(data) {
iconColor: 'white'
});
marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
labelOffset = [14,-16];
labelOffset = [6,-6];
}
}
if (data.hasOwnProperty("SIDC")) {
// "SIDC":"SFGPU------E***","name":"1.C2 komp","fullname":"1.C2 komp/FTS/INSS"
myMarker = new ms.Symbol( data.SIDC.toUpperCase(), { uniqueDesignation:data.name });
// Now that we have a symbol we can ask for the echelon and set the symbol size
var opts = data.options || {};
opts.size = opts.size || iconSz[myMarker.getProperties().echelon] || 30;
opts.size = opts.size * (opts.scale || 1);
myMarker = myMarker.setOptions(opts);
var myicon = L.icon({
iconUrl: myMarker.toDataURL(),
iconAnchor: [myMarker.getAnchor().x, myMarker.getAnchor().y],
className: "natoicon",
});
marker = L.marker(ll, { title:data.name, icon:myicon, draggable:drag });
}
marker.name = data.name;
@ -1322,7 +1425,6 @@ function setMarker(data) {
// remove icon from list of properties, then add all others to popup
if (data.hasOwnProperty("SIDC") && data.hasOwnProperty("options")) { delete data.options; }
if (data.hasOwnProperty("icon") || (!data.hasOwnProperty("radius"))) {
if (data.hasOwnProperty("icon")) { delete data.icon; }
if (data.hasOwnProperty("iconColor")) { delete data.iconColor; }
if (data.hasOwnProperty("photourl")) {
@ -1355,26 +1457,23 @@ function setMarker(data) {
}
delete data.weblink;
}
var p;
if (data.hasOwnProperty("popped") && (data.popped === true)) {
popped = true;
popid = data.name;
p = true;
delete data.popped;
}
if (data.hasOwnProperty("popped") && (data.popped === false)) {
if (popid == data.name) {
if (popmark) { popmark.closePopup(); }
popped = false;
}
marker.closePopup();
p = false;
delete data.popped;
}
// If .label then use that rather than name tooltip
if (data.label) {
if (typeof data.label === "boolean" && data.label === true) {
marker.bindLabel(data.name, { noHide:true, offset:labelOffset });
marker.bindTooltip(data.name, { permanent:true, direction:"right", offset:labelOffset });
}
else if (typeof data.label === "string" && data.label.length > 0) {
marker.bindLabel(data.label, { noHide:true, offset:labelOffset });
marker.bindTooltip(data.label, { permanent:true, direction:"right", offset:labelOffset });
}
delete marker.options.title;
delete data.label;
@ -1382,17 +1481,13 @@ function setMarker(data) {
// otherwise check for .tooltip then use that rather than name tooltip
else if (data.tooltip) {
if (typeof data.tooltip === "string" && data.tooltip.length > 0) {
marker.bindLabel(data.tooltip, { direction:"left", offset:[22,-16] });
marker.bindTooltip(data.tooltip, { direction:"bottom", offset:[0,4] });
delete marker.options.title;
delete data.tooltip;
}
}
// customise right click context menu
var rightcontext = "<button id='delbutton' onclick='delMarker(\""+data.name+"\",true);'>Delete</button>";
if ((data.contextmenu !== undefined) && (typeof data.contextmenu === "string")) {
rightcontext = data.contextmenu.replace(/\$name/g,data.name);
delete data.contextmenu;
}
marker = rightmenu(marker);
// Add any remaining properties to the info box
var llc = data.lineColor;
@ -1417,23 +1512,11 @@ function setMarker(data) {
}
if (data.popup) { words = data.popup; }
else { words = words + marker.getLatLng().toString().replace('LatLng(','lat, lon : ').replace(')',''); }
words = "<b>"+data.name+"</b><button style=\"border-radius:4px; float:right; background-color:lightgrey;\" onclick='popped=false;popmark.closePopup();'>X</button><br/>" + words;
marker.bindPopup(words, {closeButton:false, closeOnClick:false, keepInView:true, minWidth:250});
words = "<b>"+data.name+"</b><br/>" + words; //"<button style=\"border-radius:4px; float:right; background-color:lightgrey;\" onclick='popped=false;popmark.closePopup();'>X</button><br/>" + words;
marker.bindPopup(words, {autoClose:false, closeButton:true, closeOnClick:false, minWidth:200});
marker._popup.dname = data.name;
marker.lay = lay; // and the layer it is on
if (rightcontext.length === 0) {
marker.on('contextmenu', function() { return; });
}
else {
var rightmenuMarker = L.popup({offset:[0,-12]}).setContent("<b>"+data.name+"</b><br/>"+rightcontext);
marker.on('contextmenu', function(e) {
if (hiderightclick !== true) {
rightmenuMarker.setLatLng(e.latlng);
map.openPopup(rightmenuMarker);
}
});
}
marker.on('click', function(e) {
ws.send(JSON.stringify({action:"click",name:marker.name,layer:marker.lay,icon:marker.icon,iconColor:marker.iconColor,SIDC:marker.SIDC,draggable:true,lat:parseFloat(marker.getLatLng().lat.toFixed(6)),lon:parseFloat(marker.getLatLng().lng.toFixed(6))}));
});
@ -1442,7 +1525,9 @@ function setMarker(data) {
}
markers[data.name] = marker;
layers[lay].addLayer(marker);
}
if ((data.hdg != null) && (data.bearing == null)) { data.bearing = data.hdg; delete data.hdg; }
if (data.bearing != null) { // if there is a heading
if (data.speed != null) { data.length = parseFloat(data.speed || "0") * 50; } // and a speed
@ -1480,23 +1565,8 @@ function setMarker(data) {
layers[lay].addLayer(polygon);
}
}
if (panit) {
if (popped === true) {
map.setView(ll,map.getZoom());
}
else { map.setView(ll,map.getZoom()); }
}
if (popped === true) {
if (popid == data.name) {
if (popmark) {
popmark.closePopup();
setTimeout(function() { marker.openPopup(); },100);
}
marker.openPopup();
}
else { popmark.openPopup(); }
popped = true;
}
if (panit) { map.setView(ll,map.getZoom()); }
if (p === true) { marker.openPopup(); }
}
}
@ -1544,6 +1614,25 @@ function doCommand(cmd) {
layercontrol = L.control.layers(basemaps, overlays).addTo(map);
}
}
if (cmd.hasOwnProperty("grid")) {
if (cmd.grid.hasOwnProperty("showgrid")) {
var changed = false;
if ((cmd.grid.showgrid == "true" || cmd.grid.showgrid == true ) && !showGrid) { changed = true; }
if ((cmd.grid.showgrid == "false" || cmd.grid.showgrid == false ) && showGrid) { changed = true; }
if (changed) {
showGrid = !showGrid;
if (showGrid) { Lgrid.addTo(map); }
else { Lgrid.removeFrom(map); }
}
}
if (cmd.grid.hasOwnProperty("opt")) {
Lgrid.initialize(cmd.grid.opt);
if (showGrid) {
Lgrid.removeFrom(map);
Lgrid.addTo(map);
}
}
}
if (cmd.hasOwnProperty("button")) {
if (cmd.button.icon) {
if (!buttons[cmd.button.name]) {
@ -1603,7 +1692,6 @@ function doCommand(cmd) {
layercontrol.addBaseLayer(basemaps[cmd.map.name],cmd.map.name);
}
}
// Remove one or more map layers (base or overlay)
if (cmd.map && cmd.map.hasOwnProperty("delete")) {
if (!Array.isArray(cmd.map.delete)) { cmd.map.delete = [cmd.map.delete]; }
@ -1612,11 +1700,10 @@ function doCommand(cmd) {
if (overlays.hasOwnProperty(cmd.map.delete[a])) { delete overlays[cmd.map.delete[a]]; }
}
if (showLayerMenu) {
layercontrol.removeFrom(map);
map.removeControl(layercontrol);
layercontrol = L.control.layers(basemaps, overlays).addTo(map);
}
}
// Add a new geojson overlay layer
if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("geojson") ) {
if (overlays.hasOwnProperty(cmd.map.overlay)) {
@ -1700,7 +1787,6 @@ function doCommand(cmd) {
map.addLayer(overlays[cmd.map.overlay]);
if (cmd.map.hasOwnProperty("fit")) { map.fitBounds(overlays[cmd.map.overlay].getBounds()); }
}
var custIco = function() {
var customLayer = L.geoJson();
if (cmd.map.hasOwnProperty("icon")) {
@ -1718,7 +1804,6 @@ function doCommand(cmd) {
}
return customLayer;
}
// Add a new KML overlay layer
if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("kml") ) {
if (overlays.hasOwnProperty(cmd.map.overlay)) {
@ -1830,7 +1915,7 @@ function doCommand(cmd) {
if (cmd.side && basemaps.hasOwnProperty(cmd.side)) {
if (sidebyside) { sidebyside.remove(); map.removeLayer(basemaps[sidebyside.lay]); }
basemaps[cmd.side].addTo(map);
sidebyside = L.Control.sideBySide(basemaps[baselayername], basemaps[cmd.side]);
sidebyside = L.control.sideBySide(basemaps[baselayername], basemaps[cmd.side]);
sidebyside.addTo(map);
sidebyside.lay = cmd.side;
}
@ -1853,7 +1938,7 @@ function doCommand(cmd) {
}
}
}
// Lock the pan so map can be moved
if (cmd.hasOwnProperty("panlock")) {
if (cmd.panlock == "true" || cmd.panlock == true) { lockit = true; }
else { lockit = false; doLock(false); }

View File

@ -5,8 +5,6 @@
text-align: left;
border-radius: 4px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
display: flex;
flex-direction: column;
}
.leaflet-control-dialog .leaflet-control-dialog-inner {
@ -15,7 +13,7 @@
float: left;
width: 100%;
height: 100%;
padding: 16px 0px;
padding: 20px 0px;
}
.leaflet-control-dialog
@ -70,7 +68,7 @@
width: 100%;
height: 100%;
margin: 0px;
padding: 0 14px;
padding: 0 20px;
min-height: 50px;
overflow: auto;
box-sizing: border-box;

View File

@ -1,22 +1,24 @@
L.Control.Dialog = L.Control.extend({
options: {
size: [ 200, 160 ],
minSize: [ 200, 100 ],
maxSize: [ 400, 800 ],
anchor: [ 44, -165 ],
position: "topright",
size: [ 300, 300 ],
minSize: [ 100, 100 ],
maxSize: [ 350, 350 ],
anchor: [ 250, 250 ],
position: "topleft",
initOpen: true
},
initialize: function(options) {
this.options = JSON.parse(JSON.stringify(this.options));
L.setOptions(this, options);
this._attributions = {};
},
onAdd: function(map) {
this._initLayout();
this._map = map;
this.update();
if (!this.options.initOpen) {
@ -176,17 +178,14 @@ L.Control.Dialog = L.Control.extend({
},
_initLayout: function() {
var className = "leaflet-control-dialog";
var container = (this._container = L.DomUtil.create("div", className));
var className = "leaflet-control-dialog",
container = (this._container = L.DomUtil.create("div", className));
container.style.width = this.options.size[0] + "px";
//container.style.height = this.options.size[1] + "px";
container.style.height = this.options.size[1] + "px";
container.style.top = this.options.anchor[0] + "px";
// container.style.left = this.options.anchor[1] + "px";
container.style.right = "0px";
// container.style.display = "flex";
// container.style["flex-direction"] = "column";
container.style.left = this.options.anchor[1] + "px";
var stop = L.DomEvent.stopPropagation;
L.DomEvent.on(container, "click", stop)
@ -361,11 +360,10 @@ L.Control.Dialog = L.Control.extend({
_updateLayout: function() {
this._container.style.width = this.options.size[0] + "px";
//this._container.style.height = this.options.size[1] + "px";
this._container.style.height = this.options.size[1] + "px";
this._container.style.top = this.options.anchor[0] + "px";
//this._container.style.left = this.options.anchor[1] + "px";
this._container.style.right = "0px";
this._container.style.left = this.options.anchor[1] + "px";
}
});

View File

@ -1 +1 @@
L.Control.Fullscreen=L.Control.extend({options:{position:"topleft",title:{"false":"View Fullscreen","true":"Exit Fullscreen"}},onAdd:function(map){var container=L.DomUtil.create("div","leaflet-control-fullscreen leaflet-bar leaflet-control");this.link=L.DomUtil.create("a","leaflet-control-fullscreen-button leaflet-bar-part",container);this.link.href="#";this._map=map;this._map.on("fullscreenchange",this._toggleTitle,this);this._toggleTitle();L.DomEvent.on(this.link,"click",this._click,this);return container},_click:function(e){L.DomEvent.stopPropagation(e);L.DomEvent.preventDefault(e);this._map.toggleFullscreen(this.options)},_toggleTitle:function(){this.link.title=this.options.title[this._map.isFullscreen()]}});L.Map.include({isFullscreen:function(){return this._isFullscreen||false},toggleFullscreen:function(options){var container=this.getContainer();if(this.isFullscreen()){if(options&&options.pseudoFullscreen){this._disablePseudoFullscreen(container)}else if(document.exitFullscreen){document.exitFullscreen()}else if(document.mozCancelFullScreen){document.mozCancelFullScreen()}else if(document.webkitCancelFullScreen){document.webkitCancelFullScreen()}else if(document.msExitFullscreen){document.msExitFullscreen()}else{this._disablePseudoFullscreen(container)}}else{if(options&&options.pseudoFullscreen){this._enablePseudoFullscreen(container)}else if(container.requestFullscreen){container.requestFullscreen()}else if(container.mozRequestFullScreen){container.mozRequestFullScreen()}else if(container.webkitRequestFullscreen){container.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT)}else if(container.msRequestFullscreen){container.msRequestFullscreen()}else{this._enablePseudoFullscreen(container)}}},_enablePseudoFullscreen:function(container){L.DomUtil.addClass(container,"leaflet-pseudo-fullscreen");this._setFullscreen(true);this.invalidateSize();this.fire("fullscreenchange")},_disablePseudoFullscreen:function(container){L.DomUtil.removeClass(container,"leaflet-pseudo-fullscreen");this._setFullscreen(false);this.invalidateSize();this.fire("fullscreenchange")},_setFullscreen:function(fullscreen){this._isFullscreen=fullscreen;var container=this.getContainer();if(fullscreen){L.DomUtil.addClass(container,"leaflet-fullscreen-on")}else{L.DomUtil.removeClass(container,"leaflet-fullscreen-on")}},_onFullscreenChange:function(e){var fullscreenElement=document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement;if(fullscreenElement===this.getContainer()&&!this._isFullscreen){this._setFullscreen(true);this.fire("fullscreenchange")}else if(fullscreenElement!==this.getContainer()&&this._isFullscreen){this._setFullscreen(false);this.fire("fullscreenchange")}}});L.Map.mergeOptions({fullscreenControl:false});L.Map.addInitHook(function(){if(this.options.fullscreenControl){this.fullscreenControl=new L.Control.Fullscreen(this.options.fullscreenControl);this.addControl(this.fullscreenControl)}var fullscreenchange;if("onfullscreenchange"in document){fullscreenchange="fullscreenchange"}else if("onmozfullscreenchange"in document){fullscreenchange="mozfullscreenchange"}else if("onwebkitfullscreenchange"in document){fullscreenchange="webkitfullscreenchange"}else if("onmsfullscreenchange"in document){fullscreenchange="MSFullscreenChange"}if(fullscreenchange){var onFullscreenChange=L.bind(this._onFullscreenChange,this);this.whenReady(function(){L.DomEvent.on(document,fullscreenchange,onFullscreenChange)});this.on("unload",function(){L.DomEvent.off(document,fullscreenchange,onFullscreenChange)})}});L.control.fullscreen=function(options){return new L.Control.Fullscreen(options)};
(function(factory){var L;if(typeof define==="function"&&define.amd){define(["leaflet"],factory)}else if(typeof module!=="undefined"){L=require("leaflet");module.exports=factory(L)}else{if(typeof window.L==="undefined"){throw new Error("Leaflet must be loaded first")}factory(window.L)}})(function(L){L.Control.Fullscreen=L.Control.extend({options:{position:"topleft",title:{"false":"View Fullscreen","true":"Exit Fullscreen"}},onAdd:function(map){var container=L.DomUtil.create("div","leaflet-control-fullscreen leaflet-bar leaflet-control");this.link=L.DomUtil.create("a","leaflet-control-fullscreen-button leaflet-bar-part",container);this.link.href="#";this._map=map;this._map.on("fullscreenchange",this._toggleTitle,this);this._toggleTitle();L.DomEvent.on(this.link,"click",this._click,this);return container},_click:function(e){L.DomEvent.stopPropagation(e);L.DomEvent.preventDefault(e);this._map.toggleFullscreen(this.options)},_toggleTitle:function(){this.link.title=this.options.title[this._map.isFullscreen()]}});L.Map.include({isFullscreen:function(){return this._isFullscreen||false},toggleFullscreen:function(options){var container=this.getContainer();if(this.isFullscreen()){if(options&&options.pseudoFullscreen){this._disablePseudoFullscreen(container)}else if(document.exitFullscreen){document.exitFullscreen()}else if(document.mozCancelFullScreen){document.mozCancelFullScreen()}else if(document.webkitCancelFullScreen){document.webkitCancelFullScreen()}else if(document.msExitFullscreen){document.msExitFullscreen()}else{this._disablePseudoFullscreen(container)}}else{if(options&&options.pseudoFullscreen){this._enablePseudoFullscreen(container)}else if(container.requestFullscreen){container.requestFullscreen()}else if(container.mozRequestFullScreen){container.mozRequestFullScreen()}else if(container.webkitRequestFullscreen){container.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT)}else if(container.msRequestFullscreen){container.msRequestFullscreen()}else{this._enablePseudoFullscreen(container)}}},_enablePseudoFullscreen:function(container){L.DomUtil.addClass(container,"leaflet-pseudo-fullscreen");this._setFullscreen(true);this.fire("fullscreenchange")},_disablePseudoFullscreen:function(container){L.DomUtil.removeClass(container,"leaflet-pseudo-fullscreen");this._setFullscreen(false);this.fire("fullscreenchange")},_setFullscreen:function(fullscreen){this._isFullscreen=fullscreen;var container=this.getContainer();if(fullscreen){L.DomUtil.addClass(container,"leaflet-fullscreen-on")}else{L.DomUtil.removeClass(container,"leaflet-fullscreen-on")}this.invalidateSize()},_onFullscreenChange:function(e){var fullscreenElement=document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement;if(fullscreenElement===this.getContainer()&&!this._isFullscreen){this._setFullscreen(true);this.fire("fullscreenchange")}else if(fullscreenElement!==this.getContainer()&&this._isFullscreen){this._setFullscreen(false);this.fire("fullscreenchange")}}});L.Map.mergeOptions({fullscreenControl:false});L.Map.addInitHook(function(){if(this.options.fullscreenControl){this.fullscreenControl=new L.Control.Fullscreen(this.options.fullscreenControl);this.addControl(this.fullscreenControl)}var fullscreenchange;if("onfullscreenchange"in document){fullscreenchange="fullscreenchange"}else if("onmozfullscreenchange"in document){fullscreenchange="mozfullscreenchange"}else if("onwebkitfullscreenchange"in document){fullscreenchange="webkitfullscreenchange"}else if("onmsfullscreenchange"in document){fullscreenchange="MSFullscreenChange"}if(fullscreenchange){var onFullscreenChange=L.bind(this._onFullscreenChange,this);this.whenReady(function(){L.DomEvent.on(document,fullscreenchange,onFullscreenChange)});this.on("unload",function(){L.DomEvent.off(document,fullscreenchange,onFullscreenChange)})}});L.control.fullscreen=function(options){return new L.Control.Fullscreen(options)}});

View File

@ -4,45 +4,50 @@
L.TileLayer.Grayscale = L.TileLayer.extend({
options: {
enableCanvas: true
quotaRed: 21,
quotaGreen: 71,
quotaBlue: 8,
quotaDividerTune: 0,
quotaDivider: function() {
return this.quotaRed + this.quotaGreen + this.quotaBlue + this.quotaDividerTune;
}
},
initialize: function (url, options) {
var canvasEl = document.createElement('canvas');
if( !(canvasEl.getContext && canvasEl.getContext('2d')) ) {
options.enableCanvas = false;
}
options = options || {}
options.crossOrigin = true;
L.TileLayer.prototype.initialize.call(this, url, options);
this.on('tileload', function(e) {
this._makeGrayscale(e.tile);
});
},
_loadTile: function (tile, tilePoint) {
tile.setAttribute('crossorigin', 'anonymous');
L.TileLayer.prototype._loadTile.call(this, tile, tilePoint);
_createTile: function () {
var tile = L.TileLayer.prototype._createTile.call(this);
tile.crossOrigin = "Anonymous";
return tile;
},
_tileOnLoad: function () {
if (this._layer.options.enableCanvas && !this.canvasContext) {
_makeGrayscale: function (img) {
if (img.getAttribute('data-grayscaled'))
return;
img.crossOrigin = '';
var canvas = document.createElement("canvas");
canvas.width = canvas.height = this._layer.options.tileSize;
this.canvasContext = canvas.getContext("2d");
}
var ctx = this.canvasContext;
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
if (ctx) {
this.onload = null; // to prevent an infinite loop
ctx.drawImage(this, 0, 0);
var imgd = ctx.getImageData(0, 0, this._layer.options.tileSize, this._layer.options.tileSize);
var imgd = ctx.getImageData(0, 0, canvas.width, canvas.height);
var pix = imgd.data;
for (var i = 0, n = pix.length; i < n; i += 4) {
pix[i] = pix[i + 1] = pix[i + 2] = (3 * pix[i] + 4 * pix[i + 1] + pix[i + 2]) / 8;
pix[i] = pix[i + 1] = pix[i + 2] = (this.options.quotaRed * pix[i] + this.options.quotaGreen * pix[i + 1] + this.options.quotaBlue * pix[i + 2]) / this.options.quotaDivider();
}
ctx.putImageData(imgd, 0, 0);
this.removeAttribute("crossorigin");
this.src = ctx.canvas.toDataURL();
}
L.TileLayer.prototype._tileOnLoad.call(this);
img.setAttribute('data-grayscaled', true);
img.src = canvas.toDataURL();
}
});

View File

@ -3,8 +3,9 @@
background-color: #fff;
border: none;
border-bottom: 1px solid #ccc;
min-width: 26px;
min-height: 26px;
width: 26px;
height: 26px;
line-height: 26px;
display: block;
text-align: center;
text-decoration: none;
@ -47,6 +48,7 @@
position: relative;
}
.leaflet-touch .leaflet-bar button {
width: 30px;
height: 30px;

View File

@ -169,10 +169,8 @@ L.Control.EasyButton = L.Control.extend({
this.button = L.DomUtil.create(this.options.tagName, '');
// the next three if statements should be collapsed into the options
// when it's time for breaking changes.
if (this.tagName === 'button') {
this.button.type = 'button';
if (this.options.tagName === 'button') {
this.button.setAttribute('type', 'button');
}
if (this.options.id ){
@ -186,12 +184,13 @@ L.Control.EasyButton = L.Control.extend({
// don't let double clicks and mousedown get to the map
L.DomEvent.addListener(this.button, 'dblclick', L.DomEvent.stop);
L.DomEvent.addListener(this.button, 'mousedown', L.DomEvent.stop);
L.DomEvent.addListener(this.button, 'mouseup', L.DomEvent.stop);
// take care of normal clicks
L.DomEvent.addListener(this.button,'click', function(e){
L.DomEvent.stop(e);
this._currentState.onClick(this, this._map ? this._map : null );
this._map.getContainer().focus();
this._map && this._map.getContainer().focus();
}, this);
// prep the contents of the control
@ -219,6 +218,11 @@ L.Control.EasyButton = L.Control.extend({
state: function(newState){
// when called with no args, it's a getter
if (arguments.length === 0) {
return this._currentState.stateName;
}
// activate by name
if(typeof newState == 'string'){
@ -279,8 +283,6 @@ L.Control.EasyButton = L.Control.extend({
}
},
enable: function(){
L.DomUtil.addClass(this.button, 'enabled');
L.DomUtil.removeClass(this.button, 'disabled');
@ -288,8 +290,6 @@ L.Control.EasyButton = L.Control.extend({
return this;
},
disable: function(){
L.DomUtil.addClass(this.button, 'disabled');
L.DomUtil.removeClass(this.button, 'enabled');
@ -297,24 +297,21 @@ L.Control.EasyButton = L.Control.extend({
return this;
},
removeFrom: function (map) {
this._container.parentNode.removeChild(this._container);
this._map = null;
return this;
},
onAdd: function(){
var containerObj = L.easyBar([this], {
onAdd: function(map){
var bar = L.easyBar([this], {
position: this.options.position,
leafletClasses: this.options.leafletClasses
});
this._container = containerObj.container;
return this._container;
}
this._anonymousBar = bar;
this._container = bar.container;
return this._anonymousBar.container;
},
removeFrom: function (map) {
if (this._map === map)
this.remove();
return this;
},
});

View File

@ -1,93 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="13"
height="13"
id="svg2"
version="1.1"
inkscape:version="0.48.3.1 r9886"
sodipodi:docname="draw-measure.svg"
inkscape:export-filename="/tmp/draw-measure.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="43.663174"
inkscape:cx="3.4182411"
inkscape:cy="6.8035094"
inkscape:document-units="px"
inkscape:current-layer="g3789"
showgrid="false"
inkscape:window-width="1680"
inkscape:window-height="1026"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-1039.3622)">
<g
id="g3789">
<g
id="g3796"
transform="matrix(0.97836577,-0.20688263,0.20688263,0.97836577,-216.07864,24.814971)">
<rect
style="fill:#ffffff;fill-opacity:0;stroke:#000000;stroke-width:1;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:0.78431373;stroke-dasharray:none;stroke-dashoffset:0"
id="rect2985"
width="10"
height="4"
x="1.5993246"
y="1043.0298" />
<path
style="fill:none;stroke:#000000;stroke-width:0.99999976px;stroke-linecap:square;stroke-linejoin:miter;stroke-opacity:0.78431373"
d="m 3.5993245,1044.0298 0,0.5"
id="path3755"
inkscape:connector-curvature="0" />
<path
style="fill:none;stroke:#000000;stroke-width:0.99999976px;stroke-linecap:square;stroke-linejoin:miter;stroke-opacity:0.78431373"
d="m 5.5993244,1044.0298 0,0.5"
id="path3755-7"
inkscape:connector-curvature="0" />
<path
style="fill:none;stroke:#000000;stroke-width:0.99999976px;stroke-linecap:square;stroke-linejoin:miter;stroke-opacity:0.78431373"
d="m 7.5993244,1044.0298 0,0.5"
id="path3755-5"
inkscape:connector-curvature="0" />
<path
style="fill:none;stroke:#000000;stroke-width:0.99999976px;stroke-linecap:square;stroke-linejoin:miter;stroke-opacity:0.78431373"
d="m 9.5993244,1044.0298 0,0.5"
id="path3755-3"
inkscape:connector-curvature="0" />
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 3.2 KiB

View File

@ -1 +1 @@
L.Ellipse=L.Path.extend({initialize:function(d,c,a,b){L.Path.prototype.initialize.call(this,b);this._latlng=L.latLng(d);if(a){this._tiltDeg=a}else{this._tiltDeg=0}if(c){this._mRadiusX=c[0];this._mRadiusY=c[1]}},options:{fill:true,startAngle:0,endAngle:359.9},setLatLng:function(a){this._latlng=L.latLng(a);return this.redraw()},setRadius:function(a){this._mRadiusX=a[0];this._mRadiusY=a[1];return this.redraw()},setTilt:function(a){this._tiltDeg=a;return this.redraw()},projectLatlngs:function(){var e=this._getLngRadius(),c=this._getLatRadius(),d=this._latlng,a=this._map.latLngToLayerPoint([d.lat,d.lng-e]),b=this._map.latLngToLayerPoint([d.lat-c,d.lng]);this._point=this._map.latLngToLayerPoint(d);this._radiusX=Math.max(this._point.x-a.x,1);this._radiusY=Math.max(b.y-this._point.y,1);this._endPointParams=this._centerPointToEndPoint()},getBounds:function(){var c=this._getLngRadius(),a=this._getLatRadius(),b=this._latlng;return new L.LatLngBounds([b.lat-a,b.lng-c],[b.lat+a,b.lng+c])},getLatLng:function(){return this._latlng},getPathString:function(){var f=this._point,e=this._radiusX,d=this._radiusY,b=this._tiltDeg,a=this._endPointParams;if(this._checkIfEmpty()){return""}if(L.Browser.svg){return"M"+a.x0+","+a.y0+"A"+e+","+d+","+b+","+a.largeArc+","+a.sweep+","+a.x1+","+a.y1+" z"}else{f._round();e=Math.round(e);d=Math.round(d);return"AL "+f.x+","+f.y+" "+e+","+d+" "+b+","+(65535*360)}},getRadius:function(){return new L.point(this._mRadiusX,this._mRadiusY)},_centerPointToEndPoint:function(){var j=this._point,e=this._radiusX,a=this._radiusY,g=(this.options.startAngle+this.options.endAngle)*L.LatLng.DEG_TO_RAD,h=this.options.startAngle*L.LatLng.DEG_TO_RAD,m=this.options.endAngle,i=this._tiltDeg*L.LatLng.DEG_TO_RAD;var f=j.x+Math.cos(i)*e*Math.cos(h)+Math.sin(-i)*a*Math.sin(h);var l=j.y+Math.sin(i)*e*Math.cos(h)+Math.cos(i)*a*Math.sin(h);var d=j.x+Math.cos(i)*e*Math.cos(g)+Math.sin(-i)*a*Math.sin(g);var k=j.y+Math.sin(i)*e*Math.cos(g)+Math.cos(i)*a*Math.sin(g);var b=(m>180)?1:0;var n=(m>0)?1:0;return{x0:f,y0:l,tilt:i,largeArc:b,sweep:n,x1:d,y1:k}},_getLatRadius:function(){return(this._mRadiusY/40075017)*360},_getLngRadius:function(){return((this._mRadiusX/40075017)*360)/Math.cos(L.LatLng.DEG_TO_RAD*this._latlng.lat)},_checkIfEmpty:function(){if(!this._map){return false}var a=this._map._pathViewport,b=this._radiusX,c=this._point;return c.x-b>a.max.x||c.y-b>a.max.y||c.x+b<a.min.x||c.y+b<a.min.y}});L.ellipse=function(d,c,a,b){return new L.Ellipse(d,c,a,b)};
L.SVG.include({_updateEllipse:function(a){var c=(a._point,a._radiusX),d=a._radiusY,e=a._tiltDeg,f=a._endPointParams,g="M"+f.x0+","+f.y0+"A"+c+","+d+","+e+","+f.largeArc+","+f.sweep+","+f.x1+","+f.y1+" z";this._setPath(a,g)}}),L.Canvas.include({_updateEllipse:function(a){if(!a._empty()){var b=a._point,c=this._ctx,d=a._radiusX,e=(a._radiusY||d)/d;this._drawnLayers[a._leaflet_id]=a,c.save(),c.translate(b.x,b.y),0!==a._tilt&&c.rotate(a._tilt),1!==e&&c.scale(1,e),c.beginPath(),c.arc(0,0,d,0,2*Math.PI),c.restore(),this._fillStroke(c,a)}}}),L.Ellipse=L.Path.extend({options:{fill:!0,startAngle:0,endAngle:359.9},initialize:function(a,b,c,d){L.setOptions(this,d),this._latlng=L.latLng(a),c?this._tiltDeg=c:this._tiltDeg=0,b&&(this._mRadiusX=b[0],this._mRadiusY=b[1])},setRadius:function(a){return this._mRadiusX=a[0],this._mRadiusY=a[1],this.redraw()},getRadius:function(){return new L.point(this._mRadiusX,this._mRadiusY)},setTilt:function(a){return this._tiltDeg=a,this.redraw()},getBounds:function(){var a=this._getLngRadius(),b=this._getLatRadius(),c=this._latlng;return new L.LatLngBounds([c.lat-b,c.lng-a],[c.lat+b,c.lng+a])},setLatLng:function(a){return this._latlng=L.latLng(a),this.redraw(),this.fire("move",{latlng:this._latlng})},getLatLng:function(){return this._latlng},setStyle:L.Path.prototype.setStyle,_project:function(){var a=this._getLngRadius(),b=this._getLatRadius(),c=this._latlng,d=this._map.latLngToLayerPoint([c.lat,c.lng-a]),e=this._map.latLngToLayerPoint([c.lat-b,c.lng]);this._point=this._map.latLngToLayerPoint(c),this._radiusX=Math.max(this._point.x-d.x,1),this._radiusY=Math.max(e.y-this._point.y,1),this._tilt=Math.PI*this._tiltDeg/180,this._endPointParams=this._centerPointToEndPoint(),this._updateBounds()},_updateBounds:function(){var a=Math.sin(this._tilt),b=Math.cos(this._tilt),c=a*a,d=b*b,e=this._radiusX*this._radiusX,f=this._radiusY*this._radiusY,g=Math.sqrt(e*d+f*c),h=Math.sqrt(e*c+f*d),i=this._clickTolerance(),j=[g+i,h+i];this._pxBounds=new L.Bounds(this._point.subtract(j),this._point.add(j))},_update:function(){this._map&&this._updatePath()},_updatePath:function(){this._renderer._updateEllipse(this)},_getLatRadius:function(){return this._mRadiusY/40075017*360},_getLngRadius:function(){return this._mRadiusX/40075017*360/Math.cos(Math.PI/180*this._latlng.lat)},_centerPointToEndPoint:function(){var a=this._point,b=this._radiusX,c=this._radiusY,d=(this.options.startAngle+this.options.endAngle)*(Math.PI/180),e=this.options.startAngle*(Math.PI/180),f=this.options.endAngle,g=this._tiltDeg*(Math.PI/180),h=a.x+Math.cos(g)*b*Math.cos(e)+Math.sin(-g)*c*Math.sin(e),i=a.y+Math.sin(g)*b*Math.cos(e)+Math.cos(g)*c*Math.sin(e),j=a.x+Math.cos(g)*b*Math.cos(d)+Math.sin(-g)*c*Math.sin(d),k=a.y+Math.sin(g)*b*Math.cos(d)+Math.cos(g)*c*Math.sin(d),l=f>180?1:0,m=f>0?1:0;return{x0:h,y0:i,tilt:g,largeArc:l,sweep:m,x1:j,y1:k}},_empty:function(){return this._radiusX&&this._radiusY&&!this._renderer._bounds.intersects(this._pxBounds)},_containsPoint:function(a){var b=Math.sin(this._tilt),c=Math.cos(this._tilt),d=a.x-this._point.x,e=a.y-this._point.y,f=c*d+b*e,g=b*d-c*e;return f*f/(this._radiusX*this._radiusX)+g*g/(this._radiusY*this._radiusY)<=1}}),L.ellipse=function(a,b,c,d){return new L.Ellipse(a,b,c,d)};

View File

@ -3,9 +3,9 @@
simpleheat, a tiny JavaScript library for drawing heatmaps with Canvas
https://github.com/mourner/simpleheat
*/
!function(){"use strict";function t(i){return this instanceof t?(this._canvas=i="string"==typeof i?document.getElementById(i):i,this._ctx=i.getContext("2d"),this._width=i.width,this._height=i.height,this._max=1,void this.clear()):new t(i)}t.prototype={defaultRadius:25,defaultGradient:{.4:"blue",.6:"cyan",.7:"lime",.8:"yellow",1:"red"},data:function(t){return this._data=t,this},max:function(t){return this._max=t,this},add:function(t){return this._data.push(t),this},clear:function(){return this._data=[],this},radius:function(t,i){i=i||15;var a=this._circle=document.createElement("canvas"),e=a.getContext("2d"),s=this._r=t+i;return a.width=a.height=2*s,e.shadowOffsetX=e.shadowOffsetY=200,e.shadowBlur=i,e.shadowColor="black",e.beginPath(),e.arc(s-200,s-200,t,0,2*Math.PI,!0),e.closePath(),e.fill(),this},gradient:function(t){var i=document.createElement("canvas"),a=i.getContext("2d"),e=a.createLinearGradient(0,0,0,256);i.width=1,i.height=256;for(var s in t)e.addColorStop(s,t[s]);return a.fillStyle=e,a.fillRect(0,0,1,256),this._grad=a.getImageData(0,0,1,256).data,this},draw:function(t){this._circle||this.radius(this.defaultRadius),this._grad||this.gradient(this.defaultGradient);var i=this._ctx;i.clearRect(0,0,this._width,this._height);for(var a,e=0,s=this._data.length;s>e;e++)a=this._data[e],i.globalAlpha=Math.max(a[2]/this._max,t||.05),i.drawImage(this._circle,a[0]-this._r,a[1]-this._r);var n=i.getImageData(0,0,this._width,this._height);return this._colorize(n.data,this._grad),i.putImageData(n,0,0),this},_colorize:function(t,i){for(var a,e=3,s=t.length;s>e;e+=4)a=4*t[e],a&&(t[e-3]=i[a],t[e-2]=i[a+1],t[e-1]=i[a+2])}},window.simpleheat=t}(),/*
!function(){"use strict";function t(i){return this instanceof t?(this._canvas=i="string"==typeof i?document.getElementById(i):i,this._ctx=i.getContext("2d"),this._width=i.width,this._height=i.height,this._max=1,void this.clear()):new t(i)}t.prototype={defaultRadius:25,defaultGradient:{.4:"blue",.6:"cyan",.7:"lime",.8:"yellow",1:"red"},data:function(t,i){return this._data=t,this},max:function(t){return this._max=t,this},add:function(t){return this._data.push(t),this},clear:function(){return this._data=[],this},radius:function(t,i){i=i||15;var a=this._circle=document.createElement("canvas"),s=a.getContext("2d"),e=this._r=t+i;return a.width=a.height=2*e,s.shadowOffsetX=s.shadowOffsetY=200,s.shadowBlur=i,s.shadowColor="black",s.beginPath(),s.arc(e-200,e-200,t,0,2*Math.PI,!0),s.closePath(),s.fill(),this},gradient:function(t){var i=document.createElement("canvas"),a=i.getContext("2d"),s=a.createLinearGradient(0,0,0,256);i.width=1,i.height=256;for(var e in t)s.addColorStop(e,t[e]);return a.fillStyle=s,a.fillRect(0,0,1,256),this._grad=a.getImageData(0,0,1,256).data,this},draw:function(t){this._circle||this.radius(this.defaultRadius),this._grad||this.gradient(this.defaultGradient);var i=this._ctx;i.clearRect(0,0,this._width,this._height);for(var a,s=0,e=this._data.length;e>s;s++)a=this._data[s],i.globalAlpha=Math.max(a[2]/this._max,t||.05),i.drawImage(this._circle,a[0]-this._r,a[1]-this._r);var n=i.getImageData(0,0,this._width,this._height);return this._colorize(n.data,this._grad),i.putImageData(n,0,0),this},_colorize:function(t,i){for(var a,s=3,e=t.length;e>s;s+=4)a=4*t[s],a&&(t[s-3]=i[a],t[s-2]=i[a+1],t[s-1]=i[a+2])}},window.simpleheat=t}(),/*
(c) 2014, Vladimir Agafonkin
Leaflet.heat, a tiny and fast heatmap plugin for Leaflet.
https://github.com/Leaflet/Leaflet.heat
*/
L.HeatLayer=L.Class.extend({initialize:function(t,i){this._latlngs=t,L.setOptions(this,i)},setLatLngs:function(t){return this._latlngs=t,this.redraw()},addLatLng:function(t){return this._latlngs.push(t),this.redraw()},setOptions:function(t){return L.setOptions(this,t),this._heat&&this._updateOptions(),this.redraw()},redraw:function(){return this._heat&&!this._frame&&(this._frame=L.Util.requestAnimFrame(this._redraw,this)),this},onAdd:function(t){this._map=t,this._canvas||this._initCanvas(),t._panes.overlayPane.appendChild(this._canvas),t.on("moveend",this._reset,this),t.options.zoomAnimation&&L.Browser.any3d&&t.on("zoomanim",this._animateZoom,this),this._reset()},onRemove:function(t){t.getPanes().overlayPane.removeChild(this._canvas),t.off("moveend",this._reset,this),t.options.zoomAnimation&&t.off("zoomanim",this._animateZoom,this)},addTo:function(t){return t.addLayer(this),this},_initCanvas:function(){var t=this._canvas=L.DomUtil.create("canvas","leaflet-heatmap-layer"),i=this._map.getSize();t.width=i.x,t.height=i.y;var a=this._map.options.zoomAnimation&&L.Browser.any3d;L.DomUtil.addClass(t,"leaflet-zoom-"+(a?"animated":"hide")),this._heat=simpleheat(t),this._updateOptions()},_updateOptions:function(){this._heat.radius(this.options.radius||this._heat.defaultRadius,this.options.blur),this.options.gradient&&this._heat.gradient(this.options.gradient),this.options.max&&this._heat.max(this.options.max)},_reset:function(){var t=this._map.containerPointToLayerPoint([0,0]);L.DomUtil.setPosition(this._canvas,t);var i=this._map.getSize();this._heat._width!==i.x&&(this._canvas.width=this._heat._width=i.x),this._heat._height!==i.y&&(this._canvas.height=this._heat._height=i.y),this._redraw()},_redraw:function(){var t,i,a,e,s,n,h,o,r,d=[],_=this._heat._r,l=this._map.getSize(),m=new L.LatLngBounds(this._map.containerPointToLatLng(L.point([-_,-_])),this._map.containerPointToLatLng(l.add([_,_]))),c=void 0===this.options.maxZoom?this._map.getMaxZoom():this.options.maxZoom,u=1/Math.pow(2,Math.max(0,Math.min(c-this._map.getZoom(),12))),g=_/2,f=[],p=this._map._getMapPanePos(),v=p.x%g,w=p.y%g;for(t=0,i=this._latlngs.length;i>t;t++)m.contains(this._latlngs[t])&&(a=this._map.latLngToContainerPoint(this._latlngs[t]),s=Math.floor((a.x-v)/g)+2,n=Math.floor((a.y-w)/g)+2,r=(this._latlngs[t].alt||1)*u,f[n]=f[n]||[],e=f[n][s],e?(e[0]=(e[0]*e[2]+a.x*r)/(e[2]+r),e[1]=(e[1]*e[2]+a.y*r)/(e[2]+r),e[2]+=r):f[n][s]=[a.x,a.y,r]);for(t=0,i=f.length;i>t;t++)if(f[t])for(h=0,o=f[t].length;o>h;h++)e=f[t][h],e&&d.push([Math.round(e[0]),Math.round(e[1]),Math.min(e[2],1)]);this._heat.data(d).draw(),this._frame=null},_animateZoom:function(t){var i=this._map.getZoomScale(t.zoom),a=this._map._getCenterOffset(t.center)._multiplyBy(-i).subtract(this._map._getMapPanePos());this._canvas.style[L.DomUtil.TRANSFORM]=L.DomUtil.getTranslateString(a)+" scale("+i+")"}}),L.heatLayer=function(t,i){return new L.HeatLayer(t,i)};
L.HeatLayer=(L.Layer?L.Layer:L.Class).extend({initialize:function(t,i){this._latlngs=t,L.setOptions(this,i)},setLatLngs:function(t){return this._latlngs=t,this.redraw()},addLatLng:function(t){return this._latlngs.push(t),this.redraw()},setOptions:function(t){return L.setOptions(this,t),this._heat&&this._updateOptions(),this.redraw()},redraw:function(){return!this._heat||this._frame||this._map._animating||(this._frame=L.Util.requestAnimFrame(this._redraw,this)),this},onAdd:function(t){this._map=t,this._canvas||this._initCanvas(),t._panes.overlayPane.appendChild(this._canvas),t.on("moveend",this._reset,this),t.options.zoomAnimation&&L.Browser.any3d&&t.on("zoomanim",this._animateZoom,this),this._reset()},onRemove:function(t){t.getPanes().overlayPane.removeChild(this._canvas),t.off("moveend",this._reset,this),t.options.zoomAnimation&&t.off("zoomanim",this._animateZoom,this)},addTo:function(t){return t.addLayer(this),this},_initCanvas:function(){var t=this._canvas=L.DomUtil.create("canvas","leaflet-heatmap-layer leaflet-layer"),i=L.DomUtil.testProp(["transformOrigin","WebkitTransformOrigin","msTransformOrigin"]);t.style[i]="50% 50%";var a=this._map.getSize();t.width=a.x,t.height=a.y;var s=this._map.options.zoomAnimation&&L.Browser.any3d;L.DomUtil.addClass(t,"leaflet-zoom-"+(s?"animated":"hide")),this._heat=simpleheat(t),this._updateOptions()},_updateOptions:function(){this._heat.radius(this.options.radius||this._heat.defaultRadius,this.options.blur),this.options.gradient&&this._heat.gradient(this.options.gradient),this.options.max&&this._heat.max(this.options.max)},_reset:function(){var t=this._map.containerPointToLayerPoint([0,0]);L.DomUtil.setPosition(this._canvas,t);var i=this._map.getSize();this._heat._width!==i.x&&(this._canvas.width=this._heat._width=i.x),this._heat._height!==i.y&&(this._canvas.height=this._heat._height=i.y),this._redraw()},_redraw:function(){var t,i,a,s,e,n,h,o,r,d=[],_=this._heat._r,l=this._map.getSize(),m=new L.Bounds(L.point([-_,-_]),l.add([_,_])),c=void 0===this.options.max?1:this.options.max,u=void 0===this.options.maxZoom?this._map.getMaxZoom():this.options.maxZoom,f=1/Math.pow(2,Math.max(0,Math.min(u-this._map.getZoom(),12))),g=_/2,p=[],v=this._map._getMapPanePos(),w=v.x%g,y=v.y%g;for(t=0,i=this._latlngs.length;i>t;t++)if(a=this._map.latLngToContainerPoint(this._latlngs[t]),m.contains(a)){e=Math.floor((a.x-w)/g)+2,n=Math.floor((a.y-y)/g)+2;var x=void 0!==this._latlngs[t].alt?this._latlngs[t].alt:void 0!==this._latlngs[t][2]?+this._latlngs[t][2]:1;r=x*f,p[n]=p[n]||[],s=p[n][e],s?(s[0]=(s[0]*s[2]+a.x*r)/(s[2]+r),s[1]=(s[1]*s[2]+a.y*r)/(s[2]+r),s[2]+=r):p[n][e]=[a.x,a.y,r]}for(t=0,i=p.length;i>t;t++)if(p[t])for(h=0,o=p[t].length;o>h;h++)s=p[t][h],s&&d.push([Math.round(s[0]),Math.round(s[1]),Math.min(s[2],c)]);this._heat.data(d).draw(this.options.minOpacity),this._frame=null},_animateZoom:function(t){var i=this._map.getZoomScale(t.zoom),a=this._map._getCenterOffset(t.center)._multiplyBy(-i).subtract(this._map._getMapPanePos());L.DomUtil.setTransform?L.DomUtil.setTransform(this._canvas,a,i):this._canvas.style[L.DomUtil.TRANSFORM]=L.DomUtil.getTranslateString(a)+" scale("+i+")"}}),L.heatLayer=function(t,i){return new L.HeatLayer(t,i)};

View File

@ -0,0 +1,38 @@
.leaflet-ruler {
height: 30px;
width: 30px;
background-image: url("images/measure-control.png");
background-repeat: no-repeat;
background-position: center;
}
.leaflet-ruler-clicked {
height: 30px;
width: 30px;
background-repeat: no-repeat;
background-position: center;
background-image: url("images/measure-control.png");
border-color: #009100 !important;
}
.leaflet-bar {
background-color: #ffffff;
}
.leaflet-control {
cursor: pointer;
}
.result-tooltip {
background-color: white;
border-width: 2px;
border-color: #e14040;
font-size: smaller;
}
.moving-tooltip {
background-color: rgba(255, 255, 255, .7);
background-clip: padding-box;
opacity: 0.5;
border: dotted;
border-color: #e14040;
font-size: smaller;
}
.plus-length {
padding-left: 45px;
}

View File

@ -0,0 +1,172 @@
(function(factory, window){
"use strict";
if (typeof define === 'function' && define.amd) {
define(['leaflet'], factory);
} else if (typeof exports === 'object') {
module.exports = factory(require('leaflet'));
}
if (typeof window !== 'undefined' && window.L) {
window.L.Ruler = factory(L);
}
}(function (L) {
"use strict";
L.Control.Ruler = L.Control.extend({
options: {
position: 'topright',
circleMarker: {
color: 'red',
radius: 2
},
lineStyle: {
color: 'red',
dashArray: '1,6'
},
lengthUnit: {
display: 'km',
decimal: 2,
factor: null,
label: 'Distance:'
},
angleUnit: {
display: '&deg;',
decimal: 2,
factor: null,
label: 'Bearing:'
}
},
onAdd: function(map) {
this._map = map;
this._container = L.DomUtil.create('div', 'leaflet-bar');
this._container.classList.add('leaflet-ruler');
L.DomEvent.disableClickPropagation(this._container);
L.DomEvent.on(this._container, 'click', this._toggleMeasure, this);
this._choice = false;
this._defaultCursor = this._map._container.style.cursor;
this._allLayers = L.layerGroup();
return this._container;
},
onRemove: function() {
L.DomEvent.off(this._container, 'click', this._toggleMeasure, this);
},
_toggleMeasure: function() {
this._choice = !this._choice;
this._clickedLatLong = null;
this._clickedPoints = [];
this._totalLength = 0;
if (this._choice){
this._map.doubleClickZoom.disable();
L.DomEvent.on(this._map._container, 'keydown', this._escape, this);
L.DomEvent.on(this._map._container, 'dblclick', this._closePath, this);
this._container.classList.add("leaflet-ruler-clicked");
this._clickCount = 0;
this._tempLine = L.featureGroup().addTo(this._allLayers);
this._tempPoint = L.featureGroup().addTo(this._allLayers);
this._pointLayer = L.featureGroup().addTo(this._allLayers);
this._polylineLayer = L.featureGroup().addTo(this._allLayers);
this._allLayers.addTo(this._map);
this._map._container.style.cursor = 'crosshair';
this._map.on('click', this._clicked, this);
this._map.on('mousemove', this._moving, this);
}
else {
this._map.doubleClickZoom.enable();
L.DomEvent.off(this._map._container, 'keydown', this._escape, this);
L.DomEvent.off(this._map._container, 'dblclick', this._closePath, this);
this._container.classList.remove("leaflet-ruler-clicked");
this._map.removeLayer(this._allLayers);
this._allLayers = L.layerGroup();
this._map._container.style.cursor = this._defaultCursor;
this._map.off('click', this._clicked, this);
this._map.off('mousemove', this._moving, this);
}
},
_clicked: function(e) {
this._clickedLatLong = e.latlng;
this._clickedPoints.push(this._clickedLatLong);
L.circleMarker(this._clickedLatLong, this.options.circleMarker).addTo(this._pointLayer);
if(this._clickCount > 0 && !e.latlng.equals(this._clickedPoints[this._clickedPoints.length - 2])){
if (this._movingLatLong){
L.polyline([this._clickedPoints[this._clickCount-1], this._movingLatLong], this.options.lineStyle).addTo(this._polylineLayer);
}
var text;
this._totalLength += this._result.Distance;
if (this._clickCount > 1){
text = '<b>' + this.options.angleUnit.label + '</b>&nbsp;' + this._result.Bearing.toFixed(this.options.angleUnit.decimal) + '&nbsp;' + this.options.angleUnit.display + '<br><b>' + this.options.lengthUnit.label + '</b>&nbsp;' + this._totalLength.toFixed(this.options.lengthUnit.decimal) + '&nbsp;' + this.options.lengthUnit.display;
}
else {
text = '<b>' + this.options.angleUnit.label + '</b>&nbsp;' + this._result.Bearing.toFixed(this.options.angleUnit.decimal) + '&nbsp;' + this.options.angleUnit.display + '<br><b>' + this.options.lengthUnit.label + '</b>&nbsp;' + this._result.Distance.toFixed(this.options.lengthUnit.decimal) + '&nbsp;' + this.options.lengthUnit.display;
}
L.circleMarker(this._clickedLatLong, this.options.circleMarker).bindTooltip(text, {permanent: true, className: 'result-tooltip'}).addTo(this._pointLayer).openTooltip();
}
this._clickCount++;
},
_moving: function(e) {
if (this._clickedLatLong){
L.DomEvent.off(this._container, 'click', this._toggleMeasure, this);
this._movingLatLong = e.latlng;
if (this._tempLine){
this._map.removeLayer(this._tempLine);
this._map.removeLayer(this._tempPoint);
}
var text;
this._addedLength = 0;
this._tempLine = L.featureGroup();
this._tempPoint = L.featureGroup();
this._tempLine.addTo(this._map);
this._tempPoint.addTo(this._map);
this._calculateBearingAndDistance();
this._addedLength = this._result.Distance + this._totalLength;
L.polyline([this._clickedLatLong, this._movingLatLong], this.options.lineStyle).addTo(this._tempLine);
if (this._clickCount > 1){
text = '<b>' + this.options.angleUnit.label + '</b>&nbsp;' + this._result.Bearing.toFixed(this.options.angleUnit.decimal) + '&nbsp;' + this.options.angleUnit.display + '<br><b>' + this.options.lengthUnit.label + '</b>&nbsp;' + this._addedLength.toFixed(this.options.lengthUnit.decimal) + '&nbsp;' + this.options.lengthUnit.display + '<br><div class="plus-length">(+' + this._result.Distance.toFixed(this.options.lengthUnit.decimal) + ')</div>';
}
else {
text = '<b>' + this.options.angleUnit.label + '</b>&nbsp;' + this._result.Bearing.toFixed(this.options.angleUnit.decimal) + '&nbsp;' + this.options.angleUnit.display + '<br><b>' + this.options.lengthUnit.label + '</b>&nbsp;' + this._result.Distance.toFixed(this.options.lengthUnit.decimal) + '&nbsp;' + this.options.lengthUnit.display;
}
L.circleMarker(this._movingLatLong, this.options.circleMarker).bindTooltip(text, {sticky: true, offset: L.point(0, -40) ,className: 'moving-tooltip'}).addTo(this._tempPoint).openTooltip();
}
},
_escape: function(e) {
if (e.keyCode === 27){
if (this._clickCount > 0){
this._closePath();
}
else {
this._choice = true;
this._toggleMeasure();
}
}
},
_calculateBearingAndDistance: function() {
var f1 = this._clickedLatLong.lat, l1 = this._clickedLatLong.lng, f2 = this._movingLatLong.lat, l2 = this._movingLatLong.lng;
var toRadian = Math.PI / 180;
// haversine formula
// bearing
var y = Math.sin((l2-l1)*toRadian) * Math.cos(f2*toRadian);
var x = Math.cos(f1*toRadian)*Math.sin(f2*toRadian) - Math.sin(f1*toRadian)*Math.cos(f2*toRadian)*Math.cos((l2-l1)*toRadian);
var brng = Math.atan2(y, x)*((this.options.angleUnit.factor ? this.options.angleUnit.factor/2 : 180)/Math.PI);
brng += brng < 0 ? (this.options.angleUnit.factor ? this.options.angleUnit.factor : 360) : 0;
// distance
var R = this.options.lengthUnit.factor ? 6371 * this.options.lengthUnit.factor : 6371; // kilometres
var deltaF = (f2 - f1)*toRadian;
var deltaL = (l2 - l1)*toRadian;
var a = Math.sin(deltaF/2) * Math.sin(deltaF/2) + Math.cos(f1*toRadian) * Math.cos(f2*toRadian) * Math.sin(deltaL/2) * Math.sin(deltaL/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var distance = R * c;
this._result = {
Bearing: brng,
Distance: distance
};
},
_closePath: function() {
this._map.removeLayer(this._tempLine);
this._map.removeLayer(this._tempPoint);
this._choice = false;
L.DomEvent.on(this._container, 'click', this._toggleMeasure, this);
this._toggleMeasure();
}
});
L.control.ruler = function(options) {
return new L.Control.Ruler(options);
};
}, window));

View File

@ -1,10 +1,11 @@
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
(function (global){
var L = (typeof window !== "undefined" ? window['L'] : typeof global !== "undefined" ? global['L'] : null)
require('./layout.css')
require('./range.css')
var mapWasDragEnabled
var mapWasTapEnabled
// Leaflet v0.7 backwards compatibility
function on (el, types, fn, context) {
@ -26,30 +27,49 @@ function getRangeEvent (rangeInput) {
function cancelMapDrag () {
mapWasDragEnabled = this._map.dragging.enabled()
mapWasTapEnabled = this._map.tap && this._map.tap.enabled()
this._map.dragging.disable()
this._map.tap && this._map.tap.disable()
}
function uncancelMapDrag (e) {
if (!mapWasDragEnabled) return
this._refocusOnMap(e)
if (mapWasDragEnabled) {
this._map.dragging.enable()
}
function noop () {
return
if (mapWasTapEnabled) {
this._map.tap.enable()
}
}
// convert arg to an array - returns empty array if arg is undefined
function asArray (arg) {
return (arg === 'undefined') ? [] : Array.isArray(arg) ? arg : [arg]
}
function noop () {}
L.Control.SideBySide = L.Control.extend({
initialize: function (leftLayers, rightLayers) {
this._leftLayers = Array.isArray(leftLayers) ? leftLayers : [leftLayers]
this._rightLayers = Array.isArray(rightLayers) ? rightLayers : [rightLayers]
options: {
thumbSize: 42,
padding: 0
},
getPosition: noop,
initialize: function (leftLayers, rightLayers, options) {
this.setLeftLayers(leftLayers)
this.setRightLayers(rightLayers)
L.setOptions(this, options)
},
getPosition: function () {
var rangeValue = this._range.value
var offset = (0.5 - rangeValue) * (2 * this.options.padding + this.options.thumbSize)
return this._map.getSize().x * rangeValue + offset
},
setPosition: noop,
includes: L.Mixin.Events,
includes: L.Evented.prototype || L.Mixin.Events,
addTo: function (map) {
this.remove()
@ -64,17 +84,9 @@ L.Control.SideBySide = L.Control.extend({
range.max = 1
range.step = 'any'
range.value = 0.5
range.style.paddingLeft = range.style.paddingRight = this.options.padding + 'px'
this._addEvents()
this._updateLayers()
this._updateClip()
return this
},
remove: function () {
if (!this._map) { return this; }
this._removeEvents()
this._container.parentNode.removeChild(this._container)
this._map = null
return this
},
@ -83,14 +95,42 @@ L.Control.SideBySide = L.Control.extend({
this._updateClip();
},
remove: function () {
if (!this._map) {
return this
}
if (this._leftLayer) {
this._leftLayer.getContainer().style.clip = ''
}
if (this._rightLayer) {
this._rightLayer.getContainer().style.clip = ''
}
this._removeEvents()
L.DomUtil.remove(this._container)
this._map = null
return this
},
setLeftLayers: function (leftLayers) {
this._leftLayers = asArray(leftLayers)
this._updateLayers()
return this
},
setRightLayers: function (rightLayers) {
this._rightLayers = asArray(rightLayers)
this._updateLayers()
return this
},
_updateClip: function () {
var map = this._map
var rangeValue = this._range.value
var nw = map.containerPointToLayerPoint([0, 0])
var se = map.containerPointToLayerPoint(map.getSize())
var offset = (0.5 - rangeValue) * 44
var clipX = nw.x + (se.x - nw.x) * rangeValue + offset
var dividerX = map.getSize().x * rangeValue + offset
var clipX = nw.x + this.getPosition()
var dividerX = this.getPosition()
this._divider.style.left = dividerX + 'px'
this.fire('dividermove', {x: dividerX})
@ -105,6 +145,9 @@ L.Control.SideBySide = L.Control.extend({
},
_updateLayers: function () {
if (!this._map) {
return this
}
var prevLeft = this._leftLayer
var prevRight = this._rightLayer
this._leftLayer = this._rightLayer = null
@ -136,8 +179,8 @@ L.Control.SideBySide = L.Control.extend({
map.on('move', this._updateClip, this)
map.on('layeradd layerremove', this._updateLayers, this)
on(range, getRangeEvent(range), this._updateClip, this)
on(range, 'mousedown touchstart', cancelMapDrag, this)
on(range, 'mouseup touchend', uncancelMapDrag, this)
on(range, L.Browser.touch ? 'touchstart' : 'mousedown', cancelMapDrag, this)
on(range, L.Browser.touch ? 'touchend' : 'mouseup', uncancelMapDrag, this)
},
_removeEvents: function () {
@ -145,8 +188,8 @@ L.Control.SideBySide = L.Control.extend({
var map = this._map
if (range) {
off(range, getRangeEvent(range), this._updateClip, this)
off(range, 'mousedown touchstart', cancelMapDrag, this)
off(range, 'mouseup touchend', uncancelMapDrag, this)
off(range, L.Browser.touch ? 'touchstart' : 'mousedown', cancelMapDrag, this)
off(range, L.Browser.touch ? 'touchend' : 'mouseup', uncancelMapDrag, this)
}
if (map) {
map.off('layeradd layerremove', this._updateLayers, this)
@ -155,65 +198,78 @@ L.Control.SideBySide = L.Control.extend({
}
})
L.Control.sideBySide = function (leftLayers, rightLayers, options) {
L.control.sideBySide = function (leftLayers, rightLayers, options) {
return new L.Control.SideBySide(leftLayers, rightLayers, options)
}
module.export = L.Control.sideBySide
module.exports = L.Control.SideBySide
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"./layout.css":2,"./range.css":4}],2:[function(require,module,exports){
var css = ".leaflet-sbs-range {\n position: absolute;\n top: 50%;\n width: 100%;\n z-index: 999;\n}\n.leaflet-sbs-divider {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 50%;\n margin-left: -2px;\n width: 4px;\n background-color: #fff;\n pointer-events: none;\n z-index: 999;\n}\n"; (require("./node_modules/cssify"))(css, undefined, '/Users/gregor/Dev/DdDev/leaflet-side-by-side/layout.css'); module.exports = css;
var inject = require('./node_modules/cssify');
var css = ".leaflet-sbs-range {\r\n position: absolute;\r\n top: 50%;\r\n width: 100%;\r\n z-index: 999;\r\n}\r\n.leaflet-sbs-divider {\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n left: 50%;\r\n margin-left: -2px;\r\n width: 4px;\r\n background-color: #fff;\r\n pointer-events: none;\r\n z-index: 999;\r\n}\r\n";
inject(css, undefined, '_i6aomd');
module.exports = css;
},{"./node_modules/cssify":3}],3:[function(require,module,exports){
'use strict'
function injectStyleTag (document, fileName, cb) {
var style = document.getElementById(fileName);
var style = document.getElementById(fileName)
if (style) {
cb(style);
cb(style)
} else {
var head = document.getElementsByTagName('head')[0];
var head = document.getElementsByTagName('head')[0]
style = document.createElement('style');
style.id = fileName;
cb(style);
head.appendChild(style);
style = document.createElement('style')
if (fileName != null) style.id = fileName
cb(style)
head.appendChild(style)
}
return style;
return style
}
module.exports = function (css, customDocument, fileName) {
var doc = customDocument || document;
var doc = customDocument || document
/* istanbul ignore if: not supported by Electron */
if (doc.createStyleSheet) {
var sheet = doc.createStyleSheet()
sheet.cssText = css;
return sheet.ownerNode;
sheet.cssText = css
return sheet.ownerNode
} else {
return injectStyleTag(doc, fileName, function (style) {
/* istanbul ignore if: not supported by Electron */
if (style.styleSheet) {
style.styleSheet.cssText = css;
style.styleSheet.cssText = css
} else {
style.innerHTML = css;
style.innerHTML = css
}
})
}
});
}
};
module.exports.byUrl = function (url) {
/* istanbul ignore if: not supported by Electron */
if (document.createStyleSheet) {
return document.createStyleSheet(url).ownerNode;
return document.createStyleSheet(url).ownerNode
} else {
var head = document.getElementsByTagName('head')[0],
link = document.createElement('link');
var head = document.getElementsByTagName('head')[0]
var link = document.createElement('link')
link.rel = 'stylesheet';
link.href = url;
link.rel = 'stylesheet'
link.href = url
head.appendChild(link);
return link;
head.appendChild(link)
return link
}
}
};
},{}],4:[function(require,module,exports){
var css = ".leaflet-sbs-range {\n -webkit-appearance: none;\n display: inline-block!important;\n vertical-align: middle;\n height: 0;\n padding: 0;\n margin: 0;\n border: 0;\n background: rgba(0, 0, 0, 0.25);\n min-width: 100px;\n cursor: pointer;\n pointer-events: none;\n z-index: 999;\n}\n.leaflet-sbs-range::-ms-fill-upper {\n background: transparent;\n}\n.leaflet-sbs-range::-ms-fill-lower {\n background: rgba(255, 255, 255, 0.25);\n}\n/* Browser thingies */\n\n.leaflet-sbs-range::-moz-range-track {\n opacity: 0;\n}\n.leaflet-sbs-range::-ms-track {\n opacity: 0;\n}\n.leaflet-sbs-range::-ms-tooltip {\n display: none;\n}\n/* For whatever reason, these need to be defined\n * on their own so dont group them */\n\n.leaflet-sbs-range::-webkit-slider-thumb {\n -webkit-appearance: none;\n margin: 0;\n padding: 0;\n background: #fff;\n height: 40px;\n width: 40px;\n border-radius: 20px;\n cursor: ew-resize;\n pointer-events: auto;\n border: 1px solid #ddd;\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: 40px 40px;\n}\n.leaflet-sbs-range::-ms-thumb {\n margin: 0;\n padding: 0;\n background: #fff;\n height: 40px;\n width: 40px;\n border-radius: 20px;\n cursor: ew-resize;\n pointer-events: auto;\n border: 1px solid #ddd;\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: 40px 40px;\n}\n.leaflet-sbs-range::-moz-range-thumb {\n padding: 0;\n right: 0 ;\n background: #fff;\n height: 40px;\n width: 40px;\n border-radius: 20px;\n cursor: ew-resize;\n pointer-events: auto;\n border: 1px solid #ddd;\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: 40px 40px;\n}\n.leaflet-sbs-range:disabled::-moz-range-thumb {\n cursor: default;\n}\n.leaflet-sbs-range:disabled::-ms-thumb {\n cursor: default;\n}\n.leaflet-sbs-range:disabled::-webkit-slider-thumb {\n cursor: default;\n}\n.leaflet-sbs-range:disabled {\n cursor: default;\n}\n.leaflet-sbs-range:focus {\n outline: none!important;\n}\n.leaflet-sbs-range::-moz-focus-outer {\n border: 0;\n}\n\n"; (require("./node_modules/cssify"))(css, undefined, '/Users/gregor/Dev/DdDev/leaflet-side-by-side/range.css'); module.exports = css;
var inject = require('./node_modules/cssify');
var css = ".leaflet-sbs-range {\r\n -webkit-appearance: none;\r\n display: inline-block!important;\r\n vertical-align: middle;\r\n height: 0;\r\n padding: 0;\r\n margin: 0;\r\n border: 0;\r\n background: rgba(0, 0, 0, 0.25);\r\n min-width: 100px;\r\n cursor: pointer;\r\n pointer-events: none;\r\n z-index: 999;\r\n}\r\n.leaflet-sbs-range::-ms-fill-upper {\r\n background: transparent;\r\n}\r\n.leaflet-sbs-range::-ms-fill-lower {\r\n background: rgba(255, 255, 255, 0.25);\r\n}\r\n/* Browser thingies */\r\n\r\n.leaflet-sbs-range::-moz-range-track {\r\n opacity: 0;\r\n}\r\n.leaflet-sbs-range::-ms-track {\r\n opacity: 0;\r\n}\r\n.leaflet-sbs-range::-ms-tooltip {\r\n display: none;\r\n}\r\n/* For whatever reason, these need to be defined\r\n * on their own so dont group them */\r\n\r\n.leaflet-sbs-range::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n margin: 0;\r\n padding: 0;\r\n background: #fff;\r\n height: 40px;\r\n width: 40px;\r\n border-radius: 20px;\r\n cursor: ew-resize;\r\n pointer-events: auto;\r\n border: 1px solid #ddd;\r\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\r\n background-position: 50% 50%;\r\n background-repeat: no-repeat;\r\n background-size: 40px 40px;\r\n}\r\n.leaflet-sbs-range::-ms-thumb {\r\n margin: 0;\r\n padding: 0;\r\n background: #fff;\r\n height: 40px;\r\n width: 40px;\r\n border-radius: 20px;\r\n cursor: ew-resize;\r\n pointer-events: auto;\r\n border: 1px solid #ddd;\r\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\r\n background-position: 50% 50%;\r\n background-repeat: no-repeat;\r\n background-size: 40px 40px;\r\n}\r\n.leaflet-sbs-range::-moz-range-thumb {\r\n padding: 0;\r\n right: 0 ;\r\n background: #fff;\r\n height: 40px;\r\n width: 40px;\r\n border-radius: 20px;\r\n cursor: ew-resize;\r\n pointer-events: auto;\r\n border: 1px solid #ddd;\r\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\r\n background-position: 50% 50%;\r\n background-repeat: no-repeat;\r\n background-size: 40px 40px;\r\n}\r\n.leaflet-sbs-range:disabled::-moz-range-thumb {\r\n cursor: default;\r\n}\r\n.leaflet-sbs-range:disabled::-ms-thumb {\r\n cursor: default;\r\n}\r\n.leaflet-sbs-range:disabled::-webkit-slider-thumb {\r\n cursor: default;\r\n}\r\n.leaflet-sbs-range:disabled {\r\n cursor: default;\r\n}\r\n.leaflet-sbs-range:focus {\r\n outline: none!important;\r\n}\r\n.leaflet-sbs-range::-moz-focus-outer {\r\n border: 0;\r\n}\r\n\r\n";
inject(css, undefined, '_1tlt668');
module.exports = css;
},{"./node_modules/cssify":3}]},{},[1]);

View File

@ -1,230 +0,0 @@
.leaflet-control-slider {
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.4);
background: none repeat scroll 0% 0% #FFF;
border-radius: 5px;
}
a.leaflet-control-slider-toggle {
width: 36px;
height: 36px;
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
line-height: 36px !important;
font-weight: bolder;
text-align: center;
text-decoration: none;
color:#000;
font-size:1.3em;
}
.leaflet-control-slider p.leaflet-control-slider-value {
line-height: 26px;
display: block;
text-align: center;
text-decoration: none;
color: #000;
font-weight: bold;
font-size: 1.1em;
display:none;
}
.leaflet-control-slider.leaflet-control-slider-horizontal p.leaflet-control-slider-value {
line-height: 36px;
height: 36px;
margin: 0px 0px 0px 0px;
border-right: 1px solid #CCC;
width: 35px;
float :left;
clear:none;
}
.leaflet-control-slider.leaflet-control-slider-vertical p.leaflet-control-slider-value {
height: 25px;
line-height: 26px;
margin: 0px 0px 5px 0px;
border-bottom: 1px solid #CCC;
width: 36px;
}
.leaflet-control-slider input.leaflet-slider {
margin:0px;
}
.leaflet-control-slider input.leaflet-slider , .leaflet-control-slider .leaflet-slider-container {
display:none;
padding: 0px;
}
.leaflet-control-slider.leaflet-control-slider-horizontal .leaflet-slider-container {
float :right;
clear:none;
width: 90%;
height:36px;
}
.leaflet-control-slider.leaflet-control-slider-horizontal input.leaflet-slider {
height:36px;
}
.leaflet-control-slider.leaflet-control-slider-vertical input.leaflet-slider{
writing-mode: bt-lr;
width: 36px;
height:100%;
}
.leaflet-control-slider.leaflet-control-slider-expanded p.leaflet-control-slider-value {
display:block;
}
.leaflet-control-slider.leaflet-control-slider-expanded a.leaflet-control-slider-toggle {
display:none;
}
.leaflet-control-slider.leaflet-control-slider-expanded input.leaflet-slider, .leaflet-control-slider.leaflet-control-slider-expanded .leaflet-slider-container{
display:inherit;
}
.leaflet-control-slider.leaflet-control-slider-vertical .leaflet-slider-container {
width:36px;
-webkit-transform:rotate(180deg);
}
.leaflet-control-slider.leaflet-control-slider-vertical .leaflet-slider-container {
margin: 10px 0px;
}
.leaflet-control-slider.leaflet-control-slider-horizontal .leaflet-slider-container {
margin: 0px 10px;
}
.leaflet-control-slider.leaflet-control-slider-vertical.leaflet-control-slider-incdec .leaflet-slider-container {
margin: 0px 0px;
}
.leaflet-control-slider input[type=range] {
-webkit-appearance: none;
width: 100%;
}
.leaflet-control-slider input[type=range]:focus {
outline: none;
}
.leaflet-control-slider input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
cursor: pointer;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
background: #dddddd;
border-radius: 25px;
border: 0px solid rgba(0, 0, 0, 0);
}
.leaflet-control-slider input[type=range]::-webkit-slider-thumb {
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
border: 0px solid rgba(0, 0, 0, 0);
height: 16px;
width: 16px;
border-radius: 8px;
background: #a4a4a4;
cursor: pointer;
-webkit-appearance: none;
margin-top: -5.5px;
}
.leaflet-control-slider input[type=range]:focus::-webkit-slider-runnable-track {
background: #eaeaea;
}
.leaflet-control-slider input[type=range]::-moz-range-track {
width: 100%;
height: 5px;
cursor: pointer;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
background: #dddddd;
border-radius: 25px;
border: 0px solid rgba(0, 0, 0, 0);
}
.leaflet-control-slider input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
border: 0px solid rgba(0, 0, 0, 0);
height: 16px;
width: 16px;
border-radius: 8px;
background: #a4a4a4;
cursor: pointer;
}
.leaflet-control-slider input[type=range]::-ms-track {
width: 100%;
height: 5px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
.leaflet-control-slider input[type=range]::-ms-fill-lower {
background: #d0d0d0;
border: 0px solid rgba(0, 0, 0, 0);
border-radius: 50px;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}
.leaflet-control-slider input[type=range]::-ms-fill-upper {
background: #dddddd;
border: 0px solid rgba(0, 0, 0, 0);
border-radius: 50px;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}
.leaflet-control-slider input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
border: 0px solid rgba(0, 0, 0, 0);
height: 16px;
width: 16px;
border-radius: 8px;
background: #a4a4a4;
cursor: pointer;
height: 5px;
}
.leaflet-control-slider input[type=range]:focus::-ms-fill-lower {
background: #dddddd;
}
.leaflet-control-slider input[type=range]:focus::-ms-fill-upper {
background: #eaeaea;
}
.leaflet-control-slider.leaflet-control-slider-vertical input[type=range]::-moz-range-track {
height: 100%;
width: 5px;
}
/*increment/decrement*/
.leaflet-control-slider-plus, .leaflet-control-slider-minus{
width: 36px;
height: 36px;
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
line-height: 32px !important;
font-weight: bolder;
text-align: center;
vertical-align: middle;
text-decoration: none;
color:#000;
font-size:1.3em;
display:none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.leaflet-control-slider.leaflet-control-slider-expanded .leaflet-control-slider-plus, .leaflet-control-slider.leaflet-control-slider-expanded .leaflet-control-slider-minus{
display: block;
}
.leaflet-control-slider.leaflet-control-slider-horizontal .leaflet-control-slider-plus, .leaflet-control-slider.leaflet-control-slider-horizontal .leaflet-control-slider-minus{
float:right;
}
.leaflet-control-slider input[type=range]::-moz-focus-outer {
border: 0;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* webkit specific CSS */
.leaflet-control-slider.leaflet-control-slider-vertical input[type=range] {
-webkit-transform-origin: 18px 18px;
-webkit-transform:rotate(90deg);
height:36px;
}
}

View File

@ -1,150 +0,0 @@
L.Control.Slider = L.Control.extend({
update: function(value) {
return value;
},
options: {
size: '100px',
position: 'topright',
min: 0,
max: 250,
step: 1,
id: "slider",
value: 50,
collapsed: true,
title: 'Leaflet Slider',
logo: 'S',
orientation: 'horizontal',
increment: false,
getValue: function(value) {
return value;
},
showValue: true,
syncSlider: false
},
initialize: function (f, options) {
L.setOptions(this, options);
if (typeof f == "function") {
this.update = f;
} else {
this.update = function (value) {
console.log(value);
};
}
if (typeof this.options.getValue != "function") {
this.options.getValue = function (value) {
return value;
};
}
if (this.options.orientation!='vertical') {
this.options.orientation = 'horizontal';
}
},
onAdd: function (map) {
this._initLayout();
this.update(this.options.value+"");
return this._container;
},
_updateValue: function () {
this.value = this.slider.value;
if (this.options.showValue) {
this._sliderValue.innerHTML = this.options.getValue(this.value);
}
this.update(this.value);
},
_initLayout: function () {
var className = 'leaflet-control-slider';
this._container = L.DomUtil.create('div', className + ' ' +className + '-' + this.options.orientation);
this._sliderLink = L.DomUtil.create('a', className + '-toggle', this._container);
this._sliderLink.setAttribute("title", this.options.title);
this._sliderLink.innerHTML = this.options.logo;
if (this.options.showValue) {
this._sliderValue = L.DomUtil.create('p', className+'-value', this._container);
this._sliderValue.innerHTML = this.options.getValue(this.options.value);
}
if (this.options.increment) {
this._plus = L.DomUtil.create('a', className + '-plus', this._container);
this._plus.innerHTML = "+";
L.DomEvent.on(this._plus, 'click', this._increment, this);
L.DomUtil.addClass(this._container, 'leaflet-control-slider-incdec');
}
this._sliderContainer = L.DomUtil.create('div', 'leaflet-slider-container', this._container);
this.slider = L.DomUtil.create('input', 'leaflet-slider', this._sliderContainer);
if (this.options.orientation == 'vertical') {this.slider.setAttribute("orient", "vertical");}
this.slider.setAttribute("title", this.options.title);
this.slider.setAttribute("id", this.options.id);
this.slider.setAttribute("type", "range");
this.slider.setAttribute("min", this.options.min);
this.slider.setAttribute("max", this.options.max);
this.slider.setAttribute("step", this.options.step);
this.slider.setAttribute("value", this.options.value);
if (this.options.syncSlider) {
L.DomEvent.on(this.slider, "input", function (e) {
this._updateValue();
}, this);
} else {
L.DomEvent.on(this.slider, "change", function (e) {
this._updateValue();
}, this);
}
if (this.options.increment) {
this._minus = L.DomUtil.create('a', className + '-minus', this._container);
this._minus.innerHTML = "-";
L.DomEvent.on(this._minus, 'click', this._decrement, this);
}
if (this.options.showValue) {
if (window.matchMedia("screen and (-webkit-min-device-pixel-ratio:0)").matches && this.options.orientation =='vertical') {this.slider.style.width = (this.options.size.replace('px','') -36) +'px'; this._sliderContainer.style.height = (this.options.size.replace('px','') -36) +'px';}
else if (this.options.orientation =='vertical') {this._sliderContainer.style.height = (this.options.size.replace('px','') -36) +'px';}
else {this._sliderContainer.style.width = (this.options.size.replace('px','') -56) +'px';}
} else {
if (window.matchMedia("screen and (-webkit-min-device-pixel-ratio:0)").matches && this.options.orientation =='vertical') {this.slider.style.width = (this.options.size.replace('px','') -10) +'px'; this._sliderContainer.style.height = (this.options.size.replace('px','') -10) +'px';}
else if (this.options.orientation =='vertical') {this._sliderContainer.style.height = (this.options.size.replace('px','') -10) +'px';}
else {this._sliderContainer.style.width = (this.options.size.replace('px','') -25) +'px';}
}
L.DomEvent.disableClickPropagation(this._container);
if (this.options.collapsed) {
if (!L.Browser.android) {
L.DomEvent
.on(this._container, 'mouseenter', this._expand, this)
.on(this._container, 'mouseleave', this._collapse, this);
}
if (L.Browser.touch) {
L.DomEvent
.on(this._sliderLink, 'click', L.DomEvent.stop)
.on(this._sliderLink, 'click', this._expand, this);
} else {
L.DomEvent.on(this._sliderLink, 'focus', this._expand, this);
}
} else {
this._expand();
}
},
_expand: function () {
L.DomUtil.addClass(this._container, 'leaflet-control-slider-expanded');
},
_collapse: function () {
L.DomUtil.removeClass(this._container, 'leaflet-control-slider-expanded');
},
_increment: function () {
console.log(this.slider.value-this.slider.step + " " + this.slider.value+this.slider.step);
this.slider.value = this.slider.value*1+this.slider.step*1;
this._updateValue();
},
_decrement: function () {
console.log(this.slider.value-this.slider.step + " " + this.slider.value+this.slider.step);
this.slider.value = this.slider.value*1-this.slider.step*1;
this._updateValue();
}
});
L.control.slider = function (f, options) {
return new L.Control.Slider(f, options);
};

View File

@ -1 +1,5 @@
L.Control.ActiveLayers=L.Control.Layers.extend({getActiveBaseLayer:function(){return this._activeBaseLayer},getActiveOverlayLayers:function(){return this._activeOverlayLayers},onAdd:function(a){var b=L.Control.Layers.prototype.onAdd.call(this,a);return this._activeBaseLayer=this._findActiveBaseLayer(),this._activeOverlayLayers=this._findActiveOverlayLayers(),b},_findActiveBaseLayer:function(){var a=this._layers;for(var b in a)if(this._layers.hasOwnProperty(b)){var c=a[b];if(!c.overlay&&this._map.hasLayer(c.layer))return c}throw new Error("Control doesn't have any active base layer!")},_findActiveOverlayLayers:function(){var a={},b=this._layers;for(var c in b)if(this._layers.hasOwnProperty(c)){var d=b[c];d.overlay&&this._map.hasLayer(d.layer)&&(a[c]=d)}return a},_onLayerChange:function(){L.Control.Layers.prototype._onLayerChange.apply(this,arguments),this._recountLayers()},_onInputClick:function(){this._handlingClick=!0,this._recountLayers(),L.Control.Layers.prototype._onInputClick.call(this),this._handlingClick=!1},_recountLayers:function(){var a,b,c,d=this._form.getElementsByTagName("input"),e=d.length;for(a=0;e>a;a++)b=d[a],c=this._layers[b.layerId],b.checked&&!this._map.hasLayer(c.layer)?c.overlay?this._activeOverlayLayers[b.layerId]=c:this._activeBaseLayer=c:!b.checked&&this._map.hasLayer(c.layer)&&c.overlay&&delete this._activeOverlayLayers[b.layerId]}}),L.control.activeLayers=function(a,b,c){return new L.Control.ActiveLayers(a,b,c)};
/**
* Created: vogdb Date: 5/4/13 Time: 1:54 PM
* Version: 0.3.0
*/
L.Control.ActiveLayers=L.Control.Layers.extend({getActiveBaseLayer:function(){return this._activeBaseLayer},getActiveOverlayLayers:function(){return this._activeOverlayLayers},onAdd:function(e){var t=L.Control.Layers.prototype.onAdd.call(this,e);return Array.isArray(this._layers)?(this._activeBaseLayer=this._findActiveBaseLayer(),this._activeOverlayLayers=this._findActiveOverlayLayers()):(this._activeBaseLayer=this._findActiveBaseLayerLegacy(),this._activeOverlayLayers=this._findActiveOverlayLayersLegacy()),t},_findActiveBaseLayer:function(){var e=this._layers;for(var t=0;t<e.length;t++){var n=e[t];if(!n.overlay&&this._map.hasLayer(n.layer))return n}throw new Error("Control doesn't have any active base layer!")},_findActiveOverlayLayers:function(){var e={},t=this._layers;for(var n=0;n<t.length;n++){var r=t[n];r.overlay&&this._map.hasLayer(r.layer)&&(e[r.layer._leaflet_id]=r)}return e},_findActiveBaseLayerLegacy:function(){var e=this._layers;for(var t in e)if(this._layers.hasOwnProperty(t)){var n=e[t];if(!n.overlay&&this._map.hasLayer(n.layer))return n}throw new Error("Control doesn't have any active base layer!")},_findActiveOverlayLayersLegacy:function(){var e={},t=this._layers;for(var n in t)if(this._layers.hasOwnProperty(n)){var r=t[n];r.overlay&&this._map.hasLayer(r.layer)&&(e[n]=r)}return e},_onLayerChange:function(){L.Control.Layers.prototype._onLayerChange.apply(this,arguments),this._recountLayers()},_onInputClick:function(){this._handlingClick=!0,this._recountLayers(),L.Control.Layers.prototype._onInputClick.call(this),this._handlingClick=!1},_recountLayers:function(){var e,t,n,r=this._form.getElementsByTagName("input"),i=r.length;for(e=0;e<i;e++)t=r[e],Array.isArray(this._layers)?n=this._layers[e]:n=this._layers[t.layerId],t.checked&&!this._map.hasLayer(n.layer)?n.overlay?this._activeOverlayLayers[t.layerId]=n:this._activeBaseLayer=n:!t.checked&&this._map.hasLayer(n.layer)&&n.overlay&&delete this._activeOverlayLayers[t.layerId]}}),L.control.activeLayers=function(e,t,n){return new L.Control.ActiveLayers(e,t,n)};

View File

@ -1,16 +1,12 @@
/* required styles */
.leaflet-map-pane,
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-pane,
.leaflet-tile-container,
.leaflet-overlay-pane,
.leaflet-shadow-pane,
.leaflet-marker-pane,
.leaflet-popup-pane,
.leaflet-overlay-pane svg,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
@ -20,8 +16,6 @@
}
.leaflet-container {
overflow: hidden;
-ms-touch-action: none;
touch-action: none;
}
.leaflet-tile,
.leaflet-marker-icon,
@ -31,17 +25,51 @@
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;
}
/* map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container img {
/* .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;
}
/* stupid Android 2 doesn't understand "max-width: none" properly */
.leaflet-container img.leaflet-image-layer {
max-width: 15000px !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;
@ -53,18 +81,26 @@
.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-tile-pane { z-index: 2; }
.leaflet-objects-pane { z-index: 3; }
.leaflet-overlay-pane { z-index: 4; }
.leaflet-shadow-pane { z-index: 5; }
.leaflet-marker-pane { z-index: 6; }
.leaflet-popup-pane { z-index: 7; }
.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;
@ -81,7 +117,8 @@
.leaflet-control {
position: relative;
z-index: 7;
z-index: 800;
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
pointer-events: auto;
}
.leaflet-top,
@ -125,31 +162,35 @@
/* zoom and fade animations */
.leaflet-fade-anim .leaflet-tile,
.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-tile-loaded,
.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,
.leaflet-touching .leaflet-zoom-animated {
.leaflet-pan-anim .leaflet-tile {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}
@ -160,24 +201,46 @@
/* cursors */
.leaflet-clickable {
.leaflet-interactive {
cursor: pointer;
}
.leaflet-container {
.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-container,
.leaflet-dragging .leaflet-clickable {
.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 */
@ -250,7 +313,14 @@
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 */
@ -259,16 +329,10 @@
font: bold 18px 'Lucida Console', Monaco, monospace;
text-indent: 1px;
}
.leaflet-control-zoom-out {
font-size: 20px;
}
.leaflet-touch .leaflet-control-zoom-in {
.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
font-size: 22px;
}
.leaflet-touch .leaflet-control-zoom-out {
font-size: 24px;
}
/* layers control */
@ -304,6 +368,11 @@
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;
@ -318,6 +387,11 @@
margin: 5px -10px 5px -6px;
}
/* Default icon URLs */
.leaflet-default-icon-path {
background-image: url(images/marker-icon.png);
}
/* attribution and scale controls */
@ -355,8 +429,8 @@
font-size: 11px;
white-space: nowrap;
overflow: hidden;
-moz-box-sizing: content-box;
box-sizing: content-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #fff;
background: rgba(255, 255, 255, 0.5);
@ -387,47 +461,53 @@
.leaflet-popup {
position: absolute;
text-align: center;
margin-bottom: 20px;
}
.leaflet-popup-content-wrapper {
padding: 1px;
text-align: left;
border-radius: 6px;
border-radius: 12px;
}
.leaflet-popup-content {
margin: 5px 8px;
margin: 13px 19px;
line-height: 1.4;
}
.leaflet-popup-content p {
/* margin: 18px 0; */
margin: 18px 0;
}
.leaflet-popup-tip-container {
margin: 0 auto;
width: 40px;
height: 20px;
position: relative;
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;
box-shadow: 0 4px 8px rgba(0,0,0,0.4);
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;
@ -474,3 +554,89 @@
background: #fff;
border: 1px solid #666;
}
.leaflet-popup-content-wrapper {
border-radius: 6px !important;
}
.leaflet-popup-content {
margin: 6px 8px !important;
}
/* 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;
}

View File

@ -1,303 +1,10 @@
/* ================================================================== */
/* Toolbars
/* ================================================================== */
.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.png');
background-repeat: no-repeat;
}
.leaflet-retina .leaflet-draw-toolbar a {
background-image: url('images/spritesheet-2x.png');
background-size: 270px 30px;
}
.leaflet-draw a {
display: block;
text-align: center;
text-decoration: none;
}
/* ================================================================== */
/* Toolbar actions menu
/* ================================================================== */
.leaflet-draw-actions {
display: none;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
left: 26px; /* leaflet-draw-toolbar.left + leaflet-draw-toolbar.width */
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: none;
}
.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: 11px/19px "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;
}
/* ================================================================== */
/* Draw toolbar
/* ================================================================== */
.leaflet-draw-toolbar .leaflet-draw-draw-polyline {
background-position: -2px -2px;
}
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polyline {
background-position: 0 -1px;
}
.leaflet-draw-toolbar .leaflet-draw-draw-polygon {
background-position: -31px -2px;
}
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polygon {
background-position: -29px -1px;
}
.leaflet-draw-toolbar .leaflet-draw-draw-rectangle {
background-position: -62px -2px;
}
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-rectangle {
background-position: -60px -1px;
}
.leaflet-draw-toolbar .leaflet-draw-draw-circle {
background-position: -92px -2px;
}
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circle {
background-position: -90px -1px;
}
.leaflet-draw-toolbar .leaflet-draw-draw-marker {
background-position: -122px -2px;
}
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-marker {
background-position: -120px -1px;
}
/* ================================================================== */
/* Edit toolbar
/* ================================================================== */
.leaflet-draw-toolbar .leaflet-draw-edit-edit {
background-position: -152px -2px;
}
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-edit {
background-position: -150px -1px;
}
.leaflet-draw-toolbar .leaflet-draw-edit-remove {
background-position: -182px -2px;
}
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-remove {
background-position: -180px -1px;
}
.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: -210px -1px;
}
.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: -240px -2px;
}
/* ================================================================== */
/* Drawing styles
/* ================================================================== */
.leaflet-mouse-marker {
background-color: #fff;
cursor: crosshair;
}
.leaflet-draw-tooltip {
background: rgb(54, 54, 54);
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;
}
/* ================================================================== */
/* Edit styles
/* ================================================================== */
.leaflet-edit-marker-selected {
background: 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;
}
/* ================================================================== */
/* Old IE styles
/* ================================================================== */
.leaflet-oldie .leaflet-draw-toolbar {
border: 1px solid #999;
}
.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.png');background-image:linear-gradient(transparent,transparent),url('images/spritesheet.svg');background-repeat:no-repeat;background-size:300px 30px;background-clip:padding-box}.leaflet-retina .leaflet-draw-toolbar a{background-image:url('images/spritesheet-2x.png');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:11px/19px "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:0 -1px}
.leaflet-draw-toolbar .leaflet-draw-draw-polygon{background-position:-31px -2px}.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polygon{background-position:-29px -1px}.leaflet-draw-toolbar .leaflet-draw-draw-rectangle{background-position:-62px -2px}.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-rectangle{background-position:-60px -1px}.leaflet-draw-toolbar .leaflet-draw-draw-circle{background-position:-92px -2px}.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circle{background-position:-90px -1px}
.leaflet-draw-toolbar .leaflet-draw-draw-marker{background-position:-122px -2px}.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-marker{background-position:-120px -1px}.leaflet-draw-toolbar .leaflet-draw-draw-circlemarker{background-position:-273px -2px}.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circlemarker{background-position:-271px -1px}.leaflet-draw-toolbar .leaflet-draw-edit-edit{background-position:-152px -2px}.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-edit{background-position:-150px -1px}
.leaflet-draw-toolbar .leaflet-draw-edit-remove{background-position:-182px -2px}.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-remove{background-position:-180px -1px}.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:-210px -1px}.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:-240px -2px}
.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:.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 suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,53 +0,0 @@
.leaflet-label {
background: rgba(250, 250, 250, 0.9);
background-clip: padding-box;
border-color: #888;
border-color: rgba(0,0,0,0.25);
border-radius: 3px;
border-style: solid;
border-width: 1px;
color: #111;
display: block;
font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
font-weight: 500;
padding: 1px 6px;
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
white-space: nowrap;
z-index: 6;
}
.leaflet-label.leaflet-clickable {
cursor: pointer;
pointer-events: auto;
}
.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: "";
}

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,530 @@
/* eslint-disable indent,semi */
/**
* Create a Canvas as ImageOverlay to draw the Lat/Lon Graticule,
* and show the axis tick label on the edge of the map.
* Author: lanwei@cloudybay.com.tw
*/
(function (window, document, undefined) {
L.LatLngGraticule = L.Layer.extend({
includes: L.Mixin.Events,
options: {
showLabel: true,
opacity: 1,
weight: 0.8,
color: '#aaa',
font: '12px Verdana',
dashArray: [0,0],
lngLineCurved: 0,
latLineCurved: 0,
zoomInterval: [
{start: 2, end: 2, interval: 40},
{start: 3, end: 3, interval: 20},
{start: 4, end: 4, interval: 10},
{start: 5, end: 7, interval: 5},
{start: 8, end: 20, interval: 1}
]
},
initialize: function (options) {
L.setOptions(this, options);
var defaultFontName = 'Verdana';
var _ff = this.options.font.split(' ');
if (_ff.length < 2) {
this.options.font += ' ' + defaultFontName;
}
if (!this.options.fontColor) {
this.options.fontColor = this.options.color;
}
if (this.options.zoomInterval) {
if (this.options.zoomInterval.latitude) {
this.options.latInterval = this.options.zoomInterval.latitude;
if (!this.options.zoomInterval.longitude) {
this.options.lngInterval = this.options.zoomInterval.latitude;
}
}
if (this.options.zoomInterval.longitude) {
this.options.lngInterval = this.options.zoomInterval.longitude;
if (!this.options.zoomInterval.latitude) {
this.options.latInterval = this.options.zoomInterval.longitude;
}
}
if (!this.options.latInterval) {
this.options.latInterval = this.options.zoomInterval;
}
if (!this.options.lngInterval) {
this.options.lngInterval = this.options.zoomInterval;
}
}
},
onAdd: function (map) {
this._map = map;
if (!this._canvas) {
this._initCanvas();
}
map._panes.overlayPane.appendChild(this._canvas);
map.on('viewreset', this._reset, this);
map.on('move', this._reset, this);
map.on('moveend', this._reset, this);
if (map.options.zoomAnimation && L.Browser.any3d) {
map.on('zoomanim', this._animateZoom, this);
}
this._reset();
},
onRemove: function (map) {
L.DomUtil.remove(this._canvas);
map.off('viewreset', this._reset, this);
map.off('move', this._reset, this);
map.off('moveend', this._reset, this);
if (map.options.zoomAnimation) {
map.off('zoomanim', this._animateZoom, this);
}
},
addTo: function (map) {
map.addLayer(this);
return this;
},
setOpacity: function (opacity) {
this.options.opacity = opacity;
this._updateOpacity();
return this;
},
bringToFront: function () {
if (this._canvas) {
//this._map._panes.overlayPane.appendChild(this._canvas);
}
return this;
},
bringToBack: function () {
var pane = this._map._panes.overlayPane;
if (this._canvas) {
//pane.insertBefore(this._canvas, pane.firstChild);
}
return this;
},
getAttribution: function () {
return this.options.attribution;
},
_initCanvas: function () {
this._canvas = L.DomUtil.create('canvas', '');
if (this._map.options.zoomAnimation && L.Browser.any3d) {
L.DomUtil.addClass(this._canvas, 'leaflet-zoom-animated');
} else {
L.DomUtil.addClass(this._canvas, 'leaflet-zoom-hide');
}
this._updateOpacity();
L.extend(this._canvas, {
onselectstart: L.Util.falseFn,
onmousemove: L.Util.falseFn,
onload: L.bind(this._onCanvasLoad, this)
});
},
_animateZoom: function (e) {
var map = this._map,
canvas = this._canvas,
scale = map.getZoomScale(e.zoom),
nw = map.containerPointToLatLng([0, 0]),
se = map.containerPointToLatLng([canvas.width, canvas.height]),
topLeft = map._latLngToNewLayerPoint(nw, e.zoom, e.center),
size = map._latLngToNewLayerPoint(se, e.zoom, e.center)._subtract(topLeft),
origin = topLeft._add(size._multiplyBy((1 / 2) * (1 - 1 / scale)));
L.DomUtil.setTransform(canvas, origin, scale);
},
_reset: function () {
var canvas = this._canvas,
size = this._map.getSize(),
lt = this._map.containerPointToLayerPoint([0, 0]);
L.DomUtil.setPosition(canvas, lt);
canvas.width = size.x;
canvas.height = size.y;
canvas.style.width = size.x + 'px';
canvas.style.height = size.y + 'px';
this.__calcInterval();
this.__draw(true);
},
_onCanvasLoad: function () {
this.fire('load');
},
_updateOpacity: function () {
L.DomUtil.setOpacity(this._canvas, this.options.opacity);
},
__format_lat: function(lat) {
if (this.options.latFormatTickLabel) {
return this.options.latFormatTickLabel(lat);
}
// todo: format type of float
if (lat < 0) {
return '' + (lat*-1) + 'S';
}
else if (lat > 0) {
return '' + lat + 'N';
}
return '' + lat;
},
__format_lng: function(lng) {
if (this.options.lngFormatTickLabel) {
return this.options.lngFormatTickLabel(lng);
}
// todo: format type of float
if (lng > 180) {
return '' + (360 - lng) + 'W';
}
else if (lng > 0 && lng < 180) {
return '' + lng + 'E';
}
else if (lng < 0 && lng > -180) {
return '' + (lng*-1) + 'W';
}
else if (lng == -180) {
return '' + (lng*-1);
}
else if (lng < -180) {
return '' + (360 + lng) + 'W';
}
return '' + lng;
},
__calcInterval: function() {
var zoom = this._map.getZoom();
if (this._currZoom != zoom) {
this._currLngInterval = 0;
this._currLatInterval = 0;
this._currZoom = zoom;
}
var interv;
if (!this._currLngInterval) {
try {
for (var idx in this.options.lngInterval) {
var dict = this.options.lngInterval[idx];
if (dict.start <= zoom) {
if (dict.end && dict.end >= zoom) {
this._currLngInterval = dict.interval;
break;
}
}
}
}
catch(e) {
this._currLngInterval = 0;
}
}
if (!this._currLatInterval) {
try {
for (var idx in this.options.latInterval) {
var dict = this.options.latInterval[idx];
if (dict.start <= zoom) {
if (dict.end && dict.end >= zoom) {
this._currLatInterval = dict.interval;
break;
}
}
}
}
catch(e) {
this._currLatInterval = 0;
}
}
},
__draw: function(label) {
function _parse_px_to_int(txt) {
if (txt.length > 2) {
if (txt.charAt(txt.length-2) == 'p') {
txt = txt.substr(0, txt.length-2);
}
}
try {
return parseInt(txt, 10);
}
catch(e) {}
return 0;
};
var self = this,
canvas = this._canvas,
map = this._map,
curvedLon = this.options.lngLineCurved,
curvedLat = this.options.latLineCurved;
if (L.Browser.canvas && map) {
if (!this._currLngInterval || !this._currLatInterval) {
this.__calcInterval();
}
var latInterval = this._currLatInterval,
lngInterval = this._currLngInterval;
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.lineWidth = this.options.weight;
ctx.strokeStyle = this.options.color;
ctx.fillStyle = this.options.fontColor;
ctx.setLineDash(this.options.dashArray);
if (this.options.font) {
ctx.font = this.options.font;
}
var txtWidth = ctx.measureText('0').width;
var txtHeight = 12;
try {
var _font_size = ctx.font.split(' ')[0];
txtHeight = _parse_px_to_int(_font_size);
}
catch(e) {}
var ww = canvas.width,
hh = canvas.height;
var lt = map.containerPointToLatLng(L.point(0, 0));
var rt = map.containerPointToLatLng(L.point(ww, 0));
var rb = map.containerPointToLatLng(L.point(ww, hh));
var _lat_b = rb.lat,
_lat_t = lt.lat;
var _lon_l = lt.lng,
_lon_r = rt.lng;
var _point_per_lat = (_lat_t - _lat_b) / (hh * 0.2);
if (isNaN(_point_per_lat)) {
return;
}
if (_point_per_lat < 1) { _point_per_lat = 1; }
if (_lat_b < -90) {
_lat_b = -90;
}
else {
_lat_b = parseInt(_lat_b - _point_per_lat, 10);
}
if (_lat_t > 90) {
_lat_t = 90;
}
else {
_lat_t = parseInt(_lat_t + _point_per_lat, 10);
}
var _point_per_lon = (_lon_r - _lon_l) / (ww * 0.2);
if (_point_per_lon < 1) { _point_per_lon = 1; }
if (_lon_l > 0 && _lon_r < 0) {
_lon_r += 360;
}
_lon_r = parseInt(_lon_r + _point_per_lon, 10);
_lon_l = parseInt(_lon_l - _point_per_lon, 10);
var ll, latstr, lngstr, _lon_delta = 0.5;
function __draw_lat_line(self, lat_tick) {
ll = self._latLngToCanvasPoint(L.latLng(lat_tick, _lon_l));
latstr = self.__format_lat(lat_tick);
txtWidth = ctx.measureText(latstr).width;
if (curvedLat) {
if (typeof(curvedLat) == 'number') {
_lon_delta = curvedLat;
}
var __lon_left = _lon_l, __lon_right = _lon_r;
if (ll.x > 0) {
var __lon_left = map.containerPointToLatLng(L.point(0, ll.y));
__lon_left = __lon_left.lng - _point_per_lon;
ll.x = 0;
}
var rr = self._latLngToCanvasPoint(L.latLng(lat_tick, __lon_right));
if (rr.x < ww) {
__lon_right = map.containerPointToLatLng(L.point(ww, rr.y));
__lon_right = __lon_right.lng + _point_per_lon;
if (__lon_left > 0 && __lon_right < 0) {
__lon_right += 360;
}
}
ctx.beginPath();
ctx.moveTo(ll.x, ll.y);
var _prev_p = null;
for (var j=__lon_left; j<=__lon_right; j+=_lon_delta) {
rr = self._latLngToCanvasPoint(L.latLng(lat_tick, j));
ctx.lineTo(rr.x, rr.y);
if (self.options.showLabel && label && _prev_p != null) {
if (_prev_p.x < 0 && rr.x >= 0) {
var _s = (rr.x - 0) / (rr.x - _prev_p.x);
var _y = rr.y - ((rr.y - _prev_p.y) * _s);
ctx.fillText(latstr, 0, _y + (txtHeight/2));
}
else if (_prev_p.x <= (ww-txtWidth) && rr.x > (ww-txtWidth)) {
var _s = (rr.x - ww) / (rr.x - _prev_p.x);
var _y = rr.y - ((rr.y - _prev_p.y) * _s);
ctx.fillText(latstr, ww-txtWidth, _y + (txtHeight/2)-2);
}
}
_prev_p = {x:rr.x, y:rr.y, lon:j, lat:i};
}
ctx.stroke();
}
else {
var __lon_right = _lon_r;
var rr = self._latLngToCanvasPoint(L.latLng(lat_tick, __lon_right));
if (curvedLon) {
__lon_right = map.containerPointToLatLng(L.point(0, rr.y));
__lon_right = __lon_right.lng;
rr = self._latLngToCanvasPoint(L.latLng(lat_tick, __lon_right));
var __lon_left = map.containerPointToLatLng(L.point(ww, rr.y));
__lon_left = __lon_left.lng;
ll = self._latLngToCanvasPoint(L.latLng(lat_tick, __lon_left));
}
ctx.beginPath();
ctx.moveTo(ll.x+1, ll.y);
ctx.lineTo(rr.x-1, rr.y);
ctx.stroke();
if (self.options.showLabel && label) {
var _yy = ll.y + (txtHeight/2)-2;
ctx.fillText(latstr, 0, _yy);
ctx.fillText(latstr, ww-txtWidth, _yy);
}
}
};
if (latInterval > 0) {
for (var i=latInterval; i<=_lat_t; i+=latInterval) {
if (i >= _lat_b) {
__draw_lat_line(this, i);
}
}
for (var i=0; i>=_lat_b; i-=latInterval) {
if (i <= _lat_t) {
__draw_lat_line(this, i);
}
}
}
function __draw_lon_line(self, lon_tick) {
lngstr = self.__format_lng(lon_tick);
txtWidth = ctx.measureText(lngstr).width;
var bb = self._latLngToCanvasPoint(L.latLng(_lat_b, lon_tick));
if (curvedLon) {
if (typeof(curvedLon) == 'number') {
_lat_delta = curvedLon;
}
ctx.beginPath();
ctx.moveTo(bb.x, bb.y);
var _prev_p = null;
for (var j=_lat_b; j<_lat_t; j+=_lat_delta) {
var tt = self._latLngToCanvasPoint(L.latLng(j, lon_tick));
ctx.lineTo(tt.x, tt.y);
if (self.options.showLabel && label && _prev_p != null) {
if (_prev_p.y > 8 && tt.y <= 8) {
ctx.fillText(lngstr, tt.x - (txtWidth/2), txtHeight);
}
else if (_prev_p.y >= hh && tt.y < hh) {
ctx.fillText(lngstr, tt.x - (txtWidth/2), hh-2);
}
}
_prev_p = {x:tt.x, y:tt.y, lon:lon_tick, lat:j};
}
ctx.stroke();
}
else {
var __lat_top = _lat_t;
var tt = self._latLngToCanvasPoint(L.latLng(__lat_top, lon_tick));
if (curvedLat) {
__lat_top = map.containerPointToLatLng(L.point(tt.x, 0));
__lat_top = __lat_top.lat;
if (__lat_top > 90) { __lat_top = 90; }
tt = self._latLngToCanvasPoint(L.latLng(__lat_top, lon_tick));
var __lat_bottom = map.containerPointToLatLng(L.point(bb.x, hh));
__lat_bottom = __lat_bottom.lat;
if (__lat_bottom < -90) { __lat_bottom = -90; }
bb = self._latLngToCanvasPoint(L.latLng(__lat_bottom, lon_tick));
}
ctx.beginPath();
ctx.moveTo(tt.x, tt.y+1);
ctx.lineTo(bb.x, bb.y-1);
ctx.stroke();
if (self.options.showLabel && label) {
ctx.fillText(lngstr, tt.x - (txtWidth/2), txtHeight+1);
ctx.fillText(lngstr, bb.x - (txtWidth/2), hh-3);
}
}
};
if (lngInterval > 0) {
for (var i=lngInterval; i<=_lon_r; i+=lngInterval) {
if (i >= _lon_l) {
__draw_lon_line(this, i);
}
}
for (var i=0; i>=_lon_l; i-=lngInterval) {
if (i <= _lon_r) {
__draw_lon_line(this, i);
}
}
}
}
},
_latLngToCanvasPoint: function(latlng) {
var map = this._map;
var projectedPoint = map.project(L.latLng(latlng));
projectedPoint._subtract(map.getPixelOrigin());
return L.point(projectedPoint).add(map._getMapPanePos());
}
});
L.latlngGraticule = function (options) {
return new L.LatLngGraticule(options);
};
}(this, document));

View File

@ -1,252 +0,0 @@
/**
* Leaflet.MarkerCluster.Freezable sub-plugin for Leaflet.markercluster plugin.
* Adds the ability to freeze clusters at a specified zoom.
* Copyright (c) 2015 Boris Seang
* Distributed under the MIT License (Expat type)
*/
// UMD
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['leaflet'], function (L) {
return (root.L.MarkerClusterGroup = factory(L));
});
} else if (typeof module === 'object' && module.exports) {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory(require('leaflet'));
} else {
// Browser globals
root.L.MarkerClusterGroup = factory(root.L);
}
}(this, function (L, undefined) { // Does not actually expect the 'undefined' argument, it is just a trick to have an undefined variable.
var LMCG = L.MarkerClusterGroup,
LMCGproto = LMCG.prototype;
LMCG.freezableVersion = '0.1.0';
LMCG.include({
_originalOnAdd: LMCGproto.onAdd,
onAdd: function (map) {
var frozenZoom = this._zoom;
this._originalOnAdd(map);
if (this._frozen) {
// Restore the specified frozenZoom if necessary.
if (frozenZoom >= 0 && frozenZoom !== this._zoom) {
// Undo clusters and markers addition to this._featureGroup.
this._featureGroup.clearLayers();
this._zoom = frozenZoom;
this.addLayers([]);
}
// Replace the callbacks on zoomend and moveend events.
map.off('zoomend', this._zoomEnd, this);
map.off('moveend', this._moveEnd, this);
map.on('zoomend moveend', this._viewChangeEndNotClustering, this);
}
},
_originalOnRemove: LMCGproto.onRemove,
onRemove: function (map) {
map.off('zoomend moveend', this._viewChangeEndNotClustering, this);
this._originalOnRemove(map);
},
disableClustering: function () {
return this.freezeAtZoom(this._maxZoom + 1);
},
disableClusteringKeepSpiderfy: function () {
return this.freezeAtZoom(this._maxZoom);
},
enableClustering: function () {
return this.unfreeze();
},
unfreeze: function () {
return this.freezeAtZoom(false);
},
freezeAtZoom: function (frozenZoom) {
this._processQueue();
var map = this._map;
// If frozenZoom is not specified, true or NaN, freeze at current zoom.
// Note: NaN is the only value which is not eaqual to itself.
if (frozenZoom === undefined || frozenZoom === true || (frozenZoom !== frozenZoom)) {
// Set to -1 if not on map, as the sign to freeze as soon as it gets added to a map.
frozenZoom = map ? Math.round(map.getZoom()) : -1;
} else if (frozenZoom === 'max') {
// If frozenZoom is "max", freeze at MCG maxZoom + 1 (eliminates all clusters).
frozenZoom = this._maxZoom + 1;
} else if (frozenZoom === 'maxKeepSpiderfy') {
// If "maxKeepSpiderfy", freeze at MCG maxZoom (eliminates all clusters but bottom-most ones).
frozenZoom = this._maxZoom;
}
var requestFreezing = typeof frozenZoom === 'number';
if (this._frozen) { // Already frozen.
if (!requestFreezing) { // Unfreeze.
this._unfreeze();
return this;
}
// Just change the frozen zoom: go straight to artificial zoom.
} else if (requestFreezing) {
// Start freezing
this._initiateFreeze();
} else { // Not frozen and not requesting freezing => nothing to do.
return this;
}
this._artificialZoomSafe(this._zoom, frozenZoom);
return this;
},
_initiateFreeze: function () {
var map = this._map;
// Start freezing
this._frozen = true;
if (map) {
// Change behaviour on zoomEnd and moveEnd.
map.off('zoomend', this._zoomEnd, this);
map.off('moveend', this._moveEnd, this);
map.on('zoomend moveend', this._viewChangeEndNotClustering, this);
}
},
_unfreeze: function () {
var map = this._map;
this._frozen = false;
if (map) {
// Restore original behaviour on zoomEnd.
map.off('zoomend moveend', this._viewChangeEndNotClustering, this);
map.on('zoomend', this._zoomEnd, this);
map.on('moveend', this._moveEnd, this);
// Animate.
this._executeAfterUnspiderfy(function () {
this._zoomEnd(); // Will set this._zoom at the end.
}, this);
}
},
_executeAfterUnspiderfy: function (callback, context) {
// Take care of spiderfied markers!
// The cluster might be removed, whereas markers are on fake positions.
if (this._unspiderfy && this._spiderfied) {
this.once('animationend', function () {
callback.call(context);
});
this._unspiderfy();
return;
}
callback.call(context);
},
_artificialZoomSafe: function (previousZoom, targetZoom) {
this._zoom = targetZoom;
if (!this._map || previousZoom === targetZoom) {
return;
}
this._executeAfterUnspiderfy(function () {
this._artificialZoom(previousZoom, targetZoom);
}, this);
},
_artificialZoom: function (previousZoom, targetZoom) {
if (previousZoom < targetZoom) {
// Make as if we had instantly zoomed in from previousZoom to targetZoom.
this._animationStart();
this._topClusterLevel._recursivelyRemoveChildrenFromMap(
this._currentShownBounds, previousZoom, this._getExpandedVisibleBounds()
);
this._animationZoomIn(previousZoom, targetZoom);
} else if (previousZoom > targetZoom) {
// Make as if we had instantly zoomed out from previousZoom to targetZoom.
this._animationStart();
this._animationZoomOut(previousZoom, targetZoom);
}
},
_viewChangeEndNotClustering: function () {
var fg = this._featureGroup,
newBounds = this._getExpandedVisibleBounds(),
targetZoom = this._zoom;
// Remove markers and bottom clusters outside newBounds, unless they come
// from a spiderfied cluster.
fg.eachLayer(function (layer) {
if (!newBounds.contains(layer._latlng) && layer.__parent && layer.__parent._zoom < targetZoom) {
fg.removeLayer(layer);
}
});
// Add markers and bottom clusters in newBounds.
this._topClusterLevel._recursively(newBounds, -1, targetZoom,
function (c) { // Add markers from each cluster of lower zoom than targetZoom
if (c._zoom === targetZoom) { // except targetZoom
return;
}
var markers = c._markers,
i = 0,
marker;
for (; i < markers.length; i++) {
marker = c._markers[i];
if (!newBounds.contains(marker._latlng)) {
continue;
}
fg.addLayer(marker);
}
},
function (c) { // Add clusters from targetZoom.
c._addToMap();
}
);
},
_originalZoomOrSpiderfy: LMCGproto._zoomOrSpiderfy,
_zoomOrSpiderfy: function (e) {
if (this._frozen && this.options.spiderfyOnMaxZoom) {
e.layer.spiderfy();
if (e.originalEvent && e.originalEvent.keyCode === 13) {
map._container.focus();
}
} else {
this._originalZoomOrSpiderfy(e);
}
}
});
// Just return a value to define the module export.
return LMCG;
}));

View File

@ -0,0 +1,6 @@
/*!
Leaflet.MarkerCluster.Freezable 1.0.0+9db80a3
(c) 2015-2016 Boris Seang
License MIT
*/
!function(e,i){"function"==typeof define&&define.amd?define(["leaflet"],i):i("object"==typeof module&&module.exports?require("leaflet"):e.L)}(this,function(e,i){e.MarkerClusterGroup.include({_originalOnAddFreezable:e.MarkerClusterGroup.prototype.onAdd,onAdd:function(e){var i=this._zoom;this._originalOnAddFreezable(e),this._frozen&&(i>=0&&i!==this._zoom&&(this._featureGroup.clearLayers(),this._zoom=i,this.addLayers([])),e.off("zoomend",this._zoomEnd,this),e.off("moveend",this._moveEnd,this),e.on("zoomend moveend",this._viewChangeEndNotClustering,this))},_originalOnRemove:e.MarkerClusterGroup.prototype.onRemove,onRemove:function(e){e.off("zoomend moveend",this._viewChangeEndNotClustering,this),this._originalOnRemove(e)},disableClustering:function(){return this.freezeAtZoom(this._maxZoom+1)},disableClusteringKeepSpiderfy:function(){return this.freezeAtZoom(this._maxZoom)},enableClustering:function(){return this.unfreeze()},unfreeze:function(){return this.freezeAtZoom(!1)},freezeAtZoom:function(e){this._processQueue();var o=this._map;e===i||e===!0||e!==e?e=o?Math.round(o.getZoom()):-1:"max"===e?e=this._maxZoom+1:"maxKeepSpiderfy"===e&&(e=this._maxZoom);var t="number"==typeof e;if(this._frozen){if(!t)return this._unfreeze(),this}else{if(!t)return this;this._initiateFreeze()}return this._artificialZoomSafe(this._zoom,e),this},_initiateFreeze:function(){var e=this._map;this._frozen=!0,e&&(e.off("zoomend",this._zoomEnd,this),e.off("moveend",this._moveEnd,this),e.on("zoomend moveend",this._viewChangeEndNotClustering,this))},_unfreeze:function(){var e=this._map;this._frozen=!1,e&&(e.off("zoomend moveend",this._viewChangeEndNotClustering,this),e.on("zoomend",this._zoomEnd,this),e.on("moveend",this._moveEnd,this),this._executeAfterUnspiderfy(function(){this._zoomEnd()},this))},_executeAfterUnspiderfy:function(e,i){return this._unspiderfy&&this._spiderfied?(this.once("animationend",function(){e.call(i)}),void this._unspiderfy()):void e.call(i)},_artificialZoomSafe:function(e,i){this._zoom=i,this._map&&e!==i&&this._executeAfterUnspiderfy(function(){this._artificialZoom(e,i)},this)},_artificialZoom:function(e,i){e<i?(this._animationStart(),this._topClusterLevel._recursivelyRemoveChildrenFromMap(this._currentShownBounds,this._map.getMinZoom(),e,this._getExpandedVisibleBounds()),this._animationZoomIn(e,i)):e>i&&(this._animationStart(),this._animationZoomOut(e,i))},_viewChangeEndNotClustering:function(){var e=this._featureGroup,i=this._getExpandedVisibleBounds(),o=this._zoom;e.eachLayer(function(t){!i.contains(t._latlng)&&t.__parent&&t.__parent._zoom<o&&e.removeLayer(t)}),this._topClusterLevel._recursively(i,-1,o,function(t){if(t._zoom!==o)for(var n,r=t._markers,s=0;s<r.length;s++)n=t._markers[s],i.contains(n._latlng)&&e.addLayer(n)},function(e){e._addToMap()}),this._currentShownBounds=i},_originalZoomOrSpiderfy:e.MarkerClusterGroup.prototype._zoomOrSpiderfy,_zoomOrSpiderfy:function(e){this._frozen&&this.options.spiderfyOnMaxZoom?(e.layer.spiderfy(),e.originalEvent&&13===e.originalEvent.keyCode&&map._container.focus()):this._originalZoomOrSpiderfy(e)}})});

File diff suppressed because one or more lines are too long

View File

@ -1,3 +0,0 @@
.leaflet-control-draw-measure {
background-image: url(images/measure-control.png);
}

View File

@ -1,139 +0,0 @@
L.Polyline.Measure = L.Draw.Polyline.extend({
addHooks: function() {
L.Draw.Polyline.prototype.addHooks.call(this);
if (this._map) {
this._markerGroup = new L.LayerGroup();
this._map.addLayer(this._markerGroup);
this._markers = [];
this._map.on('click', this._onClick, this);
this._startShape();
}
},
removeHooks: function () {
L.Draw.Polyline.prototype.removeHooks.call(this);
this._clearHideErrorTimeout();
//!\ Still useful when control is disabled before any drawing (refactor needed?)
this._map.off('mousemove', this._onMouseMove);
this._clearGuides();
this._container.style.cursor = '';
this._removeShape();
this._map.off('click', this._onClick, this);
},
_startShape: function() {
this._drawing = true;
this._poly = new L.Polyline([], this.options.shapeOptions);
this._container.style.cursor = 'crosshair';
this._updateTooltip();
this._map.on('mousemove', this._onMouseMove, this);
},
_finishShape: function () {
this._drawing = false;
this._cleanUpShape();
this._clearGuides();
this._updateTooltip();
this._map.off('mousemove', this._onMouseMove, this);
this._container.style.cursor = '';
},
_removeShape: function() {
if (!this._poly)
return;
this._map.removeLayer(this._poly);
delete this._poly;
this._markers.splice(0);
this._markerGroup.clearLayers();
},
_onClick: function(e) {
if (!this._drawing) {
this._removeShape();
this._startShape();
return;
}
},
_getTooltipText: function() {
var labelText = L.Draw.Polyline.prototype._getTooltipText.call(this);
if (!this._drawing) {
labelText.text = '';
}
return labelText;
}
});
L.Control.MeasureControl = L.Control.extend({
statics: {
TITLE: 'Measure distances'
},
options: {
position: 'topleft',
handler: {}
},
toggle: function() {
if (this.handler.enabled()) {
this.handler.disable.call(this.handler);
} else {
this.handler.enable.call(this.handler);
}
},
onAdd: function(map) {
var className = 'leaflet-control-draw';
this._container = L.DomUtil.create('div', 'leaflet-bar');
this.handler = new L.Polyline.Measure(map, this.options.handler);
this.handler.on('enabled', function () {
L.DomUtil.addClass(this._container, 'enabled');
}, this);
this.handler.on('disabled', function () {
L.DomUtil.removeClass(this._container, 'enabled');
}, this);
var link = L.DomUtil.create('a', className+'-measure', this._container);
link.href = '#';
link.title = L.Control.MeasureControl.TITLE;
L.DomEvent
.addListener(link, 'click', L.DomEvent.stopPropagation)
.addListener(link, 'click', L.DomEvent.preventDefault)
.addListener(link, 'click', this.toggle, this);
return this._container;
}
});
L.Map.mergeOptions({
measureControl: false
});
L.Map.addInitHook(function () {
if (this.options.measureControl) {
this.measureControl = L.Control.measureControl().addTo(this);
}
});
L.Control.measureControl = function (options) {
return new L.Control.MeasureControl(options);
};

View File

@ -1,6 +1,6 @@
/*!
SelectLayersControl - v0.2.2 - 2014-10-10
leaflet.select-layers - v0.3.0 - 2015-08-05
https://github.com/vogdb/SelectLayersControl.git
Copyright (c) 2014 Sanin Aleksey aka vogdb; Licensed MIT
Copyright (c) 2015 Sanin Aleksey aka vogdb; Licensed MIT
*/
L.Control.SelectLayers=L.Control.ActiveLayers.extend({_initLayout:function(){var a="leaflet-control-layers",b=this._container=L.DomUtil.create("div",a);L.DomEvent.disableClickPropagation(b),L.Browser.touch?L.DomEvent.on(b,"click",L.DomEvent.stopPropagation):L.DomEvent.on(b,"mousewheel",L.DomEvent.stopPropagation);var c=this._form=L.DomUtil.create("form",a+"-list");if(this.options.collapsed){var d=this._layersLink=L.DomUtil.create("a",a+"-toggle",b);d.href="#",d.title="Layers",L.Browser.touch?L.DomEvent.on(d,"click",L.DomEvent.stopPropagation).on(d,"click",L.DomEvent.preventDefault).on(d,"click",this._expand,this):(L.DomEvent.on(b,"mouseover",this._expand,this).on(b,"mouseout",this._collapse,this),L.DomEvent.on(d,"focus",this._expand,this)),this._map.on("movestart",this._collapse,this)}else this._expand();this._baseLayersList=L.DomUtil.create("select",a+"-base",c),L.DomEvent.on(this._baseLayersList,"change",this._onBaseLayerOptionChange,this),this._separator=L.DomUtil.create("div",a+"-separator",c),this._overlaysList=L.DomUtil.create("select",a+"-overlays",c),this._overlaysList.setAttribute("multiple",!0),this._overlaysList.style.width="100%",L.DomEvent.on(this._overlaysList,"change",this._onOverlayLayerOptionChange,this),b.appendChild(c)},_onBaseLayerOptionChange:function(){var a=this._baseLayersList.selectedIndex,b=this._baseLayersList.options[a],c=this._layers[b.layerId];this._changeBaseLayer(c)},_changeBaseLayer:function(a){this._handlingClick=!0,this._map.addLayer(a.layer),this._map.removeLayer(this._activeBaseLayer.layer),this._map.setZoom(this._map.getZoom()),this._map.fire("baselayerchange",{layer:a.layer}),this._activeBaseLayer=a,this._handlingClick=!1},_onOverlayLayerOptionChange:function(){this._handlingClick=!0;for(var a=this._overlaysList.options,b=0;b<a.length;b++){var c=a[b],d=this._layers[c.layerId].layer;c.selected?this._map.hasLayer(d)||this._map.addLayer(d):this._map.hasLayer(d)&&this._map.removeLayer(d)}this._handlingClick=!1},_addItem:function(a){var b=this._createOptionElement(a);a.overlay?this._overlaysList.appendChild(b):this._baseLayersList.appendChild(b)},_createOptionElement:function(a){var b=document.createElement("option");return b.layerId=L.stamp(a.layer),b.innerHTML=a.name,this._map.hasLayer(a.layer)&&b.setAttribute("selected",!0),b},_collapse:function(a){a.target===this._container&&L.Control.Layers.prototype._collapse.apply(this,arguments)}}),L.control.selectLayers=function(a,b,c){return new L.Control.SelectLayers(a,b,c)};