DEV Community

Code_Regina
Code_Regina

Posted on

|YelpCamp| Adding Maps

                 -Registering for Mapbox 
                 -Geocoding Our Locations 
                 -Working with GeoJSON 
                 -Displaying a map 
Enter fullscreen mode Exit fullscreen mode

Registering for Mapbox

Adding maps to our application.
Mapbox uses geocoding with latitude and longitude, however, the end user does not have to enter latitude and longitude for it to function.

Must create an account first before can use it.
https://www.mapbox.com/

Geocoding Our Locations

GitHub logo mapbox / mapbox-sdk-js

A JavaScript client to Mapbox services, supporting Node, browsers, and React Native

@mapbox/mapbox-sdk

Build Status

A JS SDK for working with Mapbox APIs.

Works in Node, the browser, and React Native.

As of 6/11/18, the codebase has been rewritten and a new npm package released. The mapbox package is deprecated in favor of the new @mapbox/mapbox-sdk package Please read the documentation and open issues with questions or problems.

Table of contents

Installation

npm install @mapbox/mapbox-sdk

If you are supporting older browsers, you will need a Promise polyfill. es6-promise is a good one, if you're uncertain.

The documentation below assumes you're using a JS module system If you aren't, read "Pre-bundled files on unpkg.com".

Usage

There are 3 basic steps to getting an API response:

  1. Create a client.
  2. Create a request.
  3. Send the request.

Creating clients

To create a service

Alt Text

Alt Text

Working with GeoJSON

GeoJSON follows a particular format where we have a type field that will be point

Alt Text

Alt Text

Displaying a map

Map box GL JS is a javscript library that uses WebGL to render interactive maps from vector tiles and mapbox styles.
Alt Text

To get started

Alt Text

Alt Text


mapboxgl.accessToken = '<%-process.env.MAPBOX_TOKEN%>
const map = new mapboxgl.Map({
  container: 'map', 
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [-74.5, 40], 
  zoom: 4
}); 

Enter fullscreen mode Exit fullscreen mode

Top comments (0)