2d:null 2e:["$","title",null,{"children":"Introduction to JavaScript with Leaflet | Moacir P. de Sá Pereira | Observable"}] 33:T48a,### Building the File Structure #### HTML If you were to create this project outside of an Observable Notebook, you'd start with a file called `index.html`, and its contents could look something like this: ```html Introduction to JavaScript with Leaflet

Introduction to JavaScript with Leaflet

``` #### JavaScript The `index.html` file above relies on (see the bottom of the code) a JavaScript file in the same folder called `code.js`. That's where we’d type in the JavaScript to make our map. 34:T422,Because we’ve described these cells above as Observable blocks, the variable assignment is a bit odd. Under normal circumstances, we’d just write on three lines of code: ```js const aNumber = 2; const aString = "Moacir"; const aBoolean = true; ``` Breaking these up into blocks gives useful reactivity that we can show off now. **A Note on `let` vs. `const` vs. `var`**: In older JavaScript, variables were always defined with the `var` keyword. In 2015, the `let` and `const` keywords were added. All three are a means of defining a variable, and all three are distinct from each other. You can learn more about the distinctions [on this page](https://www.w3schools.com/JS/js_variables.asp). A good rule of thumb is to use `const` as the default and only use the other keywords when you need their specific added sugar (mutability in the case of `let` and global scope in the case of `var`). However, because this is a loosey-goosey sandbox, we assume mutability everywhere, which is why I use `let` throughout, even if `const` is more appropriate. 35:T69b,## Now to Leaflet Maps are clearly products built with data, even when they’re made by hand. They contain organized information, which is one way of thinking about data. The [Leaflet](http://leafletjs.com) library provides a strong API for building webmaps that incorporate your data. They do this by exposing an object, `L`, which through its various methods can be used to create a map and add data to it. Because we’re doing this in Observable, `L` has already been defined in the very last cell. In the `index.html` example above, `L` is exposed with the `