node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


OpenLayers 3 Control Geocoder

build status npm version license dependency status devDependency status

A geocoder extension for OpenLayers 3. Requires OpenLayers v3.11.0 or higher.

geocoder anim


You can see here a demo or on jsFiddle if you prefer.


The plugin supports (for now) the following providers:

How to use it?

CDN Hosted - jsDelivr

Load CSS and Javascript:

<link href="//" rel="stylesheet">
<script src="//"></script>
CDN Hosted - UNPKG

Load CSS and Javascript:

<link href="" rel="stylesheet">
<script src=""></script>
Self hosted

Download latest release and (obviously) load CSS and Javascript.

Instantiate with some options and add the Control
var geocoder = new Geocoder('nominatim', {
  provider: 'mapquest',
  key: '__some_key__',
  lang: 'pt-BR', //en-US, fr-FR 
  placeholder: 'Search for ...',
  targetType: 'text-input',
  limit: 5,
  keepOpen: true
Listen and do something when an address is chosen
geocoder.on('addresschosen', function(evt){
  var feature = evt.feature,
      coord = evt.coordinate,
      address = evt.address;
  // some popup solution 
  content.innerHTML = '<p>'+ address.formatted +'</p>';



new Geocoder(type, options)

  • type {String} - Maybe later we will have other types like 'reverse'. So for now just pass 'nominatim'.

  • options is an object with the following possible properties:

    • provider : 'osm' (default), 'mapquest', 'google', 'photon', 'pelias', 'bing'; Your preferable provider;
    • key : ''; API Key if required;
    • autoComplete : false; Search as you type;
    • autoCompleteMinLength: 2; The minimum number of characters to trigger search;
    • placeholder : 'Search for an address'; Placeholder for text input;
    • targetType : 'glass-button'; Can also be 'text-input';
    • featureStyle :; Feature style;
    • lang : 'en-US'; Preferable language;
    • limit : 5; Limit of results;
    • countrycodes : ''; Only valid for osm and mapquest; Limit search results to a specific country (or a list of countries). This is an [ISO 3166-1alpha2 code] (, e.g. gb for the United Kingdom, br for Brazil, etc;
    • keepOpen : false; Whether the results keep openned;
    • preventDefault : false; Whether panning (and creating marker) when an address is chosen;
    • debug : false; If true logs provider's response;

Instance Methods


Returns the layer {ol.layer.Vector} created by Geocoder control.


Returns the source {ol.source.Vector} created by Geocoder control.


Triggered when an address is chosen
geocoder.on('addresschosen', function(evt) {
  // it's up to you;