0

I'm trying to use locate function from Leaflet in R, I'd like a marker to show up after clicking on locate button but the following code only centers and zooms the view on the user's geolocation. I'm new to JS, and I thought passing the drawMarkers: true, from the manual would map markers:

library(sf)
library(dplyr)
library(leaflet)
library(htmlwidgets)
library(htmltools)
library(leaflet.extras)


punto = st_sfc(st_point(c(-96.951239, 19.4600523))) %>% st_set_crs(4326)
punto_b = punto %>% st_transform(32614) %>% st_buffer(50000) %>% st_transform(4326)  %>% st_as_sf

leafIcons <- icons(
  iconUrl = "https://gitlab.com/datamarindo/anps/-/raw/master/logo_prona.png",
  iconWidth = 100, iconHeight = 100)
  

l <- leaflet(data = punto) %>% addTiles() %>%
      addMarkers(dat = punto, icon = leafIcons) %>%
      addPolygons(data = punto_b, fillColor = "yellow", weight = 4) %>% 
      addMeasure() %>% 
      addMiniMap() %>% 
      addEasyButton(easyButton(
         icon="fa-crosshairs", title="Locate Me",
         onClick=JS("function(btn, map){ map.locate({setView: true, drawMarker: true});}")))

1 Answer 1

0

I found it easier to do using direct Javascript; besides that, the html that leaflet in R produces is heavy and has some binaries that make it really difficult to read, html in JS is as plain as this:

<html>
<head>
    <title>Pronatura Ver 50 km</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
    <script language="javascript">
      var map;

      function init() {
         map = new L.Map('map');
         L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
            maxZoom: 18
         }).addTo(map);

         // map view before we get the location
         map.setView(new L.LatLng(19.460052, -96.951239), 8);
         L.circle([19.460052, -96.951239], {
                color: 'moccasin',
                fillColor: 'orange',
                fillOpacity: 0.5,
                radius: 50000
             }).addTo(map);
        var greenIcon = L.icon({
            iconUrl: 'https://gitlab.com/datamarindo/anps/-/raw/master/logo_prona.png',
            iconSize:     [90, 95], // size of the icon
            iconAnchor:   [45, 45], // point of the icon which will correspond to marker's location
            popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
        });
        L.marker([19.460052, -96.951239], {icon: greenIcon}).addTo(map);
      }

      function onLocationFound(e) {
         var radius = e.accuracy / 2;
         var location = e.latlng
         L.marker(location).addTo(map)
         L.circle(location, radius).addTo(map);
      }

      function onLocationError(e) {
         alert(e.message);
      }

      function getLocationLeaflet() {
         map.on('locationfound', onLocationFound);
         map.on('locationerror', onLocationError);

         map.locate({setView: true, maxZoom: 16});
      }
   </script>

</head>
<body onLoad="javascript:init();">
   <div id="map" style="height: 500px"></div>
   <input type="button" value="Mostrar mi ubicación!" onClick="javascript:getLocationLeaflet();">
   
</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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