ATFutures / geoplumber

Serve geographic data from R and consume with scalable front end.

Home Page:https://atfutures.github.io/geoplumber/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add grow slider

Robinlovelace opened this issue · comments

To show an example of interactivity on the JS side.

Few more tickets of prep and ship shaping other functions and will get on to this.

Working on this.

Not sure if a reprex would work but this should work on your machine

# git pull 
devtools::install()
gp_create()
# or just switch to a geoplumber app (should be backward compatible)
gp_sf(with_slider = TRUE)

That should give you

  1. traffic locations data with cirlces
  2. slider would grow the circles between 1 - 10

screen shot 2018-10-06 at 11 36 02

screen shot 2018-10-06 at 11 36 19

screen shot 2018-10-06 at 11 36 37

more complicated examples on the way.

working on adding "linewidth" to leaflet with slider component.

linewidth added, one of the previous commits.

With last push, following should do a "server side" sf st_buffer of the uni_poly object. This is clearly easy on client side, using js packages like D3 or turf. What we are demonstrating here is React/R (geoplumber) can easily query the server for "R" power.

The reliance on JS/React knowledge in the snippet below will always be there until, someone, somewhere would write a package that would be able to "sythensize" React from R. I attribute this simplicity in the code to React's state/props paradigm.

gp_create(tolower(tempdir()))
cw <- setwd(tolower(tempdir()))
gp_is_wd_geoplumber()
gp_add_slider(
  min = 0.001,
  max = 0.01,
  step = 0.001
)
gp_change_file(
  path = "src/Welcome.js",
  what = '<GeoJSONComponent fetchURL={"http://localhost:8000/api/uol?grow=" + this.state.sliderInput} />
',
  pattern = '<GeoJSONComponent fetchURL="http://localhost:8000/api/uol" />',
  replace = TRUE,
  verbose = TRUE
)
gp_build()
gp_plumb()

screen shot 2018-10-09 at 21 46 51

screen shot 2018-10-09 at 21 46 37

We can close this and #43

This is awesome. Just playing with it now. Yes, I say, fantastic work.

Proof that the above code is reproducible: just reproduced it, as illustrated below, this project I think is close to take off 🚀

peek 2018-10-09 22-19

Quick question/idea @layik: I think it would be interesting and very educational to show similar functionality done on the client side, e.g. with https://github.com/Turfjs/turf/tree/master/packages/turf-buffer

The benefit of the js solution is not just speed/resource use: it also has sensible units (I suggest km in this case)!

An example that would go really well in a vignette/paper on the subject (the vignette can become a paper). Heads-up @mpadge on that ; )

ah, just see this. Thanks for checking on turf-buffer! Absolutely. Glad I was right in my assumption. Creating a new issue this one has dragged a little bit too far :)

The GIF is going into the .Rmd. Thank you @Robinlovelace.