Skip to content

Hello Leaflet… For realz..

Returning home to the HTML/CSS/JS analogy

Recall from last week’s lab (before things went downhill) and the pre-lab reading that a webpage is like a house:

  • HTML is the scaffolding/foundation of the house
  • CSS is the paint, carpets, etc. that makes the house look nice
  • JavaScript is the appliances that adds function to the house

Today we will be focusing on the appliances in more detail.

Why start with HTML and CSS first?

In order to do any JavaScript coding, you need to make sure your content has a place to show up! Additionally, with Leaflet, we actually need to bring in Leaflet’s CSS and JavaScript files into our HTML house. Recall that last week, the map did not show up because I forgot to include Leaflet!

Also, recall that we can bring in Leaflet by externally linking just like we did with our CSS (styles/style.css)!

Prepping our HTML

Let’s keep all our content in the .main class, but move all our portfolio information into a new div element with an id of contents, which looks like this:

        <div class="main">
            <div id="contents">
                <!-- hint: the majority of lab 1 assignment can go here --> <!-- (1)! -->
            </div>
        </div>
  1. You should be able to paste the main contents of your first lab assignment here.

Compatibility with Lab assignment #1

If you are using your week1 lab assignment, you can copy and paste anything with the div elements inside the hint! Of course, this will not work if you have different div or changed the css too much! Adapt as needed!

In our index.html header tag right before </header>, we will need to add the Leaflet.js library. We add it right before the end to make sure they are the last items to load before the body starts loading.

Linking Leaflet.js files

index.html
<!-- Leaflet's css-->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />

<!-- Leaflet's JavaScript-->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

Adding the_map container

In our body, our map needs a PLACE to go, so let’s add a <div> for our map.

divs vs. spans, what’s the DIVfference?

divs are generic HTML elements that stand for division of content, you can think of them as boxes of content. Spans are like divs, but for text content. Check out Mozilla Developer Network for more information:

After the <div id="contents"></div> element, add a new <div></div> element, and give it an ID attribute of the_map like the follwing:

<div id="the_map"></div>

Our current index.html should look like the following:

index.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
        <!-- hint: remember to change your page title! -->
        <meta charset="utf-8" />
        <link rel="shortcut icon" href="#">
        <link rel="stylesheet" href="styles/style.css">

        <!-- Leaflet's css-->
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />

        <!-- Leaflet's JavaScript-->
        <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    </head>

    <body>
        <header>
            <!-- hint: you can make a menu with other links here if you'd like -->
        </header>

        <div class="main">
            <div id="contents">
                <!-- hint: the majority of lab 1 assignment can go here -->
            </div>
            <div id="the_map"></div>
        </div>
        <div id="footer">
            Copyright(2022)
        </div>
    </body>
</html>

Prepping the CSS

Let’s incorporate our new div that has the id ofthe_map into our CSS now.

Adding the_map container

#the_map{ /* (1)! */
    height:80vh; /* (2)! */
    grid-area: main_map;/* (3)! */
}
  1. #the_map tells this CSS selector to look for an ID called the_map
  2. height defines how tall this div should be, 80vh means 80% of the vertical height.
  3. We are going to name this grid-area the following: main_map it will be referenced in the .main class, but you can name it whatever you want; just be consistent.

Why height: 80vh;?

For Leaflet’s map to show, it must have a height defined in order to show up. So you can play around with the height in your assignments, but be sure to include some height!!

Putting the_map id into our main class

Find our previous CSS style for the main-content it should be a class called main. Remember, because it is a class it starts with a . NOT a # like IDs do!

IDs vs. Classes

  • IDs: There can only be ONE unique ID on a HTML page and in CSS you refer to it with a #, like #the_map.
  • Classes: There can be multiple classes on an HTML page and in CSS you refer to it with a .
.main{
    grid-area: main_content;
    grid-template-areas: "content" "main_map";
    display: grid;
}

Our CSS should look like the following:

styles/style.css
body{
    display: grid;
    /* grid-template-columns: 1fr;  */
    grid-auto-rows: auto 1fr;
    grid-template-areas: "header" "main_content" "footer";
    background-color: aqua;
    /* height: 100vh; */
}

header{
    grid-area: header;
}

#footer{
    grid-area: footer;
}

