3

In my Leaflet app, I am trying to add a simple geolocator control on my map. I am following the instructions from https://github.com/domoritz/leaflet-locatecontrol. I am already using Leaflet control (L.Control.locate). However, it does not show up on the map. I've tried adding it in different places in my app.js file. If I simply add it as var locate = L.control.locate().addTo(map); it keeps my point icons from showing up. Currently I have it as below. My point icons show up and the Layer controller and Zoom controller show up, but the Locate controller still does not show up. Any suggestions? Side-Note: I know that the geolocation might not work at this point with the current setview, bounds, and max/min zoom settings (if the user is outside them). I just want the control to show up in the map and then I will try to add an alert if the user tries launching it outside the bounds/zoom limits.

var map = L.map('map').setView([35.7787, -78.6397], 14.50);
map.options.minZoom = 14;
map.options.maxZoom = 18;
map.setMaxBounds([[35.82389, -78.40], [35.704567, -78.80]]);

var layers = L.tileLayer('http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>contributors'}).addTo(map);

//icon code goes here...
var types = ['beer','bar','restaurant','music','culture','cafe', 'occult shop'];

var layerControl = L.control.layers().addTo(map);    

types.forEach(function(type) {
    var layer = L.geoJson(dtr_points, {
        filter: function(feature, layer) {
            return feature.properties.Type == type;
        }, 
        onEachFeature: function (feature, layer) {
            var link_url = "<a href='" + feature.properties.Link + " 'target='_blank'>" + feature.properties.Name + "</a>";
            layer.bindPopup(link_url);

            if(feature.properties.Type == "beer") {
            layer.setIcon(beer);
            };
           //More icon code...
        }    
    }).addTo(map);

    layerControl.addOverlay(layer, type);
});

var locator = L.control.locate({
    position: 'topright',
    strings: {
        title: "Show me where I am, yo!"
    }
}).addTo(map);
  • I suggest you remove the point adding section and get your map working without that. Then get them working after. It sounds like they are related, and causing the other to fail. – Alex Leith Mar 29 '17 at 2:38
  • If you create a basic working GIST, I can help you debug it perhaps? – Alex Leith Mar 29 '17 at 2:39
2

It turns out that the cdn's for the Leaflet.locate given in the https://github.com/domoritz/leaflet-locatecontrol example are incorrect. I replaced them using cdn's from https://www.jsdelivr.com/projects/leaflet.locatecontrol. I also included the mapbox cdn's. In retrospect, it would probably be best to simply download the files into your css and js folders.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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