Skip to content

Instantly share code, notes, and snippets.

@jsanz
Created December 14, 2017 11:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jsanz/cda840e6122616c82a52e8638c212629 to your computer and use it in GitHub Desktop.
Save jsanz/cda840e6122616c82a52e8638c212629 to your computer and use it in GitHub Desktop.
JS: HERE as a custom search engine with Leaflet
<!DOCTYPE html>
<html>
<head>
<title>Custom search example | CartoDB.js</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<style>
html,
body,
#map {
height: 100%;
padding: 0;
margin: 0
}
</style>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<link rel="stylesheet" href="http://labs.easyblog.it/maps/leaflet-search/src/leaflet-search.css">
</head>
<body>
<div id="map"></div>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<!-- search control -->
<script src="http://labs.easyblog.it/maps/leaflet-search/src/leaflet-search.js"></script>
<!-- HERE API -->
<script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript">
function main() {
// https://gis.stackexchange.com/questions/138250/is-there-a-way-to-include-an-autocomplete-search-bar-that-does-not-point-back-to/139411#139411
var map = new L.Map('map', {
zoomControl: true,
center: [23.113592, -82.366592],
zoom: 4,
https: true
});
var basemap = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);
/* Search box control */
/* HERE Credentials */
var platform = new H.service.Platform({
app_id: 'JOfcNQGhm3ILUCDBORsK',
app_code: '-83kDuLs_oZ_fR8ffIqWZw',
useHTTPS: true
});
var geocoder = platform.getGeocodingService();
/* Send the geocoding call using HERE JS API and pass the callback */
function nokiaGeocoding(text, callResponse) {
geocoder.geocode(
{ searchText: text, jsonattributes: 1 },
callResponse,
function(){console.log('Ooops!');console.log(arguments)}
);
}
/* The Search Leaflet control expects an object
with label as key and position as value
*/
function formatResponse(rawjson) {
var json = {};
var locations = rawjson.response.view[0].result;
for (var i in locations) {
var location = locations[i]['location'];
key = location['address']['label'];
var position = location['displayPosition'];
loc = L.latLng(position['latitude'], position['longitude']);
json[key] = loc;
}
console.log('result');
console.log(json);
return json;
}
/* Add the Search control to the map */
map.addControl(new L.Control.Search({
sourceData: nokiaGeocoding,
formatData: formatResponse,
markerLocation: true,
autoType: false,
autoCollapse: true,
minLength: 2
}));
/* CARTO Layer */
var baselayer = cartodb.createLayer(map, {
user_name: 'jsanz',
type: 'cartodb',
sublayers: [{
sql: 'SELECT * FROM populated_places',
cartocss: '#layer { marker-fill: #fabada; }'
}]
}).addTo(map);
}
window.onload = main;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment