Geoapify

Tutorials

Learn how to build your location-aware app with Geoapify Location Platform
Programming language:

Maps

MapLibre GL transforms raw data into a vivid portrayal of the US Population Heatmap
JavaScript

JavaScript Heatmap Example: A Step-by-Step Tutorial to Build Heatmaps with MapLibre GL

Learn to build interactive US population heatmaps with MapLibre GL in this JavaScript heatmap example tutorial on JSFiddle
Learn how to create a Leaflet map widget with an address autocomplete input for your WordPress website with this step-by-step tutorial.
JavaScript

How to add a Leaflet map with an address autocomplete to your WordPress website

Learn how to create a Leaflet map widget with an address autocomplete input for your WordPress website with this step-by-step tutorial
Highlight regions on a static map
No code

How to use Static Maps

Static Maps let to use maps on your website or app as an image without JavaScript. Learn how to generate static maps images, and add markers and shapes to them
Add a cycleways layer to an OSM Bright map
No code

Customize a Map Style: adding cycleways layer

This tutorial demonstrates how to style an OpenStreetMap map, customize colors, fonts, show/hide map details
Leaflet, Mapbox GL/MapLibre GL, OpenLayers in ReactJS
React JS

Adding OpenStreetMaps-based Maps to ReactJS app

Learn how to use Leaflet, Mapbox/MapLibre GL, OpenLayers, and create an OpenStreetMap map in ReactJS applications
Leaflet, Mapbox GL/MapLibre GL, OpenLayers in Angular
Angular

How to use Map Libraries in Angular

Learn how to create a Map Component with Leaflet, Mapbox/MapLibre GL, OpenLayers without the use of additional wrapper libraries

Geocoding & Geolocation

Search addresses to store them in your database or display them on a map
Python

Geocoding in Python

A step-by-step guide that shows how to geocode addresses using Python, HTTP requests, and the Geoapify Geocoding API
Address autofill form example
JavaScript

How to make Address Autofill forms

Learn how to create address autofill forms to collect payment and shipping addresses. See JSFiddle code samples to start quickly.
JSFiddle Tutorial for address input form
JavaScript

How to create an Address Input with Autocomplete

This tutorial illustrates creating an address input with autocomplete functionality for address validation/address verification forms.
The addresses geocoded with Geoapify Geocoding API to CSV
No code

No-code Tutorial: Batch Geocode to CSV/JSON

Learn how to geocode a list of addresses into a CSV or JSON format with HTTP requests in Postman
Geoapify Reverse Geocoding API JSFiddle
JavaScript

Javascript Tutorial: How to get address by coordinates with Reverse Geocoding API

Learn how to call Reverse Geocoding API to get an address by coordinates a user clicked on.
JSFiddle example shows how to use Geoapify Geocoding API
JavaScript

Javascript Tutorial: How to search addresses with Geocoding API

Learn how to search addresses by using Geocoding API with Javascript and show results on the map.

Routes & Optimization

Geoapify Route Directions
No code

How to use the Route Directions API

Learn how to get Route Directions with API. We'll show you how to avoid highways, tolls, and select the right transportation mode.
Build routes and directions with WordPress website
No code

How To Add Driving Directions to a Wordpress Website

This tutorial shows how to integrate Route Directions (driving, walking, biking) into a WordPress or other CMS-based website.
Grand Loop Road, Yellowstone National Park elevation profile
JavaScript

Drawing Route Elevation Profile with Chart.js

Learn how to draw road elevations on a chart with chart.js library. Get started quickly with our JSFiddle code sample.
Visualize a route on a MapLibre GL (Mapbox GL) map
JavaScript

How to draw routes on a Maplibre GL (Mapbox GL) map

Learn how to draw the route created by the API on a Maplibre GL (Mapbox GL) map. Check out our live demo on JSFiddle.

Isochrones & isodistances

Draw isochrones and isodistances with Leaflet map library
JavaScript

JavaScript Tutorial to draw Isolines with Leaflet

Learn how to draw Isochrones and Isodistances on a Leaflet Map with JavaScript. Check how to add, remove, and style Leaflet GeoJSON layers

Places & Details

An illustrative map showcasing the boundaries of US states
JavaScript

Getting Administrative Division Boundaries with Geoapify's Boundary API

Learn how to retrieve administrative division boundaries using Geoapify's Boundary API. Includes a JSFiddle demo for hands-on experimentation.
Places API results on the map by Geoapify
JavaScript

How to get OSM Places by category for a region

This tutorial shows you how to get OSM places by category with API. For example, restaurants, bookstores, or museums. Try in the JSFiddle live demo.