From 924b35593cac747514646b0dcf5bab1fb05546a3 Mon Sep 17 00:00:00 2001 From: SanjayPrabhakaran Date: Tue, 30 Jan 2024 12:03:28 +0530 Subject: [PATCH] Here Maps --- SJPv6/www/here-maps.css | 18 ++++ SJPv6/www/here-maps.details | 12 +++ SJPv6/www/here-maps.html | 37 +++++++ SJPv6/www/here-maps.js | 189 ++++++++++++++++++++++++++++++++++++ SJPv6/www/img/arrows.png | Bin 0 -> 6868 bytes 5 files changed, 256 insertions(+) create mode 100644 SJPv6/www/here-maps.css create mode 100644 SJPv6/www/here-maps.details create mode 100644 SJPv6/www/here-maps.html create mode 100644 SJPv6/www/here-maps.js create mode 100644 SJPv6/www/img/arrows.png 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 + + + + + + + + + + + + + +
+

Search for a Location based on an Address

+

Request a location using a free-form text input and display it on the map.

+
+

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 0000000000000000000000000000000000000000..f71e74a477e0c1e9370fb78b9d5c32aec9df75c3 GIT binary patch literal 6868 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 literal 0 HcmV?d00001