Developer blog
Solutions Day 0-5: 100DaysOfCode
APIs 7 min read

Solutions Day 0-5: 100DaysOfCode

Solutions Day 0-5: 100DaysOfCode

I hope you are as excited as I am about #100DaysOfCodeWithHERE. For those who have stumbled upon this blog accidentally, we at HERE Technologies are running a series called 100 Days of Code with HERE. The aim of this series is to get you acquainted with location technology thorough APIs that HERE has to offer. Starting the 1st of April, we have been posting 1 task every day through our twitter handle @heredev. We will be doing this for a total of 100 days. After every 5 days, we will post a blog and a video with solutions for the previous 5 days. At the end of 100 days, not only will you learn about HERE map APIs and documentation, but will also learn the basics to build a location technology based application of your own.

Day 0/100

So Day 0/100 of #100DaysOfCodeWithHERE is pretty straight forward. You need to create a freemium account on developer.here.com. You can either follow this little gif or take a look at this mini video. Once you have these credentials, you will get access to over 20 APIS and will get 250K transactions per month!

 

Let's get going with the actual tasks now

 

Day 1/100

The task was to create a frame for a basic HTML+ JS application and to add the HERE map core and map services source within the <head> and </head> tags. So let's create a basic HTML frame.

Copied 
        
<!DOCTYPE html>
    <html lang="en">
        <head>
            <title>100DaysOfCode</title>
            <meta name="viewport" charset="UTF-8" content="initial-scale=1.0, width=device-width" />
            <!-- map core -->
            <!-- map services -->
        </head>
    </html>

 

Now to start with the JS maps, go to developer.here.com/documentation. You will see that all the APIs are intuitively arranged where you first have maps and then other services to build on top of the maps. Now go to Interactive Maps and click on JS and then Get Started
Here you will find the map core and service libraries to add to your application to be able to use the HERE map APIs. Lets add the source to the section.

Copied 
        
<head>
    <!-- map core -->
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
    <!-- map services -->
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
</head>

Day 2/100

Once we have added the libraries, lets create a div to hold the map and initialize the platform.

Copied 
        
 ...
<body>
    <div id="mapContainer" style= "align-self: center; width: 100vw; height: 80vh; background-color: #a87bdf;"></div>
</body>
<script>
        // Initialize platform with JS API KEY
    var platform = new H.service.Platform({
        apikey: "YOUR_JS_APIKEY"
    });
</script>

This is how we establish communication with the backend services provided by the HERE REST APIs. You will find the JavaScript Key in the Project section of your account you created on Day 0/100.
Once we initialize the platform, we are going to initialize the map in the next task

Day 3/100

In this task, we will first obtain the default map style from the platform object and then state the map type which is normal. We then go on to set the initial zoom level and center of the map. The easiest way to get the location you want in terms of latitude and longitude is to go to wego.here.com, enter the name/ address of place you want, you will see the latitude and longitude in the left pane under see more info => see more. Lets see the code.

Copied 
        
<script>
  ...

  // initializing default layers for the map
  var defaultLayers = platform.createDefaultLayers();
  // rendering map within the container on the page
  var map = new H.Map(
          document.getElementById('mapContainer'),
          defaultLayers.vector.normal.map, // rendering vector map with NORMAL map view.
          {
              zoom: 11, // Initial zoom level of map
              center: {lat: 52.53086, lng: 13.38474} // Initial center of map
          });
</script>

The createDefaultLayer() calls the default styles of the map. This includes- What shade of blue should the sea be, what should be the thickness of the polyline that describes the national highways, etc. If you want to set custom styles, you can either set the style before loading the map, or after loading the map. You can read more about custom styles in the documentation. The task also explicitly mentions the vector map which loads the vector data provided with the help of the WebGL rendering engine. You can also choose to load a Raster map which will load map images. You can read more about Vector maps and Raster maps in the Map Types section.
Implementing the above code will give you a static map which you cannot zoom or pan. Let's complete the tasks for day 4 and 5 to add those

Day 4/100

This task was to add the UI element- control panel to the map to be able to zoom it and change the base map after loading. You can also change the position of the control panel and customize aspects of it. To do this, you will have to add the ui libraries and the default stylesheet and then call on the basic ui elements. Ofcourse you can find how to do it in the documentation. Lets take a look at the code

Copied 
        
<head>
    <!-- source for map ui -->
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
    <!-- style sheet for map UI -->
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css"/>
</head>
<script>
    ...
    // creating default UI for map
    var ui = H.ui.UI.createDefault(map, defaultLayers);
</script>

Day 5/100

To pan the map, you click on the map and drag it across to the place you want to focus. This means, you need to tell your map what to do on clicking and dragging. Events like clicking and dragging, fall under map events. You can associate different behaviours to different events like displayign an info-bubble on mouse tap. HERE map APIs provide panning of the map under default behavior. To enable this, you need to add the source for map events, and call the default behaviour function

Copied 
        
<head>
    <!-- source for map events -->
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
</head>
<script>
    ...
    // initialize basic map events 
    var mapEvents = new H.mapevents.MapEvents(map);
    // Initialize for map behaviour on events
    var behavior = new H.mapevents.Behavior(mapEvents);
</script>

By putting all this together, you should get an interactive map with basic style and UI

Copied 
        
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>100DaysOfCode</title>
        <meta name="viewport" charset="UTF-8" content="initial-scale=1.0, width=device-width" />
        <!-- map core -->
        <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
        <!-- map services -->
        <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
        <!-- source for map ui -->
        <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
        <!-- style sheet for map UI -->
        <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css"/>
        <!-- source for map events -->
        <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
    </head>
    <body>
        <h1 style="text-align: center;">100 Days of Code with HERE</h1>
        <!-- Container to hold map -->
        <div id="mapContainer" style= "align-self: center; width: 100vw; height: 80vh; background-color: #a87bdf;"></div>
    </body>
    <script>
        // Initialize platform with JS API KEY
        var platform = new H.service.Platform({
            apikey: "YOUR_JS_APIKEY"
        });
        // initializing default layers for the map
        var defaultLayers = platform.createDefaultLayers();
        // rendering map within the container on the page
        var map = new H.Map(
                document.getElementById('mapContainer'),
                defaultLayers.vector.normal.map, // rendering vector map with NORMAL map view.
                {
                    zoom: 11, // Initial zoom level of map
                    center: {lat: 52.53086, lng: 13.38474} // Initial center of map
                });
        
        // creating default UI for map
        var ui = H.ui.UI.createDefault(map, defaultLayers);
        // initialize basic map events 
        var mapEvents = new H.mapevents.MapEvents(map);
        // Initialize for map behaviour on events
        var behavior = new H.mapevents.Behavior(mapEvents);
    </script>
</html>

You have successfully completed 5 days our of 100DaysOfCodeWithHERE. If you have any questions about what we have covered in these 5 days, you can leave your questions in the comments here or tweet to us at @heredev. We have also released a video tutorial if you are more of a video person on our YouTube channel. Until then, happy coding!

Shruti Kuber

Shruti Kuber

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