Giter VIP home page Giter VIP logo

cpln692-week1's Introduction

Introduction to Web Mapping - Week 1

Readings/Homework

Tools / Downloads

Code Academy

  • Sign up for Code Academy
  • Complete Units 1 through 4 in the Course Academy Introductory Javascript coursework
    • 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)

NOTE: All materials in this course are free by design. Any 'pro' sections in code academy are not assigned

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

In this class, 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.

cpln692-week1's People

Contributors

moradology avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.