Address autocomplete

Address Autocomplete – fast and smart address suggestions

Get address suggestions while typing. Use our step-by-step tutorials or npm-packages to integrate Address Autocomplete to your map solution or app. Check found location type and confidence rate for results.

NPM-packages for easy integration

Easy to add and easy to customize. Check our code samples for quickstart.

@geoapify/geocoder-autocomplete

Vanilla JS npm-package. Adds an Address Autocomplete field to a given element (for example, div). Contains several styling options, including bright and dark ones.

@geoapify/angular-geocoder-autocomplete

Angular wrapper for @geoapify/geocoder-autocomplete. Provides an angular component, inputs and outputs for Address Autocomplete parameters.

@geoapify/react-geocoder-autocomplete

React wrapper for @geoapify/geocoder-autocomplete. Provides a react component, inputs and outputs for Address Autocomplete parameters.

Multi-language support

Get results on your language.

Easy to visualize

The Address Autocomplete end-point returns a GeoJSON object a result. Use our code sample showing how to visualize the results on a map.

Filters and biases

Set filters and biases by visible area, by radius or by country to narrow the search area and get predictable results.

FAQ

How do you bill autocomplete results?

The geocoder autocomplete requests are billed as geocoding requests.

Which geocoder engine do you use for autocomplete?

We use a combination of Pelias and Nominatim geocoder engine to provide you the best results.

Why do you have a separate end-point for autocomplete? How the autocomplete results are different from the forward geocoding search?

The goal of autocomplete end-point is to provide fast and misspelling-tolerant address suggestions, that can be reviewed by a human. The forward geocoding search tries to return results corresponding the most. This can take more time and be slower.

How often do you release new versions of the npm-packages?

We release a new version for bug-fixes, to support new functionality on libraries update. However the libraries are open source, so you are welcome to create a pull request on GitHub.

Reverse Geocoding API

Reverse Geocoding API – get address by coordinates

We offer Reverse Geocoding API for single and batch requests. Get address, location type as well as the distance to the latitude and longitude provided. Get one or multiple results.

Easy to use

The API works via HTTP and can be used on every platform and with every programming language. The API returns GeoJSON objects as a result which can be natively visualized by the most client map libraries, including Leaflet, Mapbox GL, and Open Layers.

Single and batch requests

Together with single requests, you can send batch Geocoding requests (up to 1000 row at once). Moreover, we provide special pricing plans for Batch Geocoding that let you save up to 50% on Geocoding API costs.

Multi-language

Multi-language

Specify language parameter for reverse geocoding request and get results on your language.

Learn more about supported languages >>

Pricing plans

Affordable for every business

We have a Freemium model and pricing plans for different volutes and rates. You can register and start for Free and upgrade when you need it.

FAQ

How can I call Reverse Geocoding API for batch requests? What is the difference single and batch requests?

The difference between single and batch requests is that batch requests are called asynchronously. You create the batch job first and query results afterward. Learn more about batch requests >>
Use our API Playground to generate a batch request. Check our code samples showing how to call the API and get batch results.

How can I get not building but streets as the result?

The Reverse Geocoding API’s main purpose is to provide information on what is located on the coordinate provided and the address of the location. That’s why building and amenities have bigger priorities that streets.
Map Matching API (currently available on request) that matches GPS coordinates to roads and paths can fit better in your case.

Can I you Free plan for commercial project?

Yes, but you need to provide a follow-link to Geoapify on your website. For example, “Powered by <a href="https://www.geoapify.com/">Geoapify</a>" near information about Geocoding service.

Can I cache reverse geocoding results?

Yes, we do not have restrictions on that.

Batch geocoding requests

Batch geocoding

Batch geocoding requests

Process up to 1000 addresses or coordinates in one request with our batch or bulk geocoding

Geoapify provides an API that allows you to process multiple Geocoding / Reverse Geocoding requests in a single asynchronous call. This gives you an opportunity to decrease Geocoding costs and search locations and their addresses at a lower price.

We have a Freemium pricing model. You can start for Free and upgrade when you need it.

Both Direct and Reverse Geocoding

