Skip to content

JavaSCrypt of the Necrodancer and FUNctions

Creating our first map with Leaflet.js and learning to use JavaScript!

Goals

  • Add a Leaflet map
  • Understand how JavaScript works with HTML and CSS
  • Understand how JavaScript variables, functions, methods work together

Lab outline

  1. JavaScript variables
  2. Web mapping with Leaflet.js
  3. JavaScript functions

Starting Template Code for lab #2

Use the following template code or your lab assignment #1:

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
<!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">
    </head>

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

        <div class="main">
            <!-- hint: the majority of lab 1 assignment can go here -->
        </div>
        <div id="footer">
            Copyright(2022)
        </div>
    </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
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";
}

#contents{
    grid-area: content;
}