dmxm/node-red-contrib-jwht-map
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
3618cb85fb
node-red-contrib-jwht-map/worldmap/index.html

1027 lines
44 KiB
HTML
Raw Normal View History

initial commit
2016-04-01 18:31:07 +08:00
<!DOCTYPE HTML>
<!--
Update fa-icons, fix mouse pointer in menu
2016-05-17 15:47:45 +08:00
Copyright 2015, 2016 IBM Corp.
initial commit
2016-04-01 18:31:07 +08:00
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
update favicon, add apache
2016-06-09 05:07:54 +08:00
<html manifest="worldmap.appcache">
initial commit
2016-04-01 18:31:07 +08:00
<head>
<title>Node-RED map all the things</title>
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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/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/easy-button.css">
Add fullscreen capability to world map (and update examples to new format)
2016-05-31 16:21:25 +08:00
<link rel="stylesheet",type="text/css" href="leaflet/leaflet.fullscreen.css">
initial commit
2016-04-01 18:31:07 +08:00
<link rel="stylesheet" type="text/css" href="leaflet/leaflet-openweathermap.css"/>
<link rel="shortcut icon" type="image/ico" href="favicon.ico"/>
Use socket.io for Worldmap Major bump to 1.0.0
2016-05-19 06:26:08 +08:00
<script type="text/javascript" src="leaflet/socket.io-1.4.5.js"></script>
initial commit
2016-04-01 18:31:07 +08:00
<script type="text/javascript" src="leaflet/leaflet.js"></script>
<script type="text/javascript" src="leaflet/Leaflet.vector-markers.min.js"></script>
<script type="text/javascript" src="leaflet/leaflet.boatmarker.js"></script>
<script type="text/javascript" src="leaflet/leaflet.markercluster.js"></script>
Fix web socket connect/disconnect
2016-06-27 18:55:30 +08:00
<script type="text/javascript" src="leaflet/leaflet.markercluster.freezable-src.js"></script>
initial commit
2016-04-01 18:31:07 +08:00
<script type="text/javascript" src="leaflet/leaflet.active-layers.min.js"></script>
<script type="text/javascript" src="leaflet/leaflet.select-layers.min.js"></script>
<script type="text/javascript" src="leaflet/leaflet.draw.js"></script>
<script type="text/javascript" src="leaflet/leaflet.measurecontrol.js"></script>
<script type="text/javascript" src="leaflet/easy-button.js"></script>
Better doc for events, and allow add overlay map. fix fullscreen bug (spelling)
2016-06-02 00:19:04 +08:00
<script type="text/javascript" src="leaflet/Leaflet.fullscreen.min.js"></script>
initial commit
2016-04-01 18:31:07 +08:00
<script type="text/javascript" src="leaflet/l.ellipse.min.js"></script>
<script type="text/javascript" src="leaflet/leaflet-heat.js"></script>
<script type="text/javascript" src="leaflet/TileLayer.Grayscale.js"></script>
<script type="text/javascript" src="leaflet/TileLayer.GrayscaleWMS.js"></script>
<script type="text/javascript" src="leaflet/L.Terminator.js"></script>
<script type="text/javascript" src="leaflet/tile.stamen.js"></script>
<script type="text/javascript" src="leaflet/leaflet-openweathermap.js"></script>
Add 3d buildings layer
2016-10-19 05:37:07 +08:00
<script type="text/javascript" src="leaflet/OSMBuildings-Leaflet.js"></script>
Add dialog polypill for "other" browsers to close #1
2016-05-16 23:07:23 +08:00
<script type="text/javascript" src="leaflet/dialog-polyfill.js"></script>
<link rel="stylesheet" type="text/css" href="leaflet/dialog-polyfill.css"/>
initial commit
2016-04-01 18:31:07 +08:00
</head>
Use socket.io for Worldmap Major bump to 1.0.0
2016-05-19 06:26:08 +08:00
<body onunload="ws.emit('end');">
initial commit
2016-04-01 18:31:07 +08:00
<div id="topbar">
tidy up zoom levels for most maps, and make sure lines and areas work, and fixup css
2016-06-06 01:37:17 +08:00
<a href="http://nodered.org"><img src="images/node-red.png" width="60px" height="24px"/></a>
<span class="topbar"> Node-RED - map all the things</span>
initial commit
2016-04-01 18:31:07 +08:00
</div>
<div id="results">
<span id="searchRes"></span>
Much more reliable socket.io handling and reconnections
2016-06-02 06:40:38 +08:00
<span id="bars" onclick='toggleMenu()' onmouseover='toggleMenu()'><i class="fa fa-bars fa-2x fa-inverse"></i></span>
initial commit
2016-04-01 18:31:07 +08:00
</div>
<div id="menu"><table>
<tr><td><input type='text' name='search' id='search' size='20' style="width:150px;"/>&nbsp;<span onclick='doSearch();'><i class="fa fa-search fa-lg"></i></span></td></tr>
tidy up zoom levels for most maps, and make sure lines and areas work, and fixup css
2016-06-06 01:37:17 +08:00
<tr><td style="cursor:default"><i class="fa fa-spinner fa-lg fa-fw"></i> Set Max Age <input type='text' name='maxage' id='maxage' value="600" size="5" onchange='setMaxAge();'/>s</td></tr>
update mavrkercluster, and add to options
2016-06-15 19:57:31 +08:00
<tr><td style="cursor:default"><i class="fa fa-search-plus fa-lg fa-fw"></i> Cluster at zoom <<input type='text' name='setclus' id='setclus' value="10" size="2" onchange='setCluster();'/></td></tr>
tidy up zoom levels for most maps, and make sure lines and areas work, and fixup css
2016-06-06 01:37:17 +08:00
<tr><td style="cursor:default"><input type='checkbox' name='panit' onclick='doPanit();'/> Auto Pan Map</td></tr>
<tr><td style="cursor:default"><input type='checkbox' name='lockit' onclick='doLock();'/> Lock Map</td></tr>
<tr><td style="cursor:default"><input type='checkbox' name='heatall' onclick='doHeatAll();'/> Heatmap all layers</td></tr>
<tr><td style="cursor:default"><span id="showHelp" ><i class="fa fa-info fa-lg fa-fw"></i>Help</span></td></tr>
initial commit
2016-04-01 18:31:07 +08:00
</table></div>
<div id="map"></div>
Add embedded example
2016-11-22 16:21:56 +08:00
<div id="foot"></div>
initial commit
2016-04-01 18:31:07 +08:00
<!-- <div id="heat"><button type="button" onclick="clearHeat();">Clear Heatmap</button></div> -->
<dialog id="helpWindow">
<h3>Node-RED - Map all the things</h3>
<p><i class="fa fa-search fa-lg fa-fw"></i> Search - You may enter a name or partial name of an object to search for.<br/>
The map will then jump to centre on each of the results.</p>
Update fa-icons, fix mouse pointer in menu
2016-05-17 15:47:45 +08:00
<p><i class="fa fa-spinner fa-lg fa-fw"></i> Set Max Age - You can set the time after which points
initial commit
2016-04-01 18:31:07 +08:00
that haven't been updated get removed.</p>
allow change in cluster zoom level
2016-05-17 19:22:04 +08:00
<p><i class="fa fa-search-plus fa-lg fa-fw"></i> Cluster at zoom - by default multiple objects will be clustered at zoom levels less than 12.</p>
initial commit
2016-04-01 18:31:07 +08:00
<p><i class="fa fa-arrows fa-lg fa-fw"></i> Auto Pan - When selected, the map will
automatically move to centre on each data point as they arrive.</p>
<p><i class="fa fa-lock fa-lg fa-fw"></i> Lock Map - When selected will save the
currently displayed area and basemap.<br/>
Reloading the map in the current browser will return to the same view.<br/>
This can be used to set your initial start position.<br/>
While active it also restricts the "auto pan" to within that area.</p>
<p><i class="fa fa-globe fa-lg fa-fw"></i> Heatmap all layers - When selected
all layers whether hidden or not will contribute to the heatmap.<br/>
The default is that only visible layers add to the heatmap.</p>
<button id="exitHelp">Close</button>
</dialog>
<script language="javascript" type="text/javascript">
slight css change and small tweaks
2016-05-08 18:07:09 +08:00
var startpos = [51.03, -1.379]; // Start location - somewhere in UK :-)
initial commit
2016-04-01 18:31:07 +08:00
var startzoom = 10;
var map;
var markers = {};
var polygons = {};
var layers = {};
var overlays = {};
var basemaps = {};
var marks = [];
var marksIndex = 0;
var popid = "";
var menuOpen = false;
Fix web socket connect/disconnect
2016-06-27 18:55:30 +08:00
var clusterAt = 12;
slight css change and small tweaks
2016-05-08 18:07:09 +08:00
var maxage = 600; // default max age of icons on map in seconds - cleared after 10 mins
var baselayername = "OSM grey"; // Default base layer OSM but uniform grey
var ibmfoot = "&nbsp;&copy; IBM 2015,2016"
Add initial position ability to Worldmap
2016-06-12 19:40:29 +08:00
var initialposition = false;
Add embedded example
2016-11-22 16:21:56 +08:00
var inIframe = false;
var showUserMenu = true;
initial commit
2016-04-01 18:31:07 +08:00
Add status to world map node
2016-05-25 04:34:18 +08:00
// Create the socket
var ws = io();
ws.on('connect', function() {
console.log("CONNECTED");
Add embedded example
2016-11-22 16:21:56 +08:00
if (!inIframe) {
document.getElementById("foot").innerHTML = "<font color='#494'>"+ibmfoot+"</font>";
}
Add status to world map node
2016-05-25 04:34:18 +08:00
ws.emit("worldmap",{action:"connected"});
});
ws.on('disconnect', function() {
console.log("DISCONNECTED");
Add embedded example
2016-11-22 16:21:56 +08:00
if (!inIframe) {
document.getElementById("foot").innerHTML = "<font color='#900'>"+ibmfoot+"</font>";
}
Much more reliable socket.io handling and reconnections
2016-06-02 06:40:38 +08:00
setTimeout(function() { ws.connect(); }, 2500);
Add status to world map node
2016-05-25 04:34:18 +08:00
});
ws.on('error', function() {
console.log("ERROR");
Add embedded example
2016-11-22 16:21:56 +08:00
if (!inIframe) {
document.getElementById("foot").innerHTML = "<font color='#C00'>"+ibmfoot+"</font>";
}
Much more reliable socket.io handling and reconnections
2016-06-02 06:40:38 +08:00
setTimeout(function() { ws.connect(); }, 2500);
Add status to world map node
2016-05-25 04:34:18 +08:00
});
ws.on('worldmapdata', function(data) {
if (data.command) { doCommand(data.command); delete data.command; }
update mavrkercluster, and add to options
2016-06-15 19:57:31 +08:00
if (data.hasOwnProperty("name")) { setMarker(data); }
Add status to world map node
2016-05-25 04:34:18 +08:00
else { console.log("SKIP",data); }
});
initial commit
2016-04-01 18:31:07 +08:00
if ( window.localStorage.hasOwnProperty("lastpos") ) {
Add initial position ability to Worldmap
2016-06-12 19:40:29 +08:00
initialposition = true;
Fix map local storage of zoom levels and socket.io reconnect
2016-05-20 23:41:13 +08:00
var sp = JSON.parse(window.localStorage.getItem("lastpos"));
initial commit
2016-04-01 18:31:07 +08:00
startpos = [ sp.lat, sp.lng ];
}
if ( window.localStorage.hasOwnProperty("lastzoom") ) {
Fix map local storage of zoom levels and socket.io reconnect
2016-05-20 23:41:13 +08:00
startzoom = window.localStorage.getItem("lastzoom");
}
Fix web socket connect/disconnect
2016-06-27 18:55:30 +08:00
// if ( window.localStorage.hasOwnProperty("clusterat") ) {
// clusterAt = window.localStorage.getItem("clusterat");
// document.getElementById("setclus").value = clusterAt;
// }
Fix map local storage of zoom levels and socket.io reconnect
2016-05-20 23:41:13 +08:00
if ( window.localStorage.hasOwnProperty("maxage") ) {
maxage = window.localStorage.getItem("maxage");
let map sit in an iframe... (you know where this is headed :-)
2016-05-27 05:12:56 +08:00
document.getElementById("maxage").value = maxage;
initial commit
2016-04-01 18:31:07 +08:00
}
let map sit in an iframe... (you know where this is headed :-)
2016-05-27 05:12:56 +08:00
initial commit
2016-04-01 18:31:07 +08:00
// Create the Initial Map object.
map = new L.map('map').setView(startpos, startzoom);
Add fullscreen capability to world map (and update examples to new format)
2016-05-31 16:21:25 +08:00
// Move some bits around if in an iframe
let map sit in an iframe... (you know where this is headed :-)
2016-05-27 05:12:56 +08:00
if (window.self !== window.top) {
Much more reliable socket.io handling and reconnections
2016-06-02 06:40:38 +08:00
console.log("IN an iframe");
Add embedded example
2016-11-22 16:21:56 +08:00
inIframe = true;
let map sit in an iframe... (you know where this is headed :-)
2016-05-27 05:12:56 +08:00
(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");
Add embedded example
2016-11-22 16:21:56 +08:00
if (showUserMenu) {
var menuButton = L.easyButton( 'fa-bars fa-lg', function() { toggleMenu(); }, "Toggle menu", "topright").addTo(map);
}
let map sit in an iframe... (you know where this is headed :-)
2016-05-27 05:12:56 +08:00
}
else {
Add fullscreen capability to world map (and update examples to new format)
2016-05-31 16:21:25 +08:00
console.log("NOT in an iframe")
let map sit in an iframe... (you know where this is headed :-)
2016-05-27 05:12:56 +08:00
window.onbeforeunload = function(e) {
return 'Reloading will delete all the local markers, including any drawing on the "drawing" layer';
};
Add embedded example
2016-11-22 16:21:56 +08:00
if (!showUserMenu) {
document.getElementById("bars").style.display="none";
}
let map sit in an iframe... (you know where this is headed :-)
2016-05-27 05:12:56 +08:00
}
Add embedded example
2016-11-22 16:21:56 +08:00
if (!inIframe) {
// Add the fullscreen button
L.control.fullscreen().addTo(map);
Add fullscreen capability to world map (and update examples to new format)
2016-05-31 16:21:25 +08:00
Add embedded example
2016-11-22 16:21:56 +08:00
// map.on('fullscreenchange', function () {
// if (map.isFullscreen()) { console.log('entered fullscreen') }
// else { console.log('exited fullscreen'); }
// });
Add fullscreen capability to world map (and update examples to new format)
2016-05-31 16:21:25 +08:00
Add embedded example
2016-11-22 16:21:56 +08:00
// Add the locate my position button
L.easyButton( 'fa-crosshairs fa-lg', function() {
map.locate({setView:true, maxZoom:16});
}, "Locate me").addTo(map);
Add fullscreen capability to world map (and update examples to new format)
2016-05-31 16:21:25 +08:00
Add embedded example
2016-11-22 16:21:56 +08:00
// Add the measure/ruler button
L.Control.measureControl().addTo(map);
Add fullscreen capability to world map (and update examples to new format)
2016-05-31 16:21:25 +08:00
Add embedded example
2016-11-22 16:21:56 +08:00
// Create the clear heatmap button
var clrHeat = L.easyButton( '<b>Reset Heatmap</b>', function() {
console.log("reset heatmap");
heat.setLatLngs([]);
}, "Clears the current heatmap", "bottomright");
}
initial commit
2016-04-01 18:31:07 +08:00
Update fa-icons, fix mouse pointer in menu
2016-05-17 15:47:45 +08:00
// Handle the dialog for popup help
Add dialog polypill for "other" browsers to close #1
2016-05-16 23:07:23 +08:00
var dialog = document.querySelector('dialog');
dialogPolyfill.registerDialog(dialog);
initial commit
2016-04-01 18:31:07 +08:00
document.getElementById('showHelp').onclick = function() {
dialog.show();
};
document.getElementById('exitHelp').onclick = function() {
dialog.close();
};
var panit = false;
function doPanit() {
panit = !panit;
console.log("Panit set :",panit);
}
var heatAll = false;
function doHeatAll() {
heatAll = !heatAll;
console.log("Heatall set :",heatAll);
}
var lockit = false;
var mb = new L.LatLngBounds([[-120,-360],[120,360]]);
function doLock() {
if (lockit) {
lockit = false;
mb = new L.LatLngBounds([[-120,-360],[120,360]]);
}
else {
lockit = true;
mb = map.getBounds();
window.localStorage.setItem("lastpos",JSON.stringify(map.getCenter()));
window.localStorage.setItem("lastzoom", map.getZoom());
window.localStorage.setItem("lastlayer", baselayername);
update mavrkercluster, and add to options
2016-06-15 19:57:31 +08:00
//window.localStorage.setItem("clusterat", clusterAt);
Fix map local storage of zoom levels and socket.io reconnect
2016-05-20 23:41:13 +08:00
window.localStorage.setItem("maxage", maxage);
initial commit
2016-04-01 18:31:07 +08:00
console.log("Saved :",JSON.stringify(map.getCenter()),map.getZoom(),baselayername);
}
map.setMaxBounds(mb);
console.log("Map bounds lock :",lockit);
}
// Remove old markers
function doTidyUp() {
var d = parseInt(Date.now()/1000);
for (var m in markers) {
if (typeof markers[m].ts != "undefined") {
//console.log(m,markers[m].ts,markers[m]);
if (((Number(markers[m].ts) + Number(maxage)) < d) && (markers[m].lay !== "drawing")) {
Use socket.io for Worldmap Major bump to 1.0.0
2016-05-19 06:26:08 +08:00
//if ((Number(markers[m].ts) + Number(maxage)) < d) {
initial commit
2016-04-01 18:31:07 +08:00
//console.log("STALE :",m);
layers[markers[m].lay].removeLayer(markers[m]);
if (typeof polygons[m] != "undefined") {
layers[markers[m].lay].removeLayer(polygons[m]);
delete polygons[m];
}
delete markers[m];
}
}
}
}
slight css change and small tweaks
2016-05-08 18:07:09 +08:00
// move the daylight / nighttime boundary (if enabled) every minute
initial commit
2016-04-01 18:31:07 +08:00
function moveTerminator() { // if terminator line plotted move it every minute
if (layers["_daynight"].getLayers().length > 0) {
layers["_daynight"].clearLayers();
layers["_daynight"].addLayer(L.terminator());
}
}
setInterval( function() {moveTerminator()}, 60000 );
slight css change and small tweaks
2016-05-08 18:07:09 +08:00
// Call tidyup every {maxage} seconds - default 10 mins
initial commit
2016-04-01 18:31:07 +08:00
var stale = null;
function setMaxAge() {
maxage = document.getElementById('maxage').value;
if (stale) { clearInterval(stale); }
if (maxage > 0) { stale = setInterval( function() {doTidyUp()}, (maxage*1000) ); }
//console.log("Stale time set :",maxage+"s");
}
setMaxAge();
allow change in cluster zoom level
2016-05-17 19:22:04 +08:00
function setCluster() {
Fix web socket connect/disconnect
2016-06-27 18:55:30 +08:00
clusterAt = parseInt(document.getElementById('setclus').value) || 0;
console.log("clusterAt set:",clusterAt);
showMapCurrentZoom();
allow change in cluster zoom level
2016-05-17 19:22:04 +08:00
}
setCluster();
initial commit
2016-04-01 18:31:07 +08:00
// Search for markers with names of ....
function doSearch() {
var value = document.getElementById('search').value;
console.log("Search for :",value);
marks = [];
marksIndex = 0;
for (var key in markers) {
if ( (~(key.toLowerCase()).indexOf(value.toLowerCase())) && (mb.contains(markers[key].getLatLng()))) {
marks.push(markers[key]);
}
}
moveToMarks();
if (lockit) {
document.getElementById('searchRes').innerHTML = "&nbsp;<font color='#ff0'>Found "+marks.length+" results within bounds.</font>";
} else {
document.getElementById('searchRes').innerHTML = "&nbsp;<font color='#ff0'>Found "+marks.length+" results.</font>";
}
}
// Jump to a markers position - centralise it on map
function moveToMarks() {
if (marks.length > marksIndex) {
var m = marks[marksIndex];
map.setView(m.getLatLng(), map.getZoom());
m.openPopup();
marksIndex++;
slight css change and small tweaks
2016-05-08 18:07:09 +08:00
setTimeout(moveToMarks, 2500);
initial commit
2016-04-01 18:31:07 +08:00
}
}
function toggleMenu() {
menuOpen = !menuOpen;
if (menuOpen) {
document.getElementById("menu").style.display = 'block';
} else {
document.getElementById("menu").style.display = 'none';
}
}
document.getElementById("menu").style.display = 'none';
//function clearHeat() {
Use socket.io for Worldmap Major bump to 1.0.0
2016-05-19 06:26:08 +08:00
//console.log("reset heatmap");
//heat.setLatLngs([]);
initial commit
2016-04-01 18:31:07 +08:00
//}
//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;
});
map.on('popupclose', function(e) {
popped = false;
});
map.on('overlayadd', function(e) {
tidy up zoom levels for most maps, and make sure lines and areas work, and fixup css
2016-06-06 01:37:17 +08:00
if (typeof overlays[e.name].bringToFront === "function") {
overlays[e.name].bringToFront();
}
initial commit
2016-04-01 18:31:07 +08:00
if (e.name == "satellite") {
overlays["satellite"].bringToBack();
}
if (e.name == "heatmap") { // show heatmap button when it's layer is added.
//document.getElementById("heat").style.display = 'block';
clrHeat.addTo(map);
}
if (e.name == "day/night") {
//console.log("add daynight");
layers["_daynight"].addLayer(L.terminator());
}
if (e.name == "drawing") {
map.addControl(drawControl);
overlays["drawing"].bringToBack();
}
//else { console.log("layer add :",e.name); }
Use socket.io for Worldmap Major bump to 1.0.0
2016-05-19 06:26:08 +08:00
ws.emit("worldmap",{action:"addlayer", name:e.name});
initial commit
2016-04-01 18:31:07 +08:00
});
map.on('overlayremove', function(e) {
if (e.name == "heatmap") { // hide heatmap button when it's layer is removed.
//document.getElementById("heat").style.display = 'none';
clrHeat.removeFrom(map);
}
if (e.name == "day/night") {
//console.log("del daynight");
layers["_daynight"].clearLayers();
}
if (e.name == "drawing") {
map.removeControl(drawControl);
}
//else console.log("layer del :",e.name);
Much more reliable socket.io handling and reconnections
2016-06-02 06:40:38 +08:00
ws.emit("worldmap",{action:"dellayer", name:e.name});
initial commit
2016-04-01 18:31:07 +08:00
});
map.on('baselayerchange', function(e) {
//console.log("base layer now :",e.name);
baselayername = e.name;
Better doc for events, and allow add overlay map. fix fullscreen bug (spelling)
2016-06-02 00:19:04 +08:00
ws.emit("worldmap",{action:"layer", name:e.name});
initial commit
2016-04-01 18:31:07 +08:00
});
Fix web socket connect/disconnect
2016-06-27 18:55:30 +08:00
function showMapCurrentZoom() {
console.log("ZOOM:",map.getZoom(),". CLUSTER:",clusterAt);
for (var l in layers) {
if (layers[l].hasOwnProperty("_zoom")) {
if (map.getZoom() >= clusterAt) {
layers[l].disableClustering();
}
else {
layers[l].enableClustering();
}
}
}
initial commit
2016-04-01 18:31:07 +08:00
setTimeout( function() {
for (var key in markers) {
if (polygons[key]) {
var vis = layers[markers[key].lay].getVisibleParent(markers[key]);
if ((vis) && (vis.hasOwnProperty("lay"))) {
polygons[key].setStyle({opacity:1});
}
else {
polygons[key].setStyle({opacity:0});
}
polygons[key].redraw();
}
}
},750);
Fix web socket connect/disconnect
2016-06-27 18:55:30 +08:00
}
map.on('zoomend', function() {
showMapCurrentZoom();
initial commit
2016-04-01 18:31:07 +08:00
});
//map.on('contextmenu', function(e) {
Use socket.io for Worldmap Major bump to 1.0.0
2016-05-19 06:26:08 +08:00
// ws.emit("worldmap",{action:"rightclick", lat:e.latlng.lat.toFixed(5), lon:e.latlng.lng.toFixed(5)});
initial commit
2016-04-01 18:31:07 +08:00
//});
var rightmenuMap = L.popup().setContent("<input type='text' id='rinput' onkeydown='if (event.keyCode == 13) addThing();' placeholder='name (,icon, layer)'/>");
var rclk;
var addThing = function() {
var thing = document.getElementById('rinput').value;
console.log(thing);
Use socket.io for Worldmap Major bump to 1.0.0
2016-05-19 06:26:08 +08:00
ws.emit("worldmap",{action:"point", lat:rclk.lat.toFixed(5), lon:rclk.lng.toFixed(5), point:thing});
initial commit
2016-04-01 18:31:07 +08:00
map.closePopup();
var bits = thing.split(",");
var lay = (bits[2] || "drawing").trim();
var icon = (bits[1] || "circle").trim();
var d = {name:bits[0].trim(),layer:lay,icon:icon,lat:rclk.lat,lon:rclk.lng};
setMarker(d);
map.addLayer(layers[lay]);
}
// allow double right click to zoom out
update mavrkercluster, and add to options
2016-06-15 19:57:31 +08:00
// single right click opens a message window that sends to the socket.
initial commit
2016-04-01 18:31:07 +08:00
var rclicked = false;
var rtout = null;
map.on('contextmenu', function(e) {
if (rclicked) {
rclicked = false;
clearTimeout(rtout);
map.zoomOut();
}
else {
rclicked = true;
rtout = setTimeout( function() {
rclicked = false;
rclk = e.latlng;
rightmenuMap.setLatLng(e.latlng);
map.openPopup(rightmenuMap);
setTimeout( function() {
document.getElementById('rinput').focus();
}, 200);
}, 300);
}
});
function onLocationFound(e) {
tidy up zoom levels for most maps, and make sure lines and areas work, and fixup css
2016-06-06 01:37:17 +08:00
var radius = e.accuracy;
initial commit
2016-04-01 18:31:07 +08:00
//L.marker(e.latlng).addTo(map).bindPopup("You are within " + radius + " meters from this point").openPopup();
update mavrkercluster, and add to options
2016-06-15 19:57:31 +08:00
L.circle(e.latlng, radius, {color:"cyan", weight:4, opacity:0.8, fill:false, clickable:false}).addTo(map);
if (e.hasOwnProperty("heading")) {
var lengthAsDegrees = e.speed * 60 / 110540;
var ya = e.latlng.lat + Math.sin((90-e.heading)/180*Math.PI)*lengthAsDegrees*Math.cos(e.latlng.lng/180*Math.PI);
var xa = e.latlng.lng + Math.cos((90-e.heading)/180*Math.PI)*lengthAsDegrees;
var lla = new L.LatLng(ya,xa);
L.polygon([ e.latlng, lla ], {color:"cyan", weight:3, opacity:0.8, clickable:false}).addTo(map);
}
ws.emit("worldmap",{action:"point", lat:e.latlng.lat.toFixed(5), lon:e.latlng.lng.toFixed(5), point:"self", bearing:e.heading, speed:(e.speed*3.6 || undefined)});
initial commit
2016-04-01 18:31:07 +08:00
}
function onLocationError(e) { console.log(e.message); }
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
update mavrkercluster, and add to options
2016-06-15 19:57:31 +08:00
initial commit
2016-04-01 18:31:07 +08:00
// Add all the base layer maps
// Use this for OSM online maps
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
//var osmUrl='http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
tidy up zoom levels for most maps, and make sure lines and areas work, and fixup css
2016-06-06 01:37:17 +08:00
var osmg = new L.TileLayer.Grayscale(osmUrl, {attribution:osmAttrib});
initial commit
2016-04-01 18:31:07 +08:00
basemaps["OSM grey"] = osmg;
tidy up zoom levels for most maps, and make sure lines and areas work, and fixup css
2016-06-06 01:37:17 +08:00
var osm = new L.TileLayer(osmUrl, {attribution:osmAttrib});
initial commit
2016-04-01 18:31:07 +08:00
basemaps["OSM"] = osm;
// Extra Leaflet map layers from http://leaflet-extras.github.io/leaflet-providers/preview/
var Esri_WorldStreetMap = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
Add embedded example
2016-11-22 16:21:56 +08:00
attribution: 'Tiles &copy; Esri'
initial commit
2016-04-01 18:31:07 +08:00
});
basemaps["Esri"] = Esri_WorldStreetMap;
var Esri_WorldImagery = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
Add embedded example
2016-11-22 16:21:56 +08:00
attribution: 'Tiles &copy; Esri'
initial commit
2016-04-01 18:31:07 +08:00
});
Better doc for events, and allow add overlay map. fix fullscreen bug (spelling)
2016-06-02 00:19:04 +08:00
basemaps["Esri Satellite"] = Esri_WorldImagery;
initial commit
2016-04-01 18:31:07 +08:00
var Esri_WorldShadedRelief = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}', {
Add embedded example
2016-11-22 16:21:56 +08:00
attribution: 'Tiles &copy; Esri',
tidy up zoom levels for most maps, and make sure lines and areas work, and fixup css
2016-06-06 01:37:17 +08:00
maxNativeZoom: 13
initial commit
2016-04-01 18:31:07 +08:00
});
basemaps["Esri Terrain"] = Esri_WorldShadedRelief;
var Esri_OceanBasemap = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}', {
Add embedded example
2016-11-22 16:21:56 +08:00
attribution: 'Tiles &copy; Esri',
tidy up zoom levels for most maps, and make sure lines and areas work, and fixup css
2016-06-06 01:37:17 +08:00
maxNativeZoom: 10
initial commit
2016-04-01 18:31:07 +08:00
});
basemaps["Esri Ocean"] = Esri_OceanBasemap;
var OpenMapSurfer_Roads = L.tileLayer('http://korona.geog.uni-heidelberg.de/tiles/roads/x={x}&y={y}&z={z}', {
tidy up zoom levels for most maps, and make sure lines and areas work, and fixup css
2016-06-06 01:37:17 +08:00
maxZoom: 18,
Add embedded example
2016-11-22 16:21:56 +08:00
attribution: 'Imagery from <a href="http://giscience.uni-hd.de/">University of Heidelberg</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
initial commit
2016-04-01 18:31:07 +08:00
});
basemaps["Mapsurfer"] = OpenMapSurfer_Roads;
remove Mapquest map type
2016-07-24 18:57:22 +08:00
// var MapQuestOpen_OSM = L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/{type}/{z}/{x}/{y}.{ext}', {
// type: 'map',
// ext: 'jpg',
// attribution: 'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
// subdomains: '1234',
// maxNativeZoom: 17
// });
//basemaps["MapQuest OSM"] = MapQuestOpen_OSM;
initial commit
2016-04-01 18:31:07 +08:00
var Esri_NatGeoWorldMap = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', {
Add embedded example
2016-11-22 16:21:56 +08:00
attribution: 'Tiles &copy; Esri',
tidy up zoom levels for most maps, and make sure lines and areas work, and fixup css
2016-06-06 01:37:17 +08:00
maxNativeZoom: 12
initial commit
2016-04-01 18:31:07 +08:00
});
basemaps["Nat Geo"] = Esri_NatGeoWorldMap;
var NLS_OS_opendata = L.tileLayer('http://geo.nls.uk/maps/opendata/{z}/{x}/{y}.png', {
attribution: '<a href="http://geo.nls.uk/maps/">National Library of Scotland Historic Maps</a>',
bounds: [[49.6, -12], [61.7, 3]],
minZoom: 1,
tidy up zoom levels for most maps, and make sure lines and areas work, and fixup css
2016-06-06 01:37:17 +08:00
maxNativeZoom: 16,
initial commit
2016-04-01 18:31:07 +08:00
subdomains: '0123'
});
basemaps["UK OS Opendata"] = NLS_OS_opendata;
let map sit in an iframe... (you know where this is headed :-)
2016-05-27 05:12:56 +08:00
var NLS_OS_1919_1947 = L.tileLayer( 'http://nls-{s}.tileserver.com/nls/{z}/{x}/{y}.jpg', {
Add embedded example
2016-11-22 16:21:56 +08:00
attribution: 'Historical Maps Layer, from <a href="http://maps.nls.uk/projects/api/">NLS Maps</a>',
let map sit in an iframe... (you know where this is headed :-)
2016-05-27 05:12:56 +08:00
bounds: [[49.6, -12], [61.7, 3]],
minZoom: 1,
maxZoom: 18,
subdomains: '0123'
});
basemaps["UK OS 1919-47"] = NLS_OS_1919_1947;
initial commit
2016-04-01 18:31:07 +08:00
//var NLS_OS_1900 = L.tileLayer('http://nls-{s}.tileserver.com/NLS_API/{z}/{x}/{y}.jpg', {
Use socket.io for Worldmap Major bump to 1.0.0
2016-05-19 06:26:08 +08:00
//attribution: '<a href="http://geo.nls.uk/maps/">National Library of Scotland Historic Maps</a>',
//bounds: [[49.6, -12], [61.7, 3]],
//minZoom: 1,
//maxZoom: 18,
//subdomains: '0123'
initial commit
2016-04-01 18:31:07 +08:00
//});
//basemaps["UK OS 1900"] = NLS_OS_1900;
remove Mapquest map type
2016-07-24 18:57:22 +08:00
//var CartoPos = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
// attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
//});
initial commit
2016-04-01 18:31:07 +08:00
//basemaps["CartoDB Light"] = CartoPos;
slight css change and small tweaks
2016-05-08 18:07:09 +08:00
// Terrain map of US only
initial commit
2016-04-01 18:31:07 +08:00
var usterrainmap = new L.StamenTileLayer('terrain');
basemaps["US terrain"] = usterrainmap;
let map sit in an iframe... (you know where this is headed :-)
2016-05-27 05:12:56 +08:00
// Nice watercolour based maps by Stamen Design
var watermap = new L.StamenTileLayer('watercolor');
basemaps["Watercolor"] = watermap;
initial commit
2016-04-01 18:31:07 +08:00
// Now add the overlays
// Add the day/night overlay
layers["_daynight"] = new L.LayerGroup();
overlays["day/night"] = layers["_daynight"];
// Add the heatmap layer
var heat = L.heatLayer([], {radius:60, gradient:{0.2:'blue', 0.4:'lime', 0.6:'red', 0.8:'yellow', 1:'white'}});
layers["heat"] = new L.LayerGroup().addLayer(heat);
overlays["heatmap"] = layers["heat"];
Add heatmap options to control message options to close #10
2017-03-04 22:13:05 +08:00
console.log("HEAT",heat);
initial commit
2016-04-01 18:31:07 +08:00
// Add the drawing layer for fun...
layers["drawing"] = new L.FeatureGroup();
overlays["drawing"] = layers["drawing"];
var drawControl = new L.Control.Draw({
draw: {
polyline: { shapeOptions: { clickable:false } },
marker: false,
circle: false,
//circle: { shapeOptions: { clickable:false } },
rectangle: { shapeOptions: { clickable:true } },
polygon: { shapeOptions: { clickable:true } },
},
edit: {
featureGroup: layers["drawing"],
remove: true,
edit: false
}
});
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()));
Use socket.io for Worldmap Major bump to 1.0.0
2016-05-19 06:26:08 +08:00
ws.emit("worldmap",{action:"draw",type:type, points:layer._latlngs});
initial commit
2016-04-01 18:31:07 +08:00
layers["drawing"].addLayer(layer);
});
// Add the roads overlay
overlays["roads"] = L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/{type}/{z}/{x}/{y}.{ext}', {
type: 'hyb',
ext: 'png',
Add embedded example
2016-11-22 16:21:56 +08:00
attribution: '<a href="http://www.mapquest.com/">MapQuest</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
initial commit
2016-04-01 18:31:07 +08:00
subdomains: '1234',
opacity: 0.9
});
overlays["rain"] = L.tileLayer('http://{s}.tile.openweathermap.org/map/rain/{z}/{x}/{y}.png', {
tidy up zoom levels for most maps, and make sure lines and areas work, and fixup css
2016-06-06 01:37:17 +08:00
maxZoom: 18,
initial commit
2016-04-01 18:31:07 +08:00
attribution: 'Map data &copy; <a href="http://openweathermap.org">OpenWeatherMap</a>',
opacity: 0.5
});
overlays["pressure"] = L.tileLayer('http://{s}.tile.openweathermap.org/map/pressure_cntr/{z}/{x}/{y}.png', {
tidy up zoom levels for most maps, and make sure lines and areas work, and fixup css
2016-06-06 01:37:17 +08:00
maxZoom: 18,
initial commit
2016-04-01 18:31:07 +08:00
attribution: 'Map data &copy; <a href="http://openweathermap.org">OpenWeatherMap</a>',
opacity: 0.5
});
overlays["weather"] = L.OWM.current({interval:30, minZoom:8, appId:"9ae11d4f6f9bed61f32fc061f715cc71"});
Add 3d buildings layer
2016-10-19 05:37:07 +08:00
overlays["buildings"] = new OSMBuildings(map).load();
map.removeLayer(overlays["buildings"]);
initial commit
2016-04-01 18:31:07 +08:00
// Add the shipping navigation markers
slight css change and small tweaks
2016-05-08 18:07:09 +08:00
//var OpenSeaMap = L.tileLayer('http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {
// attribution: 'Map data: &copy; <a href="http://www.openseamap.org">OpenSeaMap</a> contributors'
//});
initial commit
2016-04-01 18:31:07 +08:00
//overlays["ship nav"] = OpenSeaMap;
if ( window.localStorage.hasOwnProperty("lastlayer") ) {
if ( basemaps[window.localStorage.getItem("lastlayer")] ) {
baselayername = window.localStorage.getItem("lastlayer");
}
}
basemaps[baselayername].addTo(map);
// Add the layers control widget
Add embedded example
2016-11-22 16:21:56 +08:00
if (!inIframe) {
var layercontrol = L.control.layers(basemaps, overlays).addTo(map);
}
initial commit
2016-04-01 18:31:07 +08:00
// Layer control based on select box rather than radio buttons.
//var layercontrol = L.control.selectLayers(basemaps, overlays).addTo(map);
// Delete a marker (and notify websocket)
var delMarker = function(dname) {
//console.log("Deleting",dname);
if (typeof polygons[dname] != "undefined") {
layers[markers[dname].lay].removeLayer(polygons[dname]);
delete polygons[dname];
}
if (typeof markers[dname] != "undefined") {
var d = {name:dname,type:"DELETE",lat:markers[dname]._latlng.lat,lon:markers[dname]._latlng.lng};
Use socket.io for Worldmap Major bump to 1.0.0
2016-05-19 06:26:08 +08:00
ws.emit("worldmap",{action:"delete", name:dname});
initial commit
2016-04-01 18:31:07 +08:00
layers[markers[dname].lay].removeLayer(markers[dname]);
delete markers[dname];
}
map.closePopup();
}
// the MAIN add something to map function
function setMarker(data) {
Addition of msg.payload.addtoheatmap and msg.payload.int/intensity Addition of msg.payload.addtoheatmap and msg.payload.int/intensity. To summarize. added msg.payload.addtoheatmap. This defaults to true so you need to explicitly set it to false if you dont want that point to contribute to the heatmap. Done to make this change non breaking for other users. added msg.payload.int or msg.payload.intensity (read notes below for when to use which one). This sets the intensity of the point you contribute to the heatmap. If you leave the heatmap max parameter at the default of 1 it will work with values of 0.1 - 1. if this parameter doesn't exist the current behavior as it stands today is applied. Notes there is a bug in leaflet-heat at the moment that if you change max parameter the intensity value doesn't work correctly (screws up when you zoom in and out). suggest leaving at default of 1 and scaling int/intensity between 0.1 - 1. Looking through your code you have a few different formats that a positi
2017-03-18 17:20:53 +08:00
//console.log(typeof data, data);
initial commit
2016-04-01 18:31:07 +08:00
var ll;
Addition of msg.payload.addtoheatmap and msg.payload.int/intensity Addition of msg.payload.addtoheatmap and msg.payload.int/intensity. To summarize. added msg.payload.addtoheatmap. This defaults to true so you need to explicitly set it to false if you dont want that point to contribute to the heatmap. Done to make this change non breaking for other users. added msg.payload.int or msg.payload.intensity (read notes below for when to use which one). This sets the intensity of the point you contribute to the heatmap. If you leave the heatmap max parameter at the default of 1 it will work with values of 0.1 - 1. if this parameter doesn't exist the current behavior as it stands today is applied. Notes there is a bug in leaflet-heat at the moment that if you change max parameter the intensity value doesn't work correctly (screws up when you zoom in and out). suggest leaving at default of 1 and scaling int/intensity between 0.1 - 1. Looking through your code you have a few different formats that a positi
2017-03-18 17:20:53 +08:00
var lli = null;
initial commit
2016-04-01 18:31:07 +08:00
var stay = popped;
var lay = data.layer || "not known";
if (typeof layers[lay] == "undefined") { // add layer if if doesn't exist
//layers[lay] = new L.LayerGroup().addTo(map);
Fix web socket connect/disconnect
2016-06-27 18:55:30 +08:00
layers[lay] = new L.MarkerClusterGroup({
maxClusterRadius:50,
spiderfyDistanceMultiplier:1.8,
disableClusteringAtZoom:clusterAt,
//zoomToBoundsOnClick:false
}).addTo(map);
initial commit
2016-04-01 18:31:07 +08:00
overlays[lay] = layers[lay];
Add embedded example
2016-11-22 16:21:56 +08:00
if (!inIframe) {
layercontrol.addOverlay(layers[lay],lay);
}
initial commit
2016-04-01 18:31:07 +08:00
}
if (typeof markers[data.name] != "undefined") { layers[lay].removeLayer(markers[data.name]); }
if (typeof polygons[data.name] != "undefined") { layers[lay].removeLayer(polygons[data.name]); }
if (data.deleted) { // remove markers we are told to
delMarker(data.name);
}
tidy up zoom levels for most maps, and make sure lines and areas work, and fixup css
2016-06-06 01:37:17 +08:00
else if (data.hasOwnProperty("line") && Array.isArray(data.line)) {
initial commit
2016-04-01 18:31:07 +08:00
var col = data.iconColor || "#910000";
tidy up zoom levels for most maps, and make sure lines and areas work, and fixup css
2016-06-06 01:37:17 +08:00
var polyln = L.polyline(data.line, {stroke:true, weight:3, color:col, opacity:0.8, clickable:false});
polygons[data.name] = polyln;
layers[lay].addLayer(polyln);
}
else if (data.hasOwnProperty("area") && Array.isArray(data.area)) {
var cola = data.iconColor || "#910000";
var polyarea = L.polygon(data.area, {stroke:true, weight:2, color:cola, fillColor:cola, fillOpacity:0.2, clickable:false});
polygons[data.name] = polyarea;
layers[lay].addLayer(polyarea);
initial commit
2016-04-01 18:31:07 +08:00
}
slight css change and small tweaks
2016-05-08 18:07:09 +08:00
else if (data.hasOwnProperty("sdlat") && data.hasOwnProperty("sdlon")) {
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, {color:(data.iconColor || "blue"), weight:2} );
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;
layers[lay].addLayer(ellipse);
}
initial commit
2016-04-01 18:31:07 +08:00
else {
let you specify both point(icon) and radius to Close #8 and update fa-icons to 4.7.0
2016-11-14 04:27:12 +08:00
if (data.hasOwnProperty("radius")) {
if (data.hasOwnProperty("lat") && data.hasOwnProperty("lon")) {
var colac = data.iconColor || "#910000";
var polycirc = L.circle(new L.LatLng((data.lat*1), (data.lon*1)), data.radius*1, {stroke:true, weight:2, color:colac, fillColor:colac, fillOpacity:0.2, clickable:false});
polygons[data.name] = polycirc;
layers[lay].addLayer(polycirc);
}
}
initial commit
2016-04-01 18:31:07 +08:00
//console.log("handling",data.name);
if (typeof data.coordinates == "object") { ll = new L.LatLng(data.coordinates[1],data.coordinates[0]); }
update mavrkercluster, and add to options
2016-06-15 19:57:31 +08:00
else if (data.hasOwnProperty("lat") && data.hasOwnProperty("lon")) { ll = new L.LatLng((data.lat*1), (data.lon*1)); }
else if (data.hasOwnProperty("latitude") && data.hasOwnProperty("longitude")) { ll = new L.LatLng((data.latitude*1), (data.longitude*1)); }
else { console.log("No location:",data); return; }
Addition of msg.payload.addtoheatmap and msg.payload.int/intensity Addition of msg.payload.addtoheatmap and msg.payload.int/intensity. To summarize. added msg.payload.addtoheatmap. This defaults to true so you need to explicitly set it to false if you dont want that point to contribute to the heatmap. Done to make this change non breaking for other users. added msg.payload.int or msg.payload.intensity (read notes below for when to use which one). This sets the intensity of the point you contribute to the heatmap. If you leave the heatmap max parameter at the default of 1 it will work with values of 0.1 - 1. if this parameter doesn't exist the current behavior as it stands today is applied. Notes there is a bug in leaflet-heat at the moment that if you change max parameter the intensity value doesn't work correctly (screws up when you zoom in and out). suggest leaving at default of 1 and scaling int/intensity between 0.1 - 1. Looking through your code you have a few different formats that a positi
2017-03-18 17:20:53 +08:00
// Adding new L.LatLng object (lli) when optional intensity value is defined. Only for use in heatmap layer
if (typeof data.coordinates == "object") { lli = new L.LatLng(data.coordinates[2],data.coordinates[1],data.coordinates[0]); }
addition of msg.payload.addtoheatmap and msg.payload.intensity Removed msg.payload.int Now just use msg.payload.intensity regardless if position is lat & lon OR latitude & longitude
2017-03-18 17:50:26 +08:00
else if (data.hasOwnProperty("lat") && data.hasOwnProperty("lon") && data.hasOwnProperty("intensity")) { lli = new L.LatLng((data.lat*1), (data.lon*1), (data.intensity*1)); }
Addition of msg.payload.addtoheatmap and msg.payload.int/intensity Addition of msg.payload.addtoheatmap and msg.payload.int/intensity. To summarize. added msg.payload.addtoheatmap. This defaults to true so you need to explicitly set it to false if you dont want that point to contribute to the heatmap. Done to make this change non breaking for other users. added msg.payload.int or msg.payload.intensity (read notes below for when to use which one). This sets the intensity of the point you contribute to the heatmap. If you leave the heatmap max parameter at the default of 1 it will work with values of 0.1 - 1. if this parameter doesn't exist the current behavior as it stands today is applied. Notes there is a bug in leaflet-heat at the moment that if you change max parameter the intensity value doesn't work correctly (screws up when you zoom in and out). suggest leaving at default of 1 and scaling int/intensity between 0.1 - 1. Looking through your code you have a few different formats that a positi
2017-03-18 17:20:53 +08:00
else if (data.hasOwnProperty("latitude") && data.hasOwnProperty("longitude") && data.hasOwnProperty("intensity")) { lli = new L.LatLng((data.latitude*1), (data.longitude*1), (data.intensity*1)); }
else { lli = ll }
initial commit
2016-04-01 18:31:07 +08:00
var words="<b>"+data.name+"</b><br/>";
// Create the icons... handle ship, earthquake as specials
Use socket.io for Worldmap Major bump to 1.0.0
2016-05-19 06:26:08 +08:00
var marker, mymarker;
var icon, q;
initial commit
2016-04-01 18:31:07 +08:00
if (data.icon === "ship") {
marker = L.boatMarker(ll, {
title: data.name,
color: (data.iconColor || "blue")
});
marker.setHeading(data.bearing);
Use socket.io for Worldmap Major bump to 1.0.0
2016-05-19 06:26:08 +08:00
q = 'http://www.bing.com/images/search?q='+data.icon+'%20%2B"'+encodeURIComponent(data.name)+'"';
initial commit
2016-04-01 18:31:07 +08:00
words += '<a href=\''+q+'\' target="_thingpic">Pictures</a><br>';
}
else if (data.icon === "plane") {
data.iconColor = data.iconColor || "black";
if (data.hasOwnProperty("squawk")) { data.iconColor = "red"; }
Use socket.io for Worldmap Major bump to 1.0.0
2016-05-19 06:26:08 +08:00
icon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="310px" height="310px" viewBox="0 0 310 310" >';
initial commit
2016-04-01 18:31:07 +08:00
icon += '<g><path d="M134.875,19.74c0.04-22.771,34.363-22.771,34.34,0.642v95.563L303,196.354v35.306l-133.144-43.821v71.424l30.813,24.072v27.923l-47.501-14.764l-47.501,14.764v-27.923l30.491-24.072v-71.424L3,231.66v-35.306l131.875-80.409V19.74z" fill="'+data.iconColor+'"/></g></svg>';
var svgplane = "data:image/svg+xml;base64," + btoa(icon);
Use socket.io for Worldmap Major bump to 1.0.0
2016-05-19 06:26:08 +08:00
myMarker = L.divIcon({
initial commit
2016-04-01 18:31:07 +08:00
className:"planeicon",
iconAnchor: [15, 15],
html:'<img src="'+svgplane+'" style="width:31px; height:30px; -webkit-transform:rotate('+data.bearing+'deg); -moz-transform:rotate('+data.bearing+'deg);" />',
});
marker = L.marker(ll, {title: data.name, icon: myMarker});
Use socket.io for Worldmap Major bump to 1.0.0
2016-05-19 06:26:08 +08:00
q = 'http://www.bing.com/images/search?q='+data.icon+'%20'+encodeURIComponent(data.name);
initial commit
2016-04-01 18:31:07 +08:00
words += '<a href=\''+q+'\' target="_thingpic">Pictures</a><br>';
}
Add car sag icon
2016-04-18 23:57:31 +08:00
else if (data.icon === "car") {
data.iconColor = data.iconColor || "black";
Use socket.io for Worldmap Major bump to 1.0.0
2016-05-19 06:26:08 +08:00
icon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="47px" height="47px" viewBox="0 0 47.032 47.032">';
Add car sag icon
2016-04-18 23:57:31 +08:00
icon += '<g><path d="M29.395,0H17.636c-3.117,0-5.643,3.467-5.643,6.584v34.804c0,3.116,2.526,5.644,5.643,5.644h11.759 c3.116,0,5.644-2.527,5.644-5.644V6.584C35.037,3.467,32.511,0,29.395,0z M34.05,14.188v11.665l-2.729,0.351v-4.806L34.05,14.188z M32.618,10.773c-1.016,3.9-2.219,8.51-2.219,8.51H16.631l-2.222-8.51C14.41,10.773,23.293,7.755,32.618,10.773z M15.741,21.713 v4.492l-2.73-0.349V14.502L15.741,21.713z M13.011,37.938V27.579l2.73,0.343v8.196L13.011,37.938z M14.568,40.882l2.218-3.336 h13.771l2.219,3.336H14.568z M31.321,35.805v-7.872l2.729-0.355v10.048L31.321,35.805z" fill="'+data.iconColor+'"/></g></svg>';
var svgcar = "data:image/svg+xml;base64," + btoa(icon);
Use socket.io for Worldmap Major bump to 1.0.0
2016-05-19 06:26:08 +08:00
myMarker = L.divIcon({
Add car sag icon
2016-04-18 23:57:31 +08:00
className:"caricon",
iconAnchor: [15, 15],
html:'<img src="'+svgcar+'" style="width:31px; height:30px; -webkit-transform:rotate('+data.bearing+'deg); -moz-transform:rotate('+data.bearing+'deg);" />',
});
marker = L.marker(ll, {title: data.name, icon: myMarker});
}
add location marker type
2016-06-03 16:11:48 +08:00
else if (data.icon === "locate") {
data.iconColor = data.iconColor || "cyan";
icon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="468px" height="468px" viewBox="0 0 468 468">';
icon += '<polygon points="32 32 104 32 104 0 0 0 0 104 32 104" fill="'+data.iconColor+'"/>';
icon += '<polygon points="468 0 364 0 364 32 436 32 436 104 468 104" fill="'+data.iconColor+'"/>';
icon += '<polygon points="0 468 104 468 104 436 32 436 32 364 0 364" fill="'+data.iconColor+'"/>';
icon += '<polygon points="436 436 364 436 364 468 468 468 468 364 436 364" fill="'+data.iconColor+'"/>';
//icon += '<circle cx="234" cy="234" r="22" fill="'+data.iconColor+'"/>';
icon += '</svg>';
var svglocate = "data:image/svg+xml;base64," + btoa(icon);
myMarker = L.divIcon({
className:"locateicon",
iconAnchor: [16, 16],
html:'<img src="'+svglocate+'" style="width:32px; height:32px;"/>',
});
marker = L.marker(ll, {title:data.name, icon:myMarker});
}
initial commit
2016-04-01 18:31:07 +08:00
else if (data.icon === "friend") {
marker = L.marker(ll, { icon: L.divIcon({ className: 'circle f', iconSize: [20, 12] }), title: data.name });
}
else if (data.icon === "hostile") {
marker = L.marker(ll, { icon: L.divIcon({ className: 'circle h', iconSize: [16, 16] }), title: data.name });
}
else if (data.icon === "neutral") {
marker = L.marker(ll, { icon: L.divIcon({ className: 'circle n', iconSize: [16, 16] }), title: data.name });
}
else if (data.icon === "unknown") {
marker = L.marker(ll, { icon: L.divIcon({ className: 'circle', iconSize: [16, 16] }), title: data.name });
}
else if (data.icon === "danger") {
console.log("danger will robinson");
marker = L.marker(ll, { icon: L.divIcon({ className: 'up-triangle' }), title: data.name });
}
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 });
}
else {
Use socket.io for Worldmap Major bump to 1.0.0
2016-05-19 06:26:08 +08:00
myMarker = L.VectorMarkers.icon({
initial commit
2016-04-01 18:31:07 +08:00
icon: data.icon || "circle",
markerColor: (data.iconColor || "#910000"),
prefix: 'fa',
iconColor: 'white'
});
let you specify both point(icon) and radius to Close #8 and update fa-icons to 4.7.0
2016-11-14 04:27:12 +08:00
marker = L.marker(ll, {title:data.name, icon:myMarker});
initial commit
2016-04-01 18:31:07 +08:00
}
// remove icon from list of properties, then add all others to popup
let you specify both point(icon) and radius to Close #8 and update fa-icons to 4.7.0
2016-11-14 04:27:12 +08:00
if (data.hasOwnProperty("icon") || (!data.hasOwnProperty("radius"))) {
if (data.hasOwnProperty("icon")) { delete data.icon; }
if (data.hasOwnProperty("iconColor")) { delete data.iconColor; }
for (var i in data) {
if (i != "name") {
if (typeof data[i] === "object") {
words += i +" : "+JSON.stringify(data[i])+"<br/>";
} else {
words += i +" : "+data[i]+"<br/>";
}
initial commit
2016-04-01 18:31:07 +08:00
}
}
let you specify both point(icon) and radius to Close #8 and update fa-icons to 4.7.0
2016-11-14 04:27:12 +08:00
if (data.hasOwnProperty("photourl")) {
words += "<img src=\"" + data.photourl + "\" style=\"width:100%; margin-top:10px;\">";
}
if (data.hasOwnProperty("photoUrl")) {
words += "<img src=\"" + data.photoUrl + "\" style=\"width:100%; margin-top:10px;\">";
}
marker.bindPopup(words);
marker._popup.dname = data.name;
marker.ts = parseInt(Date.now()/1000); // save time we got this marker
marker.lay = lay; // and the layer it is on
var rightmenuMarker = L.popup().setContent("<b>"+data.name+"</b><br/><button onclick='delMarker(\""+data.name+"\");'>Delete</button>");
marker.on('contextmenu', function(e) {
rightmenuMarker.setLatLng(e.latlng);
map.openPopup(rightmenuMarker);
});
Addition of msg.payload.addtoheatmap and msg.payload.int/intensity Addition of msg.payload.addtoheatmap and msg.payload.int/intensity. To summarize. added msg.payload.addtoheatmap. This defaults to true so you need to explicitly set it to false if you dont want that point to contribute to the heatmap. Done to make this change non breaking for other users. added msg.payload.int or msg.payload.intensity (read notes below for when to use which one). This sets the intensity of the point you contribute to the heatmap. If you leave the heatmap max parameter at the default of 1 it will work with values of 0.1 - 1. if this parameter doesn't exist the current behavior as it stands today is applied. Notes there is a bug in leaflet-heat at the moment that if you change max parameter the intensity value doesn't work correctly (screws up when you zoom in and out). suggest leaving at default of 1 and scaling int/intensity between 0.1 - 1. Looking through your code you have a few different formats that a positi
2017-03-18 17:20:53 +08:00
if ((data.addtoheatmap !== "false") || (!data.hasOwnProperty("addtoheatmap"))){ // Added to give ability to control if points from active layer contribute to heatmap
if (heatAll || map.hasLayer(layers[lay])) { heat.addLatLng(lli); }
}
let you specify both point(icon) and radius to Close #8 and update fa-icons to 4.7.0
2016-11-14 04:27:12 +08:00
markers[data.name] = marker;
layers[lay].addLayer(marker);
}
initial commit
2016-04-01 18:31:07 +08:00
popped = stay;
if (popped) {
if (popid == data.name) { marker.openPopup(); }
else { popmark.openPopup(); }
}
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 = data.speed * 50; } // and a speed
if (data.length != null) {
if (polygons[data.name] != null) { map.removeLayer(polygons[data.name]); }
update mavrkercluster, and add to options
2016-06-15 19:57:31 +08:00
var x = ll.lng; // X coordinate
var y = ll.lat * 1; // Y coordinate
var ll1 = ll;
initial commit
2016-04-01 18:31:07 +08:00
var angle = data.bearing * 1;
var lengthAsDegrees = data.length / 110540; // metres in a degree..ish
var polygon = null;
if (data.accuracy != null) {
data.accuracy = Number(data.accuracy);
var y2 = y + Math.sin((90-angle+data.accuracy)/180*Math.PI)*lengthAsDegrees*Math.cos(y/180*Math.PI);
var x2 = x + Math.cos((90-angle+data.accuracy)/180*Math.PI)*lengthAsDegrees;
var ll2 = new L.LatLng(y2,x2);
var y3 = y + Math.sin((90-angle-data.accuracy)/180*Math.PI)*lengthAsDegrees*Math.cos(y/180*Math.PI);
var x3 = x + Math.cos((90-angle-data.accuracy)/180*Math.PI)*lengthAsDegrees;
var ll3 = new L.LatLng(y3,x3);
tidy up zoom levels for most maps, and make sure lines and areas work, and fixup css
2016-06-06 01:37:17 +08:00
polygon = L.polygon([ ll1, ll2, ll3 ], {weight:2, color:'#f30', fillOpacity:0.06, clickable:false});
initial commit
2016-04-01 18:31:07 +08:00
} else {
tidy up zoom levels for most maps, and make sure lines and areas work, and fixup css
2016-06-06 01:37:17 +08:00
var ya = y + Math.sin((90-angle)/180*Math.PI)*lengthAsDegrees*Math.cos(y/180*Math.PI);
var xa = x + Math.cos((90-angle)/180*Math.PI)*lengthAsDegrees;
var lla = new L.LatLng(ya,xa);
polygon = L.polygon([ ll1, lla ], {weight:2, color:'#f30', clickable:false});
initial commit
2016-04-01 18:31:07 +08:00
}
if (typeof layers[lay].getVisibleParent === 'function') {
var vis = layers[lay].getVisibleParent(marker);
if ((polygon !== null) && (vis !== null) && (!vis.hasOwnProperty("lay"))) {
polygon.setStyle({opacity:0});
}
polygons[data.name] = polygon;
layers[lay].addLayer(polygon);
}
}
}
if (panit) {
map.setView(ll,map.getZoom());
}
}
}
function doCommand(cmd) {
Add initial position ability to Worldmap
2016-06-12 19:40:29 +08:00
//console.log("COMMAND",cmd);
// ignore server side initial command if client position already saved.
if (cmd.hasOwnProperty("init") && initialposition) {
return;
}
Add embedded example
2016-11-22 16:21:56 +08:00
if (cmd.hasOwnProperty("panit")) {
if (cmd.panit === "true") { panit = true; }
else { panit = false; }
}
if (cmd.hasOwnProperty("showmenu")) {
if ((cmd.showmenu === "hide") && (showUserMenu === true)) {
showUserMenu = false;
map.removeControl(menuButton);
}
else if ((cmd.showmenu === "show") && (showUserMenu === false)) {
showUserMenu = true;
map.addControl(menuButton);
}
}
Better doc for events, and allow add overlay map. fix fullscreen bug (spelling)
2016-06-02 00:19:04 +08:00
var existsalready = false;
// Add a new base map layer
initial commit
2016-04-01 18:31:07 +08:00
if (cmd.map && cmd.map.hasOwnProperty("name") && cmd.map.hasOwnProperty("url") && cmd.map.hasOwnProperty("opt")) {
Better doc for events, and allow add overlay map. fix fullscreen bug (spelling)
2016-06-02 00:19:04 +08:00
console.log("New map:",cmd.map.name);
if (basemaps.hasOwnProperty(cmd.map.name)) { existsalready = true; }
initial commit
2016-04-01 18:31:07 +08:00
basemaps[cmd.map.name] = L.tileLayer(cmd.map.url, cmd.map.opt);
Better doc for events, and allow add overlay map. fix fullscreen bug (spelling)
2016-06-02 00:19:04 +08:00
if (!existsalready) {
layercontrol.addBaseLayer(basemaps[cmd.map.name],cmd.map.name);
}
}
// Add a new overlay layer
if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("url") && cmd.map.hasOwnProperty("opt")) {
console.log("New overlay:",cmd.map.overlay);
if (overlays.hasOwnProperty(cmd.map.overlay)) { existsalready = true; }
overlays[cmd.map.overlay] = L.tileLayer(cmd.map.url, cmd.map.opt);
if (!existsalready) {
layercontrol.addOverlay(overlays[cmd.map.overlay],cmd.map.overlay);
}
overlays[cmd.map.overlay].addTo(map);
initial commit
2016-04-01 18:31:07 +08:00
}
Better doc for events, and allow add overlay map. fix fullscreen bug (spelling)
2016-06-02 00:19:04 +08:00
// Swap a base layer
initial commit
2016-04-01 18:31:07 +08:00
if (cmd.layer && basemaps.hasOwnProperty(cmd.layer)) {
Better doc for events, and allow add overlay map. fix fullscreen bug (spelling)
2016-06-02 00:19:04 +08:00
map.removeLayer(basemaps[baselayername]);
baselayername = cmd.layer;
basemaps[baselayername].addTo(map);
}
// Add an overlay
if (cmd.layer && overlays.hasOwnProperty(cmd.layer)) {
overlays[cmd.layer].addTo(map);
initial commit
2016-04-01 18:31:07 +08:00
}
var clat = map.getCenter().lat;
var clon = map.getCenter().lng;
var czoom = map.getZoom();
if (cmd.hasOwnProperty("lat")) { clat = cmd.lat; }
if (cmd.hasOwnProperty("lon")) { clon = cmd.lon; }
if (cmd.hasOwnProperty("zoom")) { czoom = cmd.zoom; }
update mavrkercluster, and add to options
2016-06-15 19:57:31 +08:00
if (cmd.hasOwnProperty("cluster")) {
Fix web socket connect/disconnect
2016-06-27 18:55:30 +08:00
clusterAt = cmd.cluster;
// document.getElementById("setclus").value = cmd.cluster;
// setCluster();
update mavrkercluster, and add to options
2016-06-15 19:57:31 +08:00
}
if (cmd.hasOwnProperty("maxage")) {
document.getElementById("maxage").value = cmd.maxage;
setMaxAge();
}
Add heatmap options to control message options to close #10
2017-03-04 22:13:05 +08:00
if (cmd.hasOwnProperty("heatmap")) {
heat.setOptions(cmd.heatmap);
heat.redraw();
}
initial commit
2016-04-01 18:31:07 +08:00
map.setView([clat,clon],czoom);
}
</script>
</body>
</html>
Reference in New Issue Copy Permalink