Click here to Skip to main content
15,070,613 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have the following code with an object called Map defined in a namespace RHCA. Map's prototype is assigned an object containing the following methods.

JavaScript
RHCA.Map = function(centerCoords){
    this.geojson = null;
    this.map = null;
    this.initZoom = 0;
    this.mapColors = [];
    this.mapCenter = centerCoords.slice(0);
    this.geoJsonProperty = null;
    this.dataFieldsMap;
};

RHCA.Map.prototype = {
	setColorRange :function(population){
    	        console.log(this);
		
		var color; // set color according to population value
		... 		

		return  color
	},

	setStyle : function(feature){
    	    console.log(this);
    	    var population =  feature.properties.pop10;
    
    	    var countyColor = this.setColorRange(population);
    	    return {
        	fillColor: countyColor,
        	weight: 0.5,
        	opacity: 1,
        	color: '#4e4e4e',
        	fillOpacity: 0.9,
        	fillRule: 'evenodd',
        	className:'svg-custom'
    	    };
	},

	
	render : function (){
    	     console.log(this);
    	     var self  = this;
    	     var southWest = L.latLng(20.0, -114.0);
    	     var northEast = L.latLng(40.0,-88.0);
    	     var boundRect = L.latLngBounds(southWest, northEast);
    
    	     self.initZoom = self.setZoomLevel();
    
    	     // map object with options
    	     self.map = L.map('map',{
        	center: self.mapCenter,
        	zoom: self.initZoom,
        	maxZoom: self.initZoom+2,
        	minZoom: self.initZoom-0.25,
        	// maxBounds: boundRect,
        	zoomControl:true,
        	reUseTiles:true,
        	unloadInvisibleTiles:true
    	    });
    
    	   // create geojson layer and add it to map   
    	   self.geojson = L.geoJson(countyBoundaries,{
        	style: self.setStyle,
        	onEachFeature: self.onEachFeature
    	   });
    
    	   self.geojson.addTo(self.map);
	}
};


Then i create the Map object like this.
JavaScript
var map = new RHCA.Map([-31,99]);


I then call the render() function on the map object which will then call setStyle(). setStyle() then calls setColor().

I got the following error from the browser when i called setColorRange() in setStyle() function.

JavaScript
Uncaught TypeError: this.setColorRange is not a function.


When i print 'this' using console.log() in render() it points to the RHCA.Map object,
but when i print 'this' in the setStyle() function it points to the Window Object. I need 'this' to point to the RHCA.Map object instead.

All help is appreciated. Thanks you.

What I have tried:

I tried changing this.setColorRange in the setStyle() function to RHCA.Map.setColorRange but it produces the same error as before.
Posted
Updated 31-Jan-17 6:36am
v3

1 solution

OK. I do not know what L is for an object.
But my guess is that this is the code where you're going wrong.

// create geojson layer and add it to map
self.geojson = L.geoJson(countyBoundaries,{
     style: self.setStyle,
     onEachFeature: self.onEachFeature
});

You are not running self.setStyle but you are passing it on the another object.
That won't work. When the L.getJson function tries to evaluate style it apparently is ok with the fact that this is function and tries to call it. But the context is lost.
If you were to make a closure around it. It would work.
// create geojson layer and add it to map
self.geojson = L.geoJson(countyBoundaries,{
     style: function() {
         retun self.setStyle();
     },
     onEachFeature: self.onEachFeature
});
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900