CODEWITHSUNDEEP
javahtmlmapsmappingleaflet
Whale Biologist
Whale Biologist

Reputation: 21

Do I need leaflet map source code to work with in in HTML?

I've recently been offered a small part time job managing a website, the job description involves use of HTML but they want me to work with a leaflet created map (published via RPub & Shiny but probably created with Java). Specifically embedding it into the website and adding images to the markers of the sites which are mapped. Now, I've been digging around in the HTML code for the resulting map and I can't see a way to add images to the map using the existing HTML. Perhaps my HTML skills aren't up to scratch here. However, having looked around the web for information on adding images to leaflet markers suggests I may need to edit this in java, which I don't have the original code for. Do I need the original code to be able to do this?

The map in question is hosted here:

http://rpubs.com/roycostilla/placesofworship

I'm not entirely sure if I'm missing something obvious, or if what they want from me isn't doable without the map's Java code. I appreciate my post isn't as detailed as it could be, but I'm a little bit confused and overwhelmed myself as I have only small amounts of HTML experience and none in Java.

Upvotes: 0

Views: 369

Answers (1)

ghybs
ghybs

Reputation: 53280

Not exactly sure about your Java thing.

If my understanding is correct, the Leaflet map you want to work with has been created as a Shiny App from R language.

Leaflet is a JavaScript library. The version of that library used by Shiny appears to be 0.7.3 (quite old now, but still works).

There is quite some good API documentation even for that version. But you need to write JavaScript code to work with it.

Now if I understand correctly, you would like to modify the way that map is currently done, like changing the markers. Then to include it in an HTML page.

You have several options here:

  • Use the original R code to change how the Shiny App is created. I think you can directly customize the markers / icons in R. Then you can include it in an <iframe> in your page.
  • Get the raw data from R and output it into JavaScript / JSON (instead of creating a Shiny App), so that you can directly manipulate it in the JavaScript of a brand new HTML page. Refer to the above linked documentation to create the markers with customized icons.
  • A more complicated solution would be to extract the data from the Shiny App / widget, so that you do not have to modify the R part. Would be slightly more difficult to maintain if the data changes frequently. Then you can manipulate the data and create all your customizations in JavaScript, like in the previous point.

Here is a demonstration for point 3:

var group = L.featureGroup();

$(document).ready(function () {

  var mapContainer = $("#htmlwidget-98ae620727ee15448353")[0];
  var map = mapContainer["htmlwidget_data_init_result"];

  map.eachLayer(function(layer) {

    // Filter only for Circle Markers, as the map looks to use only those for data.
    if (layer instanceof L.CircleMarker) {
      layer.addTo(group);

      // Embed the popup data into the layer feature properties, so that it is recorded in the GeoJSON output.
      layer.feature = layer.feature || {}; // Initialize the layer feature, in case it does not exist yet.
      layer.feature.type = "Feature";
      layer.feature.properties = layer.feature.properties || {};
      layer.feature.properties.data = layer._popup.getContent();
      layer.feature.properties.color = layer.options.color;
    }

  });

  console.log(group.toGeoJSON());

});

Live demo: https://plnkr.co/edit/oWbewb53CLZxmfVj8WbN

Once you have your data as GeoJSON, it is easy to create a new Leaflet map in JavaScript. See for example the Leaflet GeoJSON tutorial.

Note: as your map has more than 2,000 points, using markers with icons (instead of Circle Markers) will considerably slow down browsers. You should either stick on using Circle Markers (ideally painting them on a Canvas instead of SVG), or use a clustering plugin, e.g. Leaflet.markercluster.

Good luck!

Upvotes: 4

Related Questions