0

I'm fairly new to handling spatial data and leaflet in general. I'm having difficulty creating a popup for my map. Basically what I want in the popup is the coordinates of my polygon and one of the properties (the type of class). Below is an test example of my geoJSON file:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {"class": "blah"},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -81.7987060546875,
              32.74570253945518
            ],
            [
              -81.6229248046875,
              32.16631295696736
            ],
            [
              -80.958251953125,
              32.4263401615464
            ],
            [
              -81.2713623046875,
              32.791892438123696
            ],
            [
              -81.7437744140625,
              32.97180377635759
            ],
            [
              -81.7987060546875,
              32.74570253945518
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {"class": "blah2"},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -82.056884765625,
              33.55512901742288
            ],
            [
              -81.4471435546875,
              33.247875947924385
            ],
            [
              -81.40869140625,
              33.80653802509606
            ],
            [
              -82.078857421875,
              33.88865750124075
            ],
            [
              -82.40295410156249,
              33.58716733904656
            ],
            [
              -82.056884765625,
              33.55512901742288
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {"class": "blahh3"},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -83.485107421875,
              32.930318199070534
            ],
            [
              -83.07861328125,
              31.863562548378965
            ],
            [
              -82.21618652343749,
              32.11049589629439
            ],
            [
              -82.97973632812499,
              33.22030778968541
            ],
            [
              -83.726806640625,
              33.211116472416855
            ],
            [
              -83.485107421875,
              32.930318199070534
            ]
          ]
        ]
      }
    }
  ]
}

Here is the code I have so far to create my map, but I'm struggling/don't even know where to start on creating a popup that includes my coordinates and property:

blahTest <- geojson_read("/file/path/...", what = "sp")
fpal <- colorFactor("viridis", blahTest$class)
leaflet(blahTest) %>%
  addTiles() %>%
  addPolygons(stroke = FALSE, smoothFactor = 0.3, fillOpacity = 1,
              color = ~fpal(class)) %>%
  addLegend(colors = ~fpal, opacity = 1.0, labels = ~fpal) %>%
  addPopups()

Thanks in advance!

4
  • 1
    Try to set popup = column_to_popup within addPolygons.
    – patL
    Commented Feb 28, 2018 at 15:53
  • Thanks, I've gotten the property, class, to work but not the coordinates of my polygon.
    – fletchr
    Commented Feb 28, 2018 at 16:03
  • What coordinates of your polygon do you want to display? All nodes?
    – TimSalabim
    Commented Feb 28, 2018 at 21:10
  • I would like to include all nodes
    – fletchr
    Commented Feb 28, 2018 at 21:43

1 Answer 1

1

Overview

Using @patL's suggestion, I used the popup parameter within leaflet::addPolygon() function to add label both the class and coordinates that define each polygon within blahTest.

I saved your sample data as .gejson file and imported it using sf::read_sf() and produced the HTML table within the popup using the htmlTable package after reading How to add an html table to leaflet popup.

SS of HTML Table Output in Leaflet Map

# load necessary package
library( htmlTable )
library( leaflet )
library( sf )

# load necessary data 
blahTest <- 
  read_sf(
    dsn = "test.geojson"
    , layer = "OGRGeoJSON"
  )

# map data values to colors
fpal <- colorFactor( palette = "viridis", domain = blahTest$class)

# create map
my.map <-
  leaflet( data = blahTest ) %>%
  addTiles() %>%
  addPolygons( stroke = FALSE
               , smoothFactor = 0.3
               , fillOpacity = 1
               , color = ~fpal( class )
               , popup = paste0(
                 "<b>Class: </b>"
                 , blahTest$class
                 , "<br>"
                 , "<b>Coordinates: </b>"
                 , "<br>"
                 , lapply( 
                     X = blahTest$geometry
                     , FUN = function( i ) 
                       htmlTable( 
                         x = i[[1]]
                         , header = c( "Longitude", "Latitude" )
                       )
                     )
                   ) ) %>%
  addLegend( pal = fpal
             , values = ~class
             , labels = ~class
             , title = "Legend"
             , position = "topright"
             , opacity = 1.0 )
# view map
my.map

# end of script #

Not the answer you're looking for? Browse other questions tagged or ask your own question.