1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-06-27 15:53:14 +00:00

Add support for draggable markers

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

View File

@ -15,6 +15,8 @@ The following attributes are supported:
|''lat'' |Optional latitude of marker if json attribute missing |
|''long'' |Optional longitude 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:

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 $tiddler="$:/plugins/tiddlywiki/geospatial"/>
</$testcase>
<$testcase>
<$data $compound-tiddler="$:/plugins/tiddlywiki/geospatial/tests/widgets/geomap-draggable-marker"/>
<$data $tiddler="$:/plugins/tiddlywiki/geospatial"/>
</$testcase>

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>

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) {
return {
color: widget.getAttribute("color","yellow")
}
},
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;
},
onEachFeature: function(feature,layer) {