Is it possible to narrow down the results to cities or countries? For example for the OSM geocoder there is a featuretype parameter: https://help.openstreetmap.org/questions/27915/how-to-narrow-the-result-from-nominatim-with-only-cities-and-countries-no-additional-areas

Jonatas Walker great work!

Just needed to change the Google provider url to
url:"https://maps.googleapis.com/maps/api/geocode/json"
instead of
url:"//maps.googleapis.com/maps/api/geocode/json"

and worked like a charm.

Thanks a lot!

Ah also added on the event listener 'addresschosen', a function to remove previous markers so they do not pile up.
It can be called from the listener with the current marker coordinates and will remove all ol3-geocoer markers with different coordinates, or for instance from a 'moveend' listener without coordinates (zoom change or drag) and will wipeout all ol3-geocoder markers.
Maybe someone may find it useful:

`function removeGeocoderFeatures(coord) {

map.getLayers().forEach(function (lyr) {
    if (lyr.get('name') != undefined && lyr.get('name').startsWith('geocoder-layer-')) {

        //vector layer
        var source = lyr.getSource();

        if (coord === undefined)
            source.clear();
        else {
            source.getFeatures().forEach(function (feat) {
                //point feature
                var featCoord = feat.getGeometry().getCoordinates();

                if (featCoord[0] != coord[0] && featCoord[1] != coord[1])
                    source.removeFeature(feat);
            })
        }
    }
});

}`

v 3.0.1

#150

I use the repository from

<link href="https://unpkg.com/ol-geocoder/dist/ol-geocoder.min.css" rel="stylesheet">
<script src="https://unpkg.com/ol-geocoder"></script>

or

<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>

but in my https website, the seach results has no connection...
in the debug: mixed active contentes --> http in the https nominatim

Blocage du chargement du contenu mixte actif (mixed active content) « http://nominatim.openstreetmap.org/search/?q=tro&format=json&addressdetails=1&limit=5&countrycodes=be&accept-language=fr-FR

I have seen that it is possible to listen to the addresschosen event for when a user has selected a place, but I wondered how I could replicate the user pressing Enter when having typed something. I want to:
1 Update the result as the user types.
2 Replicate a user action for a tutorial feature on the website I am working on.
It would be nice to be able to trigger an event.

Is there a way to geocode using a Bing key?

gives an error of append child of undefined while adding Control to openlayer

I'd like to remove the map layer (or even the features within the existing map layer) created by this geocoder. In working through this code, I've extended the prototype to include a removeLayer function, but am having difficulty calling this function from the same button listener that collapses/expands the search. Thoughts?

The zoom button focus get left on when you click to zoom

I would like to have the same style as here https://jsfiddle.net/jonataswalker/c4qv9afb/
where the icone is compact and why not the style is black.
I have liiked in the https://unpkg.com/[email protected]/dist/ol-geocoder.min.css but nothing .

Can you help me?

Tks

I work on a provider based on a wevsercice that can use parameters not listed in existing providers :
Citycode
Lat
Lon

While code goes through nominatim.js following code :

const provider = this.getProvider({
      query: q,
      provider: options.provider,
      key: options.key,
      lang: options.lang,
      countrycodes: options.countrycodes,
      limit: options.limit
});

any custom parameters are ignored so i
changed it for:

const provider = this.getProvider({
      query: q,
      provider: options.provider,
      key: options.key,
      lang: options.lang,
      countrycodes: options.countrycodes,
      limit: options.limit,
      alloptions: options
});

in order to have users like me (not developer) able to create their own providers without changing core ol-geocoder classes it could be nice to change the provider managment.

Guillaume

hi, how can I fix

Failed to load https://photon.komoot.de/api/?q&limit&lang: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Dear Jonatawalker,

Thank you so much for the job done.

It works well for me using Nominatim / OSM service, but when I try to use Mapzen / Pelias, I have a message saying I have no connection.

