Open Layers 3 search functionality to find a map location?

Question

What is the best way to implement a search functionality into an OL3 map?

I need a search input that will show me a few options while searching and then pan and zoom to the specific search term. Pretty much like google maps do.

Do I need to integrate google maps into my OL3?

Alb

Take a look if this is what you're looking for - github.com/jonataswalker/ol3-geocoder – Outbreed

That is a great resource link. Awesome! Will explore and get back if I have any issue. Thanks @JonatasWalker – Alb

Answer 1

There's no native Search/Geocoder in Openlayers 3. But you can use the ol-geocoder extension (I've wrote it) to address this need.

The instructions are at the provided link. I just want to show how I generally use it:

//Instantiate with some options and add the Control
var geocoder = new Geocoder('nominatim', {
  provider: 'google',
  lang: 'pt-BR',
  placeholder: 'Pesquise por um endereço',
  limit: 5,
  key: '....',
  keepOpen: false,
  debug: true
});
map.addControl(geocoder);

// I don't want/need Geocoder layer to be visible
geocoder.getLayer().setVisible(false);

//Listen when an address is chosen
geocoder.on('addresschosen', function(evt){
  var feature = evt.feature;
  var coord = evt.coordinate;

  // application specific
  app.addMarker(feature, coord);
});

Outbreed

I've tried changing the zoom level map.setZoom(7) but it's not affecting it. Any clues? – Alb

@NicolasT Should be map.getView().setZoom(7). – Outbreed

What about using my custom search field? Is this extension flexible enough for me to customise how my search field is displayed? – Alb

@NicolasT it would be a good feature. Would you please create an issue for this request? – Outbreed

@JonatasWalker I am using this with openlayers 3...But it shows error on the event fire...the error is here My code looks like this – Myopic

@BiplovBhandari Please, make sure you're using the latest OL 3 version - 3.11.2. – Outbreed