Leaflet Introduction with Multivariable Symbology - Revision history

Smitchs: /* Changing the symbology */

2026-01-04T17:22:00Z

Changing the symbology

Smitchs: /* Linking the data */

2026-01-04T17:20:47Z

Linking the data

Smitchs: /* JavaScript */

2026-01-04T17:06:08Z

JavaScript

Smitchs: /* HTML */

2026-01-04T17:02:14Z

HTML

Smitchs: /* Introduction */

2026-01-04T16:56:52Z

Introduction

AJ Monfette: /* Creating the files */

2025-12-20T19:05:16Z

Creating the files

AJ Monfette: /* Changing the symbology */

2025-12-20T16:14:38Z

Changing the symbology

AJ Monfette: /* Download Leaflet & Data */

2025-12-20T15:22:39Z

Download Leaflet & Data

AJ Monfette: /* Download Leaflet & Data */

2025-12-20T15:20:38Z

Download Leaflet & Data

AJ Monfette: /* Download Leaflet & Data */

2025-12-20T15:19:24Z

Download Leaflet & Data

@@ Line 199: / Line 199: @@
-For the colour and temperature functions, these are practical, they same with the only difference being the values they return. To accomplish this, the function will take one variable as an input, which is used to compare against various values to sort each station into groups of either temperature or total rainfall.
+For the colour and temperature functions, these are practical, they are the same with the only difference being the values they return. To accomplish this, the function will take one variable as an input, which is used to compare against various values to sort each station into groups of either temperature or total rainfall.
 <syntaxhighlight lang="js">
@@ Line 225: / Line 225: @@
 </syntaxhighlight>
-In the JavaScript code, this is accomplished using “?” which says if the comparison beforehand is Ture then set the value to what follows the question mark. If the condition is false, it moves to the next comparison. Feel free to change the values to the left of the question mark to change which values get sorted into certain groups, and change the value to the right to either change the colour or size of the symbol for that group.
+In the JavaScript code, this is accomplished using “?” which says if the comparison beforehand is True then set the value to what follows the question mark. If the condition is false, it moves to the next comparison. Feel free to change the values to the left of the question mark to change which values get sorted into certain groups, and change the value to the right to either change the colour or size of the symbol for that group.

@@ Line 105: / Line 105: @@
 ==Linking the data==
-This section of code is very simple to understand and to implement, but this is because of the previous setup, such as starting the server. The first line is extremely simple; it looks at the file that is being hosted, opens the “data” folder, and then opens the GeoJSON. The next two lines are relatively similar as they work together to make the data readable to the programming language and save it to a variable.
+This section of code is very simple to understand and to implement, but this is because of the previous setup, such as starting the server. The first line is extremely simple; it looks at the file that is being hosted, opens the “data” folder, and then opens the GeoJSON. The next two lines are relatively similar as they work together to make the data readable to the programming language and save it to a variable. Be sure to make the filename in the fetch() statement match what you used when you downloaded your GeoJSON file.
 <syntaxhighlight lang="js">

@@ Line 68: / Line 68: @@
 }).addTo(map);
 </syntaxhighlight>
-The first line simply creates the map variable and gives it an initial location using decimal degrees, and the defins the zoom level.
+The first line simply creates the map variable and gives it an initial location using decimal degrees, and the defines 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 next section adds a basemap for the visualization of locations. For this, we will use OpenStreetMap (OSM) again because it is free and open (see [https://www.openstreetmap.org | openstreetmap.org] 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.
+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.
 To check and see if everything is set up and working, navigate to your HTML file in your folders and open it to a web browser. This should open a new tab with a map which you can interact with, which is originally zoomed in on New Brunswick.

@@ Line 16: / Line 16: @@
 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.
 ==HTML==
-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. In the head section of your file, you’ll need to copy the code below to provide default styling for the web map. All this does is take values created by Leaflet for how the web map will be displayed. In the style section, this defines the height of the map frame in your web interface. Play around with this value so that it fits nicely on your display, it will appare diffrent depenting on the display device.
+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. In the head section of your file, you’ll need to copy the code below to provide default styling for the web map. All this does is take values created by Leaflet for how the web map will be displayed. In the style section, this defines the height of the map frame in your web interface. Play around with this value so that it fits nicely on your display, it will appear different depending on the display device.
 <syntaxhighlight lang="html">
 <head>
-    <!-- Leflet CSS -->
+    <!-- Leaflet CSS -->
         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
         integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="

@@ Line 1: / Line 1: @@
 =Introduction=
-Welcome to a beginner’s guide to using Leaflet, an open-source JavaScript library focused on web maps. In this tutorial, you will find the basics of downloading and setting up a Leaflet project and a deeper look at using web maps as a tool to visualize and analyse data using multivariable symbology. This tutorial will be implemented using the programming language of JavaScript, with the web implementation achieved via HTML. This tutorial was completed using Windows OS with specific reference to Windows functionality. Leaflet is compatible with all major Operating systems, but this tutorial provides specific instructions for Windows.
+Welcome to a beginner’s guide to using Leaflet, an open-source JavaScript library focused on web maps. In this tutorial, you will find the basics of downloading and setting up a Leaflet project and a deeper look at using web maps as a tool to visualize and analyse data using multivariable symbology. This tutorial will be implemented using the programming language of JavaScript, with the web implementation achieved via HTML. This tutorial was completed using Windows OS with specific reference to Windows functionality. Leaflet is compatible with all major operating systems, but this tutorial provides specific instructions for Windows.
 =Download Leaflet & Data=
 Using Leaflet does not require the downloading of any software or libraries onto your local machine. The Leaflet library can be easily accessed for web mapping by simply calling a hosted version of Leaflet. This is what we will be doing for this tutorial, and the code required to make this connection will be explained in the next section.

← Older revision		Revision as of 16:14, 20 December 2025
Line 223:		Line 223:
	</syntaxhighlight>		</syntaxhighlight>

	In the JavaScript code, this is accomplished using “?” which says if the comparison beforehand is Ture then set the value to what follows the question mark. If the condition is false, it moves to the next comparison.		In the JavaScript code, this is accomplished using “?” which says if the comparison beforehand is Ture then set the value to what follows the question mark. If the condition is false, it moves to the next comparison. Feel free to change the values to the left of the question mark to change which values get sorted into certain groups, and change the value to the right to either change the colour or size of the symbol for that group.

@@ Line 5: / Line 5: @@
 Now onto the data, which we will be using for this tutorial. For this, we will be downloading weather station data from New Brunswick, Canada, for two reasons. The first is that the data is open and easily downloadable, and the second is that it has at least two variables that can be used for symbolising. It was downloaded from this page[https://climate-change.canada.ca/climate-data/#/monthly-climate-summaries]. For this tutorial, the data used were from July and August of 2000. Once the date filter is set, scroll down to where it says “Data download format” and change it to GeoJSON. Then, click retrieve download links, and click the link that appears to download the data.
-[[File:FilterDataAJ.png|400px]]
+[[File:FilterDataAJ.png|800px]]
 [[File:DownloadDataAJ.png|800px]]