After a short investigation, the problem comes from the fact the api keyword expected by mapzen is 'api_key', while ol-geocoder only use 'key'.

I modified the local code on my server, but you should update the source code to prevent such a problem.

Regards.

Rémi

Is there a simple way to attach this control to an existing html element? When defining stock ol3 controls, for instance, one can specify a target to which that control may attach outside of the viewport, and this functionality would be an excellent addition to your already useful ol3 extension.

The icon provided has a low resolution, and therefore appears blurry when viewed in HiDPI screens. This contrasts with the other, sharper icons.

Hi

We're working on a new build of the HOT tasking manager which we've building on OL4.

https://github.com/hotosm/tasking-manager

We've integrated the latest build of the ol3-geocoder, but can see there's one or two compatibility problems, that you appear to have addressed in master but have yet to release. Any idea on a rough schedule for a new build to npm?

Many thanks
Iain

How i can get/access value using Google Search API:

• postal code on address_components?

thanks

hey jonatas, great plugin!

this case is working:
I open the searchbar > type keywords > hit enter > the result is showing up > I dont select one of the result but instead I click outside of results > results and searchbar is hiding

this one not:
I open the searchbar > I dont type anything but want to close the searchbar again > I click outside of searchbar > nothing happens but I expect that the searchbar is hiding... (to hide I have to click the icon again)

I would be great if the searchbar would hide if I click outside of it, in any case...

thanks jan

It's technically simple to geocode using Google Maps Geocoder.

However, according to Google terms of use, we are not really allowed to use it outside Google Maps API but your library support it.

You should mention it somewhere so if people use it, it's not your concern.

Hi,

I have been able to use the Geocoder with the EPSG:4326 projection (great initiative :-) ).
However, my main OL viewer is using another projection system (for Belgium: e.g. EPSG:31370). Therefore, I’m not able to get the zooming extent and the pin at the right location. Any location I type always gives me the same wrong location at the bottom left of my viewer.

As my projection system has to be in Lambert 72 (i use WMS and other services with the same projection), I have added this in my main OL html page (allows displaying all my layers in a good way):
// Set LAMBERT PROJECTION - EPSG 31370 var belgianProjection = new ol.proj.Projection({ code: 'EPSG:31370', extent: [14637.25, 22608.21,291015.29 ,246424.28], units: 'm' }); ol.proj.addProjection(belgianProjection);

I went through the ol3-geocoder-debug.js file, I have tried to modify several lines associated to the projection/coordinates:
e.g. Added this section
to31370: function to31370(coord) { return ol.proj.transform( [parseFloat(coord[0]), parseFloat(coord[1])], 'EPSG:4326', 'EPSG:31370' );

But still the same result.

Does someone have any idea to solve this? It would be highly appreciated.
Many thanx in advance for the precious help.

Nicolas B
Geo-ICT Consultant

The ability to specify country codes for osm searches is welcome; but I'm working on an app where I need city-specific results. I'm thinking one way to achieve this would be to intercept the submitted string and append city and country behind the scenes before submitting to the provider.

You could add support for this by adding an option that accepts a function that should return a string. On submission the search input should be run through this function before being sent to the provider. This would then allow the string to be manipulated in any way we wish.

Assuming manual addition of city/country to the search string returns reasonable results this might also allow more specific search results from providers that don't directly support the functionality.

I am sorry if this is a trivial question. I am facing a problem with adding a geocoder to my open layer 3 map. I am adding it via map.addcontrol(geocoder) command and I am getting the following error

"Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at t.Ie.setMap (ol.js:83)
at I. (ol.js:381)
at qe.b (ol.js:15)
at qe.Na.b (ol.js:18)
at qe.k.ke (ol.js:78)
at qe.k.push (ol.js:79)
at I.k.Bj (ol.js:382)
at loc:156"

I have map.addcontrol(geocoder) at loc:156
I am using ol3-geocoder-v2.4.1 and openlayer v3.20.1

it was working fine. it has started giving this error only few days back.

Please help

http://cdn.jsdelivr.net/openlayers.geocoder/latest/ol3-geocoder.min.css is not minified version of
http://cdn.jsdelivr.net/openlayers.geocoder/latest/ol3-geocoder.css and classes don't match those generated in HTML.

This is a weird one.

The ol3-geocoder plugin works great in all of the browsers that I've tested. However, when wrapped with cordova, the input field no longer accepts 'go', 'enter', or similar from the digital keypad, on either Android or iOS devices. I notice the code within the extension captures...
if (evt.keyCode == 13)
... which should work.

Possible a Cordova issue (and I'll check), but not sure if it has something to do with a bug in the interaction of the keyboard's 'enter / keypress 13 event' with a/this ol3 control?

Hi! I had to rewrite your code to use the Geocoder in my map's View projection (EPSG:4258). It would be great that Geocoder takes the projection from the map's View instead of using 'to3857' function.

Sorry, I try to use your Control but isn't work. I don't know what is issue in my code.

<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
html,
body,
#map {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font: 1em/1.5 "Open Sans", Helvetica, Arial, sans-serif;
  color: #222;
  font-weight: 400;
}

#map {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
}

