Switch Geocoding API from Google to Mapbox

[jimthoburn]

https://www.mapbox.com/help/define-geocoding/

[jgravois]

do you have your heart set on using Mapbox for geocoding? Esri's is 💯 , supports suggestions and POI search and allows up to 1 million unauthenticated requests a month.

we already wrote a plugin for Leaflet, but i've been looking for an excuse to make something that has no map dependencies whatsoever too...

[jimthoburn]

Thanks for the tip, John! I‘ll have to check out Esri. It sounds awesome. : )

[georgefpope]

Comparing the two APIs, we currently have:

	var geocoder = new google.maps.Geocoder();  
	geocoder.geocode({'address': address}, function(results, status) { ... }

The Mapbox call would look like the following:

            var client = new MapboxClient('YOUR_ACCESS_TOKEN');
            client.geocodeForward('Chester, NJ', function(err, data, res) {
                    // data is the geocoding result as parsed JSON
                    // res is the http response, including: status, headers and entity properties
             });

Thus it would appear to be a relatively straightforward substitution.

[jimthoburn]

Awesome, George!

FOLA’s access token for Mapbox is available as a global variable called MAP_ACCESS_TOKEN.

var client = new MapboxClient(MAP_ACCESS_TOKEN);

After the switch, we can remove the Google Maps <script> element from these two files, which will save bandwidth and processing time…

https://github.com/foodoasisla/site/blob/master/_layouts/location-details.html
https://github.com/foodoasisla/site/blob/master/_layouts/location-list.html

<script src="https://maps.googleapis.com/maps/api/js?…"></script>

[jimthoburn]

While we were working on the Add a location page, @LearningNerd found a way to do geolocation using the Mapbox API, without loading any additional third-party JavaScript!

You can see some example code here…
https://github.com/foodoasisla/site/blob/master/assets/js/github-backend.js

It looks like this…

var addressForGeocoding = '220 S Spring Street, Los Angeles';

var MAP_ACCESS_TOKEN = 'pk.eyJ1IjoiZm9vZG9hc2lzbGEiLCJhIjoiY2l0ZjdudnN4MDhpYzJvbXlpb3IyOHg2OSJ9.POBdqXF5EIsGwfEzCm8Y3Q';

var MAPBOX_URL = 'https://api.mapbox.com/geocoding/v5/mapbox.places/' + encodeURIComponent(addressForGeocoding) + '.json?limit=1&access_token=' + MAP_ACCESS_TOKEN;

get(MAPBOX_URL)
.then(JSON.parse).then(function (mapboxResponse){

  longitude = mapboxResponse.features[0].center[0];
  latitude  = mapboxResponse.features[0].center[1];

}).catch(logAndDisplayError);