Leaflet Introduction with Multivariable Symbology
Contents
Introduction
Download Leaflet & Data
Creating the files
In a folder that can be easily accessed, create two text documents, one with the “.html” ending and the other with “.js”. In this same location, add a folder called “data” and move the downloaded GeoJSON into the data folder.
Open the .html and .js files in any text editor you like. The examples were created in VS Code for its auto-completion and formatting, making the coding experience beginner-friendly. The first thing to add will be the code provided by Leaflet, which allows for the connection to the library, the display of the map, and the connection to your JavaScript file.
HTML
In the head section of your file, you’ll need to copy the code below to provide default styling for the web map. Make sure to also include a style section of code where the map frame size will be defined
<head>
<!-- Leflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<style>
#map { height: 600px; }
</style>
</head>
Next in the body of your code, there will be three key sections added here at this point. The first section calls the leaflet script for the implementation into JavaScript, which is where all the functionality comes from this package. The second section defines and creates a generic box in html which is then populated by a map. The final section calls another script, but this time it is your own script where all the JavaScript code will be found. In this example, it is called “NB_JavaScript.js”.
<body>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<div id="map"></div>
<script src="NB_JavaScript.js"></script>
</body>
Altogether, the HTML file shows like this:
<head>
<!-- Leflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<style>
#map { height: 600px; }
</style>
</head>
<body>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<div id="map"></div>
<script src="NB_JavaScript.js"></script>
</body>
JavaScript
In your JavaScript file, this is where you will be manipulating the map and the data in the background. At the beginning of this code, it will simply differ the basemap, location of interest, and add the map to the empty frame created by the HTML file.
var map = L.map('map').setView([46.554, -66.136], 7);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
The first line simply creates the map variable and gives it an initial location using decimal degrees, and the defins the zoom level. The next section adds a basemap for the visualization of locations. For this, we will use OpenStreetMap (OSM)again because it is free and open (link osm here for more info). The “maxZoom” is a value that can be changed to restrict how far the user can zoom into the map. Feel free to play around with this value, with 0 being the most zoomed out and 19 being the limit for OSM tiles. The final line of code. is very simple; this completes the section and sends instructions based on the code above for how to display the map.