.ol-control button {
  background-color: rgba(40, 40, 40, 0.8) !important;
}

.ol-control button:hover {
  background-color: rgba(40, 40, 40, 1) !important;
}

.ol-popup {
  position: absolute;
  min-width: 180px;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #ccc;
  bottom: 12px;
  left: -50px;
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}

.ol-popup-closer:after {
  content: "✖";
}

</style>

<div id="map" tabindex="0"></div>
<div id="popup" class="ol-popup">
    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    <div id="popup-content"></div>
</div>



<script>
   var olview = new ol.View({
    center: [0, 0],
    zoom: 2
  }),
  baseLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
  }),
  map = new ol.Map({
    target: document.getElementById('map'),
    view: olview,
    layers: [baseLayer]
  });

//Instantiate with some options and add the Control
var geocoder = new Geocoder('nominatim', {
  provider: 'google',
  key: '---myKey---',
  lang: 'en',
  placeholder: 'Search for ...',
  limit: 5,
  debug: true,
  autoComplete: true,
  keepOpen: true
});
map.addControl(geocoder);

//Listen when an address is chosen
geocoder.on('addresschosen', function(evt) {
  var feature = evt.feature,
    coord = evt.coordinate;
  content.innerHTML = '<p>' + evt.address.formatted + '</p>';
  overlay.setPosition(coord);
});

// popup
var container = document.getElementById('popup'),
  content = document.getElementById('popup-content'),
  closer = document.getElementById('popup-closer'),
  overlay = new ol.Overlay({
    element: container,
    offset: [0, -40]
  });
closer.onclick = function() {
  overlay.setPosition(undefined);
  closer.blur();
  return false;
};
map.addOverlay(overlay);

</script>

See https://geocoder.opencagedata.com/api

Is there a way to get the searched upon address' street number in the formatted address output?

Hello.

Just wanted to ask if there is any design reason for using a form to surround the searchbox?
If you want to embed a map with your geocoder in an existing form, this will cause problems as nested forms are invalid HTML and jquery.validate floods the console with errors.

I replaced the line '<form id="'+ form_id +'" action="javascript:void(0);">', with '<div id="'+ form_id +'">', to test and it seems to not cause any problems so far

Best regards.

Hi, wonderful plugin.

I am having troubles with the MS side of the web:

In Edge, after I select an address, a ghost of the dropdown appears on the screen...

The same happens in your demo page

Olá , você iram atualizar o projeto com a novo API 5 ? Pois as requisições não atendem mais .

https://github.com/Project-OSRM/osrm-backend/blob/master/docs/http.md

Using Firefox 50 in Linux and Chrome in Windows, the search button is not rendered correctly when using a touch screen.

I have my html with the geocode but I need to run the geocode by URL's parameters, something like:

