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

We'll be using @mapbox/mapbox-sdk node module via npm.

Set up

Run npm install.
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, and method-override middleware.
Create your views folder that has your layout.ejs.

Set up the database.

install pg, pg-hstore, 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

petefitton / mapbox-travelers Goto Github PK

mapbox-travelers's Introduction