/**
* Calculates and displays the location of the 'Eiffel Tower'
* using a landmark geocoding search
*
*
* A full list of available request parameters can be found in the Geocoder API documentation.
* see: http://developer.here.com/rest-apis/documentation/geocoder/topics/resource-search.html
*
* @param {H.service.Platform} platform A stub class to access HERE services
*/
function landmarkGeocode(platform) {
var geocoder = platform.getGeocodingService(),
landmarkGeocodingParameters = {
searchtext: 'Eiffel Tower',
jsonattributes : 1
};
geocoder.search(
landmarkGeocodingParameters,
onSuccess,
onError
);
}
/**
* This function will be called once the Geocoder REST API provides a response
* @param {Object} result A JSONP object representing the location(s) found.
*
* see: http://developer.here.com/rest-apis/documentation/geocoder/topics/resource-type-response-geocode.html
*/
function onSuccess(result) {
var locations = result.response.view[0].result;
/*
* The styling of the geocoding response on the map is entirely under the developer's control.
* A representitive styling can be found the full JS + HTML code of this example
* in the functions below:
*/
addLocationsToMap(locations);
addLocationsToPanel(locations);
// ... etc.
}
/**
* This function will be called if a communication error occurs during the JSON-P request
* @param {Object} error The error message received.
*/
function onError(error) {
alert('Can\'t reach the remote server');
}
/**
* Boilerplate map initialization code starts below:
*/
//Step 1: initialize communication with the platform
// In your own code, replace variable window.apikey with your own apikey
var platform = new H.service.Platform({
apikey: window.apikey
});
var defaultLayers = platform.createDefaultLayers();
//Step 2: initialize a map - this map is centered over California
var map = new H.Map(document.getElementById('map'),
defaultLayers.vector.normal.map,{
center: {lat:37.376, lng:-122.034},
zoom: 15,
pixelRatio: window.devicePixelRatio || 1
});
// add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());
var locationsContainer = document.getElementById('panel');
//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);
// Hold a reference to any infobubble opened
var bubble;
/**
* Opens/Closes a infobubble
* @param {H.geo.Point} position The location on the map.
* @param {String} text The contents of the infobubble.
*/
function openBubble(position, text){
if(!bubble){
bubble = new H.ui.InfoBubble(
position,
{content: text});
ui.addBubble(bubble);
} else {
bubble.setPosition(position);
bubble.setContent(text);
bubble.open();
}
}
/**
* Creates a series of list items for each location found, and adds it to the panel.
* @param {Object[]} locations An array of locations as received from the
* H.service.GeocodingService
*/
function addLocationsToPanel(locations){
var nodeOL = document.createElement('ul'),
i;
nodeOL.style.fontSize = 'small';
nodeOL.style.marginLeft ='5%';
nodeOL.style.marginRight ='5%';
for (i = 0; i < locations.length; i += 1) {
var li = document.createElement('li'),
divLabel = document.createElement('div'),
landmark = locations[i].place.locations[0],
content = '' + landmark.name + '';
position = {
lat: locations[i].place.locations[0].displayPosition.latitude,
lng: locations[i].place.locations[0].displayPosition.longitude
};
content += 'houseNumber: ' + landmark.address.houseNumber + '
';
content += 'street: ' + landmark.address.street + '
';
content += 'district: ' + landmark.address.district + '
';
content += 'city: ' + landmark.address.city + '
';
content += 'postalCode: ' + landmark.address.postalCode + '
';
content += 'county: ' + landmark.address.county + '
';
content += 'country: ' + landmark.address.country + '
';
content += '
position: ' +
Math.abs(position.lat.toFixed(4)) + ((position.lat > 0) ? 'N' : 'S') +
' ' + Math.abs(position.lng.toFixed(4)) + ((position.lng > 0) ? 'E' : 'W');
divLabel.innerHTML = content;
li.appendChild(divLabel);
nodeOL.appendChild(li);
}
locationsContainer.appendChild(nodeOL);
}
/**
* Creates a series of H.map.Markers for each location found, and adds it to the map.
* @param {Object[]} locations An array of locations as received from the
* H.service.GeocodingService
*/
function addLocationsToMap(locations){
var group = new H.map.Group(),
position,
i;
// Add a marker for each location found
for (i = 0; i < locations.length; i += 1) {
position = {
lat: locations[i].place.locations[0].displayPosition.latitude,
lng: locations[i].place.locations[0].displayPosition.longitude
};
marker = new H.map.Marker(position);
marker.label = locations[i].place.locations[0].name;
group.addObject(marker);
}
group.addEventListener('tap', function (evt) {
map.setCenter(evt.target.getGeometry());
openBubble(
evt.target.getGeometry(), evt.target.label);
}, false);
// Add the locations group to the map
map.addObject(group);
map.getViewModel().setLookAtData({
bounds: group.getBoundingBox()
});
map.setZoom(Math.min(map.getZoom(), 16));
}
// Now use the map as required...
landmarkGeocode(platform);
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Search for a Landmark</title>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
<link rel="stylesheet" type="text/css" href="demo.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="../template.css" />
<script type="text/javascript" src='../test-credentials.js'></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
<script type="text/javascript" src='../js-examples-rendering-helpers/iframe-height.js'></script></head>
<body id="geocode">
<div class="page-header">
<h1>Search for a Landmark</h1>
<p>Request the location of a landmark and display it on the map.</p>
</div>
<p>This example makes a landmark search and retrieves the name and location of
the <b>Eiffel Tower</b> based on the input text. A clickable marker is placed on the location found.</p>
<div id="map"></div>
<div id="panel"></div>
<h3>Code</h3>
<p>Access to the geocoding service is obtained from the <code>H.service.Platform</code>
by calling <code>getGeocodingService()</code>. The <code>search()</code> method is used
to find a landmark by passing in the relevant parameters as defined in
<a href="http://developer.here.com/rest-apis/documentation/geocoder/topics/resource-search.html" target="_blank">Geocoder API</a>.
The styling and display of the response is under the control of the developer.</p>
<script type="text/javascript" src='demo.js'></script>
</body>
</html>