How to add a search box in open layers 3

Question

I tried an example of open layers 3, it only adds a search box but doesn't search for places, below is that code -

<div id="search" style="position: absolute; top: 10px; right: 10px; padding: 5px; background-color: rgba(255,255,255,0.5);">
      <input type="text" placeholder="place" style="width: 200px">
      <button type="button">Search</button>
    </div>

This is the other method I tried but, it says "geocoder is undefined", can anyone suggest any other method?

var geocoder = new Geocoder('nominatim', {
  provider: 'mapquest',
  key: 'osm',
  lang: 'pt-BR', //en-US, fr-FR
  placeholder: 'Search for ...',
  targetType: 'text-input',
  limit: 5,
  keepOpen: true
});
map.addControl(geocoder);
geocoder.on('addresschosen', function(evt){
  var feature = evt.feature,
      coord = evt.coordinate,
      address = evt.address;
  // some popup solution
  content.innerHTML = '<p>'+ address.formatted +'</p>';
  overlay.setPosition(coord);
});

score 1 · Accepted Answer · answered Oct 04 '18 at 08:58

1

It looks like you tried to implement the Geocoder plugin by Jonatas Walker : https://github.com/jonataswalker/ol-geocoder (or has this implemented in the latest version of openlayers? - where did you take this example from?)

In this case, there are two things I think you are missing:

1) Add the css and javascript code in your template or index.html:

<link href="https://cdn.jsdelivr.net/npm/ol-geocoder@latest/dist/ol-geocoder.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/ol-geocoder"></script>

2) Create an account and Register for a key at Mapquest since this is mandatory for this provider, or try with another provider that doesn't require key, like osm:

var geocoder = new Geocoder('nominatim', {
  provider: 'osm', //change it here
  lang: 'en-US',
  placeholder: 'Search for ...',
  targetType: 'text-input',
  limit: 5,
  keepOpen: true
});

answered Oct 04 '18 at 08:58

F3L1X79

2,575
2
29
45

First, thanks alot for your prompt reply. Yes I used it from Jonatas Walker. – Oct 05 '18 at 11:34
So, do you need any more help? – F3L1X79 Oct 08 '18 at 12:34
yes i still didn't got search box. Suggest some way out without making account – Oct 08 '18 at 13:23
Like in point2) Try to change your provider with one that doesn't require key? ;) Otherwise, do you get any error in your web-browser console? – F3L1X79 Oct 08 '18 at 13:28
no error , it just don't search the place I type in search box... no functionality – Oct 08 '18 at 14:25
Have you checked on this demo : http://jsfiddle.net/jonataswalker/c4qv9afb/ ? Because it should work fine. – F3L1X79 Oct 08 '18 at 14:35
i tried now but not working,can you go through my whole code? – Oct 08 '18 at 14:46
Please share your fiddle on jsfiddle too. – F3L1X79 Oct 08 '18 at 14:49
https://jsfiddle.net/vk02923/n28z9woc/ kindly go through it, i put in hurry.... – Oct 08 '18 at 19:15
Just made an update with working code : http://jsfiddle.net/n28z9woc/3/ . I just had to add the script and the code of the geocoder... – F3L1X79 Oct 09 '18 at 07:22
thanks a lot sir(F3L1X79) ,you made my day its working fine , but one problem sir , its not displaying marker at the searched location. I am new to it , kindly help me out sir. – Oct 09 '18 at 09:19
I just made add an update : http://jsfiddle.net/n28z9woc/4/ Please check my answer as accepted. – F3L1X79 Oct 09 '18 at 10:12
also can you give any solution for layer switcher in my code. I searched but i am using open layers 3 and not getting any solutions for open layers 3. – Oct 09 '18 at 11:19
I'm sorry but I am not working for you, and you'd better open another issue if you got another troubles... Maybe you can start to learn the software with the online examples: https://openlayers.org/en/latest/examples/ – F3L1X79 Oct 09 '18 at 11:36
Thank you very much for your help sir. Specially for search box. – Oct 09 '18 at 12:50
If this or any answer has solved your question please consider [accepting it](https://meta.stackexchange.com/q/5234/179419) by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. Of course there is no obligation to do this. – F3L1X79 Oct 09 '18 at 13:00

score 0 · Answer 2 · answered May 27 '21 at 17:33

0

The easiest way is using this library, https://github.com/Viglino/ol-ext, it also comes with a ton of extensions.

Eg of the search box https://viglino.github.io/ol-ext/examples/search/map.control.searchnominatim.html

answered May 27 '21 at 17:33

lordvcs

2,466
3
28
37

How to add a search box in open layers 3

2 Answers2