diff --git a/CHANGELOG.md b/CHANGELOG.md
index a083a3e..a46a657 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,8 @@
### Change Log for Node-RED Worldmap
+ - 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. Tidy html.
+ - 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
diff --git a/README.md b/README.md
index 471140e..cc8eace 100644
--- a/README.md
+++ b/README.md
@@ -9,8 +9,9 @@ map web page for plotting "things" on.
### Updates
+- 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. Tidy html.
+- 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
@@ -439,6 +440,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";
diff --git a/package.json b/package.json
index bc557fe..3dc3dde 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "node-red-contrib-web-worldmap",
- "version": "2.0.0-beta",
+ "version": "2.0.1-beta",
"description": "A Node-RED node to provide a web page of a world map for plotting things on.",
"dependencies": {
"cgi": "0.3.1",
diff --git a/worldmap.html b/worldmap.html
index e14b1d2..6ac9e3a 100644
--- a/worldmap.html
+++ b/worldmap.html
@@ -95,6 +95,11 @@
+ Graticule
+
@@ -172,7 +177,8 @@ then by default ⌘⇧m - ctrl-shift-m will load the m
panlock: {value:"false"},
zoomlock: {value:"false"},
hiderightclick: {value:"false"},
- coords: {value: "false"},
+ coords: {value:"false"},
+ showgrid: {value:"false"},
path: {value:"/worldmap"}
},
inputs:1,
diff --git a/worldmap.js b/worldmap.js
index 85eca78..76555d2 100644
--- a/worldmap.js
+++ b/worldmap.js
@@ -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}));
diff --git a/worldmap/index.html b/worldmap/index.html
index c0942c7..121dd5b 100644
--- a/worldmap/index.html
+++ b/worldmap/index.html
@@ -63,6 +63,7 @@
+
@@ -274,6 +275,20 @@ else {
}
}
+// Add graticule
+var showGrid = false;
+var Lgrid = L.latlngGraticule({
+ font: "Verdana",
+ fontColor: "#666",
+ 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}
+ ]
+});
+
if (!inIframe) {
// Add the fullscreen button
L.control.fullscreen().addTo(map);
@@ -1527,6 +1542,26 @@ function doCommand(cmd) {
layercontrol = L.control.layers(basemaps, overlays).addTo(map);
}
}
+ if (cmd.hasOwnProperty("grid")) {
+ console.log("DING",cmd.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]) {
diff --git a/worldmap/leaflet/leaflet.latlng-graticule.js b/worldmap/leaflet/leaflet.latlng-graticule.js
new file mode 100644
index 0000000..95de71d
--- /dev/null
+++ b/worldmap/leaflet/leaflet.latlng-graticule.js
@@ -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));