Skip to content

Part 1: Functions and the DOM

The HTM-Elements: Avatag the last Airbender

Remember, when you see tags 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.

The DOM (Document Object Model) is basically where HTML elements exists and it has an API (Application Programming Interface) that JavaScript can interact by using functions.

Making JavaScript interact with HTML-ements!

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

  3. Add a function to move the map

Creating elements?!

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 Part 1🛑

This is the end of part 1 for today’s lab!

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 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
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(2022)
        </div>
         <script src="js/part1.js"></script>
    </body>
</html>