Saving leaflet map - in parts

General
1

I made a leaflet map and saved it to HTML using the function saveWidget from the package htmlwidgets with the option selfcontained=FALSE. Ultimately this map needs to go into a larger website and the IT person/programmer has asked that my file be split so it has 4 files as follows:

  • .json file (or whatever is most practical) – this will hold the line data’s coordinates and attributes
  • “script.js” – this will hold the Leaflet JS code that reads in the data and generates the interactive map
  • .css file (not sure if there’s any styling going on in the .html file, but this is where it would go)
  • .html file (this is just a temporary container that specifies the div that runs the script.js file—to be replaced by the .NET code once we move it into the app)

Does anyone know a way to do this? I found this post but that didn't work. https://www.reddit.com/r/RStudio/comments/cn7zp5/leaflet_export/

1 Like
2

Hi @StatSteph,

here some not so optimal approach.

library(leaflet)
city <- data.frame(id = 1:5,
                   name = c("Sarajevo", "Banja Luka", "Tuzla", "Zenica", "Bijeljina"),
                   population = c(291422, 150997, 120441, 115134, 114663),
                   lng = c(18.413029, 17.191000, 18.66709, 17.90397, 19.21437),
                   lat = c(43.856430, 44.772182, 44.53842, 44.20169, 44.75874)
)

map <- leaflet() %>% 
  addTiles() %>% 
  setView(lat = 44.811962, lng = 15.868565, zoom = 7) %>% 
  addMarkers(data = city, lng = ~lng, lat = ~lat, layerId = ~id, group = "base", popup = ~name)

map will be a dummy leaflet map. Now using

htmlwidgets::saveWidget(widget = map, file = "StatStephAwesomeMap.html", selfcontained = FALSE, libdir = "./steph" )

will give you 2 things

  • the html file StatStephAwesomeMap.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<style>body{background-color:white;}</style>
<script src="steph/htmlwidgets-1.6.4/htmlwidgets.js"></script>
<script src="steph/jquery-3.6.0/jquery-3.6.0.min.js"></script>
<link href="steph/leaflet-1.3.1/leaflet.css" rel="stylesheet" />
<script src="steph/leaflet-1.3.1/leaflet.js"></script>
<link href="steph/leafletfix-1.0.0/leafletfix.css" rel="stylesheet" />
<script src="steph/proj4-2.6.2/proj4.min.js"></script>
<script src="steph/Proj4Leaflet-1.0.1/proj4leaflet.js"></script>
<link href="steph/rstudio_leaflet-1.3.1/rstudio_leaflet.css" rel="stylesheet" />
<script src="steph/leaflet-binding-2.2.2/leaflet.js"></script>
  <title>leaflet</title>
</head>
<body>
<div id="htmlwidget_container">
  <div class="leaflet html-widget html-fill-item" id="htmlwidget-42497f9887caa2248662" style="width:100%;height:400px;"></div>
</div>
<script type="application/json" data-for="htmlwidget-42497f9887caa2248662">{"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/copyright/\">OpenStreetMap<\/a>,  <a href=\"https://opendatacommons.org/licenses/odbl/\">ODbL<\/a>"}]},{"method":"addMarkers","args":[[43.85643,44.772182,44.53842,44.20169,44.75874],[18.413029,17.191,18.66709,17.90397,19.21437],null,[1,2,3,4,5],"base",{"interactive":true,"draggable":false,"keyboard":true,"title":"","alt":"","zIndexOffset":0,"opacity":1,"riseOnHover":false,"riseOffset":250},["Sarajevo","Banja Luka","Tuzla","Zenica","Bijeljina"],null,null,null,null,{"interactive":false,"permanent":false,"direction":"auto","opacity":1,"offset":[0,0],"textsize":"10px","textOnly":false,"className":"","sticky":true},null]}],"setView":[[44.811962,15.868565],7,[]],"limits":{"lat":[43.85643,44.772182],"lng":[17.191,19.21437]}},"evals":[],"jsHooks":[]}</script>
<script type="application/htmlwidget-sizing" data-for="htmlwidget-42497f9887caa2248662">{"viewer":{"width":"100%","height":400,"padding":0,"fill":true},"browser":{"width":"100%","height":400,"padding":0,"fill":true}}</script>
</body>
</html>
  • all the dependencies that you need inside a folder called steph including (for my setup)
    htmlwidgets-1.6.4/htmlwidgets.js
    jquery-3.6.0/jquery-3.6.0.js
    jquery-3.6.0/jquery-3.6.0.min.js
    etc

If you open your HTML file you will see that all these files are called so you will have to manually rearranged them (if this is a common task there are ways to automatize this) into the structure you need (saving all css files into a css folder, javascript files into js etc).

The data was encoded inside the HTML.

Hope it helps .

1 Like
3

Thanks - I just think we need to extract the json from the HTML which seems simple enough.

4

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.