10-minute Web Map Application
In this blog post, we will create a very simple mapping application with the HERE Maps API for JavaScript. Start the timer, you should have a working map app in the next 10 minutes.
Step 1: HERE Platform Registration
If you don’t have a HERE platform account, follow the Registration process to create a new one. For additional information about getting started with HERE platform, check out the blog from my colleague Erwin.
Step 2: Get API Keys
Create and register an app on HERE platform and create API Keys. I have described this in a previous blog.
Step 3: Load the SDK Library and Style Sheet
Next, we move to Visual Studio Code, or your preferred JavaScript Editor. Create a working folder for this app, and create an index.html file within.
In the <head> tag of html, we’ll load the SDK library and Style Sheets for UI components.
<!-- STEP 3: Load the SDK Library and Style Sheet -->
<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>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
Step 4: Create a div for the Map
Now, we’ll add a <div> tag in the body of html code. This is where the map will live. Basic div tag can have just an id as:
<div id="mapContainer"></div>
We’ll add a few attributes to map like width, height, alignment, and background.
<div id="mapContainer" style="width: 100vw; height: 50vw; align-self:center;"></div>
Step 5: Create an Instance of the H.service.Platform Object
Create a <script> tag in HTML body to start adding the JavaScript code.
H.service.Platform is the central class of the HERE JavaScript API. Among other things it holds the credentials, which we generated in Step 2. Add the apiKey and create an instance of Platform as follows:
<script>
// Initialize the platform object
var platform = new H.service.Platform({
apikey: 'YOUR_API_KEY_HERE'
});
</script>
Step 6: Initialize the Map
To initialize the map, we need to create a set of default layers, like satellite imagery and traffic information. We initialize a map by creating an instance of H.Map with the div element we created in Step 4.
// Obtain the default map types from the platform object
var maptypes = platform.createDefaultLayers();
// Instantiate (and display) a map object
var map = new H.Map(
document.getElementById('mapContainer'),
maptypes.vector.normal.map, {
zoom: 12,
center: {lat:34.05, lng:-118.24}
});
Run your app, and you can see the map. That’s it!
Step 7: Enable Map Interaction
This map is, however, static (you cannot zoom in or pan around). Let’s enable interactions by adding Map Events.
// Enable the event system on the map instance
var mapEvents = new H.mapevents.MapEvents(map);
// Instantiate the default behavior with mapEvents object
var behavior = new H.mapevents.Behavior(mapEvents);
Step 8: Add UI components
Create the default UI controls (scale bar, zoom control and map selector) as:
// Create the default UI
var ui = H.ui.UI.createDefault(map, defaultLayers);
Bonus
If you change the browser size, notice the map size does not change automatically. You can add the following line to ensure the map resizes properly:
// Resize map
window.addEventListener('resize', () => map.getViewPort().resize());
The complete code
Here’s the full code for a simple web app displaying a full-size map. Copy-paste this code, add your apiKey to the Platform object, and your mapping app is ready!
<!DOCTYPE html>
<html>
<head>
<title>10-Min Map App<</title>
<!-- Step 3: Load the SDK Library and Style Sheet -->
<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>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
</head>
<body>
<!-- Step 4: Create a div for the Map -->
<div id="mapContainer" style="width: 100vw; height: 50vw; align-self: center;"></div>
<script>
// Step 5: Create an Instance of the H.service.Platform Object
// Initialize the platform object
var platform = new H.service.Platform({
apikey: 'YOUR_API_KEY_HERE'
});
// Step 6: Initialize the Map
// Obtain the default map types from the platform object
var defaultLayers = platform.createDefaultLayers();
// Instantiate (and display) a map object
var map = new H.Map(
document.getElementById('mapContainer'),
defaultLayers.vector.normal.map, {
zoom: 12,
center: {lat:34.05, lng:-118.24}
});
// Step 7: Enable Map Interaction
// Enable the event system on the map instance
var mapEvents = new H.mapevents.MapEvents(map);
// Instantiate the default behavior with mapEvents object
var behavior = new H.mapevents.Behavior(mapEvents);
// Step 8: Add UI components
// Create the default UI
var ui = H.ui.UI.createDefault(map, defaultLayers);
// Bonus: Resize map
window.addEventListener('resize', () => map.getViewPort().resize());
</script>
</body>
</html>
Finally, this is how my map looks.
Create your map centered at your favorite location, and explore more possibilities with the Maps API for JavaScript. Happy Coding!
Have your say
Sign up for our newsletter
Why sign up:
- Latest offers and discounts
- Tailored content delivered weekly
- Exclusive events
- One click to unsubscribe