Fix web socket connect/disconnect
This commit is contained in:
Dave Conway-Jones
parent
7e6aec6558
commit
80fbd59002
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name" : "node-red-contrib-web-worldmap",
|
||||
"version" : "1.0.13",
|
||||
"version" : "1.0.15",
|
||||
"description" : "A Node-RED node to provide a web page of a world map for plotting things on.",
|
||||
"dependencies" : {
|
||||
"express": "4.*",
|
||||
|
||||
53
worldmap.js
53
worldmap.js
@ -17,10 +17,12 @@
|
||||
module.exports = function(RED) {
|
||||
"use strict";
|
||||
var express = require("express");
|
||||
var io = require('socket.io')(RED.server);
|
||||
var io = require('socket.io');
|
||||
var socket;
|
||||
|
||||
var WorldMap = function(n) {
|
||||
RED.nodes.createNode(this,n);
|
||||
if (!socket) { socket = io.listen(RED.server); }
|
||||
this.lat = n.lat || "";
|
||||
this.lon = n.lon || "";
|
||||
this.zoom = n.zoom || "";
|
||||
@ -30,12 +32,14 @@ module.exports = function(RED) {
|
||||
var node = this;
|
||||
//node.log("Serving map from "+__dirname+" as "+RED.settings.httpNodeRoot.slice(0,-1)+"/worldmap");
|
||||
RED.httpNode.use("/worldmap", express.static(__dirname + '/worldmap'));
|
||||
var callback = function(socket) {
|
||||
node.status({fill:"green",shape:"dot",text:"connected "+Object.keys(io.sockets.connected).length});
|
||||
node.on('input', function(msg) {
|
||||
socket.emit("worldmapdata",msg.payload);
|
||||
});
|
||||
socket.on('worldmap', function(data) {
|
||||
|
||||
var callback = function(client) {
|
||||
node.status({fill:"green",shape:"dot",text:"connected "+socket.engine.clientsCount});
|
||||
function handler(msg) {
|
||||
client.emit("worldmapdata",msg.payload);
|
||||
}
|
||||
node.on('input', handler);
|
||||
client.on('worldmap', function(data) {
|
||||
if (data.action === "connected") {
|
||||
var c = {init:true};
|
||||
if (node.lat && node.lat.length > 0) { c.lat = node.lat; }
|
||||
@ -44,45 +48,50 @@ module.exports = function(RED) {
|
||||
if (node.layer && node.layer.length > 0) { c.layer = node.layer; }
|
||||
if (node.cluster && node.cluster.length > 0) { c.cluster = node.cluster; }
|
||||
if (node.maxage && node.maxage.length > 0) { c.maxage = node.maxage; }
|
||||
socket.emit("worldmapdata",{command:c});
|
||||
client.emit("worldmapdata",{command:c});
|
||||
}
|
||||
});
|
||||
socket.on('disconnect', function() {
|
||||
node.status({fill:"green",shape:"ring",text:"connected "+Object.keys(io.sockets.connected).length});
|
||||
client.on('disconnect', function() {
|
||||
node.removeListener("input", handler);
|
||||
node.status({fill:"green",shape:"ring",text:"connected "+socket.engine.clientsCount});
|
||||
});
|
||||
node.on("close", function() {
|
||||
socket.disconnect();
|
||||
client.disconnect(true);
|
||||
});
|
||||
}
|
||||
|
||||
node.on("close", function() {
|
||||
node.status({});
|
||||
io.sockets.removeListener('connection', callback);
|
||||
//socket.close();
|
||||
});
|
||||
io.on('connection', callback );
|
||||
socket.on('connection', callback);
|
||||
}
|
||||
RED.nodes.registerType("worldmap",WorldMap);
|
||||
|
||||
var WorldMapIn = function(n) {
|
||||
RED.nodes.createNode(this,n);
|
||||
if (!socket) { socket = io.listen(RED.server); }
|
||||
var node = this;
|
||||
var callback = function(socket) {
|
||||
node.status({fill:"green",shape:"dot",text:"connected "+Object.keys(io.sockets.connected).length});
|
||||
socket.on('worldmap', function(data) {
|
||||
|
||||
var callback = function(client) {
|
||||
node.status({fill:"green",shape:"dot",text:"connected "+socket.engine.clientsCount});
|
||||
client.on('worldmap', function(data) {
|
||||
node.send({payload:data, topic:"worldmap"});
|
||||
});
|
||||
socket.on('disconnect', function() {
|
||||
node.status({fill:"green",shape:"ring",text:"connected "+Object.keys(io.sockets.connected).length});
|
||||
node.send({payload:{action:"disconnect", clients:Object.keys(io.sockets.connected).length}, topic:"worldmap"});
|
||||
client.on('disconnect', function() {
|
||||
node.status({fill:"green",shape:"ring",text:"connected "+socket.engine.clientsCount});
|
||||
node.send({payload:{action:"disconnect", clients:socket.engine.clientsCount}, topic:"worldmap"});
|
||||
});
|
||||
node.on("close", function() {
|
||||
socket.disconnect();
|
||||
client.disconnect(true);
|
||||
});
|
||||
}
|
||||
|
||||
node.on("close", function() {
|
||||
node.status({});
|
||||
io.sockets.removeListener('connection', callback);
|
||||
//socket.close();
|
||||
});
|
||||
io.on('connection', callback);
|
||||
socket.on('connection', callback);
|
||||
}
|
||||
RED.nodes.registerType("worldmap in",WorldMapIn);
|
||||
}
|
||||
|
||||
@ -38,6 +38,7 @@
|
||||
<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>
|
||||
<script type="text/javascript" src="leaflet/leaflet.markercluster.freezable-src.js"></script>
|
||||
<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>
|
||||
@ -113,7 +114,7 @@ var marks = [];
|
||||
var marksIndex = 0;
|
||||
var popid = "";
|
||||
var menuOpen = false;
|
||||
var clusterAt = 1;
|
||||
var clusterAt = 12;
|
||||
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 = " © IBM 2015,2016"
|
||||
@ -154,10 +155,10 @@ if ( window.localStorage.hasOwnProperty("lastpos") ) {
|
||||
if ( window.localStorage.hasOwnProperty("lastzoom") ) {
|
||||
startzoom = window.localStorage.getItem("lastzoom");
|
||||
}
|
||||
if ( window.localStorage.hasOwnProperty("clusterat") ) {
|
||||
clusterAt = window.localStorage.getItem("clusterat");
|
||||
document.getElementById("setclus").value = clusterAt;
|
||||
}
|
||||
// if ( window.localStorage.hasOwnProperty("clusterat") ) {
|
||||
// clusterAt = window.localStorage.getItem("clusterat");
|
||||
// document.getElementById("setclus").value = clusterAt;
|
||||
// }
|
||||
if ( window.localStorage.hasOwnProperty("maxage") ) {
|
||||
maxage = window.localStorage.getItem("maxage");
|
||||
document.getElementById("maxage").value = maxage;
|
||||
@ -293,8 +294,9 @@ function setMaxAge() {
|
||||
setMaxAge();
|
||||
|
||||
function setCluster() {
|
||||
clusterAt = parseInt(document.getElementById('setclus').value);
|
||||
clusterAt = parseInt(document.getElementById('setclus').value) || 0;
|
||||
console.log("clusterAt set:",clusterAt);
|
||||
showMapCurrentZoom();
|
||||
}
|
||||
setCluster();
|
||||
|
||||
@ -401,9 +403,19 @@ map.on('baselayerchange', function(e) {
|
||||
ws.emit("worldmap",{action:"layer", name:e.name});
|
||||
});
|
||||
|
||||
map.on('zoomend', function() {
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
setTimeout( function() {
|
||||
console.log("ZOOM :",map.getZoom());
|
||||
for (var key in markers) {
|
||||
if (polygons[key]) {
|
||||
var vis = layers[markers[key].lay].getVisibleParent(markers[key]);
|
||||
@ -417,6 +429,10 @@ map.on('zoomend', function() {
|
||||
}
|
||||
}
|
||||
},750);
|
||||
}
|
||||
|
||||
map.on('zoomend', function() {
|
||||
showMapCurrentZoom();
|
||||
});
|
||||
|
||||
//map.on('contextmenu', function(e) {
|
||||
@ -680,7 +696,12 @@ function setMarker(data) {
|
||||
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);
|
||||
layers[lay] = new L.MarkerClusterGroup({maxClusterRadius:50, spiderfyDistanceMultiplier:1.8, disableClusteringAtZoom:clusterAt}).addTo(map);
|
||||
layers[lay] = new L.MarkerClusterGroup({
|
||||
maxClusterRadius:50,
|
||||
spiderfyDistanceMultiplier:1.8,
|
||||
disableClusteringAtZoom:clusterAt,
|
||||
//zoomToBoundsOnClick:false
|
||||
}).addTo(map);
|
||||
overlays[lay] = layers[lay];
|
||||
layercontrol.addOverlay(layers[lay],lay);
|
||||
}
|
||||
@ -926,8 +947,9 @@ function doCommand(cmd) {
|
||||
if (cmd.hasOwnProperty("lon")) { clon = cmd.lon; }
|
||||
if (cmd.hasOwnProperty("zoom")) { czoom = cmd.zoom; }
|
||||
if (cmd.hasOwnProperty("cluster")) {
|
||||
document.getElementById("setclus").value = cmd.cluster;
|
||||
setCluster();
|
||||
clusterAt = cmd.cluster;
|
||||
// document.getElementById("setclus").value = cmd.cluster;
|
||||
// setCluster();
|
||||
}
|
||||
if (cmd.hasOwnProperty("maxage")) {
|
||||
document.getElementById("maxage").value = cmd.maxage;
|
||||
|
||||
252
worldmap/leaflet/leaflet.markercluster.freezable-src.js
Normal file
252
worldmap/leaflet/leaflet.markercluster.freezable-src.js
Normal file
@ -0,0 +1,252 @@
|
||||
/**
|
||||
* 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;
|
||||
}));
|
||||
@ -1,5 +1,5 @@
|
||||
CACHE MANIFEST
|
||||
# date: Jun 14th v1.0.13
|
||||
# date: Jun 14th v1.0.15
|
||||
|
||||
CACHE:
|
||||
index.html
|
||||
@ -35,6 +35,7 @@ leaflet/leaflet.draw.js
|
||||
leaflet/leaflet.fullscreen.css
|
||||
leaflet/leaflet.js
|
||||
leaflet/leaflet.markercluster.js
|
||||
leaflet/leaflet.markercluster.freezable-src.js
|
||||
leaflet/leaflet.measurecontrol.css
|
||||
leaflet/leaflet.measurecontrol.js
|
||||
leaflet/leaflet.select-layers.min.js
|
||||
|
||||
Loading…
Reference in New Issue
Block a user