sparnatural
Version:
Visual client-side SPARQL query builder and knowledge graph exploration tool
288 lines • 13.9 kB
JavaScript
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _MapWidget_instances, _MapWidget_redrawSelection, _MapWidget_renderMap, _MapWidget_getValueLabel, _MapWidget_setWidgetValue, _MapWidget_closeMap, _MapWidget_changeButton, _MapWidget_getSvgSelection, _MapWidget_polygonArea, _MapWidget_ringArea;
import { DataFactory } from 'rdf-data-factory';
// L needs to be imported *before* leaflet-geoman-free
import L, { LatLng } from "leaflet";
import { AddUserInputBtn } from "../buttons/AddUserInputBtn";
import { AbstractWidget, ValueRepetition } from "./AbstractWidget";
import "leaflet/dist/leaflet.css";
import "@geoman-io/leaflet-geoman-free";
import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css";
import { I18n } from '../../settings/I18n';
const factory = new DataFactory();
const GEOFUNCTIONS_NAMESPACE = 'http://www.opengis.net/def/function/geosparql/';
export const GEOFUNCTIONS = {
WITHIN: factory.namedNode(GEOFUNCTIONS_NAMESPACE + 'sfWithin')
};
const GEOSPARQL_NAMESPACE = "http://www.opengis.net/ont/geosparql#";
export const GEOSPARQL = {
WKT_LITERAL: factory.namedNode(GEOSPARQL_NAMESPACE + 'wktLiteral')
};
export class MapValue {
key() {
return this.value.coordinates.toString();
}
constructor(v) {
this.value = v;
}
exportToGeoJson() {
// TODO : recreate a GeoJSON value from the MapWidgetValue
return {};
}
}
export default class MapWidget extends AbstractWidget {
constructor(configuration, parentComponent, startClassVal, objectPropVal, endClassVal) {
super("map-widget", parentComponent, null, startClassVal, objectPropVal, endClassVal, ValueRepetition.SINGLE);
_MapWidget_instances.add(this);
_MapWidget_redrawSelection.set(this, () => {
if ((this.widgetValues !== undefined) && (this.widgetValues.length > 0)) {
let options = {
color: "#3388ff",
weight: 3,
opacity: 1,
lineCap: 'round',
lineJoin: "round",
fillColor: "#3388ff",
fillOpacity: 0.2,
fillRule: "evenodd"
};
switch (this.widgetValues[0].value.type) {
case 'Rectangle':
let bounds = L.latLngBounds(this.widgetValues[0].value.coordinates[0][0], this.widgetValues[0].value.coordinates[0][2]);
L.rectangle(bounds, options).addTo(this.map);
break;
default:
let coordinates = this.widgetValues[0].value.coordinates[0][0];
L.polygon(this.widgetValues[0].value.coordinates[0], options).addTo(this.map);
break;
}
}
});
_MapWidget_renderMap.set(this, () => {
let d = new Date();
let elementId = d.valueOf();
this.html.append($('<div id="map-' + elementId + '" class="map-wrapper"></div>'));
this.map = L.map("map-" + elementId);
let tl = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
attribution: "© OpenStreetMap",
});
tl.addTo(this.map);
// attempt to rebind geoman - does not work at the moment
// see https://geoman.io/docs/lazy-loading
// L.PM.reInitLayer(tl);
this.map.setView([this.configuration.center.lat, this.configuration.center.long], this.configuration.zoom);
this.map.pm.addControls({
position: "topleft",
cutPolygon: false,
drawCircle: false,
drawPolyline: false,
drawCircleMarker: false,
drawMarker: false,
drawText: false,
drawPolygon: true,
editMode: true,
dragMode: true,
rotateMode: false,
removalMode: true
});
__classPrivateFieldGet(this, _MapWidget_redrawSelection, "f").call(this);
if ((this.widgetValues !== undefined) && (this.widgetValues.length > 0)) {
var layers = [];
//layers = L.PM.Utils.findLayers(this.map)
//console.log(layers) ;
//this.drawingLayer = layers[0] as Layer;
this.map.pm.getGeomanLayers(false).forEach(layer => {
if (layer instanceof L.Polygon) {
layer.pm.enable();
this.drawingLayer = layer;
}
});
this.drawingLayer.on("pm:edit", (e) => {
//let widgetValue = this.#setWidgetValue(e.layer) ;
this.drawingLayer = e.layer;
});
this.drawingLayer.on("pm:update", (e) => {
//let widgetValue = this.#setWidgetValue(e.layer) ;
this.drawingLayer = e.layer;
});
}
let submitMapOptions = {
name: "submitMap",
block: "custom",
title: I18n.labels.MapWidgetValidate,
className: "submitMap icon-map-validate",
onClick: () => {
//this.widgetValue = [this.widgetValue]
__classPrivateFieldGet(this, _MapWidget_setWidgetValue, "f").call(this, this.drawingLayer);
this.triggerRenderWidgetVal(this.widgetValues);
$(this.parentComponent).trigger("change");
//this.html.hide() ;
//this.endClassWidgetGroup
},
};
this.map.pm.Toolbar.createCustomControl(submitMapOptions);
this.map.on("pm:create", (e) => {
//If there is already a drawing, then delete it
// allows only for one drawing at a time
if (this.drawingLayer)
this.map.removeLayer(this.drawingLayer);
this.drawingLayer = e.layer;
this.map.addLayer(this.drawingLayer);
//let widgetValue = this.#setWidgetValue(e.layer) ;
//this.endClassWidgetGroup.html[0].addEventListener("click", (evt:MouseEvent) => this.showWidgetMap(evt)) ;
//this.renderWidgetVal(widgetValue);
//add listener when the shape gets changed
this.drawingLayer.on("pm:edit", (e) => {
this.drawingLayer = e.layer;
//let widgetValue = this.#setWidgetValue(e.layer) ;
//this.#setWidgetValue(e.layer) ;
//this.renderWidgetVal(widgetValue);
});
});
this.map.on("pm:update", (e) => {
console.log('fireing pm:update');
this.drawingLayer = e.layer;
//let widgetValue = this.#setWidgetValue(e.layer) ;
//this.#setWidgetValue(e.layer) ;
//this.renderWidgetVal(widgetValue);
//this.endClassWidgetGroup.html[0].addEventListener("click", (evt:MouseEvent) => this.showWidgetMap(evt)) ;
});
/*this.map.on("pm:drawend", (e) => {
console.log(e);
this.drawingLayer = e.layer;
});*/
__classPrivateFieldGet(this, _MapWidget_instances, "m", _MapWidget_changeButton).call(this);
});
_MapWidget_setWidgetValue.set(this, (layer) => {
this.widgetValues = [];
switch (layer.pm._shape) {
case 'Rectangle':
this.widgetValues.push(new MapValue({
label: __classPrivateFieldGet(this, _MapWidget_instances, "m", _MapWidget_getValueLabel).call(this, layer),
type: 'Rectangle',
coordinates: layer.getLatLngs(),
}));
break;
default:
this.widgetValues.push(new MapValue({
label: __classPrivateFieldGet(this, _MapWidget_instances, "m", _MapWidget_getValueLabel).call(this, layer),
type: 'Polygon',
coordinates: layer.getLatLngs(),
}));
break;
}
return this.widgetValues;
});
_MapWidget_closeMap.set(this, () => {
if (this.widgetValues?.length > 0) {
this.triggerRenderWidgetVal(this.widgetValues);
$(this.parentComponent).trigger("change");
}
});
this.configuration = configuration;
this.parentComponent = parentComponent;
this.endClassWidgetGroup = this.parentComponent.parentComponent.parentComponent.parentComponent.endClassWidgetGroup;
}
render() {
super.render();
this.renderMapValueBtn = new AddUserInputBtn(this, I18n.labels.MapWidgetOpenMap, __classPrivateFieldGet(this, _MapWidget_renderMap, "f")).render();
// opens the map if there is a value - in the case we are editing the value
if (this.widgetValues?.length > 0) {
__classPrivateFieldGet(this, _MapWidget_renderMap, "f").call(this);
}
return this;
}
parseInput(input) {
const parsedCoords = input.coordinates.map((c) => {
return c.map((latlng) => {
if (!("lat" in latlng) || !('lng' in LatLng) || isNaN(latlng.lat) || isNaN(latlng.lng))
return new LatLng(latlng.lat, latlng.lng);
});
});
if (parsedCoords.length === 0)
throw Error(`Parsing of ${input.coordinates} failed`);
return new MapValue({
label: input.label,
coordinates: parsedCoords,
type: input.type
});
}
}
_MapWidget_redrawSelection = new WeakMap(), _MapWidget_renderMap = new WeakMap(), _MapWidget_setWidgetValue = new WeakMap(), _MapWidget_closeMap = new WeakMap(), _MapWidget_instances = new WeakSet(), _MapWidget_getValueLabel = function _MapWidget_getValueLabel(layer) {
let area = __classPrivateFieldGet(this, _MapWidget_instances, "m", _MapWidget_polygonArea).call(this, layer.getLatLngs());
let coordinates = layer.getLatLngs();
return __classPrivateFieldGet(this, _MapWidget_instances, "m", _MapWidget_getSvgSelection).call(this, coordinates) + '<span>' + area + ' km²</span>';
}, _MapWidget_changeButton = function _MapWidget_changeButton() {
this.renderMapValueBtn.html.remove();
this.renderMapValueBtn = new AddUserInputBtn(this, I18n.labels.MapWidgetCloseMap, __classPrivateFieldGet(this, _MapWidget_closeMap, "f")).render();
}, _MapWidget_getSvgSelection = function _MapWidget_getSvgSelection(coordinates) {
let bounds = L.latLngBounds(coordinates[0]);
let startLeft = bounds.getWest();
let startBottom = bounds.getSouth();
let width = (bounds.getEast() - bounds.getWest());
let height = (bounds.getNorth() - bounds.getSouth());
let svgCoordinates = '';
let lat = 0;
let lon = 0;
coordinates[0].forEach((point) => {
lat = point.lat - startBottom;
lon = point.lng - startLeft;
if (!(svgCoordinates == '')) {
svgCoordinates += ' ';
}
svgCoordinates += lon + ',' + lat;
});
let svg = `<svg id="svgelem" width="30" height="30" viewBox="0 0 ` + width + ` ` + height + `" xmlns="http://www.w3.org/2000/svg" style=" transform: rotateX(180deg);" preserveAspectRatio="xMidYMid meet"> <g><polygon points="` + svgCoordinates + `" style="fill:#ffffff;" /></g></svg>`;
return svg;
}, _MapWidget_polygonArea = function _MapWidget_polygonArea(coords) {
let total = 0;
let arrayCoords = new Array();
arrayCoords[0] = new Array();
let index = 0;
coords[0].forEach((point) => {
let newSet = [point.lat, point.lng];
arrayCoords[0][index] = newSet;
index++;
});
if (arrayCoords && arrayCoords.length > 0) {
total += Math.abs(__classPrivateFieldGet(this, _MapWidget_instances, "m", _MapWidget_ringArea).call(this, arrayCoords[0]));
for (let i = 1; i < arrayCoords.length; i++) {
total -= Math.abs(__classPrivateFieldGet(this, _MapWidget_instances, "m", _MapWidget_ringArea).call(this, arrayCoords[i]));
}
}
return Math.round(total);
}, _MapWidget_ringArea = function _MapWidget_ringArea(coords) {
const coordsLength = coords.length;
const earthRadius = 6371008.8 / 1000; //km²
const FACTOR = (earthRadius * earthRadius) / 2;
const PI_OVER_180 = Math.PI / 180;
if (coordsLength <= 2)
return 0;
let total = 0;
let i = 0;
while (i < coordsLength) {
const lower = coords[i];
const middle = coords[i + 1 === coordsLength ? 0 : i + 1];
const upper = coords[i + 2 >= coordsLength ? (i + 2) % coordsLength : i + 2];
const lowerX = lower[0] * PI_OVER_180;
const middleY = middle[1] * PI_OVER_180;
const upperX = upper[0] * PI_OVER_180;
total += (upperX - lowerX) * Math.sin(middleY);
i++;
}
return total * FACTOR;
};
// The default implementation of MapConfiguration
MapWidget.defaultConfiguration = {
zoom: 5,
center: {
lat: 46.20222,
long: 6.14569
}
};
//# sourceMappingURL=MapWidget.js.map