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",
"module-type": "library"
},
"prefix": "",
"suffix": ""
"prefix": "(function() {var L = require('$:/plugins/tiddlywiki/geospatial/leaflet.js');",
"suffix": "\n})();"
},
{
"file": "MarkerCluster.css",
@ -20,6 +20,16 @@
"prefix": "",
"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",
"fields": {

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

@ -20,7 +20,12 @@ exports.synchronous = true;
exports.startup = function() {
// var openlocationcode = require("$:/plugins/tiddlywiki/geospatial/openlocationcode.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) {
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);
const map = $tw.Leaflet.map(domNode).setView([51.505, -0.09], 13);
map.fitWorld();
// 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,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
@ -61,14 +59,14 @@ GeomapWidget.prototype.renderMap = function(domNode) {
// Create default icon
const iconProportions = 365/560,
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"),
iconSize: [iconHeight * iconProportions, iconHeight], // Size of 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
});
// Add scale
L.control.scale().addTo(map);
$tw.Leaflet.control.scale().addTo(map);
// Track the geolayers filter
this.trackerGeoLayersFilter = new FilterTracker({
wiki: this.wiki,
@ -76,7 +74,7 @@ GeomapWidget.prototype.renderMap = function(domNode) {
filter: this.geomapLayerFilter,
enter: function(title,tiddler) {
var text = (tiddler && tiddler.fields.text) || "[]",
layer = L.geoJSON($tw.utils.parseJSONSafe(text,[]),{
layer = $tw.Leaflet.geoJSON($tw.utils.parseJSONSafe(text,[]),{
style: function(geoJsonFeature) {
return {
color: (tiddler && tiddler.getFieldString("color")) || "yellow"
@ -90,6 +88,8 @@ GeomapWidget.prototype.renderMap = function(domNode) {
}
});
// Track the geomarkers filter
var markers = $tw.Leaflet.markerClusterGroup();
map.addLayer(markers);
this.trackerGeoMarkersFilter = new FilterTracker({
wiki: this.wiki,
widget: this,
@ -101,14 +101,14 @@ GeomapWidget.prototype.renderMap = function(domNode) {
caption = (tiddler && tiddler.fields.caption) || title,
icon = myIcon;
if(tiddler && tiddler.fields["icon-url"]) {
icon = new L.Icon({
icon = new $tw.Leaflet.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
});
}
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) {
data.remove();