L is not defined error with Leaflet
Solution 1
Switch the order of the two script tags main.js and leaflet.js.
Basically you're instantiating main.js before leaflet.js has been instantiated and therefore L does not exist at runtime for main.js.
<script src="js/leaflet/leaflet.js"></script>
<script src="js/main.js"></script>
Solution 2
I am using mapbox with reactjs and not using leaflet directly, and in my case I was able to resolve the error message: L is not defined no-undef
by simply getting it from the window variables:
var L = window.L;
Solution 3
I also have an error with L but in this case the error was that in
<script src="./leaflet/dist/leaflet.js"></script>
I was writting:
<script type="module" src="./leaflet/dist/leaflet.js"></script>
Carson
Updated on July 26, 2022Comments
-
Carson almost 2 years
I'm trying to setup leaflet and following the quick start guide on their site. However, I keep getting an error of...
Uncaught ReferenceError: L is not defined at initmap (main.js:10) at main.js:6
It seems like an import issue, but I'm stuck. I've tried using the imports provided on their tutorial...
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin=""/>
and
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg==" crossorigin=""></script>
But no luck...
I tried downloading the library and adding it to my project like such...
And then importing from there such like....
'<script src="js/leaflet/leaflet.js"></script>' '<script src="js/leaflet/leaflet.js"></script>'
But still get the same error.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--Stylesheets--> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="js/leaflet/leaflet.css"> <!--Scripts--> <script src="js/main.js"></script> <script src="js/leaflet/leaflet.js"></script> </head> <h1>State Capitals</h1> <!--State Form--> <div class="form-group"> <label for="state" class="col-sm-2 control-label">State</label> <div class="col-sm-10"> <select class="form-control" id="state" name="state"> <option value="">N/A</option> <option value="AK">Alaska</option> <option value="AL">Alabama</option> <option value="AR">Arkansas</option> <option value="AZ">Arizona</option> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DC">District of Columbia</option> <option value="DE">Delaware</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> <option value="IA">Iowa</option> <option value="ID">Idaho</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="MA">Massachusetts</option> <option value="MD">Maryland</option> <option value="ME">Maine</option> <option value="MI">Michigan</option> <option value="MN">Minnesota</option> <option value="MO">Missouri</option> <option value="MS">Mississippi</option> <option value="MT">Montana</option> <option value="NC">North Carolina</option> <option value="ND">North Dakota</option> <option value="NE">Nebraska</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NM">New Mexico</option> <option value="NV">Nevada</option> <option value="NY">New York</option> <option value="OH">Ohio</option> <option value="OK">Oklahoma</option> <option value="OR">Oregon</option> <option value="PA">Pennsylvania</option> <option value="PR">Puerto Rico</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="SD">South Dakota</option> <option value="TN">Tennessee</option> <option value="TX">Texas</option> <option value="UT">Utah</option> <option value="VA">Virginia</option> <option value="VT">Vermont</option> <option value="WA">Washington</option> <option value="WI">Wisconsin</option> <option value="WV">West Virginia</option> <option value="WY">Wyoming</option> </select> </div> </div> <!--Map--> <div id="mapid"></div> <body> </body> </html>
JavaScript
var map; var ajaxRequest; var plotlist; var plotlayers=[]; initmap(); function initmap() { // set up the map map = new L.Map('map'); // create the tile layer with correct attribution var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'; var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 12, attribution: osmAttrib}); // start the map in South-East England map.setView(new L.LatLng(51.3, 0.7),9); map.addLayer(osm); }
CSS
h1{ text-align: center; } .form-group { width: 700px; height: 10%; border: 1px solid #c3c3c3; margin: auto; position: absolute; left: 0; right: 0; } #mapid { height: 180px; }