.main{
    grid-area: main_content;
    grid-template-areas: "content" "main_map";
    display: grid;
}

#contents{
    grid-area: content;
}

#the_map{
    height:80vh;
    grid-area: main_map;
}

With our container ready to go, open up the JavaScript file again and add the following Leaflet code template:

js/init.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
console.log("Hello Asia-Am 191A! :)")

// JavaScript const variable declaration
const map = L.map('the_map').setView([34.0709, -118.444], 15); // (1)!

// Leaflet tile layer, i.e. the base map
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map); // (2)!

//JavaScript let variable declaration to create a marker
let marker = L.marker([34.0709, -118.444]).addTo(map) // (3)!
        .bindPopup('Math Sciences 4328 aka the Technology Sandbox<br> is the lab where I work in ')
        .openPopup();
  1. L. is the Leaflet class that allows us to use built-in Leaflet tools. The . is like a chain of commands, but similar to css, Leaflet wants us to know where our map is! In the documentation, the map constructor expects an ID, which we called the_map. We then use setView to set the Latitude (y), Longitude (x), and Zoom of the initial map.
  2. We use a L.tilelayer class to add a basemap to our map.
  3. We use the L.marker to add a point to our map. Notice there is no ; here because the code continues.

Can you see the usage of latitude and longitude in the code?

What is latitude and Longitude

  • Latitude ranges from -90.0 to 90.0 and measures the distance north or south from the equator (y-axis).
  • Longitude ranges from -180 to 180 measures distance east or west of the prime meridian (x-axis).

What is L.map and L.tile?

L.map is Leaflet’s lingo for its own mapping Application Programming Interface (API). Every API has its own unique language to utilize it. You can think of it as an adapter to plug in your smart phone or laptop! Each plug has a different way to connect! To learn more about Leaflet’s API visit here: https://leafletjs.com/reference-1.7.1.html

⚽ Class Exercise #2 - Adding more markers

Tasks

  1. Add some new markers!
  2. Customize the initial map
  3. Optional: change the base map or add some html into the marker popups.

Looking at the code above a little bit, we can see some latitude/longitude pairs. Your task is to copy the marker code add more markers of your choosing.

Unique variable names

When you create new marker variables, you must give the marker variable a new name, like marker2 or you will simply override the previous marker! 😭

To find latitude/longitude of coordinates, you can use this website or another tool or your choosing:

Optional: Not happy with the basemap?

See if you can switch the basemap out by visiting the following link and changing L.tileLayer on your map:

🏁Checkpoint

Check to see if your code looks likes the following before moving on:

index.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
        <!-- hint: remember to change your page title! -->
        <meta charset="utf-8" />
        <link rel="shortcut icon" href="#">
        <link rel="stylesheet" href="styles/style.css">

        <!-- Leaflet's css-->
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />

        <!-- Leaflet's JavaScript-->
        <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    </head>

    <body>
        <header>
            <!-- hint: you can make a menu with other links here if you'd like -->
        </header>

        <div class="main">
            <div id="contents">
                <!-- hint: the majority of lab 1 assignment can go here -->
            </div>
            <div id="the_map"></div>
        </div>
        <div id="footer">
            Copyright(2022)
        </div>
        <script src="js/init.js"></script>
    </body>
</html>
styles/style.css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
body{
    display: grid;
    /* grid-template-columns: 1fr;  */
    grid-auto-rows: auto 1fr;
    grid-template-areas: "header" "main_content" "footer";
    background-color: aqua;
    /* height: 100vh; */
}

header{
    grid-area: header;
}

#footer{
    grid-area: footer;
}

.main{
    grid-area: main_content;
    grid-template-areas: "content" "main_map";
    display: grid;
}

#contents{
    grid-area: content;
}

#the_map{
    height:80vh;
    grid-area: main_map;
}
js/init.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
// JavaScript const variable declaration
const map = L.map('the_map').setView([34.0709, -118.444], 15); // (1)!

// Leaflet tile layer, i.e. the base map
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map); // (2)!

//JavaScript let variable declaration to create a marker
let marker = L.marker([34.0709, -118.444]).addTo(map) // (3)!
        .bindPopup('Math Sciences 4328 aka the Technology Sandbox<br> is the lab where I used to work!')
        .openPopup();