Skip to content

Latest commit

 

History

History
67 lines (45 loc) · 2.92 KB

README.md

File metadata and controls

67 lines (45 loc) · 2.92 KB
Raw

Open Source GIS for the Web - Week 1

Readings/Homework

Code Academy

  • Install tools for the course and kick the tires
    • Github for desktop
    • Visual Studio Code (or Atom, which some people find simpler)
    • Javascript Console (you pick the browser)
  • Watch videos about Javascript basics
    • Data, types, and assignment
    • Responding to conditions (conditionals)
    • Functions (defining behaviors that take some input and maybe return a result)
    • Scope/Scoping rules (where things are defined and where they aren't)
    • Optionally, sign up for Code Academy if you'd like extra practice
  • Reflect on recordings
    • Write down concepts/topics that you had a hard time understanding
    • Find at least three questions you'd like to see answered
    • If you're really lacking confidence, schedule some time to complete relevant code academy coursework

NOTE: All materials in this course are free by design.

Project

Task 1: Open Seed Project

The Seed Project is in the /assignment directory of the Week 1 repo. Open the index.html file. Take a look at the text between the second set of <script> tags—this is the Javascript code we will be editing for this assignment.

Task 2: Change the marker location to your favorite place to eat food in Philadelphia

The part of the code that adds a marker looks like this: L.marker([50.5, 30.5]).addTo(map);. The 50.5, 30.5 part refers to a set of coordinates: latitude and longitude (lat, lng).

In our class, we'll learn a number of ways to find coordinates for a location that we want to map. An easy way to do this for a single address is to use Google Maps. Check out these instructions to Get the coordinates of a place.

Task 3: Add two more markers

Add two additional markers to your map. These two markers should be two additional places where you like to eat food.

To add an additional marker, copy the code you used to create the first marker onto the next line. Change the coordinates for your new markers. When you are finished, save your file and reload the browser. You should see three markers.

Extra

We are using a Javascript library called Leaflet to handle mapping in the browser. You can check out the Leaflet Docs to get an idea of what it can do.

Later, we'll explore an exciting alternative to Leaflet - Mapbox GL. The 'GL' means it tries to take advantage of graphics cards to generate powerful vizualisations incredibly quickly). Mapbox is a bit more involved and we won't be touching on it until the second half of the course but the examples provided by Mapbox are worth clicking through for inspiration and a sense of where we're headed.