A GeoNames powered search control for Leaflet
JavaScript HTML CSS



A GeoNames powered geocoding search control for Leaflet.

It allows you to enter a placename, display a list of search results using GeoNames, and select a placename to zoom to.

Location markers remain on the map until the control is closed (click on icon to open / close).

Tested with Leaflet 1.0.0


From Bower:

bower install Leaflet.Geonames

From NPM:

npm install leaflet-geonames


Include the CSS:

<link rel="stylesheet" href="L.Control.Geonames.css" />

This control uses Google Material Icons by default.

Include the JavaScript:

<script src="L.Control.Geonames.min.js"></script>

Example usage:

var control = L.control.geonames({
    username: '',  // Geonames account username.  Must be provided
    zoomLevel: null,  // Max zoom level to zoom to for location.  If null, will use the map's max zoom level.
    maxresults: 5,  // Maximum number of results to display per search
    className: 'leaflet-geonames-icon', //class for icon
    workingClass: 'leaflet-geonames-icon-working', //class for search underway
    featureClasses: ['A', 'H', 'L', 'P', 'R', 'T', 'U', 'V'],  // feature classes to search against.  See: http://www.geonames.org/export/codes.html
    baseQuery: 'isNameRequired=true',  // The core query sent to GeoNames, later combined with other parameters above
    position: 'topleft',
    showMarker: true, //Show a marker at the location the selected location
    showPopup: true, //Show a tooltip at the selected location
    adminCodes: { // filter results by a country and state.  Values can be strings or return by a function.
        country: 'us',
        adminCode1: function() {return 'wa'}
    lang: 'en', // language for results
    bbox: {east:-121, west: -123, north: 46, south: 45} // bounding box filter for results (e.g., map extent).  Values can be an object with east, west, north, south, or a function that returns that object.


Search Event

This control fires a search event with the value of search parameters:

control.on('search', function(e){console.log(e.params)});

results in {q: "oregon", lang: "en"}

Select Event

This control fires a select event when an option was selected from list, with the full response JSON from geonames:

control.on('select', function(e){console.log(e.geoname)});

results in {adminCode1: "OR", lng: "-120.50139", geonameId: 5744337, ...}



Developed with support from the South Atlantic Landscape Conservation Cooperative, and maintained with support from Peninsular Florida LCC.

Some ideas derived from L.GeoSearch.