diff --git a/SJPv6/www/here-maps.css b/SJPv6/www/here-maps.css new file mode 100644 index 0000000..3afb3b1 --- /dev/null +++ b/SJPv6/www/here-maps.css @@ -0,0 +1,18 @@ +#geocode #map { + display: block; + width: 95%; + margin-bottom: 3px; + height: 450px; + background: grey; +} + +#geocode #panel { + display: block; + width: 95%; + min-height: 450px; + max-height: 450px; + border: 1px solid #e3e3e3; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05); + box-shadow: inset 0 1px 1px rgba(0,0,0,.05); +} diff --git a/SJPv6/www/here-maps.details b/SJPv6/www/here-maps.details new file mode 100644 index 0000000..906591b --- /dev/null +++ b/SJPv6/www/here-maps.details @@ -0,0 +1,12 @@ +--- + name: Search for a Location based on an Address + description: Request a location using a free-form text input and display it on the map + resources: + - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js + normalize_css: no + dtd: html 5 + wrap: d + panel_html: 0 + panel_js: 0 + panel_css: 0 +... \ No newline at end of file diff --git a/SJPv6/www/here-maps.html b/SJPv6/www/here-maps.html new file mode 100644 index 0000000..9716048 --- /dev/null +++ b/SJPv6/www/here-maps.html @@ -0,0 +1,37 @@ + + + + + + Search for a Location based on an Address + + + + + + + + + + + + + + +

This example makes a geocoding request and retrieves the latitude, longitude and + complete address details of 200 S Mathilda Ave, Sunnyvale, CA based on a free-form + text input. A clickable marker is placed on the location found.

+
+
+

Code

+

Access to the geocoding service is obtained from the H.service.Platform + by calling getSearchService(). The geocode() method is used + to find a location by passing in the relevant q parameter as defined in + Geocoding and Search API v7. + The styling and display of the response is under the control of the developer.

+ + + diff --git a/SJPv6/www/here-maps.js b/SJPv6/www/here-maps.js new file mode 100644 index 0000000..7b2e8c2 --- /dev/null +++ b/SJPv6/www/here-maps.js @@ -0,0 +1,189 @@ +/** + * Calculates and displays the address details of 200 S Mathilda Ave, Sunnyvale, CA + * based on a free-form text + * + * + * A full list of available request parameters can be found in the Geocoder API documentation. + * see: https://www.here.com/docs/bundle/geocoding-and-search-api-v7-api-reference/page/index.html#/paths/~1geocode/get + * + * @param {H.service.Platform} platform A stub class to access HERE services + */ + +function geocode(platform) { + var geocoder = platform.getSearchService(), + geocodingParameters = { + q: 'Chennai'//'200 S Mathilda Sunnyvale CA' + }; + + geocoder.geocode( + geocodingParameters, + onSuccess, + onError + ); +} +/** + * This function will be called once the Geocoder REST API provides a response + * @param {Object} result A JSON object representing the location(s) found. + * See: https://www.here.com/docs/bundle/geocoding-and-search-api-v7-api-reference/page/index.html#/paths/~1geocode/get + */ +function onSuccess(result) { + var locations = result.items; + /* + * 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: 'faufZS2XOMIwlELktKbKASVY6kexKiMmH5VxPsyAwmg'//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) { + let location = locations[i]; + var li = document.createElement('li'), + divLabel = document.createElement('div'), + address = location.address, + content = '' + address.label + '
'; + position = location.position; + + content += 'houseNumber: ' + address.houseNumber + '
'; + content += 'street: ' + address.street + '
'; + content += 'district: ' + address.district + '
'; + content += 'city: ' + address.city + '
'; + content += 'postalCode: ' + address.postalCode + '
'; + content += 'county: ' + address.county + '
'; + content += 'country: ' + address.countryName + '
'; + content += 'TimeZone: ' + JSON.stringify(location.timeZone) + '
'; + 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) { + let location = locations[i]; + marker = new H.map.Marker(location.position); + marker.label = location.address.label; + 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.setCenter(group.getBoundingBox().getCenter()); +} + +// Now use the map as required... +geocode(platform); +function searchLocation(){ + var geocoder = platform.getSearchService(), + geocodingParameters = { + q: document.getElementById("location").value, + show: "tz"//'Chennai'//'200 S Mathilda Sunnyvale CA' + }; + + geocoder.geocode( + geocodingParameters, + onSuccess, + onError + ); + } \ No newline at end of file diff --git a/SJPv6/www/img/arrows.png b/SJPv6/www/img/arrows.png new file mode 100644 index 0000000..f71e74a Binary files /dev/null and b/SJPv6/www/img/arrows.png differ