none
Cannot read property 'set_style' of undefined RRS feed

  • Question

  • I am trying to make a zoom based Topography Overlay on Bing maps, I want to load different images for every zoom level and remove them when zoom changes.

    I am storing every TopographicOverlay in an array called UO for every zoom level, the default level is UO[0], everything was going as expected until I moved the function to insert the objects in the layer (called insertOverlay) outside the main function (called startm).

    The error message is the following:

    • Uncaught TypeError: Cannot read property 'set_style' of undefined

    You can see the code in this jsfiddle: https://jsfiddle.net/stramin/uL4bq2pt/

    The same code here:

    <script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?callback=startm" async defer></script>
    <script>
    var img;
    var overlays=[];
    var LastOverlayZoom=-1;
    
    function startm(){
    	var mapOptions = {
    		credentials: "FAKECREDENTIAL",
    		customizeOverlays: true,
    		mapTypeId: Microsoft.Maps.MapTypeId.aerial
    	};
    	radar = new Microsoft.Maps.Map(document.getElementById("map_canvas"),mapOptions);
    	
    	var viewRect = Microsoft.Maps.LocationRect.fromCorners(new Microsoft.Maps.Location(-23.40367,-68.82516), new Microsoft.Maps.Location(-23.41825,-68.80178));
    
    	radar.setView({bounds: viewRect});
    	
    	//
    	TopographicOverlay.prototype = new Microsoft.Maps.CustomOverlay();
    	
    	showOverlay(0);
    }
    
    var UO=[];
    function showOverlay(zoom){
    	if(zoom >= 0){
    		if(LastOverlayZoom!=0){
    			if(LastOverlayZoom>0){
    				hideOverlay(UO[LastOverlayZoom]);UO[LastOverlayZoom]=[];
    			}
    			if(LastOverlayZoom!=-1 && 0==0){
    				LastOverlayZoom=0;return false;
    			}
    			console.log('Showing zoom 0');
    			LastOverlayZoom=0;
    			UO[0]=[];
    			UO[0].push(new TopographicOverlay(Microsoft.Maps.LocationRect.fromCorners(new Microsoft.Maps.Location(-23.4,-68.84), new Microsoft.Maps.Location(-23.39,-68.83)), 'https://bingmapsisdk.blob.core.windows.net/isdksamples/topographicMap.gif',radar));
    			UO[0].push(new TopographicOverlay(Microsoft.Maps.LocationRect.fromCorners(new Microsoft.Maps.Location(-23.4,-68.83), new Microsoft.Maps.Location(-23.39,-68.82)), 'https://bingmapsisdk.blob.core.windows.net/isdksamples/topographicMap.gif',radar));
    			UO[0].push(new TopographicOverlay(Microsoft.Maps.LocationRect.fromCorners(new Microsoft.Maps.Location(-23.4,-68.82), new Microsoft.Maps.Location(-23.39,-68.81)), 'https://bingmapsisdk.blob.core.windows.net/isdksamples/topographicMap.gif',radar));
    			UO[0].push(new TopographicOverlay(Microsoft.Maps.LocationRect.fromCorners(new Microsoft.Maps.Location(-23.4,-68.81), new Microsoft.Maps.Location(-23.39,-68.8)), 'https://bingmapsisdk.blob.core.windows.net/isdksamples/topographicMap.gif',radar));
    			UO[0].push(new TopographicOverlay(Microsoft.Maps.LocationRect.fromCorners(new Microsoft.Maps.Location(-23.41,-68.84), new Microsoft.Maps.Location(-23.4,-68.83)), 'https://bingmapsisdk.blob.core.windows.net/isdksamples/topographicMap.gif',radar));
    			UO[0].push(new TopographicOverlay(Microsoft.Maps.LocationRect.fromCorners(new Microsoft.Maps.Location(-23.41,-68.83), new Microsoft.Maps.Location(-23.4,-68.82)), 'https://bingmapsisdk.blob.core.windows.net/isdksamples/topographicMap.gif',radar));
    			UO[0].push(new TopographicOverlay(Microsoft.Maps.LocationRect.fromCorners(new Microsoft.Maps.Location(-23.41,-68.82), new Microsoft.Maps.Location(-23.4,-68.81)), 'https://bingmapsisdk.blob.core.windows.net/isdksamples/topographicMap.gif',radar));
    			UO[0].push(new TopographicOverlay(Microsoft.Maps.LocationRect.fromCorners(new Microsoft.Maps.Location(-23.41,-68.81), new Microsoft.Maps.Location(-23.4,-68.8)), 'https://bingmapsisdk.blob.core.windows.net/isdksamples/topographicMap.gif',radar));
    			insertOverlay(UO[0]);
    		}
    	}
    }// Define custom constructor for the overlay
    function TopographicOverlay(bounds, image, map) {
        this.bounds = bounds;
        this.image = image;
    	this.map = map;
    	this.img = document.createElement('img');
    }
    // implement the onAdd method to set up DOM element, and use setHtmlElement bind it with the overlay
    TopographicOverlay.prototype.onAdd = function () {
        this.img = document.createElement('img');
        this.img.src = this.image;
        this.img.className = 'topographicOverlay';
        this.img.style.width = '100%';
        this.img.style.height = '100%';
        this.img.style.zIndex = '0';
        this.img.style.position = 'absolute';
        this.img.style.pointerEvents = 'none';
        this.setHtmlElement(this.img);
    };
    // implement the onLoad method to perform custom operations of rendering the DOM element
    TopographicOverlay.prototype.onLoad = function () {
        this.repositionOverlay();
    	//repositionOverlay(this);
        //Microsoft.Maps.Events.addHandler(this.map, 'viewchange', repositionOverlay(this));
    };
    
    TopographicOverlay.prototype.repositionOverlay = function () {
    	var topLeft = this.map.tryLocationToPixel(this.bounds.getNorthwest(), Microsoft.Maps.PixelReference.control);
    	var bottomRight = this.map.tryLocationToPixel(this.bounds.getSoutheast(), Microsoft.Maps.PixelReference.control);
    	if (topLeft && bottomRight) {
    		this.img.style.left = topLeft.x + 'px';
    		this.img.style.top = topLeft.y + 'px';
    		this.img.style.width = (bottomRight.x - topLeft.x) + 'px';
    		this.img.style.height = (bottomRight.y - topLeft.y) + 'px';
            this.img.style.zIndex = 0;
    	}
    };
    function insertOverlay(UOl){ // muestra mapa sobrepuesto, UO es la lista de imagenes de un zoom específico
    	UOl.forEach(function(UOimagery){
    		console.log(UOimagery.image);
    		radar.layers.insert(UOimagery);
    	});
    }
    </script>
    <div id="map_canvas" style="width:100%; height:100%; min-height:500px;"></div>

    How to fix this error?

    Thank you in advance.

    Tuesday, September 22, 2020 1:30 PM

