Saving leaflet map - in parts

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.

1 Like

Hi @StatSteph,

here some not so optimal approach.

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">
<meta charset="utf-8"/>
<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>
<div id="htmlwidget_container">
  <div class="leaflet html-widget html-fill-item" id="htmlwidget-42497f9887caa2248662" style="width:100%;height:400px;"></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}{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=\"\">OpenStreetMap<\/a>,  <a href=\"\">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>
  • all the dependencies that you need inside a folder called steph including (for my setup)

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

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

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.