Geocoder search widget with autocomplete/select from list

1,017 views
Skip to first unread message

xander....@gmail.com

unread,
Nov 3, 2014, 3:10:42 PM11/3/14
to cesiu...@googlegroups.com
I've made modifications to the Geocoder widget so that it can make requests from a Nominatim source. It works fine, but only displays the top result. Is there a way to make the geocoder text box do an autocomplete like action so the user can select from multiple geocoder responses?

And example would be typing in "KBOS". There's a TX radio station with those call letters, and the airport in Boston has that as its ICAO code. Both are returned from the search, so it would be nice to have a selection drop down from the text box. Google Maps has this kind of functionality in their search box.

david.ho...@gmail.com

unread,
Dec 12, 2014, 2:29:45 PM12/12/14
to cesiu...@googlegroups.com, xander....@gmail.com
On Monday, November 3, 2014 2:10:42 PM UTC-6, xander....@gmail.com wrote:
> I've made modifications to the Geocoder widget so that it can make requests from a Nominatim source. It works fine, but only displays the top result. Is there a way to make the geocoder text box do an autocomplete like action so the user can select from multiple geocoder responses?
>
> And example would be typing in "KBOS". There's a TX radio station with those call letters, and the airport in Boston has that as its ICAO code. Both are returned from the search, so it would be nice to have a selection drop down from the text box. Google Maps has this kind of functionality in their search box.

Im interested in this as well. I would like to be able to search all ICAO's from my database. Example: "BIRK" sends you to Birk, Germany; "BIRK Airport" sends you to BIRK Airport in Iceland

Matthew Amato

unread,
Dec 17, 2014, 2:54:02 PM12/17/14
to cesiu...@googlegroups.com
Just an FYI that we'd be happy to take a pull request if anyone wants to work on these things.  It sounds like this could be split into 2 separate pieces.

1. Add autocomplete and drop down suggestions to the widget (the bing API supports this, we just need to hook it in).

2. Make the actual geocoding mechanism plugginable so that users can supply their own geocoder (or multiple geocoders for domain specific searching).

I've also updated out GeoCoder roadmap:  https://github.com/AnalyticalGraphicsInc/cesium/issues/1262


--
You received this message because you are subscribed to the Google Groups "cesium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Mauricio Giraldo

unread,
Nov 19, 2015, 11:13:46 AM11/19/15
to cesium-dev
any news on this?

i'd like to use the mapbox geocoder if possible since i already use their tiles

Hannah Pinkos

unread,
Nov 19, 2015, 11:22:47 PM11/19/15
to cesium-dev
Hello,

We will most likely not add autocomplete to our geocoder because it is not well supported by the bing maps API.
You will have to customize the geocoder in order to use mapbox instead.  I think you would only have to make changes to this file: https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Widgets/Geocoder/GeocoderViewModel.js
Replace the this._url with the url to the mapbox geocoder, get the access token from MapboxApi.getAccessToken, and change the geocode function to make the correct call to the mapbox api and handle it's return value.

If you get something working, we'd be happy to take a pull request.  Now that we support mapbox imagery, I bet there are other people who would like to use their geocoder as well.   Let me know if you have any questions!

Best,

Hannah
Message has been deleted

xander....@gmail.com

unread,
Mar 15, 2017, 9:15:41 AM3/15/17
to cesium-dev
While the original thread may be old, there is now a solution to the original problem. With updates to the Cesium geocoder, it is possible to write a GeocoderService that uses Nominatim as the back end instead of the Bing maps search service.

The following code, NominatimGeocoderService.js will do the trick. Simply edit the 'url' variable to the base of your Nominatim service

