I am a novice when it comes to any kind of coding and am trying to learn some basic web mapping. I have a created a map using Leaflet and am trying to add the Navigation plugin. I have been following the tutorial at GIS Solutions "Leaflet Navigation". I am working in Visual Studio Code and when I run it, I get an error " Uncaught TypeError TypeError: L.control.navbar is not a function...
I am not sure where I am going wrong. I am using a more recent version of Leaflet than the tutorial, but it still didn't work then I used the older version. I double checked where I stored the file I downloaded from GitHub. I feel like I might have missed a set up step as I have tried two other plugins with no luck.
I've looked at How to install a Leaflet Plugin, but got more confused.
Here is the code. Thanks.
<!DOCTYPE html>
<html>
<head>
<!--title-->
<title>St. Andrews United Loyalist Church</title>
<!--Link to Leaflet CSS document-->
<link rel="stylesheet" href="/[email protected]/dist/leaflet.css" />
<!--Link to Leaflet Navigation plugin -->
<link rel="stylesheet" href="src\Leaflet.NavBar.css" />
<!--Link to Leaflet JS API-->
<script src="/[email protected]/dist/leaflet.js"></script>
<script src="src\Leaflet.NavBar.js"></script>
<!--Styling document elements, declaring the map to fill the entire page-->
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#mapid { width: 100%; height: 100%}
</style>
</head>
<body>
<!--Declare map div container to place the map inside on the page-->
<div id="mapid"></div>
<!--Javascript map functions-->
<script>
var map = L.map('mapid').setView([45.180864, -74.452271], 18);
// This example uses custom tiles taken from /
L.tileLayer('/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
}).addTo(map);
L.control.navbar().addTo(map);
</script>
</body>
</html>