Mapbox Geolocation, how to load into map?

Question

I have being playing around with MapBox and I am having some issues with getting the GeoLocation API to send data back to the map and update the it.

This is what I got right now:

  mapboxgl.accessToken = 'TOKEN-HERE';
  var map = new mapboxgl.Map({
         container: 'map', // container id
         style: 'mapbox://styles/mapbox/streets-v9', 
         center: [-0.968539, 54.562917],
         zoom: 9 
  });

  map.on('style.load', function() {
      map.addSource("myMap", {
             "type": "geojson",
             "data": "https://api.mapbox.com/geocoding/v5/mapbox.places/UK_ADDRESS_HERE.json?country=gb&types=address&autocomplete=true&access_token=TOEKN"
      });

      map.addLayer({
          'id': 'test1',
          'type': 'line',
          'source': 'myMap',
          'interactive': true
      });
 });

Answer 1

The answer may lie with how you are encoding UK_ADDRESS_HERE .

https://api.mapbox.com/geocoding/v5/mapbox.places/UK_ADDRESS_HERE.json

---

The request format for the Mapbox Geocding API requires that since the {query} parameter can contain any value, it should be URL-encoded .

That means that a simple geocode request like 10 Downing Street, Westminster must be encoded using encodeURIComponent to 10%20Downing%20Street%2C%20Westminster .

Try this and verify that your request is proper.

curl https://api.tiles.mapbox.com/geocoding/v5/mapbox.places/10%20Downing%20Street%2C%20London.json?access_token=${MAPBOX_ACCESS_TOKEN}