You use the Batch service for both Direct and Reverse Geocoding requests. All API parameters are also available for the Batch requests. Moreover, you can set some parameters as the common one and others as unique per input. For example, with the Geocoding API, you can add a country filter and make it common for all inputs.

Asynchronous call

All batch requests are asynchronous jobs. First, a batch API endpoint call with specified inputs creates a job. Then the job execution is monitored with additional API calls. As soon as result is available it’s returned in the response.

Batch geocoding request schema
Batch service schema

The job results are available for 24 hours and can be queried multiple times.

More volumes at a cheaper price

All batch requests to the Geoapify platform have a lower price. For example, all batch geocoding requests are counted with a coefficient of 0.5 (two times cheaper) for all Platform tariff plans. Moreover, we have special Geocoding tariff plans that let you significantly decrease costs for big volumes.

Easy integration

We provide Code Samples and the Batch Playground that let you easily integrate the solution into your project. Contact us if you have any questions, ideas, or wishes.

Map Marker Icons generator – create beautiful icons for your map

Now you can create amazing custom map marker icons for your map with a few clicks with our new Marker Icons API. We combined the most popular map pin shapes with Material Design and Font Awesome icons set. Moreover, provide you easy to use and flexible API that lets you create icons of different sizes and colors. Is it Free? Yes, the API is Free to use for all our registered users, however, we set a limit of 250.000 requests/month for Free plans.

As all our APIs the Map Marker API works via HTTP Get requests. It returns a png-image of specified parameters as a result. Here is an example of the API URL:

https://api.geoapify.com/v1/icon/?icon=coffee&color=%23ff9999&size=large&type=awesome&apiKey=YOUR_API_KEY
Map Marker icons colors and types

Map Marker icon types

Icon forms and options

The API gives you a choice of different icon forms: circle, Material Design Marker Pin, and Font Awesome Marker pin. Furthermore, you can add an icon to the Marker. Optionally you can draw an icon on a white circle or without. By default, all pin markers have a shadow. However, you can always remove it with a noShadow parameter.

Map Marker icon sizes

The API allows setting marker icon size: small, medium, large, x-large, or xx-large.

Marker Colors

No limits here! You can use any color that fits your project or you just like! Note, that for markers without white circle the color if the icon is automatically adjusted. In addition, you can change stroke color and shadow color. For example, make the shadow not dark, but light to make it look good on dark-color maps.

Icon sets

Map Marker Icon content

With Marker Icons API you can use Material Design and Font Awesome icon sets. All you need to do is just to specify the icon name in the URL.

Both icon sets have a permissive license and allowed to be used in commercial projects. The Material Design is available under Apache license version 2.0, the Font Awesome web font – under SIL OFL 1.1 license.

Marker icon text

Marker Icons text examples

Text icon content is an alternative to icon content. You can add a custom text, define the text size, add or remove the white circle.

Register and generate Map Marker Icons for Free

Get an API key and generate custom icons for your projects. Learn more about Geoapify APIs.

Address autocomplete component – npm package

Get a location from an address and address from a location – this is the main purpose of the Geocoding API. However, it’s not how it’s usually used in real-life. In real-life people enter one by one symbol into address autocomplete field, get suggestions and select the correct result there.

We already published articles describing how to create an address autocomplete from scratch with JSFiddle code samples. In this article, we would like to introduce you to an npm package that allows adding geocoding with autocomplete into your project with a few lines of code only.

We’ve developed a base Geocoding Autocomplete JS Library, that turns a DIV-container into an Address field with autocomplete. Moreover, we’ve added components for React and Angular that wrap the JavaScript library and provide a convenient interface for it.

All 3 packages use Geoapify Geoacoder API as the geocoder and support all parameters of the API:

  • You can make the autocomplete show only countries, cities, states, streets, or amenities;
  • Set location bias. So the autocomplete will return first results near the location;
  • Choose between different languages. For example, depending on the language you will get “Germany”, “Deutschland”, “Allemagne” or “Германия” in the search results;
  • Filter results. For example, search only in given countries.

You require your own API key to make Geocoding API calls. Get an API key on MyProjects Geoapify. The APIs have the Freemium pricing model. So you can start for Free and extend when you need.

