add raster to leaflet map in shiny

819 views
Skip to first unread message

Rafael Menéndez Mellado

unread,
Apr 3, 2014, 9:01:24 AM4/3/14
to shiny-...@googlegroups.com

Hi everyone!

Is it possible to add a raster layer to a leaflet map in shiny.

This is my ui.R

shinyUI(bootstrapPage(
                      tags$head(tags$link(rel='stylesheet', type='text/css', href='styles.css')),

                      gridster(tile.width = 200, tile.height = 200,
                           

                               gridsterItem(col = 1, row = 1, size.x = 4, size.y = 3,

                                            leafletMap(
                                                       "map1", "100%", 600,
                                                       initialTileLayer = "http://{s}.tiles.mapbox.com/v3/jcheng.map-5ebohr46/{z}/{x}/{y}.png",
                                                       initialTileLayerAttribution = HTML('Maps by <a href="http://www.mapbox.com/">Mapbox</a>'),
                                                       options=list(
                                                                    center = c(49.25, 16),
                                                                    zoom = 4,
                                                                    maxBounds = list(list(17, -180), list(59, 180))
                                                                    )
                                                       )
                                            )
)
)

and this is the server.R

shinyServer(function(input, output, session) {
  
            map1 <- createLeafletMap(session, 'map1')

}
)

I want to set a calendar selector so every time you set a data a different raster wolud be shown in the map.

Than you in advance


 

Dawg

unread,
May 11, 2014, 4:41:43 PM5/11/14
to shiny-...@googlegroups.com
Hello -

did you find a way to accomplish this?

Thanks,
D.

Joe Cheng

unread,
May 12, 2014, 12:29:35 PM5/12/14
to Dawg, shiny-...@googlegroups.com
It's not currently possible. The Leaflet library supports it but I still need to do some research on the best way to present the R API.


--
You received this message because you are subscribed to the Google Groups "Shiny - Web Framework for R" group.
To unsubscribe from this group and stop receiving emails from it, send an email to shiny-discus...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Fabien Rinaldi

unread,
Jul 5, 2014, 6:40:47 AM7/5/14
to shiny-...@googlegroups.com
I Joe

I am really interested in this functionality could you tell when you plan implant this.

Thank you

Fabien

Rafael Menéndez Mellado

unread,
Oct 24, 2014, 6:40:10 AM10/24/14
to shiny-...@googlegroups.com
Finally I figured out a way to do this, although it's kind of "dirty"

1. Create a html with a leaflet map with rCharts, using de method yourmap$save(yourhtmlfile, 'inline', standalone=TRUE)

2. Create an image from my raster, this is raster with the information about graphic representation embeded, to do this:
2a. Create a vrt with gdal gdal_translate -of VRT file.tiff file.vrt
2b. Edit the vrt to add de colrs information, changing <ColorInterp>Gray</ColorInterp> to
<ColorInterp>Palette</ColorInterp>
    <ColorTable>
    <Entry c1="255" c2="255" c3="255" c4="255"/> #<-This is the rgba color for the minimum value of your raster
    <Entry c1="0" c2="198" c3="198" c4="255"/>
    <Entry c1="0" c2="252" c3="252" c4="255"/>
    <Entry c1="72" c2="130" c3="34" c4="255"/>
        <Entry c1="72" c2="130" c3="34" c4="255"/>
        <Entry c1="0" c2="192" c3="0" c4="255"/>
        ...
        </ColorTable>

3. Convert vrt to png gdal_translate -ot Byte -of PNG -expand rgba pruebahirlam.vrt pruebahirlamcolor.png

4. If you want any value to be shown as transparent, just make his rgba code to be <Entry c1="255" c2="255" c3="255" c4="0"/>

Now you can add this image just editing the html, adding

 var imageUrl = 'path/pngfile',
imageBounds = [[LowerLeft Lat, LowerLeft Long], [Upper Right Lat, Upper Right Long]];
L.imageOverlay(imageUrl, imageBounds, {opacity: 0.5}).addTo(map)

It's a little tricky but works fine for me (though the image is shown a little blurred)
Reply all
Reply to author
Forward
0 new messages