Creating a Leaflet Map
Part 1 - The Set Up
Setting up the HTML
Leaflet has some good tutorials for getting started. They show you the basics of how to get a map up with some simple data. One of my favorites is the Interactive Choropleth Map.
The first thing I do differently than any of the tutorials is the set up of my page. The tutorials all have you write the JavaScript directly into the HTML in a script tag. The set up generally is going to look like this.
<body>
<div id = "mapid">
<script>
. . .
</script>
</div>
</body>
If you want to see this the Leaflet Quick Start Guide is a good example. There is no problem with this for simple maps. But as things get bigger you might want to have your JavaScript in a separate file. Especially if you are going to make multiple different maps using the same HTML template. It is just easier if you copy your HTML template and start writing your JavaScript in a JavaScript file.
The question is how to do this. In the Leaflet Quick Start Guide it is
important to notice that the <script> tags all come after the
<div> tags for the map. This is because the <div id=”mapid”>
is the HTML container where you map is getting created. And since HTML just reads down the page if your script
was above that it would be looking for a <div> that hasn’t been created yet.
But what does this mean for pulling the JavaScript out into its own file?
Simply, I either have to put the link to the JavaScript file below the
<body> tag, so it is read after the page loads, or tell the JavaScript
file not to load until after the page has loaded. For these maps I put it below
the </body> tag. If you want to put the JavaScript file in the
head section with the rest of the script files then you would need to either tell the
HTML not to load that until the page is loaded, or tell the JavaScript not to load
until the page is loaded.
On these maps there is a lot of HTML that I did not write. I downloaded a template
from TEMPLATED. So I’m not going to discuss
that. The actual hmtl for the map is simple. The rest of the styling and structure would depend
on how your page is set up. All you really have to do is find the location on your page where
you want your map and insert the map div <div id = "mapid"> If your map isn't
showing up then there are some possible issues with css that can be explored using developer tools.
I have found that using flex-box can create some css issues with the map not displaying because of
some CSS settings.
What's Next?
The CSS is something that probably needs more instruction. But it is something I struggle with and really am only able to understand through playing with it in the Developer Tools of my browser to make things look right and then making the corresponding change in the CSS file. My struggle with CSS is one of the other reasons I went with a template from TEMPLATED. They do the hard part of designing CSS that is responsive and beautiful; I just have to make small changes to make it work for me.
But next I need to add some JavaScript to get the map into the container. I will explain that here.