dominique92 / ol-geocoder Goto Github PK
View Code? Open in Web Editor NEWGeocoder Nominatim for OpenLayers
License: MIT License
Geocoder Nominatim for OpenLayers
License: MIT License
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.
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
v 3.0.1
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
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?
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
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.
Is there a way to get the searched upon address' street number in the formatted address output?
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.
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.
Is there a way to geocode using a Bing key?
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.
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?
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.
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
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
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.
Sorry, I try to use your Control but isn't work. I don't know what is issue in my code.
<title>Full Screen map With Geocode Control</title> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> <script src="https://openlayers.org/en/v4.4.2/build/ol.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script> <script src="https://unpkg.com/[email protected]/build/ol3-geocoder.js"></script><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>
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 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
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"...
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
This plugin support reverse geocoding?
from lat lon, i can get address name...
Thanks
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.
gives an error of append child of undefined while adding Control to openlayer
It would be nice to add https://github.com/pelias/pelias geocoding service to the list of geocoders.
How i can search using existing input text then show result on difference div ?
Note: search form and result place outside map.
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.
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.
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)
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
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...
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]
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
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);
})
}
}
});
}`
Hi,
How to set the location adding pointer by passing the coordinate?
Thanks
Lilan
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.
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.
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.
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.
Photon provider allows some filters. See komoot/photon#175.
Also see http://wiki.openstreetmap.org/wiki/Nominatim/Special_Phrases
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
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?
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
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?
How i can get/access value using Google Search API:
thanks
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.