Skip to content

Lab 3A: A little UX/I(e) - Button events in the Fire KingDOM

The HTM-Elements: Ava<tag> the last Airbender

Remember, when you see tags that have an open and /end in HTML, like <body></body>, they are referred to as elements, so for example: 

<water>Katara</water> 
<air>Aang</air> 
<earth>Toph</earth> 
<fire>Zuko</fire>
Above we have four elements. Each element has a content, for example, the earth element’s content is Toph. Unfortunately, despite how exciting those elements are, the most common HTML element is the <div></div> element, which is a generic container.

This is not an element: <link> because there is not /link to close it.

Elements can contain other elements, for example: 

<kingdom>
    <earth>Toph</earth>
</kingdom>
Here Toph is inside the earth element, which is inside the kingdom element.

Reminder that all tags can have attributes:

<kingdom>
    <earth attribute="valueForTheAttribute">Toph</earth>
</kingdom>

The DOM (Document Object Model) how HTML elements are treated as objects that can be manipulated by JavaScript. The DOM has an API (Application Programming Interface) with JavaScript is used to interact with the elements.

The DOM is a tree structure, which means that the document is the root of the DOM tree, and all elements are children of the document.

DOM Tree

Just think of the DOM as the foundation of our HTML house and the elements are the rooms where we can use JavaScript appliances to interact with them. Anything outside the <html> element (i.e. after the </html>) is not part of the DOM so you can’t use JavaScript to access it.

Making JavaScript interact with HTML-ements of the Air KingDOM!

Objective

Make a button that we can click on to fly to a location for each of the markers you made.

  1. Add a new function to our addMarker function

  2. Create the function to add buttons to the DOM

  3. Add a function to move the map

Creating elements in the DOM?!

To create HTML elements with JavaScript you need to use the createElement method.

Create the function to add buttons

Next we will add our new function. Notice how we are using the lat,lng,and title from the addMarker function? That’s why it was helpful to do step one first.

js/init.js
function createButtons(lat,lng,title){
    const newButton = document.createElement("button"); // (1)! 
    newButton.id = "button"+title; // (2)! 
    newButton.innerHTML = title; // (3)! 
    newButton.setAttribute("lat",lat); // (4)! 
    newButton.setAttribute("lng",lng); // (5)! 
    newButton.addEventListener('click', function(){
        map.flyTo([lat,lng]); // (6)! 
    })
    document.getElementById("contents").appendChild(newButton); //(7)! 
}
  1. Creates a new button element
  2. Gives the button a unique id
  3. Gives the button a title
  4. Sets the latitude
  5. Sets the longitude
  6. Tells Leaflet where to flyTo(), which is the latitude/longitude
  7. This targets the id where the buttons should be added to! In this case it is the div
    with the id contents!

Call the createButtons() in our addMarker function

Remember, the only way functions work is if they are called, so the last step is to call the createButtons() in our addMarker() function.

js/init.js
function addMarker(lat,lng,title,message){
    console.log(message)
    L.marker([lat,lng]).addTo(map).bindPopup(`<h2>${title}</h2> <h3>${message}</h3>`)
    createButtons(lat,lng,title); //(1)!
    return message
}
  1. This is the line that calls our createButtons() function!

Try clicking the button on the webpage and it should fly to the location of that marker!

🛑End of Lab 3A🛑

This is the end of part 1 for today’s lab which you can use for Lab Assignment 3A.

Let’s change our html and js file names, to part1.js and part1.html to get ready for the second part of the lab.

Your final code Lab 3A should look like the following:

js/part1.js
 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
// declare the map and use the variables above
const map = L.map('the_map').setView([34.0709,-118.444], 5);

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);

addMarker(37,-122,'home','home land!')
addMarker(32,-118,'work','where i work land!')
addMarker(39,-119,'location 1','random location')
addMarker(36,-120,'location 2','another random location')

// create a function to add markers
function addMarker(lat,lng,title,message){
    console.log(message)
    L.marker([lat,lng]).addTo(map).bindPopup(`<h2>${title}</h2> <h3>${message}</h3>`)
    createButtons(lat,lng,title);
    return message
}

function createButtons(lat,lng,title){
    const newButton = document.createElement("button"); // adds a new button
    newButton.id = "button"+title; // gives the button a unique id
    newButton.innerHTML = title; // gives the button a title
    newButton.setAttribute("lat",lat); // sets the latitude 
    newButton.setAttribute("lng",lng); // sets the longitude 
    newButton.addEventListener('click', function(){
        map.flyTo([lat,lng]); //this is the flyTo from Leaflet
    })
    document.getElementById("contents").appendChild(newButton); //this adds the button to our page.
}
part1.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>
            <!-- space for a menu -->
        </header>

        <div class="main">
            <div id="contents">
                <!-- page contents can go here -->
            </div>
            <div id="the_map"></div>
        </div>
        <div id="footer">
            Copyright(2023)
        </div>
         <script src="js/part1.js"></script>
    </body>
</html>