-
Notifications
You must be signed in to change notification settings - Fork 429
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Created initial example set and updated the README.md
- Loading branch information
Jason Fox
committed
Jan 7, 2016
1 parent
ba4ef80
commit 558f7ed
Showing
236 changed files
with
8,092 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,63 @@ | ||
# maps-api-for-javascript-examples | ||
Self-contained examples for Maps API for JavaScript | ||
# Maps API for JavaScript | ||
|
||
This repository holds a series of JavaScript based examples using the **HERE Maps API for JavaScript**. More information about the API can be found on [developer.here.com](https://developer.here.com/). | ||
|
||
This set of self-contained, use-case based examples is designed to be cloned by developers for their own use. | ||
|
||
|
||
**Note:** In order to get the sample code to work, you **must** replace all instances of `{YOUR_APP_ID}` and `{YOUR_APP_CODE}` within the code and use your own HERE credentials. | ||
|
||
You can obtain a set of credentials from the [Plans Page](https://developer.here.com/plans/api/consumer-mapping) on developer.here.com. | ||
|
||
## Maps API for JavaScript | ||
|
||
All of the following examples use **version 3.0** of the API | ||
|
||
* [Adding Meta Information layer to the Map](tree/master/meta-info-layer) - Retrieve meta information of city labels, transit stations, etc. | ||
* [Adding Venues layer to the Map](tree/master/venues-layer) - Display venue objects (e.g. shops, airports etc) on the map | ||
* [Adding a Ground Overlay to the Map](tree/master/ground-overlay) - Display an image over a specified geographical area. | ||
* [Adding an Overlay to the Map](tree/master/custom-tile-overlay) - Display custom map tiles as an overlay | ||
* [Calculating a Location from a Mouse Click](tree/master/position-on-mouse-click) - Obtain the latitude and longitude of a location within the map | ||
* [Changing from the Metric System](tree/master/map-scale-bar-changing-from-the-metric-system) - Display a map including a scale bar in miles or yards | ||
* [Circle on the Map](tree/master/circle-on-the-map) - Display a map highlighting a circular region | ||
* [DOM Marker](tree/master/map-with-dom-marker) - Display a marker that is capable of receiving DOM events | ||
* [Detailed Place Information](tree/master/get-place-details) - Request detailed information about a place marked on the map selected using a mouse click | ||
* [Display Interactive KML Objects](tree/master/map-with-interactive-kml-objects) - Parse a KML file and display and interact with the data on a map | ||
* [Display KML Data](tree/master/display-kml-on-map) - Parse a KML file and display the data on a map | ||
* [Draggable Marker](tree/master/draggable-marker) - Display a moveable marker on a map | ||
* [Explore Nearby Places](tree/master/identify-places-at-location) - Request a list of places close to a location and display them on a map | ||
* [Explore Popular Places by Category](tree/master/explore-places) - Request a list of places within a category around a location and display them on a map. | ||
* [Finding the Nearest Marker](tree/master/finding-the-nearest-marker) - Find a marker nearest to the click location | ||
* [Map Objects Event Delegation](tree/master/map-objects-event-delegation) - Use event delegation on map objects | ||
* [Map Objects Events](tree/master/map-object-events-displayed) - Handle events on various map objects | ||
* [Map UI Components](tree/master/moved-map-components) - Display a map with the standard UI components in an altered location | ||
* [Map at a specified location](tree/master/map-at-specified-location) - Display a map at a specified location and zoom level | ||
* [Map using View Bounds](tree/master/map-using-view-bounds) - Display a map of a given area | ||
* [Map with Driving Route from A to B](tree/master/map-with-route-from-a-to-b) - Request a driving route from A to B and display it on the map. | ||
* [Map with Pedestrian Route from A to B](tree/master/map-with-pedestrian-route-from-a-to-b) - Request a walking route from A to B and display it on the map. | ||
* [Map with Route from A to B using Public Transport](tree/master/map-with-route-from-a-to-b-using-public-transport) - Request a route from A to B using public transport and display it on the map. | ||
* [Map with Truck Route from A to B](tree/master/map-with-truck-route-from-a-to-b) - Request a truck route from A to B and display it on the map. | ||
* [Marker Clustering](tree/master/marker-clustering) - Cluster multiple markers together to better visualize the data | ||
* [Marker Clustering with Custom Theme](tree/master/custom-cluster-theme) - Cluster multiple markers and customize the theme | ||
* [Marker on the Map](tree/master/markers-on-the-map) - Display a map highlighting points of interest | ||
* [Multi-language support](tree/master/map-multi-language-support) - Display a map with labels in a foreign language | ||
* [One-Box Search](tree/master/search-for-places) - Request a list of nearby places based on a query string and display them on a map | ||
* [Opening an Infobubble on a Mouse Click](tree/master/open-infobubble) - Open an infobubble when a marker is clicked | ||
* [Ordering Overlapping Markers](tree/master/ordering-overlapping-markers) - Arrange the order in which a series of map objects are displayed | ||
* [Panning the Map](tree/master/panning-the-map) - Programmatically pan the map so that it is continually in motion | ||
* [Polygon on the Map](tree/master/polygon-on-the-map) - Display a map highlighting a region or area | ||
* [Polyline on the Map](tree/master/polyline-on-the-map) - Display a map with a line showing a known route | ||
* [Rectangle on the map](tree/master/rectangle-on-the-map) - Display a map highlighting a retangular region or area | ||
* [Restrict Map Movement](tree/master/restrict-map) - Restrict a moveable map to a given rectangular area | ||
* [SVG Graphic Markers](tree/master/map-with-svg-graphic-markers) - Display a map with custom SVG markers | ||
* [Search for a Landmark](tree/master/search-for-landmark) - Request the location of a landmark and display it on the map. | ||
* [Search for a Location based on an Address](tree/master/geocode-a-location-from-address) - Request a location using a free-form text input and display it on the map. | ||
* [Search for a Location given a Structured Address](tree/master/geocode-a-location-from-structured-address) - Request a location from a structured address and display it on the map. | ||
* [Search for the Address of a Known Location](tree/master/reverse-geocode-an-address-from-location) - Request address details for a given location and display it on the map. | ||
* [Store map tiles for offline usage](tree/master/offline-map) - Store map tiles for offline usage | ||
* [Synchronising Two Maps](tree/master/synchronising-two-maps) - Synchronise a static map with an interactive map | ||
* [Take a Snapshot of the Map](tree/master/capture-map-area) - Capture an area on the map | ||
* [Terrain Map](tree/master/terrain-map) - Display a topographical map | ||
* [Traffic Information](tree/master/showing-traffic-information) - Display traffic information on the map | ||
* [Zoom into Bounds](tree/master/custom-zooming-into-bounds) - Zoom into bounds limiting maximum level | ||
* [Zooming to a Set of Markers](tree/master/zoom-to-set-of-markers) - Alter the viewport to ensure a group of objects are visible |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
<!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"> | ||
<meta name="description" content="Capture an area on the map"> | ||
<title>Take a Snapshot of the Map</title> | ||
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css" /> | ||
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script> | ||
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script> | ||
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script> | ||
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script> | ||
</head> | ||
<body> | ||
<h1>Take a Snapshot of the Map</h1> | ||
<p><span>This example demonstrates how to take a snapshot of the map. It specifies area to be captured with top/left and bottom/right view port coordinates<br></span></p> | ||
<div id="map" style="width: 600px; height: 400px; background: grey"></div> | ||
<div id="panel" style="width: 600px;"></div> | ||
<script type="text/javascript" src='js/app.js'></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,79 @@ | ||
/** | ||
* Takes a snapshot of the map. | ||
* | ||
* @param {Element} resultContainer Reference to DOM Element to show the captured map area | ||
* @param {H.Map} map Reference to initialized map object | ||
* @param {H.ui.UI} ui Reference to UI component | ||
*/ | ||
function capture(resultContainer, map, ui) { | ||
// Capturing area of the map is asynchronous, callback function receives HTML5 canvas | ||
// element with desired map area rendered on it. | ||
// We also pass an H.ui.UI reference in order to see the ScaleBar in the output. | ||
// If dimensions are omitted, whole veiw port will be captured | ||
map.capture(function(canvas) { | ||
if (canvas) { | ||
resultContainer.innerHTML = ''; | ||
resultContainer.appendChild(canvas); | ||
} else { | ||
// For example when map is in Panorama mode | ||
resultContainer.innerHTML = 'Capturing is not supported'; | ||
} | ||
}, [ui], 50, 50, 500, 200); | ||
} | ||
|
||
|
||
|
||
/** | ||
* Boilerplate map initialization code starts below: | ||
*/ | ||
// Step 1: initialize communication with the platform | ||
var platform = new H.service.Platform({ | ||
app_id: '{YOUR_APP_ID}', | ||
app_code: '{YOUR_APP_CODE}', | ||
useHTTPS: true, | ||
useCIT: true | ||
}); | ||
var defaultLayers = platform.createDefaultLayers(); | ||
|
||
var mapContainer = document.getElementById('map'); | ||
|
||
// Step 2: initialize a map | ||
var map = new H.Map(mapContainer, defaultLayers.normal.map, { | ||
// initial center and zoom level of the map | ||
zoom: 16, | ||
// Champs-Elysees | ||
center: {lat: 48.869145, lng: 2.314298} | ||
}); | ||
|
||
// 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)); | ||
|
||
// Step 4: Create the default UI | ||
var ui = H.ui.UI.createDefault(map, defaultLayers, 'en-US'); | ||
|
||
|
||
// Step 6: Create "Capture" button and place for showing the captured area | ||
var resultContainer = document.getElementById('panel'); | ||
|
||
// Create container for the "Capture" button | ||
var containerNode = document.createElement('div'); | ||
containerNode.setAttribute('style', | ||
'position:absolute;top:0;left:0;background-color:#fff; padding:10px;'); | ||
containerNode.className = 'btn-group'; | ||
|
||
// Create the "Capture" button | ||
var captureBtn = document.createElement('input'); | ||
captureBtn.value = 'Capture'; | ||
captureBtn.type = 'button'; | ||
captureBtn.className = 'btn btn-sm btn-default'; | ||
|
||
// Add both button and container to the DOM | ||
containerNode.appendChild(captureBtn); | ||
mapContainer.appendChild(containerNode); | ||
|
||
// Step 7: Handle capture button click event | ||
captureBtn.onclick = function() { | ||
capture(resultContainer, map, ui); | ||
}; |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
<!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"> | ||
<meta name="description" content="Display a map highlighting a circular region"> | ||
<title>Circle on the Map</title> | ||
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css" /> | ||
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script> | ||
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script> | ||
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script> | ||
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script> | ||
</head> | ||
<body> | ||
<h1>Circle on the Map</h1> | ||
<p>This example shows a circle with a radius of 1000 meters centered over a location in <b>New Delhi</b> (<i>28.6071°N, 77.2127°E</i>) and displayed on a moveable map.</p> | ||
<div id="map" style="width: 600px; height: 400px; background: grey"></div> | ||
<script type="text/javascript" src='js/app.js'></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
|
||
/** | ||
* Adds a circle over New Delhi with a radius of 1000 metres onto the map | ||
* | ||
* @param {H.Map} map A HERE Map instance within the application | ||
*/ | ||
function addCircleToMap(map){ | ||
map.addObject(new H.map.Circle( | ||
// The central point of the circle | ||
{lat:28.6071, lng:77.2127}, | ||
// The radius of the circle in meters | ||
1000, | ||
{ | ||
style: { | ||
strokeColor: 'rgba(55, 85, 170, 0.6)', // Color of the perimeter | ||
lineWidth: 2, | ||
fillColor: 'rgba(0, 128, 0, 0.7)' // Color of the circle | ||
} | ||
} | ||
)); | ||
} | ||
|
||
|
||
|
||
|
||
|
||
/** | ||
* Boilerplate map initialization code starts below: | ||
*/ | ||
|
||
//Step 1: initialize communication with the platform | ||
var platform = new H.service.Platform({ | ||
app_id: '{YOUR_APP_ID}', | ||
app_code: '{YOUR_APP_CODE}', | ||
useCIT: true, | ||
useHTTPS: true | ||
}); | ||
var defaultLayers = platform.createDefaultLayers(); | ||
|
||
//Step 2: initialize a map - this map is centered over New Delhi | ||
var map = new H.Map(document.getElementById('map'), | ||
defaultLayers.normal.map,{ | ||
center: {lat:28.6071, lng:77.2127}, | ||
zoom: 13 | ||
}); | ||
|
||
//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); | ||
|
||
// Now use the map as required... | ||
addCircleToMap(map); |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Large diffs are not rendered by default.
Oops, something went wrong.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
<!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"> | ||
<meta name="description" content="Cluster multiple markers and customize the theme"> | ||
<title>Marker Clustering with Custom Theme</title> | ||
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css" /> | ||
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script> | ||
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script> | ||
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script> | ||
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script> | ||
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-clustering.js"></script> | ||
</head> | ||
<body> | ||
<h1>Marker Clustering with Custom Theme</h1> | ||
<p>This example displays a map showing geo-tagged clusters of photographs taken from locations around the world. The <a target="_blank" rel="nofollow" href="http://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a> website was used to provide a source of data of geo-tagged images.</p> | ||
<div id="map" style="width: 600px; height: 400px; background: grey"></div> | ||
<script type="text/javascript" src='js/app.js'></script> | ||
</body> | ||
</html> |
Oops, something went wrong.