mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-03-12 14:38:10 +00:00
Code Issues Releases Wiki Activity

Add support for draggable markers

Browse Source
This commit is contained in:
jeremy@jermolene.com 2023-06-12 16:39:33 +01:00
parent b2b51a3552
commit c918f43550
4 changed files with 58 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/tiddlywiki/geospatial/docs/geolayer.tid
View File

@ -15,6 +15,8 @@ The following attributes are supported:
|''lat'' |Optional latitude of marker if json attribute missing | |''lat'' |Optional latitude of marker if json attribute missing |
|''long'' |Optional longitude of marker if json attribute missing | |''long'' |Optional longitude of marker if json attribute missing |
|''alt'' |Optional altitude of marker if json attribute missing | |''alt'' |Optional altitude of marker if json attribute missing |
|''draggable'' |Set to "yes" to make the marker draggable |
|''updateActions'' |Optional actions when the marker is dragged other otherwise modified. The variables ''lat'' and ''long'' contain the new coordinates of the marker |
Note that the `<$geolayer>` widget can be used in one of two modes: Note that the `<$geolayer>` widget can be used in one of two modes:

5
plugins/tiddlywiki/geospatial/docs/geomap.tid
View File

@ -115,3 +115,8 @@ If no base layers are defined by `<$geobaselayer>` widgets within the `<$geomap>
<$data $compound-tiddler="$:/plugins/tiddlywiki/geospatial/tests/widgets/geomap-refresh"/> <$data $compound-tiddler="$:/plugins/tiddlywiki/geospatial/tests/widgets/geomap-refresh"/>
<$data $tiddler="$:/plugins/tiddlywiki/geospatial"/> <$data $tiddler="$:/plugins/tiddlywiki/geospatial"/>
</$testcase> </$testcase>
<$testcase>
<$data $compound-tiddler="$:/plugins/tiddlywiki/geospatial/tests/widgets/geomap-draggable-marker"/>
<$data $tiddler="$:/plugins/tiddlywiki/geospatial"/>
</$testcase>

40
plugins/tiddlywiki/geospatial/tests/widgets/geomap-draggable-marker.tid Normal file
View File

@ -0,0 +1,40 @@
title: $:/plugins/tiddlywiki/geospatial/tests/widgets/geomap-draggable-marker
description: geomap widget with draggable marker
type: text/vnd.tiddlywiki-multiple
tags: [[$:/tags/wiki-test-spec]]
title: Description
text: Map with draggable marker
+
title: Oxford
lat: 51.751944
long: -1.257778
alt: 0
+
title: Output
\procedure update-actions()
<$action-log/>
<$action-setfield $tiddler="Oxford" $field="lat" $value=<<lat>>/>
<$action-setfield $tiddler="Oxford" $field="long" $value=<<long>>/>
\end
<$geomap
state=<<qualify "$:/state/demo-map">>
>
<$tiddler tiddler="Oxford">
<$geolayer
lat={{!!lat}}
long={{!!long}}
alt={{!!alt}}
color={{!!color}}
name={{!!title}}
draggable="yes"
updateActions=<<update-actions>>
/>
</$tiddler>
</$geomap>
+
title: ExpectedResult
<p><div style="width:100%;height:600px;"></div></p>

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

@ -185,14 +185,23 @@ GeomapWidget.prototype.refreshMap = function() {
] ]
}; };
} }
var layer = $tw.Leaflet.geoJSON(geoJson,{ var draggable = widget.getAttribute("draggable","no") === "yes",
layer = $tw.Leaflet.geoJSON(geoJson,{
style: function(geoJsonFeature) { style: function(geoJsonFeature) {
return { return {
color: widget.getAttribute("color","yellow") color: widget.getAttribute("color","yellow")
} }
}, },
pointToLayer: function(geoJsonPoint,latlng) { pointToLayer: function(geoJsonPoint,latlng) {
$tw.Leaflet.marker(latlng,{icon: myIcon,draggable: false}).addTo(markers); var marker = $tw.Leaflet.marker(latlng,{icon: myIcon,draggable: draggable});
marker.addTo(markers);
marker.on("moveend",function(event) {
var latlng = event.sourceTarget.getLatLng();
self.invokeActionString(widget.getAttribute("updateActions"),null,event,{
lat: latlng.lat,
long: latlng.lng
});
});
return markers; return markers;
}, },
onEachFeature: function(feature,layer) { onEachFeature: function(feature,layer) {