Skip to content

JavaScript and CSS Code Refactoring before geoCODING!

Refactoring code means re-writing code without changing its function. Refactoring is meant to make code understandable and/or reusable for yourself.

We are going to refactor so that when we get the Google form data it is simpler to know where to change the code!

Putting the Fetch in a function

Our fetch call sits out in the middle of nowhere, which is the Global space! That is not good because if the fetch doesn’t work then our page won’t load!

js/init.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
// declare variables
let mapOptions = {'center': [34.0709,-118.444],'zoom':5}

// use the variables
const map = L.map('the_map').setView(mapOptions.center, mapOptions.zoom);

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

// 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>`)
    return message
}

fetch(`map.geojson`)
    .then(response => {
        console.log(response)
        return response
    })
    .then(data =>{
        // do something with the data
    })

Leaving it there will break our code if we leave it there without a file to get, so let’s move that fetch into a function we will call later:

function loadData(){
    fetch(`map.geojson`)
        .then(response => {
            console.log(response)
            return response
        })
        .then(data =>{
            // do something with the data
        })
}
// this is how we use our function
loadData()

fetch(`map.geojson`)
    .then(response => {
        console.log(response)
        return response
    })
    .then(data =>{
        // do something with the data
    })

Changing the map.geojson into a variable

Let’s also change the map.geojson to a parameter called url that way we can use this function to get different urls!

To make our lives easier, we’ll define a new variable called dataUrl and use that as a placeholder for our function too.

js/init.js
    const dataUrl = "map.geojson" //(1)!
    function loadData(url){ //(2)!
        fetch(url)
            .then(response => {
                return response
            })
            .then(data =>{
                // do something with the data
            })
    }
    // this is how we use our function
    loadData(dataUrl) 
    // (3)!
  1. The URL variable we can change later when we get the URL we need.
  2. The new URL parameter to get data from!
  3. Function call that uses the loadData() function and dataUrl parameter!

Some CSS Touch-up!

Lastly, let’s make our survey look a little nicer, by adding two columns to our secondary grid in the .main CSS selector.

Change #1 Adding columns lengths

Because we are using css-grid the way to add columns is by using the grid-template-columns class. We can assign a fixed value, like 100px for 100 pixels, but let’s make our site scalable to any screen size by using a fr value for each of 1fr 1fr. So our current change should look like:

/styles/style.css
        .main{
            grid-area: main_content;
            grid-template-columns: 1fr 1fr;
            grid-template-areas: "main_map" "content";
            display: grid;
        }

freal, an side about CSS unit lengths

CSS has many units for length, such as pixels or % percentage that can account for how much of a page to cover. However, is a new unit fr stands for fraction and it represents a fraction of the available space in the grid container. What this means it can automatically account for the fraction of a page!!! You can also mix and match units. Learn more here.

CCS Change #2: Putting content on the same row

Now that we created the columns, now we need to assign the columns to the rows! With css-grid the grid-template-areas property is already how we assign rows and columns:

grid-template-areas: "main_map" "content";

Means have one row for main_map and one row for content.

To put the areas on the same row we modify both of them to be in the same ” “ pair, and separated by a space (), as follows:

grid-template-areas: "main_map content";

If you change the order, like "content main_map" then content will show up on the left:

grid-template-areas: "content main_map";

For now, let’s keep the map on the left.

The resulting CSS should look like the CSS after tab:

    .main{
        grid-area: main_content;
        grid-template-columns: 1fr 1fr; /* (1)! */
        grid-template-areas: "main_map content"; /* (2)! */
        display: grid;
    }
  1. 1fr 1fr gives us two equal columns, setting it to 2fr 1fr makes the first column fill up twice the space of the second.
  2. "main_map content" are in the same quotations" now! 
    .main{
        grid-area: main_content;
        grid-template-areas: "main_map" "content" ;
        display: grid;
    }

🏁Checkpoint

Before moving on, make sure your code looks 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
33
34
<!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 -->
                <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfcElv5dlXInR7XHQz27_OcYJlWcIUr-GBbc-ocefWlGd1uXg/viewform?embedded=true" width="640" height="654" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
            </div>
            <div id="the_map"></div>
        </div>
        <div id="footer">
            Copyright(2023)
        </div>
        <script src="js/init.js"></script>
    </body>
</html>
js/init.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 variables
let mapOptions = {'center': [34.0709,-118.444],'zoom':5}

// use the variables
const map = L.map('the_map').setView(mapOptions.center, mapOptions.zoom);

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

// 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>`)
    return message
}

const dataUrl = "map.geojson"

function loadData(url){
    fetch(url)
        .then(response => {
            console.log(response)
            return response
        })
        .then(data =>{
            // do something with the data
        })
}
// we will put this comment to remember to call our function later!
loadData(dataUrl)