mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-01-12 18:30:27 +00:00
Code Issues Releases Wiki Activity

Setup the marker cluster plugin

Browse Source
This commit is contained in:
jeremy@jermolene.com 2023-02-12 16:49:32 +00:00
parent b80cf8c83c
commit 235b2f79a0
3 changed files with 27 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
plugins/tiddlywiki/geospatial/files/leaflet.markercluster/tiddlywiki.files
View File

@ -7,8 +7,8 @@
"title": "$:/plugins/tiddlywiki/geospatial/leaflet.markercluster.js", "title": "$:/plugins/tiddlywiki/geospatial/leaflet.markercluster.js",
"module-type": "library" "module-type": "library"
}, },
"prefix": "", "prefix": "(function() {var L = require('$:/plugins/tiddlywiki/geospatial/leaflet.js');",
"suffix": "" "suffix": "\n})();"
}, },
{ {
"file": "MarkerCluster.css", "file": "MarkerCluster.css",
@ -20,6 +20,16 @@
"prefix": "", "prefix": "",
"suffix": "" "suffix": ""
}, },
{
"file": "MarkerCluster.Default.css",
"fields": {
"type": "text/css",
"title": "$:/plugins/tiddlywiki/geospatial/leaflet.MarkerCluster.Default.css",
"tags": "[[$:/tags/Stylesheet]]"
},
"prefix": "",
"suffix": ""
},
{ {
"file": "MIT-LICENCE.txt", "file": "MIT-LICENCE.txt",
"fields": { "fields": {

7
plugins/tiddlywiki/geospatial/startup.js
View File

@ -20,7 +20,12 @@ exports.synchronous = true;
exports.startup = function() { exports.startup = function() {
// var openlocationcode = require("$:/plugins/tiddlywiki/geospatial/openlocationcode.js"); // var openlocationcode = require("$:/plugins/tiddlywiki/geospatial/openlocationcode.js");
// var turf = require("$:/plugins/tiddlywiki/geospatial/turf.js"); // var turf = require("$:/plugins/tiddlywiki/geospatial/turf.js");
// var leaflet = require("$:/plugins/tiddlywiki/geospatial/leaflet.js"); // Load Leaflet
if($tw.browser) {
$tw.Leaflet = require("$:/plugins/tiddlywiki/geospatial/leaflet.js");
// Add Leaflet Marker Cluster Plugin
require("$:/plugins/tiddlywiki/geospatial/leaflet.markercluster.js");
}
}; };
})(); })();

18
plugins/tiddlywiki/geospatial/widgets/geomap.js
View File

@ -46,13 +46,11 @@ GeomapWidget.prototype.render = function(parent,nextSibling) {
GeomapWidget.prototype.renderMap = function(domNode) { GeomapWidget.prototype.renderMap = function(domNode) {
var self = this; var self = this;
// Get Leaflet
var L = require("$:/plugins/tiddlywiki/geospatial/leaflet.js");
// Create and position the map // Create and position the map
const map = L.map(domNode).setView([51.505, -0.09], 13); const map = $tw.Leaflet.map(domNode).setView([51.505, -0.09], 13);
map.fitWorld(); map.fitWorld();
// Setup the tile layer // Setup the tile layer
const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { const tiles = $tw.Leaflet.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19, maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map); }).addTo(map);
@ -61,14 +59,14 @@ GeomapWidget.prototype.renderMap = function(domNode) {
// Create default icon // Create default icon
const iconProportions = 365/560, const iconProportions = 365/560,
iconHeight = 50; iconHeight = 50;
const myIcon = new L.Icon({ const myIcon = new $tw.Leaflet.Icon({
iconUrl: $tw.utils.makeDataUri(this.wiki.getTiddlerText("$:/plugins/tiddlywiki/geospatial/images/markers/pin"),"image/svg+xml"), iconUrl: $tw.utils.makeDataUri(this.wiki.getTiddlerText("$:/plugins/tiddlywiki/geospatial/images/markers/pin"),"image/svg+xml"),
iconSize: [iconHeight * iconProportions, iconHeight], // Size of the icon iconSize: [iconHeight * iconProportions, iconHeight], // Size of the icon
iconAnchor: [(iconHeight * iconProportions) / 2, iconHeight], // Position of the anchor within the icon 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 popupAnchor: [0, -iconHeight] // Position of the popup anchor relative to the icon anchor
}); });
// Add scale // Add scale
L.control.scale().addTo(map); $tw.Leaflet.control.scale().addTo(map);
// Track the geolayers filter // Track the geolayers filter
this.trackerGeoLayersFilter = new FilterTracker({ this.trackerGeoLayersFilter = new FilterTracker({
wiki: this.wiki, wiki: this.wiki,
@ -76,7 +74,7 @@ GeomapWidget.prototype.renderMap = function(domNode) {
filter: this.geomapLayerFilter, filter: this.geomapLayerFilter,
enter: function(title,tiddler) { enter: function(title,tiddler) {
var text = (tiddler && tiddler.fields.text) || "[]", var text = (tiddler && tiddler.fields.text) || "[]",
layer = L.geoJSON($tw.utils.parseJSONSafe(text,[]),{ layer = $tw.Leaflet.geoJSON($tw.utils.parseJSONSafe(text,[]),{
style: function(geoJsonFeature) { style: function(geoJsonFeature) {
return { return {
color: (tiddler && tiddler.getFieldString("color")) || "yellow" color: (tiddler && tiddler.getFieldString("color")) || "yellow"
@ -90,6 +88,8 @@ GeomapWidget.prototype.renderMap = function(domNode) {
} }
}); });
// Track the geomarkers filter // Track the geomarkers filter
var markers = $tw.Leaflet.markerClusterGroup();
map.addLayer(markers);
this.trackerGeoMarkersFilter = new FilterTracker({ this.trackerGeoMarkersFilter = new FilterTracker({
wiki: this.wiki, wiki: this.wiki,
widget: this, widget: this,
@ -101,14 +101,14 @@ GeomapWidget.prototype.renderMap = function(domNode) {
caption = (tiddler && tiddler.fields.caption) || title, caption = (tiddler && tiddler.fields.caption) || title,
icon = myIcon; icon = myIcon;
if(tiddler && tiddler.fields["icon-url"]) { if(tiddler && tiddler.fields["icon-url"]) {
icon = new L.Icon({ icon = new $tw.Leaflet.Icon({
iconUrl: tiddler && tiddler.fields["icon-url"], iconUrl: tiddler && tiddler.fields["icon-url"],
iconSize: [32, 32], // Size of the icon iconSize: [32, 32], // Size of the icon
iconAnchor: [16, 32], // Position of the anchor within 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 popupAnchor: [16, -32] // Position of the popup anchor relative to the icon anchor
}); });
} }
return L.marker([lat,long,alt],{icon: icon,draggable: false}).bindPopup(caption).addTo(map); return $tw.Leaflet.marker([lat,long,alt],{icon: icon,draggable: false}).bindPopup(caption).addTo(markers);
}, },
leave: function(title,tiddler,data) { leave: function(title,tiddler,data) {
data.remove(); data.remove();