Difference between revisions of "Leaflet Introduction with Multivariable Symbology"

From CUOSGwiki
Jump to navigationJump to search
(Created page with "=Introduction= =Download Leaflet & Data= =Creating the files= =Adding the data/server= =Changing the symbology= =Adding the legend=")
 
 
(21 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
=Download Leaflet & Data=
  
=Download Leaflet & Data=
 
=Creating the files=
  
=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.
−
=Adding the data/server=
  
  +
  +
[[File:File Structure AJM.png|300px]]
  +
  +
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
  +
<syntaxhighlight lang="html">
  +
<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>
  +
</syntaxhighlight>
  +
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”.
  +
<syntaxhighlight lang="html">
  +
<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>
  +
</syntaxhighlight>
  +
Altogether, the HTML file shows like this:
  +
<syntaxhighlight lang="html">
  +
<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>
  +
</syntaxhighlight>
  +
  +
==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.
  +
<syntaxhighlight lang="JS">
  +
var map = L.map('map').setView([46.554, -66.136], 7);
  +
  +
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  +
maxZoom: 18,
  +
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  +
}).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 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.
  +
  +
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.
  +
  +
[[File:WebMapSetUpAJ.png|600px]]
  +
  +
=Creating a local server=
  +
Install Python 3
  +
Before we connect the data to the web map, we must make the data readable by the web. This is most simply done by creating a local server. This will host the data securely and only locally on your network. For this toturial the simplest server is a Python server. If you do not have a version of Python 3 installed on you machin, go and download it [https://www.python.org/downloads/].
  +
  +
To get the server up and running, navigate to the folder that contains your 2 scripts and the “data” folder
  +
*In the blank space below the files, right-click
  +
*Then click “Open in Terminal” which opens a command prompt for this folder
  +
*Enter the text below and hit enter to start your local server
  +
<pre>
  +
Python -m http.server
  +
</pre>
  +
*When it starts, it should populate a new line with:
  +
<pre>
  +
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
  +
</pre>
  +
*To access your files through your server, enter http://localhost:8000/ in your web browser
  +
  +
[[File:LocalHostAJ.png]]
  +
  +
*Click on your HTML file to open your web map
  +
  +
Now that your file with both scripts and your data is being hosted, it can be called via the JavaScript file for visualization. The last thing to know is when you are done with the server, to close it, click into the terminal and type ctr+c.
  +
  +
=Adding data=
  +
Now it’s time to connect the weather station so that its data can be seen in the map. This section of the tutorial will be written in the JavaScript file. To display this data, the GeoJSON found in the data folder needs to be opened in our file. Next, it will read through and find the coordinates of each station to use for presentation on the map. For this, we will also be separating the data into the two months now, so we have distinct layers for each month.
  +
The process of accomplishing this is separated into three distinct parts: linking to the data, making changes for visualization, and finally, the presentation.
  +
  +
==Linking the data==
  +
  +
<syntaxhighlight lang="js">
  +
fetch("data/NB_2000_Aug_Jul.json")
  +
.then(response => response.json())
  +
.then(data => {
  +
});
  +
</syntaxhighlight>
  +
  +
==Changes for visualization==
  +
  +
<syntaxhighlight lang="js">
  +
const julyLayer = L.geoJSON(data, {
  +
filter: f => f.properties.LOCAL_DATE === "2000-07",
  +
pointToLayer: (feature, latlng) => {
  +
return L.circleMarker(latlng,{
  +
radius: 10,
  +
fillColor: "#ff0000ff",
  +
color: "#000",
  +
weight: 1,
  +
opacity: 1,
  +
fillOpacity: 0.8
  +
});
  +
},
  +
  +
});
  +
</syntaxhighlight>
  +
  +
==Presentation==
  +
  +
<syntaxhighlight lang="js">
  +
L.control.layers(null, {
  +
"July 2000": julyLayer,
  +
"August 2000": augustLayer
  +
}).addTo(map);
  +
  +
julyLayer.addTo(map);
  +
augustLayer.addTo(map);
  +
</syntaxhighlight>
  +
==Altogether==
  +
<syntaxhighlight lang="js">
  +
fetch("data/NB_2000_Aug_Jul.json")
  +
.then(response => response.json())
  +
.then(data => {
  +
const julyLayer = L.geoJSON(data, {
  +
filter: f => f.properties.LOCAL_DATE === "2000-07",
  +
pointToLayer: (feature, latlng) => {
  +
return L.circleMarker(latlng,{
  +
radius: 10,
  +
fillColor: "#ff0000ff",
  +
color: "#000",
  +
weight: 1,
  +
opacity: 1,
  +
fillOpacity: 0.8
  +
});
  +
},
  +
});
  +
const augustLayer = L.geoJSON(data, {
  +
filter: f => f.properties.LOCAL_DATE === "2000-08",
  +
pointToLayer: (feature,latlng) => {
  +
return L.circleMarker(latlng,{
  +
radius: 6,
  +
fillColor: "#0077ffff",
  +
color: "#000",
  +
weight: 1,
  +
opacity: 1,
  +
fillOpacity: 0.8
  +
});
  +
},
  +
});
  +
L.control.layers(null, {
  +
"July 2000": julyLayer,
  +
"August 2000": augustLayer
  +
}).addTo(map);
  +
julyLayer.addTo(map);
  +
augustLayer.addTo(map);
  +
});
  +
</syntaxhighlight>
  +
 
=Changing the symbology=
  
=Changing the symbology=
 
=Adding the legend=
  
=Adding the legend=
  +
=References=

Latest revision as of 21:33, 19 December 2025

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.

File Structure AJM.png

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: '&copy; <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.

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.

WebMapSetUpAJ.png

Creating a local server

Install Python 3 Before we connect the data to the web map, we must make the data readable by the web. This is most simply done by creating a local server. This will host the data securely and only locally on your network. For this toturial the simplest server is a Python server. If you do not have a version of Python 3 installed on you machin, go and download it [1].

To get the server up and running, navigate to the folder that contains your 2 scripts and the “data” folder

  • In the blank space below the files, right-click
  • Then click “Open in Terminal” which opens a command prompt for this folder
  • Enter the text below and hit enter to start your local server
Python -m http.server
  • When it starts, it should populate a new line with:
Serving HTTP on :: port 8000 (http://[::]:8000/) ...

LocalHostAJ.png

  • Click on your HTML file to open your web map

Now that your file with both scripts and your data is being hosted, it can be called via the JavaScript file for visualization. The last thing to know is when you are done with the server, to close it, click into the terminal and type ctr+c.

Adding data

Now it’s time to connect the weather station so that its data can be seen in the map. This section of the tutorial will be written in the JavaScript file. To display this data, the GeoJSON found in the data folder needs to be opened in our file. Next, it will read through and find the coordinates of each station to use for presentation on the map. For this, we will also be separating the data into the two months now, so we have distinct layers for each month. The process of accomplishing this is separated into three distinct parts: linking to the data, making changes for visualization, and finally, the presentation.

Linking the data

fetch("data/NB_2000_Aug_Jul.json")
  .then(response => response.json())
  .then(data => {
});

Changes for visualization

const julyLayer = L.geoJSON(data, {
  filter: f => f.properties.LOCAL_DATE === "2000-07",
  pointToLayer: (feature, latlng) => {
    return L.circleMarker(latlng,{
        radius: 10,
        fillColor: "#ff0000ff",
        color: "#000",
        weight: 1,
        opacity: 1,
        fillOpacity: 0.8
    });
  },
  
});

Presentation

L.control.layers(null, {
  "July 2000": julyLayer,
  "August 2000": augustLayer
}).addTo(map);

julyLayer.addTo(map);
augustLayer.addTo(map);

Altogether

fetch("data/NB_2000_Aug_Jul.json")
  .then(response => response.json())
  .then(data => {
const julyLayer = L.geoJSON(data, {
  filter: f => f.properties.LOCAL_DATE === "2000-07",
  pointToLayer: (feature, latlng) => {
    return L.circleMarker(latlng,{
        radius: 10,
        fillColor: "#ff0000ff",
        color: "#000",
        weight: 1,
        opacity: 1,
        fillOpacity: 0.8
    });
  },
});
const augustLayer = L.geoJSON(data, {
  filter: f => f.properties.LOCAL_DATE === "2000-08",
  pointToLayer: (feature,latlng) => {
    return L.circleMarker(latlng,{
        radius: 6,
        fillColor: "#0077ffff",
        color: "#000",
        weight: 1,
        opacity: 1,
        fillOpacity: 0.8
    });
  },
});
L.control.layers(null, {
  "July 2000": julyLayer,
  "August 2000": augustLayer
}).addTo(map);
julyLayer.addTo(map);
augustLayer.addTo(map);
});

Changing the symbology

Adding the legend

References

Retrieved from "https://dges.carleton.ca/CUOSGwiki/index.php?title=Leaflet_Introduction_with_Multivariable_Symbology&oldid=23574"