@geoapify/geocoder-autocomplete

Geoapify Geocoder Autocomplete is the lightweight JavaScript library, that lets you add an address input with autocomplete into your web app. It has 0 dependencies and easy to customize. Furthermore, it already includes a few style themes for both light and dark backgrounds.

Installation

npm install @geoapify/geocoder-autocomplete

or

yarn add @geoapify/geocoder-autocomplete

Usage

  • Prepare a DIV-container with position: relative:
.autocomplete-container {
    position: relative;
}
<div id="autocomplete" class="autocomplete-container"></div>
  • Add Geoapify Geocoder Autocomplete:
import { GeocoderAutocomplete } from '@geoapify/geocoder-autocomplete';
 
const autocomplete = new GeocoderAutocomplete( document.getElementById("autocomplete"),  'YOUR_API_KEY', { /* Geocoder options */ });
 
autocomplete.on('select', (location) => {
    // check selected location here 
});
 
autocomplete.on('suggestions', (suggestions) => {
    // process suggestions here
});
  • Add styles to make the control work properly. For example, you can do it by importing style into your css-file:
 
@import "[email protected]/geocoder-autocomplete/styles/minimal.css";

You can easily customize the input. Read more about provided themes and CSS-classes on @geoapify/geocoder-autocomplete page.

@geoapify/angular-geocoder-autocomplete

Geoapify Angular Geocoder Autocomplete is an Angular component that wraps the Geoapify Geocoder Autocomplete and provides easy to use interface for it. Instead of functions and callbacks, the component lets you work with Angular Inputs and Outputs.

Installation

npm install @geoapify/geocoder-autocomplete @geoapify/angular-geocoder-autocomplete

or

yarn add @geoapify/geocoder-autocomplete @geoapify/angular-geocoder-autocomplete

Usage

  •  Import the GeoapifyGeocoderAutocompleteModule module:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { GeoapifyGeocoderAutocompleteModule } from '@geoapify/angular-geocoder-autocomplete';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GeoapifyGeocoderAutocompleteModule.withConfig('YOUR_API_KEY')
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
  • Import Geoapify Geocoder Autocomplete styles. For example, in ‘angular.json’:
"styles": [
    ...
    "node_modules/@geoapify/geocoder-autocomplete/styles/round-borders.css",
    "src/styles.scss"
],
  • Add the component into your template:
<geoapify-geocoder-autocomplete 
    [value]="displayValue"
    [type]="options.type"
    [lang]="options.lang"
    [countryCodes]="options.countries"
    [position]="options.position"
    [limit]="options.limit" 
    (placeSelect)="placeSelected($event)" 
    (suggestionsChange)="suggestionsChanged($event)">
</geoapify-geocoder-autocomplete>

@geoapify/react-geocoder-autocomplete

Geoapify React Geocoder Autocomplete is an Angular component that wraps the Geoapify Geocoder Autocomplete and provides access to all API parameters via the component properties.

Installation

npm install @geoapify/geocoder-autocomplete @geoapify/react-geocoder-autocomplete

or

yarn add @geoapify/geocoder-autocomplete @geoapify/react-geocoder-autocomplete

Usage

  • Create the GeoapifyContext and set you API key there;
  • Import Geoapify Geocoder Autocomplete styles;
  • Add GeoapifyGeocoderAutocomplete to your code:
import React, { useState } from 'react'
import { GeoapifyGeocoderAutocomplete, GeoapifyContext } from '@geoapify/react-geocoder-autocomplete'
import '@geoapify/geocoder-autocomplete/styles/minimal.css'
 
const App = () => {
  ...
 
  function onPlaceSelect(value) {
    console.log(value);
  }
 
  function onSuggectionChange(value) {
    console.log(value);
  }
 
  return <GeoapifyContext apiKey="YOUR_API_KEY_HERE">
      <GeoapifyGeocoderAutocomplete placeholder="Enter address here"
        type={type}
        lang={language}
        position={position}
        countryCodes={countryCodes}
        limit={limit}
        placeSelect={onPlaceSelect}
        suggestionsChange={onSuggectionChange}
        />
    </GeoapifyContext>
}
 
