DEV Community

Alex Spinov
Alex Spinov

Posted on

Mapbox Has a Free Tier — Build Interactive Maps, Geocode Addresses, and Add Navigation to Your App

#api #webdev #beginners #maps

Mapbox gives you 50,000 free map loads per month, 100,000 geocoding requests, and 100,000 directions requests. That's enough for most apps. No credit card for the free tier.

Get Your Free API Token

  1. Sign up at mapbox.com
  2. Go to your account → Tokens
  3. Copy your default public token (starts with pk.)

1. Geocode an Address 

curl "https://api.mapbox.com/geocoding/v5/mapbox.places/1600+Pennsylvania+Ave+Washington+DC.json?access_token=pk.YOUR_TOKEN"
Enter fullscreen mode Exit fullscreen mode

Returns coordinates: [-77.0365, 38.8977]

2. Reverse Geocode (Coordinates to Address) 

curl "https://api.mapbox.com/geocoding/v5/mapbox.places/-73.9857,40.7484.json?access_token=pk.YOUR_TOKEN"
Enter fullscreen mode Exit fullscreen mode

3. Get Directions 

curl "https://api.mapbox.com/directions/v5/mapbox/driving/-73.99,40.73;-73.98,40.75?access_token=pk.YOUR_TOKEN&geometries=geojson"
Enter fullscreen mode Exit fullscreen mode

4. Python — Store Locator 

import requests

TOKEN = "pk.YOUR_TOKEN"

def geocode(address):
    url = f"https://api.mapbox.com/geocoding/v5/mapbox.places/{address}.json"
    r = requests.get(url, params={"access_token": TOKEN, "limit": 1})
    features = r.json().get("features", [])
    if features:
        coords = features[0]["center"]
        name = features[0]["place_name"]
        return {"name": name, "lng": coords[0], "lat": coords[1]}

def get_distance(origin, destination):
    url = f"https://api.mapbox.com/directions/v5/mapbox/driving/{origin};{destination}"
    r = requests.get(url, params={"access_token": TOKEN})
    routes = r.json().get("routes", [])
    if routes:
        km = routes[0]["distance"] / 1000
        mins = routes[0]["duration"] / 60
        return f"{km:.1f} km, {mins:.0f} min"

loc = geocode("Times Square, New York")
print(f"Location: {loc}")
print(f"Distance to JFK: {get_distance('-73.985,40.758', '-73.778,40.641')}")
Enter fullscreen mode Exit fullscreen mode

5. JavaScript — Interactive Map 

<div id="map" style="width:100%; height:400px;"></div>
<script src="https://api.mapbox.com/mapbox-gl-js/v3/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v3/mapbox-gl.css" rel="stylesheet" />
<script>
mapboxgl.accessToken = "pk.YOUR_TOKEN";
const map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/streets-v12",
  center: [-73.985, 40.758],
  zoom: 12
});
new mapboxgl.Marker().setLngLat([-73.985, 40.758]).addTo(map);
</script>
Enter fullscreen mode Exit fullscreen mode

Free Tier

Service Free Monthly Limit
Map loads (web) 50,000
Geocoding 100,000 requests
Directions 100,000 requests
Static images 25,000
Vector tiles 200,000

What You Can Build

  • Store locator — find nearest locations with directions
  • Delivery tracker — real-time route visualization
  • Real estate map — property listings on interactive map
  • Travel planner — route planning with distance/time
  • Heatmap dashboard — visualize data geographically
  • Address autocomplete — search-as-you-type for forms

More Free API Articles

Need Web Data? Try These Tools

If you're building apps that need web scraping or data extraction, check out my ready-made tools on Apify Store — scrapers for Reddit, YouTube, Google News, Trustpilot, and 80+ more. No coding needed, just run and get your data.

Need a custom scraping solution? Email me at spinov001@gmail.com

More Free APIs You Should Know About

Need custom data scraping? Email me or check my Apify actors.

Top comments (0)