mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2025-03-12 06:28:10 +00:00
Add support for draggable markers
This commit is contained in:
parent
b2b51a3552
commit
c918f43550
@ -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:
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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>
|
@ -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) {
|
||||
|
Loading…
x
Reference in New Issue
Block a user