Hello! my name is Damian, I'm from Argentina and I'm currently working on a project leaflet and am wanting to use a pluggin that you developed.
If possible wanted place inquire of a DIV, for example.

Can you select the text on the search flied when is reopen to earse it on typing

Hi, I am referring to the demo, in the on map event the reverse function is called with e.latlng, however the marker is created at the r.center instead. I've noticed that they're close values.
Thanks!

map.on('click', function(e) {
        geocoder.reverse(e.latlng, map.options.crs.scale(map.getZoom()), function(results) {
            var r = results[0];
            if (r) {
                if (marker) {
                    marker.
                        setLatLng(r.center).
                        setPopupContent(r.html || r.name).
                        openPopup();
                } else {
                    marker = L.marker(r.center).bindPopup(r.name).addTo(map).openPopup();
                }
            }
        })
    })

For example:

lat: -3.864254615721396
lng: -10.8984375

results in a result where all properties are set to undefined.

Try for example reverse([11, 57], 67108864).

Add events for when:

• geocoding starts
• results are received
• result is shown on the map
• an error occurs

I'm using everything as written in the Readme. The search field opens and when entering a name and pressing enter the throbber appears. Yet no results are displayed and the throbber is just turning endlessly. This is 1.1.0 using leaflet 0.7.2

On "Nothing found" the mag glass is not on good place.

I would like to use the controls on this plugin on a custom DIV, having my own search field and results table. Would it be possible?

The magnifying glass/search button expands when I click on it in Chrome or Firefox, but not in IE 11 on Windows 7.

Does anyone know of a fix for this? Or is there an inherent incompatibility? My other Leaflet features/buttons do work in IE 11 on Windows 7.

Collapse must only append on click on magnifying glass

When position set to 'topleft' the search form move to right on open result

Can you display a marker on result only as an option ?

I am managing to overwrite the markGeocode function, I am not sure if it is the best way though.

Expand transition not happening in IE 11...seems to be working as expected in other versions.

Hi,

I'm wanting to use reverse geocoding on a map and pull data from a grid layer to integrate with the popup message.