http://MyMap.html?address=1526 EvansGardens NW ON&ICON=911&label=STRUCTURE IN FIRE

The parameter ICON and Label I will use in featureStyle.

Thanks you for you help.

Is there a reason why you're omitting some result properties in providers handleResponse function?

For example OSM also has "building" and "house_number" in response, Photon has "street", "housenumber"...

Photon provider allows some filters. See komoot/photon#175.

Also see http://wiki.openstreetmap.org/wiki/Nominatim/Special_Phrases

I was wondering if it would be possible to limit the geocoding search results to a particular country or set of countries like the US and Canada? I would probably use 'osm' or possibly 'photon' or any of the services that has a free service.

What if we add secure config in instantiation:

var geocoder = new Geocoder('nominatim', {
  provider: 'mapquest',
  // ...
  secure: true // use https
});

so the developer can have a choice if he/she wants to use http or https. What do you think?

Hi,

How to set the location adding pointer by passing the coordinate?

Thanks
Lilan

I need to make a few changes to the plugin, which will require me to rebuild the minified script. Can you add build instructions to the Readme? Specifically I am looking to add the final zoom level (resolution) as an option when initiating the geocoder.

I'm going to rename this project to ol-geocoder to get rid of the version number.

So in Github it will be a renaming and in NPM it will be a new project: ol-geocoder.

Cheers.

Is there a way to use "Here api geocoding" with ol3-geocoder? or is in todo list?

i'm modify the ol3-geocoder-debug.js but i think it's no a good idea...

How i can search using existing input text then show result on difference div ?
Note: search form and result place outside map.

This plugin support reverse geocoding?
from lat lon, i can get address name...

Thanks

Hello,

first, thank you very much for this excellent extension.

Is it possible to add multiple providers/sources at the same time?

Is it possible to search features in Layers?

Thank you very much.

When attempting to select a location (after a search), the following error is thrown using Chrome and the latest release:

Uncaught TypeError: r.animate is not a function
at Object.flyTo (ol3-geocoder.js:7)
at b.chosen (ol3-geocoder.js:7)
at HTMLLIElement. (ol3-geocoder.js:7)

It would be nice to add https://github.com/pelias/pelias geocoding service to the list of geocoders.

When you search and try zooming in. The zoom shakes before finally add the place marker. It does not zoom in smoothly. The animation on the README.md looks the same.

code:

componentDidMount() {
        const { childrenProps } = this.props
        childrenProps.map.setTarget(this.mapDiv)
        var geocoder = new Geocoder( 'nominatim', {
            provider: 'photon',
            targetType: 'text-input',
            lang: 'en',
            placeholder: 'Search for ...',
            limit: 5,
            keepOpen: false
        } )
        childrenProps.map.addControl( geocoder )
    }

error:

ol.js?aa24:142 Uncaught TypeError: (intermediate value)(intermediate value)(intermediate value).appendChild is not a function
    at n.qg.setMap (ol.js?aa24:142)
    at G.eval (ol.js?1912:282)
    at Yc.b (ol.js?1912:42)
    at Yc.Qc.b (ol.js?1912:45)
    at Yc.k.He (ol.js?1912:49)
    at Yc.k.push (ol.js?1912:49)
    at G.k.kk (ol.js?1912:283)
    at ContentGrid.componentDidMount (ContentGrid.jsx?195d:87)
    at commitLifeCycles (react-dom.development.js?cada:8798)
    at commitAllLifeCycles (react-dom.development.js?cada:9967)

openlayers version: [email protected]
react version: [email protected]

It would be a great advantage to be able to select my custom search bar and implement the ol3-geocoder functionality to it. It would give more flexibility to the UI.

Because chrome v50+ needs https to show my current location I switched to a secure connection. but now geocoder isn't working any more because all provider are connected by http. can you please change this or make an option to define the connection type?

Most of my web maps contain vector features and are loaded into the map via geojson. It would be great if I could search through the features attributes.