All replies

  • Hi Stramin,

    Take a look at https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk/imageoverlay and see if you get the same error.

    Sincerely,

    IoTGirl

    Tuesday, September 22, 2020 5:42 PM
    Owner
  • Hi Stramin,

    Take a look at https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk/imageoverlay and see if you get the same error.

    Sincerely,

    IoTGirl

    My code was pretty similar to that example at the begining, the main difference is I moved map.layers.insert outside the main function (it is loadMapScenario in your example), I need do it this way because I want to create and remove the map images on zoom in/out.

    in other words, my map is not static, it changes dynamically.

    Is there any way to achieve this using bing maps?


    • Edited by stramin Tuesday, September 22, 2020 6:19 PM
    Tuesday, September 22, 2020 6:14 PM
  • Hi Stramin,

    I am not sure I understand the limitation you are imposing.  Have you tried a few of the other samples in the iSDK? Specifically around events and such?

    Sincerely,

    IoTGirl

    Tuesday, September 22, 2020 8:39 PM
    Owner
  • Hi Stramin,

    I am not sure I understand the limitation you are imposing.  Have you tried a few of the other samples in the iSDK? Specifically around events and such?

    Yes, all of them, for many years, I think since Ricky Brundritt was actively working on Bing Maps.

    I usually develop using Google maps and Bing maps APIs, so my users can choose which of them to work with.

    I think you can understand the problem if you test the code I posted or go tho the jsfiddle link, you will see the error on the console.

    I think there is something failing with the TopographicOverlay object, this is not the first time I get a "Cannot read property 'some_property' of undefined" error, it usually happens outside the main function, it is like some methods and properties can not be accessed from outside.

    On Google maps API, methods and properties of USGSOverlay object (TopographicOverlay for google maps) can be accessed from anywhere, so I don´t have this issue there.

    Thank you for your time :)

    Wednesday, September 23, 2020 3:04 PM