4 Prepare Your Page for a Leaflet Web Map
START FROM HERE: You can keep working on your code from the previous section, or use the example code up to this point in the workshop.
Now that we’ve made a basic webpage, we can add our web map.
4.1 Load The External Files
In the head section of our webpage, we need to add some information that will tell our map how to appear (the CSS file) and where to find the Leaflet package (Leaflet JavaScript file).
CSS stands for Cascading Style Sheet. You can think of this as the parameters that set the way certain objects are displayed in a website. The pre-made file we’ll load specifically styles the map elements made with Leaflet.
Loading the Leaflet JavaScript file enables our webpage to have access to the functions and tools in the Leaflet Library. For R or Python users, this is similar to loading packages or libraries in your code. We could save a static version of this library in our website folders and point to that, or we can link to an online version of it, like we have done in the code below. For the most recent version of these links, check the Leaflet Download page in the section called “Using a Hosted Version of Leaflet”.
<!DOCTYPE html>
<html>
<head>
<title>UC Davis Campus Food Map</title>
<!--Load the Leaflet CSS file -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<!--Load the Leaflet JavaScript file -->
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
</head>
<body>
<h1>UC Davis Campus Food Map</h1>
<p>This webmap shows the locations of UC Davis campus grab-and-go dining options.</p>
</body>
</html>Note that in HTML, comments are written like this: <!-- This is a comment -->. Comments are information for a person writing or reading the code and don’t render on the website.
The code we just added doesn’t make any visible changes on our website so if you reload your web page, you won’t notice anything new, but it should load. If it has an error or the text doesn’t show up, you’ll need to debug your code.
4.2 Add a Map Div
A <div> element defines a section in your HTML document. Our web map needs its own <div>. We’ll add one inside the <body> of the webpage. Note that the <div> has an ID named mapid. This will let us create settings and code that apply to this specific <div>. We can define the style of the <div> inside the tag (as we have done below) or we could do it in the <head> of the document in a <style> subsection, or in a separate CSS file. There are many good reasons to choose any of these places. We’re defining the style inside the <div> tag to make it easier to see how it applies to this specific <div> and to keep the code for the map all in one place.
<!DOCTYPE html>
<html>
<head>
<title>UC Davis Campus Food Map</title>
<!--Load the Leaflet CSS file -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<!--Load the Leaflet JavaScript file -->
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
</head>
<body>
<h1>UC Davis Campus Food Map</h1>
<p>This webmap shows the locations of UC Davis campus grab-and-go dining options.</p>
<div id="mapid" style="width: 600px; height: 400px;"></div>
</body>
</html>If you reload your index.html file in your browser, you shouldn’t notice any difference. If the page doesn’t load, however, you’ll need to troubleshoot your code. Make sure your tags open and close in the right order.
4.3 Add a Script Section
Finally, we need to add a section to our code to hold the Leaflet JavaScript code we will write to make our map. Just below your map <div> (and inside the body section), add open and closed <script> tags.
<!DOCTYPE html>
<html>
<head>
<title>UC Davis Campus Food Map</title>
<!--Load the Leaflet CSS file -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<!--Load the Leaflet JavaScript file -->
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
</head>
<body>
<h1>UC Davis Campus Food Map</h1>
<p>This webmap shows the locations of UC Davis campus grab-and-go dining options.</p>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
</script>
</body>
</html>CHECK YOUR WORK: Compare your code with example code up to this point in the workshop.