CODEWITHSUNDEEP
javascriptmapboxmapbox-gl-js
user1154435
user1154435

Reputation: 165

How to change co-ordinates based Mapbox map to using a ZIP code instead?

I've set up a map with a location marker, based in geo co-ordinates.

Now I'm being asked to base it on UK postcodes instead. How would I have to change the JS part to center on and place the marker into a postcode (ZIP) location? Thank you for any help here.

CSS:

<style>
.marker {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%238200b9;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Emarker%3C/title%3E%3Cpath class='a' d='M20,0A13.3353,13.3353,0,0,0,8.4524,19.9988L20,40,31.5476,19.9988h0A13.3354,13.3354,0,0,0,20,0Zm0,18.9166a5.6134,5.6134,0,1,1,5.6134-5.6134A5.6134,5.6134,0,0,1,20,18.9166Z'/%3E%3C/svg%3E");  
background-size: cover;
  width: 46px; height: 46px; margin-top: -23px;
  }
</style>

HTML:

<div id='map' style='width: 100%; height: 500px;'></div>

JS:

<script>
  mapboxgl.accessToken = 'pk.eyJ1IjoibWFya3VzYXR0cnVlIiwiYSI6ImNrNjk2NXB1ZzBhOWozdW45aHhxZ2hzODEifQ.ZWWxJP61cYov_9EN9PrKdQ';
  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-74.5, 40], // starting position
    zoom: 16 // starting zoom
  });
  // Add zoom and rotation controls
  map.addControl(new mapboxgl.NavigationControl());
  // Add marker
  // Add marker
   var el = document.createElement('div');
  el.className = 'marker';
  var marker = new mapboxgl.Marker(el)
  .setLngLat([-74.5, 40])
  .addTo(map);
  </script>

Upvotes: 1

Views: 1481

Answers (2)

Adriana Babakanian
Adriana Babakanian

Reputation: 1299

Since you're already using Mapbox GL JS to display your map, I'd recommend using the Mapbox Geocoding API to get the latitude and longitude of a particular zip code. This guide from Mapbox gives a great conceptual overview of what geocoding is and how it works. For your use case specifically, the forward geocoding query type is most relevant.

For example, suppose you wanted to find the geographic coordinates for the UK zip code "EC1A 1BB". You can make the following request to the Mapbox forward geocoding endpoint:

https://api.mapbox.com/geocoding/v5/mapbox.places/EC1A%201BB.json?access_token=YOUR_MAPBOX_ACCESS_TOKEN&autocomplete=true

, replacing YOUR_MAPBOX_ACCESS_TOKEN with the same access token you're using to load your GL JS map. If you look at the response body of this request by copying the request URL into your browser, you'll see that it returns place_name: "EC1A 1BB, London, Greater London, England, United Kingdom" and coordinates for the center of the zip code region: -0.1120425, 51.5245653.

So, you can parse the response body of this request to get the [longitude, latitude] of the geometry.coordinates, store the coordinates in a coordinates variable, and use this variable to position the marker on your map:

var el = document.createElement('div');
el.className = 'marker';
var marker = new mapboxgl.Marker(el)
  .setLngLat(coordinates)
  .addTo(map);

Upvotes: 1

Seth Lutske
Seth Lutske

Reputation: 10686

You'll need to geocode the location. So you'll need another API for that. A quick google search shows that LocationIQ looks pretty good, but I'm sure there's tons. What you'll do is make an API call to your geolocation service with the postal code, and the response should contain a lat and lng which can then be used in your .setLngLat function.

Upvotes: 1

Related Questions