ZoomTo boundingBox in SearchBox.onSelect with HERE maps and place

Question

I am using nokia.places.widget.SearchBox together with nokia.maps.map.Display.

You can use onSelect function of the SearchBox to perform operations when a user picks an items from the results list.

What I need to do is center and zoom the map to the picked place. My problem is concerning zooming because I don't know what level to use.

I noticed that some places have boundingBox (to use with the zoomTo function of the Display component) property but other doesn't. I could use category ('administrative-region', 'street-square', etc.) but it is other than precise and moreover I can't find a list of possible category codes.

Any suggestion?

Answer 1

To get the map to move/zoom to a location when a suggestion is chosen, you will need to implement an onResults handler:

var fromSearchBox = new nokia.places.widgets.SearchBox({
    targetNode: "fromSearchBox",
    template: "fromSearchBox",
    map: map,
    onResults: function (data) {
        // Your code goes here //

    }
});

As you noticed the data field may or may not hold a bounding box. This is because only a few locations cover a defined area, most are point addresses.

For the subset which have a boundingbox you can do the following:

if (data.results.items[0].boundingBox){
    map.zoomTo(data.results.items[0].getBoundingBox());
}

For the remainder the answer will depend upon what you are trying to achieve, but you could try any of the following:

• Move to the location on the map without altering the zoom. (i.e. let the user decide)

  map.set("center", data.results.items[0].position);
  

• Move to the specified bounding box for a point object at the specified location.

  var obj = new nokia.maps.map.StandardMarker(startPoint);
  map.zoomTo(obj.getBoundingBox());   
  

Or alternatively: map.zoomTo(nokia.maps.geo.BoundingBox.coverAll([startPoint]));

• Define a bounding box surrounding the point location and zoom to that instead

  startPoint =data.results.items[0].position;
  bottomLeft = new nokia.maps.geo.Coordinate(startPoint.latitude - 0.1,
           startPoint.longitude + 0.1);
  topRight = new nokia.maps.geo.Coordinate(startPoint.latitude + 0.1,
           startPoint.longitude - 0.1);
  map.zoomTo(nokia.maps.geo.BoundingBox.coverAll([topRight, bottomLeft]));
  

Additionally, Display.zoomTo() can also take an additional parameter, so if you use map.zoomTo(BoundingBox, true) you will also keep the current center for the map on screen, and this may give more context to a user.