opencagedata / leaflet-opencage-geocoding Goto Github PK

Hi!

I'm getting thois error when trying the downloaded demo. Search never returns anything.

Thanks ;-)

Hi
I try to store the lat and lng after searching by leaflet-opencage-search. It just show a marker on the map, but how can we get lat and lng of that marker?

Thanks

I'm wondering if I'm able to set street number and house number as Nominatim requests shows in their API:

q=<query>
street=<housenumber> <streetname>
city=<city>
county=<county>
state=<state>
country=<country>
postalcode=<postalcode>

This would be better for search results. Sometimes if my query is main_street<space>house_number it returns ok and sometime it returns ok if the query is house_number<space>main_street and it's very frustrating because these are random scenarios. Maybe it would be better if I can set each option in the request options and not using the query param; something like:

        var options = {
          key: '581aaf9dfa71f6d061e92474b1618fd6',
          limit: 6,
          geocodingQueryParams: {
            street_name: 156,
            house_number: 1899,
            no_dedupe: 1,
            bounds: [-58.07545, -34.96995, -57.83169, -34.87143],
            countrycode: 'AR'
          }
        };

Regards.

I have adapted the code so that the container, form and input now have IDs:

onAdd: function (map) {
	var className = 'leaflet-control-ocd-search';
	var container = L.DomUtil.create('div', className);
	container.id = "searchContainer";
	var icon = L.DomUtil.create('div', 'leaflet-control-ocd-search-icon', container);
	var form = this._form = L.DomUtil.create('form', className + '-form', container);
	form.id="openCageForm";
	var input;

	this._map = map;
	this._container = container;
	input = this._input = L.DomUtil.create('input');
	input.id = "openCageSearchInput";
	input.type = 'text';
	input.autocomplete = "off";
	input.placeholder = this.options.placeholder;

	L.DomEvent.addListener(input, 'keydown', this._keydown, this);

Which results in:

<div class="leaflet-control-ocd-search leaflet-control" id="searchContainer">
	<div class="leaflet-control-ocd-search-icon"></div>
		<form class="leaflet-control-ocd-search-form" id="openCageForm">
			<input class="" id="openCageSearchInput" type="text" autocomplete="off" placeholder="search for ...">
			<div class="leaflet-control-ocd-search-form-no-error" id="searchButton">Nothing found.</div>
		</form>
	</div>
</div>

I am using standard jquery to add the "leaflet-control-ocd-search-expanded" class to the container and populate the input from a value in another form:

$('#openCageSearchInput').val(nl2space($('#newAssignmentAddress').val()));
$('#searchContainer').addClass("leaflet-control-ocd-search-expanded");

Which works OK but, despite trying to force a form submit and simulating keypress (enter) on the input, I cannot get the search to activate.

Do you have an idea as to how it could be done?

Many thanks

Here's the options configuration:

        var options = {
          key: '???',
          limit: 5,
          no_dedupe: 1,
          min_confidence: 5,
          bounds: [-34.96995,-58.07545,-34.87143,-57.83169],
          countrycode: 'AR'
        };
        this.map = L.map('orderMap', {
          zoomControl: false,
          attributionControl: false,
          markerZoomAnimation: true
        }).setView([-34.9205233, -57.9881897], 16);
        var geocoder = L.Control.OpenCageSearch.geocoder(options);

And it seems to be searching outside of the bounds. Is there something missed on the configuration options?

Looks like this issue came from the leaflet-control-geocoder source

Looks like a piece of code for the placeholder text is missing.

There's a code snippet given in various places to include the javascript and CSS, if you don't want to download, just include it direct. The URLs seem to be wrong

So that's the snippet in the README here:
https://github.com/OpenCageData/leaflet-opencage-search/blob/master/README.md#usage
...which is repeated on the homepage leaftlet example http://geocoder.opencagedata.com and on the code page here: http://geocoder.opencagedata.com/code.html#code-leaflet

They don't appear to be valid URLs at all. I tried to work out what they're supposed to be. I think these URLs should work, although I don't know if these are the URLs you want people to link to:

<link rel="stylesheet" href="http://geocoder.opencagedata.com/css/L.Control.OpenCageData.Search.min.css">
<script type="text/javascript" src="http://geocoder.opencagedata.com/js/geocoder.min.js">

( ...also they don't work due to #2 )

The demo here is broken:
http://geocoder.opencagedata.com/code/leaflet-demo.html
...for the majority of searches I'm testing with. e.g. just searching for "Oxford"

I dug into the reason. It's because some search results in the API response array do not have 'bounds' e.g. "Oxford, Roger Dudon Way" is coming through without this field.

I don't know if that is a new bug in your main API, or maybe this javascript should tolerate missing bounds. If it's the latter, then I have the fix

You are suggesting to put the api key in a public script. Maybe you have some advice how to avoid this.

Works fine in Chrome, Firefox, and Safari on IOS. In IE, the box does not expand to reveal the input when the icon is clicked. Tested in my application and also with your demo.

When I revert back to IE 10 and 9, works fine. Apparently 11 is the issue?

Any ideas? Thanks!

When a search has a result the marker with popup text is displayed. After that the marker can never be removed. So a fix could be to make the marker removable. This could be done in various ways. I made a quick fix to add a red remove button in the popup text. Possibly not the most elegant solution. I am open for suggestions. You can see it in action here:

http://app.map5.nl/nltopo (type any Dutch city name e.g. amsterdam)

And the src here: http://app.map5.nl/nltopo/lib/opencage-search/src/js/L.Control.OpenCageSearch.js (lines under JvdB in comments). I can provide a PR.