Solutions Day 16-20: 100DaysOfCode

Week 4 of #100DaysOfCodeWithHERE already! If you have no idea what I'm talking about, take a look at this blog which will tell you everything about #100DaysOfCode. In this blog, I will cover solutions for days 16 through 20. If you have missed the solutions for days 0-15, you can read them in my previous blogs or in the video format.
Let's begin!

Day 16/100

So far, the map that we have rendered is with the default style. Although the objects on top of the map have been styled plenty, we haven't really covered how to change the look and feel of the base map. With Day 16, we are going to style the map before rendering it, thus we will have a customized map style on load. While the task to change the font is quite small, it opens up new ways to explore all the default styles in the map and create a completely customized map which fits the theme of your application. Along with the documentation for map styles, there is a tool available to see the map style changes you make in real time. This tool is the map style editor. This editor has the default map style in a yaml format. You can make changes in this file, download the file and use it as a style template for your map on load.
For changing the font, simply change the text_font_family into the font you want. Download the file as 'font_arial.yaml'.

Copied

        
    global:
    text_font_family: Arial

Copied

        
<script>
var map = new H.Map(
...
);
var provider = map.getBaseLayer().getProvider();

var mapStyle = new H.map.Style('font_arial.yaml', 'https://js.api.here.com/v3/3.1/styles/omv/');

provider.setStyle(mapStyle);

... 
         
</script>

Day 17/100

If you need to make major changes in the map style, a yaml file is the way to go. Although if you want to make tiny changes after the map has already been loaded, you can pick out a specific feature and change it's style at runtime. This is what we will do as task 17/100. Here we are changing the color property of the feature hospital in the map. If you circle back to the map style editor, you will see that 'hospital' is a 'layer' under the layer 'landuse'. It's property 'color' lies under the 'draw' feature.

<body> <button class="button" style="vertical-align:middle" onclick="highlightHosp()"><span>Highlight hospitals </span></button> </body> <script> ... function highlightHosp(){ var hospStyle = provider.getStyle(); var hospConfig = hospStyle.extractConfig('landuse.hospital'); hospConfig.layers.landuse.hospital.draw.polygons.color = 'rgb(255,0,0)'; hospStyle.mergeConfig(hospConfig); } </script>

Day 18/100

Changing the language of the map is pretty simple and possible in many ways. You can use the on-load or run-time methods like days 16 and 17 or there's an easier method which I will be using in the solution for day 18. The map language can be added as a parameter to the H.ui.UI.createDefault() library function. You can read about the supported languages in the Map controls and UI section of the documentation.

Copied

        
<script>
    ...

    var map = new H.Map(
        ...
    );

    // creating default UI for map

    var ui = H.ui.UI.createDefault(map, defaultLayers,'de-DE'); 

</script>

Day 19/100

If you follow the documentation from day 18, you will see that the task for day 19 is right below the UI language section. For day 19, we will change the position of the control panel which is part of the default UI of the map. To understand the terminology of the position on the map window, take a look at the API references for H.UI. Similarly you can also change the positions of the zoom control buttons and the scale indicator of the map.

Copied

        
<script>
    ...

    var mapSettings = ui.getControl('mapsettings');

    mapSettings.setAlignment('top-right');
    
</script>

Day 20/100

You may have noticed that I often struggle with writing 'behavior' instead of 'behaviour' and 'color' instead of 'colour'. This is because I grew up learning 'British English' while the language we use in our company is 'American English'. Having said that, I am also used to calculating distance in meters, which is the default of the map. Although for those who use miles, you may want to switch to the IMPERIAL unit system. This is also the property of the map UI and can be found in the API references for H.UI

Copied

        
<script>
    ...
    ui.setUnitSyste</code><code>m(H.ui.UnitSystem.IMPERIAL);
    
</script>

And there you go. We are through with 20 days of #100DaysOfCode. Hope you enjoyed this week of 100DayOfCodeWithHERE. Keep following us on Twitter for more tasks and complete all 100 days. If you want to watch the video version of these solutions, take a look at our playlist for 100DaysOfCode on YouTube.
Happy coding!

Solutions Day 16-20: 100DaysOfCode

Day 16/100

Day 17/100

Day 18/100

Day 19/100

Day 20/100

Shruti Kuber

Have your say

Sign up for our newsletter

HERE