@targomo/leaflet
Version:
Leaflet maps extensions for Targomo's time-based access mapping services.
917 lines (887 loc) • 38.4 kB
JavaScript
/**
* @targomo/js-extensions "0.1.1" http://targomo.com
* Google and Leaflet JavaScript (& TypeScript) extensions for Targomo's time-based access mapping services.
* (c) 2022 Targomo
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('leaflet'), require('@targomo/core'), require('leaflet.vectorgrid/dist/Leaflet.VectorGrid.bundled.js')) :
typeof define === 'function' && define.amd ? define(['exports', 'leaflet', '@targomo/core', 'leaflet.vectorgrid/dist/Leaflet.VectorGrid.bundled.js'], factory) :
(factory((global.tgm = global.tgm || {}, global.tgm.leaflet = {}),global.L,global.tgm));
}(this, (function (exports,L,core) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
}
var transformEPSG3857 = (function (a, b, c, d) {
return function (x, y, scale) {
if (scale === void 0) { scale = 1; }
x = scale * (a * x + b);
y = scale * (c * y + d);
return { x: x, y: y };
};
})(0.5 / (Math.PI), 0.5, -(0.5 / (Math.PI)), 0.5);
function webMercatorToLeaflet(x, y, scale) {
if (scale === void 0) { scale = 1; }
return transformEPSG3857(x / 6378137, y / 6378137, scale);
}
/**
*
*/
var ProjectedBounds = /** @class */ (function () {
function ProjectedBounds(bounds) {
this.southWest = new ProjectedPoint(Infinity, Infinity);
this.northEast = new ProjectedPoint(-Infinity, -Infinity);
if (bounds) {
this.southWest = new ProjectedPoint(bounds.southWest.x, bounds.southWest.y);
this.northEast = new ProjectedPoint(bounds.northEast.x, bounds.northEast.y);
}
}
ProjectedBounds.prototype.expandPoint = function (x, y) {
this.southWest.x = Math.min(this.southWest.x, x);
this.northEast.x = Math.max(this.northEast.x, x);
this.southWest.y = Math.min(this.southWest.y, y);
this.northEast.y = Math.max(this.northEast.y, y);
};
ProjectedBounds.prototype.expand = function (bounds) {
this.expandPoint(bounds.northEast.x, bounds.northEast.y);
this.expandPoint(bounds.southWest.x, bounds.southWest.y);
};
ProjectedBounds.prototype.modifyIntersect = function (bounds) {
this.southWest.x = Math.max(this.southWest.x, bounds.southWest.x);
this.northEast.x = Math.min(this.northEast.x, bounds.northEast.x);
this.southWest.y = Math.max(this.southWest.y, bounds.southWest.y);
this.northEast.y = Math.min(this.northEast.y, bounds.northEast.y);
return this;
};
// modifyExpand(bounds: ProjectedBounds) {
// this.southWest.x = Math.min(this.southWest.x, bounds.southWest.x)
// this.northEast.x = Math.max(this.northEast.x, bounds.northEast.x)
// this.southWest.y = Math.min(this.southWest.y, bounds.southWest.y)
// this.northEast.y = Math.max(this.northEast.y, bounds.northEast.y)
// return this
// }
ProjectedBounds.prototype.contains = function (bounds) {
return (this.northEast.x >= bounds.northEast.x &&
this.northEast.y >= bounds.northEast.y &&
this.southWest.x <= bounds.southWest.x &&
this.southWest.y <= bounds.southWest.y);
};
ProjectedBounds.prototype.intersects = function (bounds) {
return !(this.northEast.x < bounds.southWest.x ||
this.northEast.y < bounds.southWest.y ||
this.southWest.x > bounds.northEast.x ||
this.southWest.y > bounds.northEast.y);
};
ProjectedBounds.prototype.growOutwardsFactor = function (factor) {
if (factor === void 0) { factor = 1; }
var diffX = (this.northEast.x - this.southWest.x) * factor;
var diffY = (this.northEast.y - this.southWest.y) * factor;
this.northEast.x += diffX;
this.northEast.y += diffY;
this.southWest.x -= diffX;
this.southWest.y -= diffY;
return this;
};
ProjectedBounds.prototype.growOutwardsAmount = function (amount) {
this.northEast.x += amount;
this.northEast.y += amount;
this.southWest.x -= amount;
this.southWest.y -= amount;
return this;
};
ProjectedBounds.prototype.toLineString = function () {
return [
// new ProjectedPoint(this.southWest.x, this.southWest.y),
// new ProjectedPoint(this.northEast.x, this.southWest.y),
// new ProjectedPoint(this.northEast.x, this.northEast.y),
// new ProjectedPoint(this.southWest.x, this.northEast.y),
new ProjectedPoint(this.southWest.x, this.northEast.y),
new ProjectedPoint(this.northEast.x, this.northEast.y),
new ProjectedPoint(this.northEast.x, this.southWest.y),
new ProjectedPoint(this.southWest.x, this.southWest.y),
];
};
ProjectedBounds.prototype.reproject = function (project) {
return new ProjectedBounds({
northEast: project(this.northEast.x, this.northEast.y),
southWest: project(this.southWest.x, this.southWest.y),
});
};
ProjectedBounds.prototype.width = function () {
return this.northEast.x - this.southWest.x;
};
ProjectedBounds.prototype.height = function () {
return this.southWest.y - this.northEast.y;
};
ProjectedBounds.prototype.left = function () {
return this.southWest.x;
};
ProjectedBounds.prototype.top = function () {
return this.northEast.y;
};
return ProjectedBounds;
}());
/**
*
*/
var ProjectedPoint = /** @class */ (function () {
function ProjectedPoint(x, y) {
this.x = x;
this.y = y;
}
/**
* Checks if the given three points are collinear.
*/
ProjectedPoint.prototype.isCollinear = function (before, after, tolerance) {
if (before.x == after.x && before.y == after.y) {
return false;
}
if (before.x == this.x && this.x == after.x) {
return true;
}
if (before.y == this.y && this.y == after.y) {
return true;
}
var val = (before.x * (this.y - after.y) + this.x * (after.y - before.y) + after.x * (before.y - this.y));
return (val < tolerance && val > -tolerance && before.x != after.x && before.y != after.y);
};
/**
*
* @param point
*/
ProjectedPoint.prototype.euclideanDistance = function (point) {
return Math.sqrt(Math.pow(this.x - point.x, 2) + Math.pow(this.y - point.y, 2));
};
return ProjectedPoint;
}());
/**
*
*/
var ProjectedLineString = /** @class */ (function () {
function ProjectedLineString(coordinates) {
var _this = this;
this.bounds3857 = new ProjectedBounds();
this.points = coordinates.map(function (coordinate) {
_this.bounds3857.expandPoint(coordinate[0], coordinate[1]);
var pair = webMercatorToLeaflet(coordinate[0], coordinate[1], 1);
return new ProjectedPoint(pair.x, pair.y);
});
}
return ProjectedLineString;
}());
/**
*
*/
var ProjectedPolygon = /** @class */ (function () {
function ProjectedPolygon(data) {
var _this = this;
this.bounds3857 = new ProjectedBounds();
this.travelTime = data.travelTime;
this.area = data.area;
this.lineStrings = [new ProjectedLineString(data.outerBoundary)];
this.bounds3857.expand(this.lineStrings[0].bounds3857);
if (data.innerBoundary) {
data.innerBoundary.forEach(function (innerBoundary) {
var lineString = new ProjectedLineString(innerBoundary);
_this.lineStrings.push(lineString);
_this.bounds3857.expand(lineString.bounds3857);
});
}
}
ProjectedPolygon.prototype.getOuterBoundary = function () {
return this.lineStrings[0];
};
ProjectedPolygon.prototype.getInnerBoundary = function () {
return this.lineStrings.slice(1);
};
return ProjectedPolygon;
}());
/**
*
*/
var ProjectedMultiPolygon = /** @class */ (function () {
function ProjectedMultiPolygon(data) {
var _this = this;
this.polygons = {};
this.bounds3857 = new ProjectedBounds();
data.forEach(function (multipolygonData) {
multipolygonData.polygons.forEach(function (polygonData) {
var polygon = new ProjectedPolygon(polygonData);
_this.polygons[polygon.travelTime] = _this.polygons[polygon.travelTime] || [];
_this.polygons[polygon.travelTime].push(polygon);
_this.bounds3857.expand(polygon.bounds3857);
});
});
}
ProjectedMultiPolygon.prototype.forEach = function (callback) {
var _this = this;
var keys = Object.keys(this.polygons).map(function (key) { return +key; }).sort(function (a, b) { return b - a; });
keys.forEach(function (key, i) { return callback(+key, _this.polygons[key], i); });
};
return ProjectedMultiPolygon;
}());
/**
* [clip clipping like sutherland http://rosettacode.org/wiki/Sutherland-Hodgman_polygon_clipping#JavaScript]
*/
function clip(subjectPolygon, clipPolygon) {
var cp1, cp2, s, e;
var inside = function (p) {
return (cp2.x - cp1.x) * (p.y - cp1.y) > (cp2.y - cp1.y) * (p.x - cp1.x);
};
var intersection = function () {
var dc = new ProjectedPoint(cp1.x - cp2.x, cp1.y - cp2.y), dp = new ProjectedPoint(s.x - e.x, s.y - e.y), n1 = cp1.x * cp2.y - cp1.y * cp2.x, n2 = s.x * e.y - s.y * e.x, n3 = 1.0 / (dc.x * dp.y - dc.y * dp.x);
return new ProjectedPoint((n1 * dp.x - n2 * dc.x) * n3, (n1 * dp.y - n2 * dc.y) * n3);
};
var outputList = subjectPolygon;
cp1 = clipPolygon[clipPolygon.length - 1];
for (var j in clipPolygon) {
cp2 = clipPolygon[j];
var inputList = outputList;
outputList = [];
s = inputList[inputList.length - 1]; // last on the input list
for (var i in inputList) {
e = inputList[i];
if (inside(e)) {
if (!inside(s)) {
outputList.push(intersection());
}
outputList.push(e);
}
else if (inside(s)) {
outputList.push(intersection());
}
s = e;
}
cp1 = cp2;
}
return outputList;
}
var COLORS = ['#006837', '#39B54A', '#8CC63F', '#F7931E', '#F15A24', '#C1272D'];
var COLORS_MAP = {};
COLORS.forEach(function (color, i) {
COLORS_MAP[(i + 1) * 300] = color;
});
function isPolygonRenderColorComplexOption(option) {
return option && option.color != null;
}
var PolygonRenderOptionsData = /** @class */ (function () {
function PolygonRenderOptionsData() {
this.inverse = false;
// colors: ({[edgeWeight: number]: PolygonRenderColorOption}) | (PolygonRenderColorOption[]) = COLORS
this.colors = COLORS_MAP;
this.opacity = 0.5;
this.strokeWidth = 5;
}
return PolygonRenderOptionsData;
}());
var PolygonRenderOptions = /** @class */ (function (_super) {
__extends(PolygonRenderOptions, _super);
function PolygonRenderOptions(data) {
var _this = _super.call(this) || this;
Object.assign(_this, data);
return _this;
}
PolygonRenderOptions.prototype.getColorOpacity = function (travelTime, index) {
var option = null;
if (this.colors instanceof Array) {
option = this.colors[index];
}
else {
option = this.colors[travelTime];
}
if (isPolygonRenderColorComplexOption(option)) {
return {
color: option.color || '#ccc',
opacity: option.opacity || 1
};
}
else {
return {
color: option || '#ccc',
opacity: 1
};
}
};
return PolygonRenderOptions;
}(PolygonRenderOptionsData));
var idCounter = 0;
function renderPath(svgData, elementOptions) {
var initialOpacity = elementOptions.opacity;
return "\n <g style='opacity: " + initialOpacity + "'>\n <path style='stroke: " + elementOptions.color + ";\n fill: " + elementOptions.color + ";\n stroke-opacity: " + elementOptions.opacity + ";\n stroke-width: " + elementOptions.strokeWidth + ";\n fill-opacity: " + elementOptions.opacity + "'\n\n d='" + svgData + "'/>\n </g>\n ";
}
function renderElement(children, width, height) {
return "\n <svg height=\"100%\" width=\"100%\" viewbox=\"0 0 " + width + " " + height + "\"\n style='opacity: 1; stroke-linejoin:round; stroke-linecap:round; fill-rule: evenodd'\n xmlns='http://www.w3.org/2000/svg'>\n " + children.join('\n') + "\n </svg>";
}
function renderInverseElement(children, width, height) {
var id = 'tgm:inverse:' + idCounter++;
var svgFrame = "M 0 0 L " + width + " 0 L " + width + " " + height + " L 0 " + height + " z";
var frame = "<path style='mask: url(#mask_" + id + ")' d='" + svgFrame + "'/>";
var newSvg = "\n <defs>\n <mask id='mask_" + id + "'>\n <path style='fill-opacity:1; stroke: white; fill:white;' d='" + svgFrame + "'/>\"\n " + children.join('\n') + "\n </mask>\n </defs>\n ";
return "\n <svg height=\"100%\" width=\"100%\" viewbox=\"0 0 " + width + " " + height + "\"\n style='opacity: 1; stroke-linejoin:round; stroke-linecap:round; fill-rule: evenodd'\n xmlns='http://www.w3.org/2000/svg'>\n " + frame + "\n " + newSvg + "\n </svg>";
}
/**
*
* @param viewport
* @param bounds3857
* @param zoomFactor
* @param multipolygons
*/
function render(viewport, bounds3857, zoomFactor, multipolygons, options) {
var _a;
var pairMin = webMercatorToLeaflet(bounds3857.southWest.x, bounds3857.southWest.y, zoomFactor);
var pairMax = webMercatorToLeaflet(bounds3857.northEast.x, bounds3857.northEast.y, zoomFactor);
if (pairMax.y < pairMin.y) {
_a = [pairMin.y, pairMax.y], pairMax.y = _a[0], pairMin.y = _a[1];
}
var xMinLeaflet = Math.floor(pairMin.x);
var yMinLeaflet = Math.floor(pairMin.y);
var xMaxLeaflet = Math.ceil(pairMax.x);
var yMaxLeaflet = Math.ceil(pairMax.y);
var projectedViewport = new ProjectedBounds(viewport)
.reproject(webMercatorToLeaflet);
var projectedViewportLineString = projectedViewport.toLineString();
function renderLineString(pathData, points) {
// points = collinear.filterCollinear(points, 1 / (zoomFactor * 100000))
points = clip(points, projectedViewportLineString);
points.forEach(function (point, i) {
var suffix = i > 0 ? 'L' : 'M';
var x = Math.round((point.x) * zoomFactor) - xMinLeaflet;
var y = Math.round((point.y) * zoomFactor) - yMinLeaflet;
var generatedPoint = suffix + " " + x + " " + y;
pathData.push(generatedPoint);
});
if (pathData.length > 0) {
pathData.push('z'); // svgz
}
return pathData;
}
function renderPolygon(polygon) {
var pathData = [];
if (viewport.intersects(polygon.bounds3857)) {
renderLineString(pathData, polygon.getOuterBoundary().points);
polygon.getInnerBoundary().forEach(function (innerBoundary) {
if (viewport.intersects(innerBoundary.bounds3857)) {
renderLineString(pathData, innerBoundary.points);
}
});
}
return pathData;
}
var children = [];
multipolygons.forEach(function (travelTime, polygons, i) {
var svgData = polygons.map(function (item) { return renderPolygon(item).join(' '); }).join(' ');
if (svgData.length != 0) {
var polygonOption = options.getColorOpacity(travelTime, i);
children.push(renderPath(svgData, __assign({}, polygonOption, { strokeWidth: options.strokeWidth, color: options.inverse ? 'black' : polygonOption.color })));
}
});
var width = Math.ceil(Math.abs(xMaxLeaflet - xMinLeaflet));
var height = Math.ceil(Math.abs(yMaxLeaflet - yMinLeaflet));
var content;
if (options.inverse) {
content = renderInverseElement(children, width, height);
}
else {
content = renderElement(children, width, height);
}
return { content: content, width: width, height: height };
}
var MinMaxSchedule = /** @class */ (function () {
function MinMaxSchedule(min, max) {
if (min === void 0) { min = 200; }
if (max === void 0) { max = 700; }
this.min = min;
this.max = max;
}
MinMaxSchedule.prototype.schedule = function (callback) {
var _this = this;
var action = function () {
clearTimeout(_this.longTimeout);
clearTimeout(_this.shortTimeout);
_this.longTimeout = null;
_this.shortTimeout = null;
callback();
};
if (!this.longTimeout) {
this.longTimeout = setTimeout(action, this.max);
}
clearTimeout(this.shortTimeout);
this.shortTimeout = setTimeout(action, this.min);
};
MinMaxSchedule.prototype.scheduleMaximum = function (callback) {
var _this = this;
var action = function () {
clearTimeout(_this.longTimeout);
_this.longTimeout = null;
callback();
};
if (!this.longTimeout) {
this.longTimeout = setTimeout(action, this.max);
}
clearTimeout(this.shortTimeout);
};
return MinMaxSchedule;
}());
/**
*
*/
var PolygonOverlayElement = /** @class */ (function () {
/**
*
* @param map
*/
function PolygonOverlayElement(plugin, options) {
this.plugin = plugin;
this.options = options;
this.renderTimeout = new MinMaxSchedule(300, 3000);
}
PolygonOverlayElement.prototype.getElement = function () {
return this.divElement;
};
/**
*
*/
PolygonOverlayElement.prototype.draw = function (immediately) {
var _this = this;
if (immediately === void 0) { immediately = false; }
if (immediately) {
this.resize();
this.render();
this.divElement.style.transform = null;
}
else {
if (this.divElement && this.bounds) {
var bounds = new ProjectedBounds(this.plugin.getElementPixels(this.bounds));
var div = this.divElement;
var dx = Math.round(bounds.left() - this.currentPixelBounds.left());
var dy = Math.round(bounds.top() - this.currentPixelBounds.top());
var scaleX = bounds.width() / this.currentPixelBounds.width();
var scaleY = bounds.height() / this.currentPixelBounds.height();
if (scaleY !== 1 || scaleX !== 1) {
div.style.transform = "translate3d(" + dx + "px, " + dy + "px, 0) scale3d(" + scaleX + ", " + scaleY + ", 1)";
}
else if (dx !== 0 || dy !== 0) {
div.style.transform = "translate3d(" + dx + "px, " + dy + "px, 0)";
}
}
this.renderTimeout.scheduleMaximum(function () {
_this.render();
_this.divElement.style.transform = null;
});
}
};
PolygonOverlayElement.prototype.resize = function () {
if (!this.divElement || !this.bounds) {
return;
}
var bounds = this.currentPixelBounds = new ProjectedBounds(this.plugin.getElementPixels(this.bounds));
var div = this.divElement;
div.style.left = bounds.left() + 'px';
div.style.top = bounds.top() + 'px';
div.style.width = bounds.width() + 'px';
div.style.height = bounds.height() + 'px';
div.style.transform = null;
};
/**
*
*/
PolygonOverlayElement.prototype.initElement = function () {
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
div.style.opacity = ('' + this.options.opacity) || '0.5';
div.style['backface-visibility'] = 'hidden';
div.style['perspective'] = 1000;
div.style['transform-origin'] = '0 0 0';
div.style['will-change'] = 'transform';
this.divElement = div;
return this.divElement;
};
/**
*
*/
PolygonOverlayElement.prototype.onRemove = function () {
this.divElement.parentNode.removeChild(this.divElement);
this.divElement = null;
};
/**
*
* @param multipolygon
*/
PolygonOverlayElement.prototype.setData = function (multipolygon) {
if (multipolygon) {
this.model = new ProjectedMultiPolygon(multipolygon);
}
else {
this.model = null;
}
this.render();
};
PolygonOverlayElement.prototype.setInverse = function (inverse) {
this.options.inverse = inverse;
this.render();
};
PolygonOverlayElement.prototype.setColors = function (colors) {
this.options.colors = colors;
this.render();
};
PolygonOverlayElement.prototype.setOpacity = function (opacity) {
this.options.opacity = opacity;
if (this.divElement) {
this.divElement.style.opacity = '' + this.options.opacity || '0.5';
}
};
PolygonOverlayElement.prototype.setStrokeWidth = function (strokeWidth) {
this.options.strokeWidth = strokeWidth;
this.render();
};
PolygonOverlayElement.prototype.boundsCalculation = function (growFactor) {
var projectedMultiPolygon = this.model;
var inverse = this.options.inverse;
var viewPort = new ProjectedBounds(this.plugin.getViewPort()); // .growOutwardsAmount(this.options && this.options.strokeWidth || 0)
var bounds = new ProjectedBounds(viewPort);
var newBounds = new ProjectedBounds(bounds).growOutwardsFactor(growFactor).modifyIntersect(projectedMultiPolygon.bounds3857);
if (inverse) {
newBounds.expand(viewPort);
newBounds.growOutwardsFactor(growFactor);
}
bounds.growOutwardsFactor(growFactor);
// pixel to
var southWest = core.geometry.webMercatorToLatLng(viewPort.southWest, undefined);
var northEast = core.geometry.webMercatorToLatLng(viewPort.northEast, undefined);
var newPixelBounds = this.plugin.getElementPixels({ southWest: southWest, northEast: northEast });
var ratio = Math.abs((viewPort.northEast.x - viewPort.southWest.x) / newPixelBounds.northEast.x - newPixelBounds.southWest.x);
newBounds.growOutwardsAmount(this.options && (ratio * this.options.strokeWidth) || 0);
//
return { bounds: bounds, newBounds: newBounds };
};
PolygonOverlayElement.prototype.render = function (resize) {
if (resize === void 0) { resize = true; }
if (!this.divElement) {
return;
}
if (!this.model) {
this.divElement.innerHTML = '';
return;
}
var zoom = this.plugin.getZoom();
var zoomFactor = Math.pow(2, zoom) * 256;
zoomFactor = Math.min(10000000, zoomFactor);
var growFactor = 0.1;
var _a = this.boundsCalculation(growFactor), bounds = _a.bounds, newBounds = _a.newBounds;
var content = render(bounds, newBounds, zoomFactor, this.model, new PolygonRenderOptions(this.options)).content;
this.divElement.innerHTML = content;
var southWest = core.geometry.webMercatorToLatLng(newBounds.southWest, undefined);
var northEast = core.geometry.webMercatorToLatLng(newBounds.northEast, undefined);
this.bounds = { southWest: southWest, northEast: northEast };
if (resize) {
this.resize();
}
};
return PolygonOverlayElement;
}());
var LeafletPolygonOverlayOptions = /** @class */ (function (_super) {
__extends(LeafletPolygonOverlayOptions, _super);
function LeafletPolygonOverlayOptions() {
return _super !== null && _super.apply(this, arguments) || this;
}
return LeafletPolygonOverlayOptions;
}(PolygonRenderOptionsData));
/**
*
*/
var TgmLeafletPolygonOverlay = /** @class */ (function (_super) {
__extends(TgmLeafletPolygonOverlay, _super);
/**
*
* @param options
*/
function TgmLeafletPolygonOverlay(options) {
var _this = _super.call(this) || this;
_this.readyPromise = new Promise(function (resolve) { return _this.readyResolve = resolve; });
_this.options = Object.assign(new LeafletPolygonOverlayOptions(), options || {});
return _this;
}
/**
*
* @param multipolygon
*/
TgmLeafletPolygonOverlay.prototype.setData = function (multipolygon) {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, this.readyPromise];
case 1:
_a.sent();
if (this.element) {
this.element.setData(multipolygon);
}
return [2 /*return*/];
}
});
});
};
/**
*
*/
TgmLeafletPolygonOverlay.prototype.draw = function () {
if (this.element) {
L.DomUtil.setTransform(this.element.getElement(), new L.Point(0, 0), null);
this.element.draw(true);
}
};
/**
*
* @param map
*/
TgmLeafletPolygonOverlay.prototype.onAdd = function (map) {
var _this = this;
this.element = new PolygonOverlayElement({
getZoom: function () {
return map.getZoom();
},
getViewPort: function () {
var bounds = map.getBounds();
return new ProjectedBounds({
northEast: core.geometry.latLngToWebMercator({
lng: bounds.getNorthEast().lng,
lat: bounds.getNorthEast().lat,
}),
southWest: core.geometry.latLngToWebMercator({
lng: bounds.getSouthWest().lng,
lat: bounds.getSouthWest().lat,
})
});
},
getElementPixels: function (bounds) {
var northEast = map.latLngToLayerPoint(bounds.northEast);
var southWest = map.latLngToLayerPoint(bounds.southWest);
return { northEast: northEast, southWest: southWest };
}
}, this.options);
var div = this.element.initElement();
div.style.transformOrigin = 'center';
L.DomUtil.addClass(div, 'leaflet-zoom-' + ('animated'));
map.getPanes().overlayPane.appendChild(div);
// const draw = () => this.draw()
map.on('moveend', this.draw, this);
map.on('resize', this.draw, this);
map.on('zoomend', this.draw, this);
var animated = this._map.options.zoomAnimation && L.Browser.any3d;
if (animated) {
map.on('zoomanim', function (e) {
if (_this.element.bounds) {
var scale = map.getZoomScale(e.zoom, map.getZoom());
var pos1 = map._latLngToNewLayerPoint(_this.element.bounds.southWest, e.zoom, e.center).round();
var pos2 = map._latLngToNewLayerPoint(_this.element.bounds.northEast, e.zoom, e.center).round();
var cur1 = map._latLngToNewLayerPoint(_this.element.bounds.southWest, map.getZoom(), map.getCenter()).round();
var cur2 = map._latLngToNewLayerPoint(_this.element.bounds.northEast, map.getZoom(), map.getCenter()).round();
var pos = { x: (pos1.x + pos2.x) / 2, y: (pos1.y + pos2.y) / 2 };
var cur = { x: (cur1.x + cur2.x) / 2, y: (cur1.y + cur2.y) / 2 };
L.DomUtil.setTransform(div, new L.Point(pos.x - cur.x, pos.y - cur.y), scale);
}
});
}
this.readyResolve();
this.draw();
return this;
};
TgmLeafletPolygonOverlay.prototype.onRemove = function () {
if (this.element) {
this.element.onRemove();
this.element = null;
}
return this;
};
/**
*
* @param inverse
*/
TgmLeafletPolygonOverlay.prototype.setInverse = function (inverse) {
this.options.inverse = inverse;
this.draw();
};
/**
*
* @param colors
*/
TgmLeafletPolygonOverlay.prototype.setColors = function (colors) {
this.options.colors = colors;
this.draw();
};
/**
*
* @param opacity
*/
TgmLeafletPolygonOverlay.prototype.setOpacity = function (opacity) {
this.options.opacity = opacity;
if (this.element) {
var div = this.element.getElement();
div.style.opacity = this.options.opacity != null ? ('' + this.options.opacity) : '0.5';
}
};
/**
*
* @param strokeWidth
*/
TgmLeafletPolygonOverlay.prototype.setStrokeWidth = function (strokeWidth) {
this.options.strokeWidth = strokeWidth;
this.draw();
};
return TgmLeafletPolygonOverlay;
}(L.Layer));
var TgmLeafletTileLayer = /** @class */ (function (_super) {
__extends(TgmLeafletTileLayer, _super);
function TgmLeafletTileLayer(tgmClient, basemapName, options) {
var _this = this;
if (!basemapName && !tgmClient.basemaps.basemapsLookup[basemapName]) {
throw new Error('valid style name required to access Targomo basemap');
}
var tileUrl = 'https://maps.targomo.com/styles/' +
tgmClient.basemaps.basemapsLookup[basemapName] +
'/{z}/{x}/{y}{r}.png?key=' +
tgmClient.serviceKey;
_this = _super.call(this, tileUrl, options) || this;
return _this;
}
TgmLeafletTileLayer.getTileLayerList = function (tgmClient) {
var tileLayerList = {};
tgmClient.basemaps.basemapNames.forEach(function (basemapName) {
tileLayerList[basemapName] = new TgmLeafletTileLayer(tgmClient, basemapName, {});
});
return tileLayerList;
};
return TgmLeafletTileLayer;
}(L.TileLayer));
var TgmLeafletMultigraphTileLayer = /** @class */ (function () {
function TgmLeafletMultigraphTileLayer(tgmClient, sources, multigraphOptions, vectorTileoptions) {
this.tgmClient = tgmClient;
this.update(multigraphOptions, vectorTileoptions, sources);
}
TgmLeafletMultigraphTileLayer.prototype.addTo = function (map) {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!!this.layer) return [3 /*break*/, 2];
return [4 /*yield*/, this.createLayer()];
case 1:
_a.sent();
_a.label = 2;
case 2:
this.map = map;
this.layer.addTo(map);
return [2 /*return*/];
}
});
});
};
TgmLeafletMultigraphTileLayer.prototype.update = function (multigraphOptions, vectorTileoptions, sources) {
if (multigraphOptions) {
this.multigraphOptions = multigraphOptions;
}
if (vectorTileoptions) {
this.vectorTileoptions = vectorTileoptions;
}
if (sources) {
this.sources = sources;
}
return this.createLayer();
};
TgmLeafletMultigraphTileLayer.prototype.createLayer = function () {
return __awaiter(this, void 0, void 0, function () {
var url;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (this.map && this.layer) {
this.map.removeLayer(this.layer);
}
return [4 /*yield*/, this.tgmClient.multigraph.getTiledMultigraphUrl(this.sources, this.multigraphOptions, 'mvt')];
case 1:
url = _a.sent();
this.layer = L.vectorGrid.protobuf(url, this.vectorTileoptions);
if (this.map && this.layer) {
this.layer.addTo(this.map);
}
return [2 /*return*/];
}
});
});
};
return TgmLeafletMultigraphTileLayer;
}());
exports.LeafletPolygonOverlayOptions = LeafletPolygonOverlayOptions;
exports.TgmLeafletPolygonOverlay = TgmLeafletPolygonOverlay;
exports.TgmLeafletTileLayer = TgmLeafletTileLayer;
exports.TgmLeafletMultigraphTileLayer = TgmLeafletMultigraphTileLayer;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=targomo-leaflet.umd.js.map