export default App

Angular + Leaflet: step by step tutorial to add a map

This tutorial helps you to create an Angular-based application and add a Leaflet map as a component. In our tutorial, we provide a way to use the Leaflet library without additional components. Moreover, we prepared an Angular-project for you that contains already a component skeleton for the map component.

We use Geoapify map tiles for the tutorial. You can choose between different map styles and colors there. Check the Geoapify Maps Playground that contains Live demo and code samples.

We use Mapbox style specification, which describes how the map is rendered, tile server locations, and provides values for map settings. For example, minimum, and maximal zoom levels.

Before you start

Step 1. Create an Angular project

You can use the Angular project template we’ve prepared for you or create a new one with Angular CLI. The project template contains already a component for a map:

  • Download or clone the GitHub repository
  • Switch to the project folder: cd angular-based-project
  • Run npm install to install libraries and dependencies
  • Run ng serve for a dev server
  • Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Step 2. Display a map with Leaflet

Install Leaflet + Mapbox GL plugin

By default, Leaflet doesn’t support vector tiles and Mapbox Style specifications. Therefore you need to install the Mapbox GL Leaflet plugin together with Leaflet to generate a map from style.json:

npm i leaflet mapbox-gl mapbox-gl-leaflet
Install Leaflet + Mapbox GL types

Type definitions will allow you to utilize Leaflet and Mapbox types in your code. Moreover, some IDEs provide code completion when the types are available:

npm i @types/leaflet @types/mapbox-gl-leaflet -dev
Add Leaflet and Mapbox styles

Leaflet and Mapbox styles are required to render a map and it’s elements correctly. We recommend you to add styles to the angular.json:

"projects": {
    "angular-project": {
      ...
      "architect": {
        "build": {
          "options": {
            ...
            "styles": [
              "src/styles.scss",
              "node_modules/mapbox-gl/dist/mapbox-gl.css",
              "node_modules/leaflet/dist/leaflet.css"
            ],
            "scripts": []
          },
          ...
        }
      }
    }
}

You will need to restart the dev server to apply changes from angular.json.

Add a Leaflet map to an Angular-component

Open MyMapComponent if you use our template or create a new component.

  • Remove placeholder and create ViewChild for the div element. Add ngAfterViewInit() lifecycle hook that is called after Angular has fully initialized a component’s view:
<div class="map-container" #map></div>
import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-my-map',
  templateUrl: './my-map.component.html',
  styleUrls: ['./my-map.component.scss']
})
export class MyMapComponent implements OnInit, AfterViewInit {

  @ViewChild('map')
  private mapContainer: ElementRef<HTMLElement>;

  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit() {
  }
}
  • Add a Leaflet map to the component:
import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import  * as L from 'leaflet';
import 'mapbox-gl-leaflet';

@Component({
  selector: 'app-my-map',
  templateUrl: './my-map.component.html',
  styleUrls: ['./my-map.component.scss']
})
export class MyMapComponent implements OnInit, AfterViewInit {

  private map: L.Map;

  @ViewChild('map')
  private mapContainer: ElementRef<HTMLElement>;

  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit() {
    const myAPIKey = "YOUR_API_KEY_HERE";
    const mapStyle = "https://maps.geoapify.com/v1/styles/osm-carto/style.json";

    const initialState = {
      lng: 11,
      lat: 49,
      zoom: 4
    };

    const map = new L.Map(this.mapContainer.nativeElement).setView(
      [initialState.lat, initialState.lng],
      initialState.zoom
    );

    // the attribution is required for the Geoapify Free tariff plan
    map.attributionControl
      .setPrefix("")
      .addAttribution(
        'Powered by <a href="https://www.geoapify.com/" target="_blank">Geoapify</a> | © OpenStreetMap <a href="https://www.openstreetmap.org/copyright" target="_blank">contributors</a>'
      );

    L.mapboxGL({
      style: `${mapStyle}?apiKey=${myAPIKey}`,
      accessToken: "no-token"
    }).addTo(map);
  }
}

Build the application

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

More code sample

Find more Live demos, JSFiddle samples and Code samples on the Geoapify API Documentation page.