Geocoding with Mapbox

Objectives

• Describe geocoding

• Use Mapbox geocoder to forward and reverse geocode

Geocoding

What is geocoding? - The process of converting a description of a place to geographic coordinates. The relationship between the description and the place is a mapping (no pun intended).

Example:

"Seattle, WA" -> geocode -> {lat: 47.6062095, lng: -122.3320708}

Mapbox

We'll use the Mapbox Geocoding API. Mapbox is a system of geolocation-related APIs, similar to the Google Maps API. Lyft, the Weather Channel, and many other large companies use Mapbox to incorporate maps into their apps.

Get Geocoding

Using Mapbox

• Head to the mapbox sign up page and make an account.

• Locate your Access Token - this will be the same for all Mapbox APIs

Set up

• Create a new node project called geocode-example.

• Install the @mapbox/mapbox-sdk node module via npm.
• In mapTest.js file, import the geocoder from the mapbox module and set up a geocoding client using your access token docs.

const mbxGeocoding = require('@mapbox/mapbox-sdk/services/geocoding');
const geocodingClient = mbxGeocoding({ accessToken: 'your-access-token' });

Forward Geocode

Search for 'Seattle, WA' and check out the GeoJSON feature collection that is returned. docs

mapTest.js

geocodingClient
  .forwardGeocode({
    query: 'Seattle, WA'
  })
  .send()
  .then(response => {
    const match = response.body;
    console.log(match);
  });

The coordinates are listed under the center field of each object.

geocodingClient
  .forwardGeocode({
    query: 'Seattle, WA'
  })
  .send()
  .then(response => {
    const match = response.body;
    console.log(match.features[0].center);
  });

Reverse Geocode

Now copy the coordinates that you just found and reverse geocode them! docs

geocodingClient
  .reverseGeocode({
    query: [ -122.3301, 47.6038 ]
  })
  .send()
  .then(response => {
    const match = response.body;
    console.log(match);
  });

More Resources

• Geocoding

Exercise/Lab: City Search

You're going to set up an app that allows users to search for a city and add their favorite cities to a database.

Set up the front end.

• Install express, ejs, express-ejs-layouts, and method-override.

• Set up an express app that listens to port 8000.

• Add ejs, express-ejs-layouts, body-parser, and method-override middleware.

• Create your views folder that has your layout.ejs.

Set up the database.

• install pg and sequelize via npm

• initialize sequelize

• configure config.json

• create a place model with city, state, lat, and long fields

• run migration

Views

city-search

• form with two text inputs, one for city and one for state

• form should submit a GET request to /search

• "View My Favorites" button links to /favorites view

search-results

• header that says "search results for "

• list search results (include the name and coordinates of each result, along with an "add to favorites" button)

• each list item should include a form with four hidden fields (city, state, lat, long) so the favorites button actually submits a POST request to /add

• include a "back to search" button that links back to the search page

favorites

• lists all saved favorite cities

• each list item should have a "remove from favorites" button that deletes that city from the places table and redirects back to the favorites page

• "remove from favorites" button will need to be a POST form with a submit button that utilizes method-override

Routes

GET '/'

• render city-search view

GET '/search'

• use forward geocoding to search for cities in the US (hint: use the type and countries fields in addition to query)

• render search-results page, passing through the searched data as well as the results

POST '/add'

• use findOrCreate to post to the database of favorites

GET '/favorites'

• pull all favorited cities from the database and pass them into the view

DELETE '/remove'

• deletes city from place table and redirects to favorites view