CODEWITHSUNDEEP
javascripthere-apiheremaps
user68465
user68465

Reputation: 3

Here Maps - Prevent map from showing grey area outside of map

So, I can't find anywhere on the Here Maps API an option to prevent the map from showing the grey area that is rendered outside of the map.

You can visualize the grey area by dragging, or by zooming out.

This makes the map feels kinda amateur, to say the least.

So far I've looked on the entire documentation, but couldn't find anything, also I've tried to block it by using the restrict panning behavior map.getViewModel().addEventListener('sync', ..., but it didn't work as expected.

Upvotes: 0

Views: 371

Answers (1)

user3505695
user3505695

Reputation:

The grey area seen during fast zoom out is because it takes time to access the tile image over internet connection from server. However, the grey image seen at the maximum zoom-out can managed by restricting the map view at specific rectangular geographic area defined by the geographic coordinates of its top-left and bottom-right corners.

Method Name:

new H.geo.Rect (top, left, bottom, right)

API Reference: https://developer.here.com/documentation/maps/3.1.26.0/api_reference/H.geo.Rect.html

Code Snippet:

function restrictMap(map){

  var bounds = new H.geo.Rect(37.829, -122.426, 37.824, -122.42);
  var prevGoodBounds;

  map.getViewModel().addEventListener('sync', function(e) {
            var curZoom = e.newValue.zoom,
                newZoom = false,
                mapViewBounds = map.getViewModel().getLookAtData().bounds.getBoundingBox(),
                topMap = mapViewBounds.getTop(),
                bottomMap = mapViewBounds.getBottom();
        //console.log("prevGoodBounds:", prevGoodBounds);
                
            
            //if(curZoom > this.opt.maxZoom || curZoom < this.opt.minZoom){
                //console.log("sync curZoom > this.opt.maxZoom || curZoom < this.opt.minZoom", this.opt);
                //if(curZoom > this.opt.maxZoom) newZoom = this.opt.maxZoom;
                //if(curZoom < this.opt.minZoom) newZoom = this.opt.minZoom;

                //var runLater = function(newZoom){
                    //map.setZoom(newZoom);
                //};
                //runLater.delay(50, this, newZoom);
            //}
            
            
            if(topMap > 85 || bottomMap < -85) {
                //console.log("sync topMap > 83 || bottomMap < -83", topMap, bottomMap, this.opt);
                
                if(prevGoodBounds){
                    //var runLater = function(){
                        map.setZoom(prevGoodBounds.zoom);
                        map.setCenter(prevGoodBounds.center);
                    //};
                    //runLater.delay(0, this);
                }
            }
            
            if(topMap <= 85 && bottomMap >= -85) {
                prevGoodBounds = {center: map.getCenter(), zoom: map.getZoom()};
            }
        });

  //Debug code to visualize where your restriction is
  /*map.addObject(new H.map.Rect(bounds, {
    style: {
        fillColor: 'rgba(55, 85, 170, 0.1)',
        strokeColor: 'rgba(55, 85, 170, 0.6)',
        lineWidth: 8
      }
    }
  ));*/
}

Complete Example: https://jsfiddle.net/raj0665/8oLyfent/

Upvotes: 0

Related Questions