2022-12-02 10:13:03 +00:00
|
|
|
/*\
|
|
|
|
title: $:/plugins/tiddlywiki/geospatial/geomap.js
|
|
|
|
type: application/javascript
|
|
|
|
module-type: widget
|
|
|
|
|
|
|
|
Leaflet map widget
|
|
|
|
|
|
|
|
\*/
|
|
|
|
(function(){
|
|
|
|
|
|
|
|
/*jslint node: true, browser: true */
|
|
|
|
/*global $tw: false */
|
|
|
|
"use strict";
|
|
|
|
|
|
|
|
var Widget = require("$:/core/modules/widgets/widget.js").widget;
|
|
|
|
|
|
|
|
var GeomapWidget = function(parseTreeNode,options) {
|
|
|
|
this.initialise(parseTreeNode,options);
|
|
|
|
};
|
|
|
|
|
|
|
|
/*
|
|
|
|
Inherit from the base widget class
|
|
|
|
*/
|
|
|
|
GeomapWidget.prototype = new Widget();
|
|
|
|
|
|
|
|
/*
|
|
|
|
Render this widget into the DOM
|
|
|
|
*/
|
|
|
|
GeomapWidget.prototype.render = function(parent,nextSibling) {
|
|
|
|
// Housekeeping
|
|
|
|
this.parentDomNode = parent;
|
|
|
|
this.computeAttributes();
|
|
|
|
this.execute();
|
|
|
|
// Render a wrapper for the map
|
|
|
|
var domNode = this.document.createElement("div");
|
|
|
|
domNode.style.width = "100%";
|
|
|
|
domNode.style.height = "600px";
|
|
|
|
// Insert it into the DOM
|
|
|
|
parent.insertBefore(domNode,nextSibling);
|
|
|
|
this.domNodes.push(domNode);
|
|
|
|
// Render the map
|
|
|
|
if($tw.browser) {
|
|
|
|
this.renderMap(domNode);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
GeomapWidget.prototype.renderMap = function(domNode) {
|
|
|
|
var self = this;
|
|
|
|
// Get Leaflet
|
|
|
|
var L = require("$:/plugins/tiddlywiki/geospatial/leaflet.js");
|
|
|
|
// Create and position the map
|
|
|
|
const map = L.map(domNode).setView([51.505, -0.09], 13);
|
2022-12-09 08:11:14 +00:00
|
|
|
map.fitWorld();
|
2022-12-02 10:13:03 +00:00
|
|
|
// Setup the tile layer
|
|
|
|
const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
|
|
maxZoom: 19,
|
|
|
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
|
|
|
}).addTo(map);
|
2022-12-12 08:54:40 +00:00
|
|
|
// Disable Leaflet attribution
|
|
|
|
map.attributionControl.setPrefix("");
|
2022-12-02 10:13:03 +00:00
|
|
|
// Create default icon
|
2022-12-09 08:11:01 +00:00
|
|
|
const iconProportions = 365/560,
|
|
|
|
iconHeight = 50;
|
2022-12-02 10:13:03 +00:00
|
|
|
const myIcon = new L.Icon({
|
|
|
|
iconUrl: $tw.utils.makeDataUri(this.wiki.getTiddlerText("$:/plugins/tiddlywiki/geospatial/images/markers/pin"),"image/svg+xml"),
|
2023-01-13 11:35:13 +00:00
|
|
|
iconSize: [iconHeight * iconProportions, iconHeight], // Size of the icon
|
2022-12-09 08:11:01 +00:00
|
|
|
iconAnchor: [(iconHeight * iconProportions) / 2, iconHeight], // Position of the anchor within the icon
|
|
|
|
popupAnchor: [0, -iconHeight] // Position of the popup anchor relative to the icon anchor
|
2022-12-02 10:13:03 +00:00
|
|
|
});
|
|
|
|
// Add scale
|
|
|
|
L.control.scale().addTo(map);
|
2023-02-12 10:57:54 +00:00
|
|
|
// Track the geolayers filter
|
|
|
|
this.trackerGeoLayersFilter = new FilterTracker({
|
|
|
|
wiki: this.wiki,
|
|
|
|
widget: this,
|
|
|
|
filter: this.geomapLayerFilter,
|
|
|
|
enter: function(title,tiddler) {
|
|
|
|
var text = (tiddler && tiddler.fields.text) || "[]",
|
|
|
|
layer = L.geoJSON($tw.utils.parseJSONSafe(text,[]),{
|
2023-01-06 10:37:30 +00:00
|
|
|
style: function(geoJsonFeature) {
|
|
|
|
return {
|
2023-02-12 10:57:54 +00:00
|
|
|
color: (tiddler && tiddler.getFieldString("color")) || "yellow"
|
2023-01-06 10:37:30 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}).addTo(map);
|
2023-02-12 10:57:54 +00:00
|
|
|
return layer;
|
|
|
|
},
|
|
|
|
leave: function(title,tiddler,data) {
|
|
|
|
data.remove();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
// Track the geomarkers filter
|
|
|
|
this.trackerGeoMarkersFilter = new FilterTracker({
|
|
|
|
wiki: this.wiki,
|
|
|
|
widget: this,
|
|
|
|
filter: this.geomapMarkerFilter,
|
|
|
|
enter: function(title,tiddler) {
|
|
|
|
var lat = $tw.utils.parseNumber((tiddler && tiddler.fields.lat) || "0"),
|
|
|
|
long = $tw.utils.parseNumber((tiddler && tiddler.fields.long) || "0"),
|
|
|
|
alt = $tw.utils.parseNumber((tiddler && tiddler.fields.alt) || "0"),
|
|
|
|
caption = (tiddler && tiddler.fields.caption) || title,
|
|
|
|
icon = myIcon;
|
|
|
|
if(tiddler && tiddler.fields["icon-url"]) {
|
|
|
|
icon = new L.Icon({
|
|
|
|
iconUrl: tiddler && tiddler.fields["icon-url"],
|
|
|
|
iconSize: [32, 32], // Size of the icon
|
|
|
|
iconAnchor: [16, 32], // Position of the anchor within the icon
|
|
|
|
popupAnchor: [16, -32] // Position of the popup anchor relative to the icon anchor
|
|
|
|
});
|
2022-12-12 08:54:40 +00:00
|
|
|
}
|
2023-02-12 10:57:54 +00:00
|
|
|
return L.marker([lat,long,alt],{icon: icon,draggable: false}).bindPopup(caption).addTo(map);
|
|
|
|
},
|
|
|
|
leave: function(title,tiddler,data) {
|
|
|
|
data.remove();
|
|
|
|
}
|
|
|
|
});
|
2022-12-02 10:13:03 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
/*
|
|
|
|
Compute the internal state of the widget
|
|
|
|
*/
|
|
|
|
GeomapWidget.prototype.execute = function() {
|
2022-12-12 08:54:40 +00:00
|
|
|
this.geomapLayerFilter = this.getAttribute("layers");
|
2022-12-02 10:13:03 +00:00
|
|
|
this.geomapMarkerFilter = this.getAttribute("markers");
|
|
|
|
};
|
|
|
|
|
|
|
|
/*
|
|
|
|
Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
|
|
|
|
*/
|
|
|
|
GeomapWidget.prototype.refresh = function(changedTiddlers) {
|
|
|
|
var changedAttributes = this.computeAttributes();
|
2023-02-12 10:57:54 +00:00
|
|
|
// Refresh entire widget if layers or marker filter changes
|
|
|
|
if(changedAttributes.layers || changedAttributes.markers) {
|
2022-12-02 10:13:03 +00:00
|
|
|
this.refreshSelf();
|
|
|
|
return true;
|
|
|
|
}
|
2023-02-12 10:57:54 +00:00
|
|
|
// Check whether the layers or markers need updating
|
|
|
|
this.trackerGeoLayersFilter.refresh(changedTiddlers);
|
|
|
|
this.trackerGeoMarkersFilter.refresh(changedTiddlers);
|
|
|
|
// No children to refresh
|
|
|
|
return false;
|
2022-12-02 10:13:03 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
exports.geomap = GeomapWidget;
|
|
|
|
|
2023-02-12 10:57:54 +00:00
|
|
|
function FilterTracker(options) {
|
|
|
|
var self = this;
|
|
|
|
// Save parameters
|
|
|
|
this.filter = options.filter;
|
|
|
|
this.wiki = options.wiki;
|
|
|
|
this.widget = options.widget;
|
|
|
|
this.enter = options.enter;
|
|
|
|
this.leave = options.leave;
|
|
|
|
this.update = options.update;
|
|
|
|
// Calculate initial result set and call enter for each entry
|
|
|
|
this.items = Object.create(null);
|
|
|
|
$tw.utils.each(this.wiki.filterTiddlers(this.filter,this.widget),function(title) {
|
|
|
|
self.items[title] = self.enter(title,self.wiki.getTiddler(title));
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
FilterTracker.prototype.refresh = function(changedTiddlers) {
|
|
|
|
var self = this;
|
|
|
|
var newItems = this.wiki.filterTiddlers(this.filter,this.widget);
|
|
|
|
// Go through the new items and call update or enter as appropriate
|
|
|
|
$tw.utils.each(newItems,function(title) {
|
|
|
|
// Check if this item is already known
|
|
|
|
if(title in self.items) {
|
|
|
|
// Issue an update if the underlying tiddler has changed
|
|
|
|
if(changedTiddlers[title]) {
|
|
|
|
// Use the update method if provided
|
|
|
|
if(self.update) {
|
|
|
|
self.update(title,self.wiki.getTiddler(title),self.items[title]);
|
|
|
|
} else {
|
|
|
|
// Otherwise leave and enter is equivalent to update
|
|
|
|
self.leave(title,self.wiki.getTiddler(title),self.items[title]);
|
|
|
|
self.items[title] = self.enter(title,self.wiki.getTiddler(title));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
// It's a new item, so we need to enter it
|
|
|
|
self.items[title] = self.enter(title,self.wiki.getTiddler(title));
|
|
|
|
}
|
|
|
|
});
|
|
|
|
// Call leave for any items that are no longer in the list
|
|
|
|
$tw.utils.each(Object.keys(this.items),function(title) {
|
|
|
|
if(newItems.indexOf(title) === -1) {
|
|
|
|
// Remove this item
|
|
|
|
self.leave(title,self.wiki.getTiddler(title),self.items[title]);
|
|
|
|
delete self.items[title];
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2022-12-02 10:13:03 +00:00
|
|
|
})();
|
|
|
|
|