@indiscale/linkahead-webui-ext-map 0.5.0

package/src/contrib/latlnggraticule/leaflet.latlng-graticule.js

@@ -0,0 +1,528 @@
+/* eslint-disable indent,semi,no-redeclare,no-unused-vars, no-import-assign */
+import L from "leaflet"; // importing as * causes issues probably because it is a read only obj
+
+/**
+ *  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) {
+  L.LatLngGraticule = L.Layer.extend({
+    includes: L.Evented.prototype || 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 },
+      ],
+      sides: ["N", "S", "E", "W"],
+    },
+
+    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 + this.options.sides[1];
+      } else if (lat > 0) {
+        return "" + lat + this.options.sides[0];
+      }
+      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) + this.options.sides[3];
+      } else if (lng > 0 && lng < 180) {
+        return "" + lng + this.options.sides[2];
+      } else if (lng < 0 && lng > -180) {
+        return "" + lng * -1 + this.options.sides[3];
+      } else if (lng === -180) {
+        return "" + lng * -1;
+      } else if (lng < -180) {
+        return "" + (360 + lng) + this.options.sides[3];
+      }
+      return "" + lng;
+    },
+
+    __calcInterval: function () {
+      var zoom = this._map.getZoom();
+      if (this._currZoom !== zoom) {
+        this._currLngInterval = 0;
+        this._currLatInterval = 0;
+        this._currZoom = zoom;
+      }
+
+      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);
+          // eslint-disable-next-line no-empty
+        } catch (e) {}
+        return 0;
+      }
+
+      var 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.trim().split(" ")[0];
+          txtHeight = _parse_px_to_int(_font_size);
+          // eslint-disable-next-line no-empty
+        } 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;
+        // eslint-disable-next-line no-inner-declarations
+        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;
+          var spacer = self.options.showLabel && label ? txtWidth + 10 : 0;
+
+          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 + spacer, 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 - spacer, 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(1 + spacer, ll.y);
+            ctx.lineTo(rr.x - 1 - spacer, 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);
+            }
+          }
+        }
+
+        // eslint-disable-next-line no-inner-declarations
+        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));
+          var spacer = self.options.showLabel && label ? txtHeight + 5 : 0;
+
+          if (curvedLon) {
+            var _lat_delta;
+            if (typeof curvedLon == "number") {
+              _lat_delta = curvedLon;
+            }
+
+            ctx.beginPath();
+            ctx.moveTo(bb.x, 5 + spacer);
+            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 - spacer);
+
+              if (self.options.showLabel && label && _prev_p != null) {
+                if (_prev_p.y > 8 && tt.y <= 8) {
+                  ctx.fillText(lngstr, tt.x - txtWidth / 2, txtHeight + 5);
+                } 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, 5 + spacer);
+            ctx.lineTo(bb.x, hh - 1 - spacer);
+            ctx.stroke();
+
+            if (self.options.showLabel && label) {
+              ctx.fillText(lngstr, tt.x - txtWidth / 2, txtHeight + 5);
+              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);

package/src/contrib/simplegraticule/L.Graticule.js

@@ -0,0 +1,138 @@
+// MIT License
+//
+// Copyright © 2013 turban, tmcw
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the “Software”), to
+// deal in the Software without restriction, including without limitation the
+// rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+// sell copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+// IN THE SOFTWARE.
+
+import * as L from "leaflet";
+
+/*
+ Graticule plugin for Leaflet powered maps.
+*/
+// eslint-disable-next-line no-import-assign
+L.Graticule = L.GeoJSON.extend({
+  options: {
+    style: {
+      color: "#333",
+      weight: 1,
+    },
+    interval: 20,
+  },
+
+  initialize: function (options) {
+    L.Util.setOptions(this, options);
+    this._layers = {};
+
+    if (this.options.sphere) {
+      this.addData(this._getFrame());
+    } else {
+      this.addData(this._getGraticule());
+    }
+  },
+
+  _getFrame: function () {
+    return {
+      type: "Polygon",
+      coordinates: [
+        this._getMeridian(-180).concat(this._getMeridian(180).reverse()),
+      ],
+    };
+  },
+
+  _getGraticule: function () {
+    var features = [],
+      interval = this.options.interval;
+
+    // Meridians
+    for (var lng = 0; lng <= 180; lng = lng + interval) {
+      features.push(
+        this._getFeature(this._getMeridian(lng), {
+          name: lng ? lng.toString() + "° E" : "Prime meridian",
+        })
+      );
+      if (lng !== 0) {
+        features.push(
+          this._getFeature(this._getMeridian(-lng), {
+            name: lng.toString() + "° W",
+          })
+        );
+      }
+    }
+
+    // Parallels
+    for (var lat = 0; lat <= 90; lat = lat + interval) {
+      features.push(
+        this._getFeature(this._getParallel(lat), {
+          name: lat ? lat.toString() + "° N" : "Equator",
+        })
+      );
+      if (lat !== 0) {
+        features.push(
+          this._getFeature(this._getParallel(-lat), {
+            name: lat.toString() + "° S",
+          })
+        );
+      }
+    }
+
+    return {
+      type: "FeatureCollection",
+      features: features,
+    };
+  },
+
+  _getMeridian: function (lng) {
+    lng = this._lngFix(lng);
+    var coords = [];
+    for (var lat = -90; lat <= 90; lat++) {
+      coords.push([lng, lat]);
+    }
+    return coords;
+  },
+
+  _getParallel: function (lat) {
+    var coords = [];
+    for (var lng = -180; lng <= 180; lng++) {
+      coords.push([this._lngFix(lng), lat]);
+    }
+    return coords;
+  },
+
+  _getFeature: function (coords, prop) {
+    return {
+      type: "Feature",
+      geometry: {
+        type: "LineString",
+        coordinates: coords,
+      },
+      properties: prop,
+    };
+  },
+
+  _lngFix: function (lng) {
+    if (lng >= 180) return 179.999999;
+    if (lng <= -180) return -179.999999;
+    return lng;
+  },
+});
+
+// eslint-disable-next-line no-import-assign
+L.graticule = function (options) {
+  return new L.Graticule(options);
+};