I currently use this code to access map box Grid layers:
vfrbiGrid.on('click', function(e) {
if (!e.data) return;
var popup = L.popup({
keepInView: true,
closeOnClick: true
})
.setLatLng(e.latLng)
.setContent(''Site Name: ' + e.data.site_desc + '
' + 'Site lat: ' + e.data.lat + '
' + 'Site long: ' + e.data.long)
.addTo(map);
});

where vfrbiGrid is:
var vfrbiGrid = L.mapbox.gridLayer('jamiebaddeley.VF_RBI_Coverage').addTo(map),

That all works well.

What I want to do though is use your code instead as I'd get reverse geocoding results as well.

I tried this:

vfrbiGrid.on('click', function(e) {
geocoder.reverse(e.latlng, map.options.crs.scale(map.getZoom()), function(results) {
var r = results[0];
if (r) {
if (marker) {
marker.
setLatLng(r.center).
setPopupContent(r.html || r.name).
openPopup();
} else {
marker = L.marker(r.center)
.bindPopup(r.name)
.addTo(map)
.openPopup();
}
}
})

})

But I get an error in the console:

[Error] TypeError: undefined is not an object (evaluating 'location.lat')
reverse (Control.Geocoder.js, line 702)
(anonymous function) (vfrbi2, line 214)
fireEvent (mapbox.js, line 1)
(anonymous function) (mapbox.js, line 6)
(anonymous function) (mapbox.js, line 1)
(anonymous function) (mapbox.js, line 6)
_getTile (mapbox.js, line 6)
getData (mapbox.js, line 6)
_click (mapbox.js, line 6)
fireEvent (mapbox.js, line 1)
_fireMouseEvent (mapbox.js, line 1)
_onMouseClick (mapbox.js, line 1)
o (mapbox.js, line 3)

it works fine when I make it map.on('click', function(e) {
but that doesn't mean I have access to the data held in the grid that I want to pull from and add to in the popup.

Can you help me please?

thanks

jamie

For example the Nominatim URL breaks if you use this plugin from a local html file (the the protocol specifier will be file:// ).

https://github.com/perliedman/leaflet-control-geocoder/blob/master/Control.Geocoder.js#L254

Maybe it would be better to detect http vs. https explicitly.

Nominatim icon on result can be displayed with :
name: (data[i].icon ? "< img src='"+data[i].icon+"'/>" : "" ) + data[i].display_name

Btw, the result width is realy small for nominatim.

If this leaflet extension is used on a secure site. It leaks a user's searches over an unencrypted channel. Many of the data providers used by geocoder support https but the secure version is not used.

Consider using protocol detection e.g:

var url ('https:' == document.location.protocol ? 'https://' : 'http://')+'nominatim.openstreetmap.org/';

These templates support both HTTP and HTTPS protocols.
http://msdn.microsoft.com/en-us/library/ff701714.aspx

"I strongly believe that it is my — and your — duty to make the open source community, as well as the tech community at large, a community where everyone feel welcome and is accepted. It means being friendly and inclusive, even when you disagree with people."

"If you think feminism, anti-racism or the LGBT movement is somehow wrong, disturbing or irrelevant, I ask you to go elsewhere to find software."

-This seems contradictory. Here you say "...It means being friendly and inclusive, even when you disagree", and then you say that anyone who disagrees should go away.

Maybe you ought to rethink this. Maybe you should just post your opinion on it, but then also demonstrate that you too are inclusive, and accept people who believe differently from you too. If you say "anyone who thinks being gay is wrong can't use my software", how are you any different? It seems to me like you are violating the principle you just stated above. FOSS is closely linked to freedom of speech and thought, and this doesn't seem like it goes well with the idea.

The following code makes the incorrect assumption that all data providers will html encode location names, and icons.

_createAlt: function(result, index) {
  var li = document.createElement('li');
  li.innerHTML = '<a href="#" data-result-index="' + index + '">' +
  (this.options.showResultIcons && result.icon ?
    '<img src="' + result.icon + '"/>' :
    '') +
  result.name + '</a>';
  L.DomEvent.addListener(li, 'click', function clickHandler() {
    this._geocodeResultSelected(result);
  }, this);

return li;
},

If the following data was returned geocoder would inject this into the page.

{
   "icon":"\"> <script>alert('document.cookie')</script><div style=\"display:none",
   "name":"<script>alert('document.cookie')</script>"
}

It is important to remember characters unless one is trying to render arbitrary html javascript strings should only be added to the dom via apis which properly encode the values.

Example of safe dom manipulation:

var name = document.createElement('a');
name.textContent = result.name;

Suggested by @Gia90 in #14.

May want to add this line if placeholder is an option...

input.placeholder = this.options.placeholder;

If you have base_href set and you get multiple geocode results and click on one with the mouse, the click event will propagate and the page will reload.

Add L.DomEvent.preventDefault(e); to clickHandler() (also add e parameter to clickHandler callback), line 179 to fix this.

Let me know if you need me to create pull request.

The search bar is partly showing on Safari (at least on iPad and iPhone), which makes it look like you can immediately type and search (in fact you can, but the text is hidden), instead of first clicking the magnifying glass.

(Thanks for the nice plugin, I'm using it on http://hikebikemap.org now.)

One thing would be nice to have as an option: setting the font/fontsize of the text used (maybe even separately for the search field and the results).

Doing the following:

L.Control.geocoder({collapsed: false}).addTo(map);

... will result in the search field being shown in an expanded state.

Now, pressing ESC while the cursor is in the input element still causes the input widget to collapse, even though it is not supposed to be collapsible...

In this case, there is no click handler bound to the search icon, so it is also not possible to expand the widget again after pressing ESC once.

I would like to add my own ui element (like a button) to submit the geocoder form.

In your code, there is an event listener which triggers the _geocode method on form submit:

L.DomEvent.addListener(form, 'submit', this._geocode, this);

But how can i submit the geocode form from my own button without editing your code?

I edited your code and added:

L.DomEvent.addListener('.geocode-trigger-button', 'click', this._geocode, this);

and it works, but i don’t want to add it to your code due to version control and updatability reasons.

Can't find it in readme. I have a query string (Moscow, Mavra street, 18 for example). How can I send geocode request?
I tried L.Control.Geocoder.Nominatim({q: 'Moscow, Mavra street, 18'}) but nothing happened

Hi, I noticed a 1pixel-width difference between this control and the others (zoom, for example).

I don't know enough CSS to fix it. Sorry.

I'd like start by saying thanks for your work, i really like it.
Leaflet control geocoder jsonp call urls don't start with a web protocol(http/https) in desktop browsers this won't cause any issue but if you are building hybrid apps with local assets the protocol used will be "file://" and so jsonp calls will fail. Using a protocol at the beggining of url-s will solve the problem

Especially Nominatim returns quite horribly formatted adresses. Look into improving this, preferably through options and/or templates.

It would be desired for some apps that once an address is found the map doesn't change it's zoom level to focus the location so closely. I have made very small local changes that I could push to add it to the project.

Control.Geocoder.js, line 258

if (xmlHttp.status != 200 && req.status != 304) return;

should be:

if (xmlHttp.status != 200 && xmlHttp.status != 304) return;

I've added the pluging to a modal div instead of being directly on the map. When I search for a location, the search is performed correctly (see firebug output in attached "notworking" image), but I do not get a selection list when multiple results are retruned, like in the demo (attached "working" image). I intend to use the results of the geocoder to programmatically zoom/center my map to the location, but need to handle cases where multiple locations are returned. Do you have any suggestions for my issue in this use case?

We could not change the default Geocoder (Nominatim) because there is a unused "id" parameter that trashs the "options" array.

There is
L.Control.geocoder = function(id, options) {
return new L.Control.Geocoder(id, options);
};
But L.Control.Geocoder.initialize() doe not handle this paremeter
L.Control.Geocoder = L.Control.extend({
...
initialize: function (options) {
...

I push a pull request in minutes.

Cheers

Plase, can you add an option to collapse when a result is choosen.

I am using L.Control.Geocoder.nominatim, although it finds the name of the street within the proper country it misses some street cities (not listed), specially the one I am living in (the biggest one). I tryed with and without the 'city' parameter. I have idea how to name/use all the possible parameters.

geocoder: L.Control.Geocoder.nominatim({
    geocodingQueryParams: { countrycodes: 'uy', city: 'Montevideo' }  

// didn't work, so I left only the codecountries: 'uy' option

Thanks!

This ain't really an issue, but for those like me that struggle daily against Windows 8.1 Store apps weird "security" model which heavily limits some common operations, here is how to make this plugin work:

    var geocoder = L.Control.geocoder({
     collapsed: true,
     showResultIcons: true,
     placeHolder: Global.translate("geocoderPlaceHolder", "Search location..."),
     errorMessage: Global.translate("geocoderNotFound", "No location matching")
    }).addTo(this._mapReference);

    var safeGetJSON = function (url, params, callback) {
     var options = {
      url: 'http:' + url + L.Util.getParamString(params),
      type: 'GET',
      responseType: 'json',
      headers: {
       Accept: 'application/json',
       'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      }
     };
     WinJS.xhr(options).then(function (xhr) {
      var response = typeof xhr.response === 'string' ? JSON.parse(xhr.response) : xhr.response;
      callback.bind(geocoder)(response);
     }, function (error) {
      console.error("Error parsing geocoder request", error);
     });
    };
    L.Control.Geocoder.getJSON = safeGetJSON;
    L.Control.Geocoder.jsonp = safeGetJSON;

I don't know if you want to make the plugin compatible or just ignore it.

The above is just a quick patch, because I have no time for forking this nice project right now, but I think it would be enough to:

1. write nominatim URL with full schema 'http://nominatim.openstreetmap.org/' instead of '//nominatim.openstreetmap.org/', because this one is interpreted as a local resource access, in L.Control.Geocoder.Nominatim.options.serviceUrl
2. give the user an option to use L.Control.Geocoder.getJSON, that I already saw in the sources, instead of L.Control.Geocoder.jsonp.

To follow leaflet on touch device you need :

.leaflet-touch .leaflet-control-geocoder-form input {
box-shadow: none;
border: 2px solid rgba(0,0,0,0.2);
background-clip: padding-box;
}

.leaflet-touch .leaflet-control-geocoder-form input {
width: 34px;
height: 34px;
line-height: 30px;
}

.leaflet-touch .leaflet-control-geocoder-expanded input, .leaflet-touch .leaflet-control-geocoder-error {
width: 200px;
}

Can you write,please, the code i should use with mapRequest? I have tried but the input don't get back any result.

"ReferenceError: req is not defined" in function L.Control.Geocoder.getJSON() when request status is not 200.

I'll push a pull request in minutes.

Cheers

I need this, for widht of widget.

diff --git a/Control.Geocoder.css b/Control.Geocoder.css
index 8de23d9..e84e421 100644
--- a/Control.Geocoder.css
+++ b/Control.Geocoder.css
@@ -37,13 +37,14 @@
height: 26px;
background-image: url(images/geocoder.png);
background-repeat: no-repeat;

•   background-position: right;
  

•   background-position: center;
  float: right;
  cursor: pointer;
  

  }

  .leaflet-touch .leaflet-control-geocoder-icon {
  margin-top: 2px;

•   width: 30px;
  

  }

  .leaflet-control-geocoder-throbber .leaflet-control-geocoder-icon {

How are supposed to do this with your plugin. I understand I could create a new nominatim geocode object and then call markgeocode, however Im not sure if its the best way. I really like this plugin, I just dont wanna put the control on the map.

Via Nominatim, appears we can customize leaflet-control-geocoder-address-context class HTML components in search bar results. Unfortunately, this capability does not appear to be present for Google results.

Make lib available through bower

is there, or could there be, an option to restrict the results to a country or region, so if I am searching for street names I always get results in the UK or perhaps down to a bounding box around the city I am interested in.

Hi, every time I search for a place and select one of the founded places, the placemarker is placed in a slightly wrong position.

The point used to place the marker is not the one returned by the geocoder, but it is calculated as the center of the returned bbox.
In "L.Control.Geocoder.Nominatim" class, center is calculated as follow:
center: L.latLng((bbox[0] + bbox[1]) / 2, (bbox[2] + bbox[3]) / 2)
and there's no way to get the original "lat" and "lon" values returned by the geocoder...

Wouldn't be useful to make this info available to the user?
center: L.latLng(data[i].lat, data[i].lon)
or maybe adding a new property to the result object.

Anyway, thank you for this awesome plugin :)

PS: could it be also possible to add support for "&countrycodes=XX" in the serviceUrl?