Replace text using field value in a macro

#1

Continue my question from here: Suggestions for visualisation of big field experiment dataset with tiddlywiki. But I think it would be better to ask in a separate question.

I start a prototype to create to visualise my data.

Now I can store two meta-data into two fields (i.e. longitude and latitude) for each tiddler, then use my new plugin tw-htmlwidgets (i.e. widget htmlwidgets ) which use leaflet to create a map. See example codes below.

I would like to replace the longitude (i.e.149.72626) and latitude (i.e. -31.66871) in the macro getdata with actual values for each tiddler.

How should I achieve it?

\define getdata()

{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addTiles","args":["https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",null,null,{"minZoom":0,"maxZoom":18,"tileSize":256,"subdomains":"abc","errorTileUrl":"","tms":false,"noWrap":false,"zoomOffset":0,"zoomReverse":false,"opacity":1,"zIndex":1,"detectRetina":false,"attribution":"&copy; <a href=\"https://openstreetmap.org\">OpenStreetMap<\/a> contributors, <a href=\"https://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA<\/a>"}]},{"method":"addMarkers","args":[-31.66871,149.72626,null,null,null,{"interactive":true,"draggable":false,"keyboard":true,"title":"","alt":"","zIndexOffset":0,"opacity":1,"riseOnHover":false,"riseOffset":250},null,null,null,null,"WEaA15COOL2",{"interactive":false,"permanent":false,"direction":"auto","opacity":1,"offset":[0,0],"textsize":"10px","textOnly":false,"className":"","sticky":true},null]}],"limits":{"lat":[-31.66871,-31.66871],"lng":[149.72626,149.72626]},"setView":[[-31.66871, 149.72626],3,[]]},"evals":[],"jsHooks":[]}
\end

<$list filter="[all[current]tag[Trial]]">
<<getfield>>
<$htmlwidgets type="leaflet" uuid="htmlwidget-6fe1f8f34164742c047b"  data = <<getdata>> />
</$list>
#2

I would capture the longitude and latitude field values in variables, and then use variable substitution to insert the values. There might be other ways to insert the values, but I think this is most readable and direct solution for this use case.

\define getdata()

{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addTiles","args":["https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",null,null,{"minZoom":0,"maxZoom":18,"tileSize":256,"subdomains":"abc","errorTileUrl":"","tms":false,"noWrap":false,"zoomOffset":0,"zoomReverse":false,"opacity":1,"zIndex":1,"detectRetina":false,"attribution":"&copy; <a href=\"https://openstreetmap.org\">OpenStreetMap<\/a> contributors, <a href=\"https://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA<\/a>"}]},{"method":"addMarkers","args":[$(latitude)$,$(longitude)$,null,null,null,{"interactive":true,"draggable":false,"keyboard":true,"title":"","alt":"","zIndexOffset":0,"opacity":1,"riseOnHover":false,"riseOffset":250},null,null,null,null,"WEaA15COOL2",{"interactive":false,"permanent":false,"direction":"auto","opacity":1,"offset":[0,0],"textsize":"10px","textOnly":false,"className":"","sticky":true},null]}],"limits":{"lat":[-31.66871,-31.66871],"lng":[149.72626,149.72626]},"setView":[[-31.66871, 149.72626],3,[]]},"evals":[],"jsHooks":[]}
\end

<$list filter="[all[current]tag[Trial]]">
<$vars latitude={{!!latitude}} longitude={{!!longitude}} >
<<getfield>>
<$htmlwidgets type="leaflet" uuid="htmlwidget-6fe1f8f34164742c047b"  data = <<getdata>> />
</$vars>
</$list>
1 Like
#3

The TW prerelease has new filter operators, that should be able to return data from JSON strings

So it should be available with v5.2.4 soon

1 Like
#4

Thanks @Mark_S and @pmario for your suggestions.

I figured out the way to use variable substitution.

This is my current script.

\define getjson()
{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addTiles","args":["https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",null,null,{"minZoom":0,"maxZoom":18,"tileSize":256,"subdomains":"abc","errorTileUrl":"","tms":false,"noWrap":false,"zoomOffset":0,"zoomReverse":false,"opacity":1,"zIndex":1,"detectRetina":false,"attribution":"&copy; <a href=\"https://openstreetmap.org\">OpenStreetMap<\/a> contributors, <a href=\"https://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA<\/a>"}]},{"method":"addMarkers","args":[$(latitude)$,$(longitude)$,null,null,null,{"interactive":true,"draggable":false,"keyboard":true,"title":"","alt":"","zIndexOffset":0,"opacity":1,"riseOnHover":false,"riseOffset":250},null,null,null,null,"WEaA15COOL2",{"interactive":false,"permanent":false,"direction":"auto","opacity":1,"offset":[0,0],"textsize":"10px","textOnly":false,"className":"","sticky":true},null]}],"limits":{"lat":[$(latitude)$,$(latitude)$],"lng":[$(longitude)$,$(longitude)$]},"setView":[[$(latitude)$, $(longitude)$],3,[]]},"evals":[],"jsHooks":[]}
\end

<$list filter="[all[current]tag[Trial]]">
<$vars latitude={{!!GPSCoordsLatitude}} longitude={{!!GPSCoordsLongitude}} >
<$htmlwidgets type="leaflet" uuid="htmlwidget-6fe1f8f34164742c047b"  data = <<getjson>> />
</$vars>
</$list>

Now I can generate a map with field values.

image
image941×783 66.4 KB