[GIS] Adding a control for geolocation in Leaflet

geolocationleaflet

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);

Best Answer

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.

Related Question