define([
'Cesium/Core/defaultValue',
'Cesium/Core/defined',
'Cesium/Core/defineProperties',
'Cesium/Core/DeveloperError',
'Cesium/Core/loadJsonp',
'Cesium/Core/Rectangle'
], function (
defaultValue,
defined,
defineProperties,
DeveloperError,
loadJsonp,
Rectangle) {
var url = 'http://mynominatim.org/nominatim/search.php';

/**
* Provides geocoding through Nominatim.
* @alias NominatimGeocoderService
* @constructor
*
* @param {Object} options Object with the following properties:
* @param {String} options.scene The scene
*/
function NominatimGeocoderService(options) {
options = defaultValue(options, defaultValue.EMPTY_OBJECT);
}

defineProperties(NominatimGeocoderService.prototype, {
/**
* The URL endpoint for the Nominatim geocoder service
* @type {String}
* @memberof {NominatimGeocoderService.prototype}
* @readonly
*/
url: {
get: function () {
return url;
}
}
});

/**
* @function
*
* @param {String} query The query to be sent to the geocoder service
* @returns {Promise<GeocoderResult[]>}
*/
NominatimGeocoderService.prototype.geocode = function (query) {
//>>includeStart('debug', pragmas.debug);
if (!defined(query)) {
throw new DeveloperError('query must be defined');
}
//>>includeEnd('debug');
var promise = loadJsonp(url, {
parameters: {
format: 'json',
q: query
},
callbackParameterName: 'json_callback'
});

return promise.then(function (results) {
if (results.length === 0) {
return [];
}

return results.map(function (resource) {
var bbox = resource.boundingbox;
var south = bbox[0];
var north = bbox[1];
var west = bbox[2];
var east = bbox[3];
return {
displayName: resource.display_name,
destination: Rectangle.fromDegrees(west, south, east, north)
};
});
});
};

return NominatimGeocoderService;
});

Using it in a simple viewer can then be accomplished with:

var nominatimGeocoderService = new NominatimGeocoderService();

var viewer = new Viewer('cesiumContainer',
{
baseLayerPicker: true,
geocoder: nominatimGeocoderService
}
);

Xander

Hannah Pinkos

unread,
Mar 16, 2017, 8:33:09 AM3/16/17
to cesium-dev, xander....@gmail.com
Thanks for the code example Xander!
We also added a Sandcastle example that shows how to use Nominatim: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Custom%20Geocoder.html&label=Showcases

-Hannah

Alexander Enzmann

unread,
Mar 17, 2017, 8:19:52 AM3/17/17
to Hannah Pinkos, cesium-dev
Hannah,

Appreciate the pointer.  Wish I'd looked in the Sandcastle apps after recent download of Cesium, would have saved some time.

I notice the Sandcastle example uses "loadJson()", instead of "loadJsonp()".  Given the strong likelyhood that the geocoder would be located in a different domain, wouldn't jsonp be better to help avoid same-origin issues?

Hannah Pinkos

unread,
Mar 17, 2017, 9:06:15 AM3/17/17
to cesium-dev, pinkos...@gmail.com, xander....@gmail.com
Good catch!  Would you be interested in submitting a pull request with that fix?  You can learn more in our contributing documentation: https://github.com/AnalyticalGraphicsInc/cesium/blob/master/CONTRIBUTING.md#opening-a-pull-request

-Hannah

Matthew Amato

unread,
Mar 17, 2017, 10:21:27 AM3/17/17
to cesiu...@googlegroups.com
`loadJson` is fine since the geocoding server should have CORS enabled anyway.

--
You received this message because you are subscribed to the Google Groups "cesium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+unsubscribe@googlegroups.com.

Geoneer

unread,
Oct 10, 2017, 8:59:30 AM10/10/17
to cesium-dev
Sandcastle nominatim search does not work on my system: Chrome 64bits: Version 61.0.3163.100 (Official Build) (64-bit)


Also in my 'normal' 1.38 Cesium the Geocoder does not work.....


How to fix this?

To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+...@googlegroups.com.

Gabby Getz

unread,
Oct 17, 2017, 10:43:40 AM10/17/17
to cesium-dev
Sandcastle nominatim search does not work on my system: Chrome 64bits: Version 61.0.3163.100 (Official Build) (64-bit)

The sandcastle example is throwing an error because the endpoint is requesting an url via http:// while sandcastle is being served on https://, so there's a security error. If you set the endpoint to use https://, it should work. I've opened an issue on GitHub to fix.

Also in my 'normal' 1.38 Cesium the Geocoder does not work.....

Can you be a little more specific?

Thanks,
Gabby

To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+unsubscribe@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages