Solutions Day 26-30 : #100DaysOfCode

We are back with another week of #100DaysOfCode with HERE. If you have no idea what I'm talking about, take a look at this blog post which will tell you everything about #100DaysOfCode. In this blog post, I will cover solutions for days 26 through 30. If you have missed the solutions for days 0-25, you can read them in my previous blogs posts or in the video format.
Let's begin!

Day 26/100

With Day 26, we start exploring the rest of the endpoints of the Geocoding and Search API. While geocode gives you the generic address-to-geocoordinates solution, discover is more specific and gives you results based on your current position. This can be applied when you reach a new place and want to know 'what are some of the cool things to do here'. Here, we are searching for 'markets' while specifying our current position.

        
    // Get an instance of the geocoding service:
  var geocoder = platform.getSearchService();

  function geocodeAndSearch(){

      let geocoderParams = {
          q : 'markets', // free form query
          at : '52.49105,13.37917' // position in the format latitude, longitude
      }

      function onResult(result){
          console.log(result);
      }

      geocoder.discover(geocoderParams,onResult,alert);

  }

  geocodeAndSearch();

  

Day 27/100

The results from Day 26 give you a variety of results with places which can be identified as markets. One way to filter these results is by specifying a search radius. This can be done by using the in parameter of the discover endpoint. Here we specify our search field as a circle and specify the radius in meters.

        
    // Get an instance of the geocoding service:
    var geocoder = platform.getSearchService();
  
    function geocodeAndSearch(){
  
        let geocoderParams = {
            q : 'markets',
            in : 'circle:52.49105,13.37917;r=1000'
        }
  
        function onResult(result){
            console.log(result);
        }
  
        geocoder.discover(geocoderParams,onResult,alert);
  
    }
  
    geocodeAndSearch();

  

Day 28/100

If you expand the results from the query on Day 27, you will see that the results come with an important paramter along with the adddress and position of the places searched for. This paramater is the 'distance'. This is the distance of these places in meters, from the center of your search. The distance value can help the user choose the 'market' they want to go to.

        
    {…} ​
        items: (8) […]
            0: {…}
    ​​​            access: (1) […]
                    0: Object { lat: 52.49006, lng: 13.38577 } ​​​​
                    length: 1
                address: Object { label: "Guuht, Kreuzbergstraße 1, 10965 Berlin, Deutschland", countryCode: "DEU", countryName: "Deutschland", … }    ​
                categories: Array(4) [ {…}, {…}, {…}, … ]   ​​​
                contacts: Array [ {…} ]    ​​​
                distance: 456    ​​​
                foodTypes: Array [ {…} ]   ​​​
                id: "here:pds:place:276u33d8-9e827cde6ea64aefb6936cfc02c66296"   ​​​
                openingHours: Array [ {…} ]   ​​​
                position: Object { lat: 52.49019, lng: 13.38576 }  ​​​
                resultType: "place"  ​​​
                title: "Guuht"

  

For Day 28, we use this distance and display it on an Info-Bubble. We use the position of the places as the position of the info-bubble.

        
    function onResult(result){
        //   console.log(result);
        result.items.forEach(item => {
            ui.addBubble(new H.ui.InfoBubble( item.position, {
                content: 'distance: '+item.distance+' m'
            }));
        });

      }

  

Day 29/100

The endpoint Autosuggest can be used like an auto-complete for places and addresses. This can be done by providing an input field to the user where they can start typing their search query. The responses of the geocoder-autosuggest can be displayed as options for the selection by the user. For Day 29, we have taken the incomplete query 'star' in a bid to find the nearest starbucks. We query the geocoding and search API with the autosuggest endpoint. Note that the incomplete query q needs to be used with the parameters at or in. You can read more about it in the autosuggest section of the Geocoding and Search API.

        
    // Get an instance of the geocoding service:
    var geocoder = platform.getSearchService();
  
    function geocodeAndSearch(){
  
        let geocoderParams = {
            q : 'star',
            at : '52.491059,13.37917'
        }
  
        function onResult(result){
          console.log(result);
        }
  
        geocoder.autosuggest(geocoderParams,onResult,alert);
  
    }
  
    geocodeAndSearch();

  

Day 30/100

On Day 27, we restricted our search to a circle with a radius. Guess what? You can also restrict searches in a box. For Day 30, we are modifying the autosuggest search query from Day 29 and adding the parameter in:bbox to restrict our search to a bounding box. When you wish to draw a polygon, you need to define the length of each side. For a bounding box in terms if location, you will need the position of a point (a geocoordinate) on all the sides of the box. We start with the left side and go anti-clock wise. Now as the left side is the vertical side, we use the vertical coordinate (longitude) of any point of this box. For the horizontal sides of this box, we use the horizontal coordinates (latitude). This this box can be defined with bbox:Left-longitude, bottom-latitude, right-longitude, top-latitude. If you are still confused, check out the documentation on this one. The autosuggest search will now be restricted to the bounding box we define with these coordinates.

        
// Get an instance of the geocoding service:
var geocoder = platform.getSearchService();

function geocodeAndSearch(){

    let geocoderParams = {
        q : 'star',
        in : 'bbox:13.3817,52.50474,13.40432,52.51647'
    }

    function onResult(result){
      console.log(result);
    }

    geocoder.autosuggest(geocoderParams,onResult,alert);

}

geocodeAndSearch();

  

This week we covered the discover and autosuggest endpoints of the Geocoding and Search on #100DaysOfCode. We will explore the other endpoints of Geocoding and Search as well as other APIs in the days to come. Hope you enjoyed this week of #100DaysOfCode with HERE. 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.
While you're at it, why don't you take a look at the blog post announcing the release of our new HERE SDK for Flutter.
Want to kmnow how to use the OAuth authentication method? Take a look at the step-by-step tutorial.

Happy coding!