Solutions: Day 86-90 #100DaysOfCode

Welcome to week 18 of #100DaysOfCode with HERE. This week we are going to look at the Map Image API. This API generates static map images (literally PNGs, JPEGs, etc.) for use in contexts where interactive maps don’t work. Think sending a map with a route in a receipt email for a ride-sharing service or displaying a morning commute in an Alexa skill card.
If you want to know more about 100DaysOfCode with HERE, take a look at this blog post which will tell you everything about it. If you have missed the solutions for days 0-85, you can find them in the previous blogs posts or on our YouTube channel.
Let's begin! Let's begin!

Day 86/100

Our task here was to generate a map image using the Map Image API. The map was supposed to be centered on Manhattan, with a size of 1280 by 720 pixels and in PNG format. Let’s check out the API Reference for Map Image API and take each of these requirements in turn.

• First, we need to choose the correct resource. In our case we want a simple map view, so we select the mapview resource: https://image.maps.ls.hereapi.com/mia/1.6/mapview
• To center the map image on Manhattan, we need to use the ctr (for center) parameter and set it to a latitude and longitude in Manhattan, e.g. 40.71451,-74.00602.
• To set the size of the map we use the w and h parameters (for width and height). We set w to 1280 and h to 720.
• Finally, to select the image format we use the f parameter (for format). The default value is 1 (for JPEG). We need to set it to 0 (for PNG).

Our API call now looks like this.

        
https://image.maps.ls.hereapi.com/mia/1.6/mapview
?apiKey=YOUR_API_KEY
&ctr=40.71451,-74.00602
&w=1280
&h=720
&f=1

  

Our resulting map image looks like this.

Day 87/100

The task for this day was to create a satellite image map of Easter Island. We also needed to change the map zoom, so that the entire island was visible in as much detail as possible.

• First, we need to move the map center by setting ctr to the center of Easter Island: -27.11789,-109.35955
• To change the default map scheme type, we need to use the parameter t (for type) and set it to 1, which stand for “satellite.day”. (Feel free to experiment with some other map scheme types!)
• We also introduce the parameter z (for zoom) and need to experiment with its value, to find a good zoom level. 12 looks like a good choice.
• We can leave all other parameters the same.

Our API call now looks like this.

        
https://image.maps.ls.hereapi.com/mia/1.6/mapview
?apiKey=YOUR_API_KEY
&ctr=-27.11789,-109.35955
&w=1280
&h=720
&f=0
&t=1
&z=12

  

Our resulting map image looks like this.

Day 88/100

On day 88 we were asked to generate a map image of Disneyland and put a map marker on the castle. The map marker should be green and use the theme “pin”.

• Once again we need to change our ctr parameter, in this case to 33.8121,-117.91899.
• To add a marker, we use the poi (for point of interest) parameter. The value of this parameter is the location of the marker, so: 33.81278,-117.91899
• To change the color of the marker, we use the poifc (for point of interest fill color) parameter and set it to green using a hex value as AARRGGBB (alpha, red, green, blue): FFFF0000
• Finally, to change the marker’s theme, we use the poithm (for point of interest theme) parameter and set this to 1 for “pin”. There are many other poi related parameters, so feel free to experiment!
• We can leave all the other parameters the same.

Our API call now looks like this.

        
https://image.maps.ls.hereapi.com/mia/1.6/mapview
?apiKey=YOUR_API_KEY
&ctr=33.8121,-117.91899
&w=1280
&h=720
&f=1
&z=16
&poi=33.81278,-117.91899
&poifc=FF00FF00
&poithm=1

  

Our resulting map image looks like this.

Day 89/100

Here we were asked to create a map of the Bermuda Triangle. We had to draw the triangle on the map, with a transparent blue fill color and a white outline.

• To draw polygons on the map, we need to use a different resource called region, so our new endpoint looks like this: https://image.maps.ls.hereapi.com/mia/1.6/region
• To draw our triangle on the map we use the parameter a (for area) and set it to a list latitude,longitude pairs. These represent the vertices of the triangle: 32.29362,-64.78414,25.77481,-80.19773,18.46634,-66.10474
• To set the fill color, we use the parameter fc (for fill color) and use the same color format as previously: 880000FF
• Similarly, for the line color we use the parameter lc (for line color): FFFFFFFF
• Finally, when drawing regions (or polygons), the map will automatically center and zoom so that everything we’ve drawn on the map is visible. We can therefore remove the ctr and z parameters.

Our API call now looks like this.

        
https://image.maps.ls.hereapi.com/mia/1.6/region
?apiKey=YOUR_API_KEY
&w=1280
&h=720
&f=1
&a=32.29362,-64.78414,25.77481,-80.19773,18.46634,-66.10474
&fc=880000FF
&lc=FFFFFFFF

  

Our resulting map image looks like this.

Day 90/100

Our final task using the Map Image API was to draw a route across the island of Crete, from the town of Kissamos to the town of Sitia. We were also asked to switch the map labels to Greek.

• First, the Map Image API actually has a Routing feature built in, so there is no need for a separate call to the Routing API!
  To use this feature, we once again need to select a different resource, unsurprisingly called routing: https://image.maps.ls.hereapi.com/mia/1.6/routing
• To trigger the route calculation and display, all we need to do is provide two parameters, waypoint0 and waypoint1 and set them to appropriate Geo-coordinates, respectively 35.49393,23.65603 and 35.20657,26.10085.
• Note that the Map Image API will once again auto center and auto zoom for you!
• Finally, to set the map labels to Greek we use the parameter ml (for map label language) and use the three letter MARC code for Greek: gre

Our API call now looks like this.

        
https://image.maps.ls.hereapi.com/mia/1.6/routing
?apiKey=YOUR_API_KEY
&f=1
&w=1280
&h=720
&waypoint0=35.49393,23.65603
&waypoint1=35.20657,26.10085
&ml

  

Our resulting map image now looks like this.

That’s all for our excursion into the Map Image API. Meanwhile, 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. If you want the code snippets of the APIs covered with #100DaysOfCode, head over to the 100daysofcode GitHub repository.
Learn to improve ambiguous location data with this hands-on blog post by our 🥑 Saina P.
See you next week and Happy Coding!