How to make only the rendered leaflet map show on canvas

Hello, I made an interactive choropleth map with Leaflet. I created a map of countries in the EU, and displayed some data over it. However, when I run the code, what I see first is the map of the United States, and then I have to drag the map of Europe from the right hand side of the canvas, which I do not want. I have tried leaflet(europe,options = leafletOptions(drag = FALSE)) but I do not see any difference. My code is shown below

library(maptools)
library(mapdata)
library(rgeos)
library(sf)
library(rgdal)
library(leaflet)
library(geojsonio)
library(raster)
library(rtweet)
library(jsonlite)

## Add some color

bins <- c(0,400000,1000000,2500000,5000000,10000000,50000000,80000000,Inf)
pal <- colorBin("Dark2",domain = europe$pop_est ,bins = bins)

title <- "<h3> The Population and Income of European Countries </h3>"
source <- "<h5> Source: European Geo Data </h5>"

labels <- paste(
  "<strong>Country</strong>:",trendsdf$country, "<br/>",
  "Trending:",trendsdf$trend1, "<br/>",
  "Trending:",trendsdf$trend2, "<br/>",
  "Trending:",trendsdf$trend3, "<br/>",
  "Trending:",trendsdf$trend4, "<br/>",
  "Trending:",trendsdf$trend5, "<br/>"
  ) %>% lapply(htmltools::HTML)

euMap <- leaflet(europe,
                 options = leafletOptions(
                   drag = FALSE
                 )) %>%
  setView(-96,37.8,4) %>% 
  addTiles() %>% 
  addPolygons(
    fillColor = ~pal(europe$pop_est),
    weight = 2,
    opacity = 1,
    color = "white",
    dashArray = "3",
    fillOpacity = 0.7,
    highlight = highlightOptions(
      weight = 5,
      color = "#666",
      dashArray = "3",
      fillOpacity = 0.7,
      bringToFront = TRUE
    ),
    label = labels,
    labelOptions = labelOptions(
      style = list("font-weight" = "normal",padding = "3px 8px"),
      textsize = "15px",
      direction = "auto"
    )
  ) %>% addLegend(pal = pal,values = ~europe$pop_est,opacity = 0.7,
                  title = "Population",position = "bottomright") %>% 
  addControl(html = title,position = "topright") %>% 
  addControl(html = source,position = "bottomleft")
  
euMap

I wish to run the code, and only the map of Europe is displayed. I don't want to have to always drag the map of Europe out whenever I run the code. I can share my geojson and data file with you if you wish to run the code on your machine, unless you can pinpoint the problem without needing to run my code. Thanks in anticipation of your help!

Is the leaflet code really yours? :slight_smile: Just kidding of course...

The reason I am asking is that it has setView(setView(-96,37.8,4) as the second item in the leaflet pipeline, which sets the selected view roughly from Juneau, Alaska to Caracas. Try removing the line, the map should behave better...

More specifically: without a hardcoded view area (via setView() in the main leaflet pipeline) it should select view area dynamically, based on the extent of your data = europe argument of the first leaflet() call.

1 Like

Thanks for your response and sense of humor. I must admit, I didn't realize the setView() line of code was responsible; I am not so much of a GIS person :slightly_smiling_face: . It worked after I removed that line, but I have to always zoom in on the map of Europe whenever the code is run. Any tips?

Now it gets a bit tricky, since I can't run your code without your data.

But depending on your definition of Europe (it can get tricky) you can amend the setView argument of your call to something like setView(14.415556, 50.094722, 4).

The arguments of the function are:

  1. coordinates of the center of your desired view (I am using a Prague landmark, but the decision about where lies the center of Europe is up to you; I have found http://bboxfinder.com/ a nice tool when investigating)
  2. desired zoom level; it goes from 1 (entire world as a single square) down to about 20 (very detailed, can depend on basemap used). Four is good for continent level overview, but depending on your data (and expected screen size of your users) it might be appropriate to use 3 or 5; keep in mind that - because the basemap tiles are by necessity pre-rendered, which is a constraint - the zoom level is possible only in discrete steps.
1 Like

The setView() code and zoom of 4 worked, thanks a lot.

Hi @iFeanyi - If the response provided by @jlacko worked for you, please consider marking it as the solution. Thank you!

2 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.