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: '© <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);
