Week 9: Update the Markers on HERE Maps

Julia
Jun 30, 2019
2 min read

Updated: Jul 3, 2019

When using the website on my mobile phone, I had discovered that the fonts were much smaller than on my laptop screen in mobile preview mode - an issue that I'm currently working on. Moreover, the HERE Maps location markers on my phone screen were extremely small - so small that you could not select them by tapping on them. A problem that stayed the same no matter how closely I zoomed in. This was an issue that I tackled today.

Marking De Broodbode as the Starting Point

When Harry and Douwe viewed the mobile website on Friday, they said that it would be important for visitors to see their own position at de Broodbode. I totally agree with that. It makes little sense to show the user locations in his/her surrounding if the starting position is not indicated. At first, I was really lost with everything because the markers are retrieved directly from the API and not shown in the HTML document, so that their size cannot be adjusted with CSS.

However, there is some documentation about how to include icons instead of the default markers - and for these, the size can be changed.

First, I found out how to include the marker for de Broodbode with the code on this page: https://developer.here.com/api-explorer/maps-js/markers/map-with-svg-graphic-markers

I managed to add an additional marker for the original position of the user at de Broodbode in the form of the C in the example, using the GitHub documentation of HERE Maps in order to find out the XML code for the SVG: https://github.com/heremaps/maps-api-for-javascript-examples/blob/master/map-with-svg-graphic-markers/demo.js

Although I was able to adjust the text, size and colours of the SVG, it did not look nice and it stayed small on my phone. The next step was thus to replace it with a real marker. I decided to use the logo of de Broodbode as a PNG image and found this code to do so: https://developer.here.com/documentation/maps/topics/best-practices.html

Instead of using the SVG code, I could now use the PNG image as the source image:

The adjustment of the pixel ration caused a problem first, it was not always like in the above code snippet. On stack overflow, I found a solution because this problem had already been discussed by another user and the HERE developer team: https://stackoverflow.com/questions/52872933/here-maps-marker-on-samsung-galaxy-s7

Adjusting the Size of the Original Markers

Last but not least, I wanted to adjust the size of the original markers. Since it seemed impossible, I decided to change them into an icon as well because I would be able to adjust the size in the same way as with the Broodbode icon. I downloaded a location icon from flaticon.com that I edited a bit in Photoshop to match the look and feel of our website. It only took one and a half lines of code to use it as a standard marker in the already existing function to add markers to the page: