Skip to content

Extra: Creating a GeoJSON file

Our class projects will connect information from our surveys to our map will, so first we will practice by creating a GeoJSON file of our own!

The power of people-based web mapping

Let’s put to practice what web development and GIS can do for empowering our own stories.

Head over to GeoJSON.io:

Click on the marker tool:

Click on a location of interest to you:

Switch to the Table view by clicking on Table:

Add a data column by clicking on ➕ new column :

Call it place and click OK:

Click inside the place column

Type in a description for the place, in this case I called it home.

Zoom out by pressing the ➖ button or ++ minus ++ key:

Click the edit button:

Click on the marker and move it the adjust the location:

Click the edit button and then Save to save your edits:

Add a new column called color, to put some color to your map later.

When you are done, save your file by going to the top menu’s Save option:

Click GeoJSON:

Download the file to your computer:

Copy the file into your project folder:

⚽In-class Exercise #1 - Leaving your mark(er) on the map!

Go back and add more points to your GeoJSON file.

Tasks

  1. Add some points into your GeoJSON file
  2. Save the file and add it to your lab3 folder

After finishing the exercise, think about how empowering it was for you to be able to add data to the map yourselves. Whether you were clicking random spots or trying to find your old favorite places to visit, the ability to mark things is a reclaiming of mapping for yourself. This sense of staking a claim is what is meant when we refer to “empowering community voices”.

🏁Checkpoint - Add your GeoJSON to your map

  1. Make sure your GeoJSON file is in your week2 folder!

  2. Take note of the filename!

  3. Modify your js/init.js file to add the GeoJSON file to your map:

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") // fetch the GeoJSON file, this is the name from step 2.
    .then(response => {
        return response.json();
    })
    .then(data =>{
        // Basic Leaflet method to add GeoJSON data
        L.geoJSON(data).addTo(map)
    });