Merge branch 'leaflet-upgrade'
This commit is contained in:
commit
aa4c0eed79
10
CHANGELOG.md
10
CHANGELOG.md
@ -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
|
||||
|
99
README.md
99
README.md
@ -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>
|
||||
|
@ -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",
|
||||
|
@ -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,
|
||||
|
@ -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}));
|
||||
|
@ -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;
|
||||
|
@ -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); }
|
||||
|
@ -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;
|
||||
|
@ -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";
|
||||
}
|
||||
});
|
||||
|
||||
|
2
worldmap/leaflet/Leaflet.fullscreen.min.js
vendored
2
worldmap/leaflet/Leaflet.fullscreen.min.js
vendored
@ -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)}});
|
@ -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();
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
|
@ -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 |
2
worldmap/leaflet/l.ellipse.min.js
vendored
2
worldmap/leaflet/l.ellipse.min.js
vendored
@ -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)};
|
||||
|
@ -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)};
|
||||
|
38
worldmap/leaflet/leaflet-ruler.css
Normal file
38
worldmap/leaflet/leaflet-ruler.css
Normal 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;
|
||||
}
|
172
worldmap/leaflet/leaflet-ruler.js
Normal file
172
worldmap/leaflet/leaflet-ruler.js
Normal 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: '°',
|
||||
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> ' + this._result.Bearing.toFixed(this.options.angleUnit.decimal) + ' ' + this.options.angleUnit.display + '<br><b>' + this.options.lengthUnit.label + '</b> ' + this._totalLength.toFixed(this.options.lengthUnit.decimal) + ' ' + this.options.lengthUnit.display;
|
||||
}
|
||||
else {
|
||||
text = '<b>' + this.options.angleUnit.label + '</b> ' + this._result.Bearing.toFixed(this.options.angleUnit.decimal) + ' ' + this.options.angleUnit.display + '<br><b>' + this.options.lengthUnit.label + '</b> ' + this._result.Distance.toFixed(this.options.lengthUnit.decimal) + ' ' + 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> ' + this._result.Bearing.toFixed(this.options.angleUnit.decimal) + ' ' + this.options.angleUnit.display + '<br><b>' + this.options.lengthUnit.label + '</b> ' + this._addedLength.toFixed(this.options.lengthUnit.decimal) + ' ' + 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> ' + this._result.Bearing.toFixed(this.options.angleUnit.decimal) + ' ' + this.options.angleUnit.display + '<br><b>' + this.options.lengthUnit.label + '</b> ' + this._result.Distance.toFixed(this.options.lengthUnit.decimal) + ' ' + 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));
|
@ -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]);
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
@ -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);
|
||||
};
|
@ -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)};
|
||||
|
@ -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;
|
||||
}
|
||||
|
313
worldmap/leaflet/leaflet.draw.css
vendored
313
worldmap/leaflet/leaflet.draw.css
vendored
@ -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
@ -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
530
worldmap/leaflet/leaflet.latlng-graticule.js
Normal file
530
worldmap/leaflet/leaflet.latlng-graticule.js
Normal 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));
|
@ -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;
|
||||
}));
|
6
worldmap/leaflet/leaflet.markercluster.freezable.js
Normal file
6
worldmap/leaflet/leaflet.markercluster.freezable.js
Normal 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
@ -1,3 +0,0 @@
|
||||
.leaflet-control-draw-measure {
|
||||
background-image: url(images/measure-control.png);
|
||||
}
|
@ -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);
|
||||
};
|
||||
|
@ -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)};
|
Loading…
Reference in New Issue
Block a user