none
Can't Change Polygon Color RRS feed

  • Question

  • I load a map and use the SpatialDataService to show polygons representing counties of states. However, I can't change the default green color. Relevant code below loads map and polygon correctly but does not change to a red color. Any suggestions?

             var map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: #### });
     Microsoft.Maps.loadModule('Microsoft.Maps.SpatialDataService', function () {
                      //Use the GeoData API manager to get the boundary
                      Microsoft.Maps.SpatialDataService.GeoDataAPIManager.getBoundary(map.getCenter(), geoDataRequestOptions, map, function (data) {
                          if (data.results && data.results.length > 0) {
                              map.entities.push(data.results[0].Polygons);
                          }
                      });
                  });
       map.Polygons.setOptions({ fillColor: 'red' });

    Thursday, July 21, 2016 12:44 AM

Answers

  • Don't mess around with looping through the entities on the map. Modify the color before adding the polygons to the map. Here is a modified version of the code you provided that does what you need, I also added in the request options since this is missing in your code sample:

    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: #### });
    
    var geoDataRequestOptions = {
    	entityType: 'AdminDivision1',
    	getAllPolygons: true
    };
    
    Microsoft.Maps.loadModule('Microsoft.Maps.SpatialDataService', function () {
       
       Microsoft.Maps.SpatialDataService.GeoDataAPIManager.getBoundary(map.getCenter(), geoDataRequestOptions, map, function (data) {
    	   if (data.results && data.results.length > 0) {
    			for (var i = 0, len = data.results[0].Polygons.length; i < len; i++) {
    				data.results[0].Polygons[i].setOptions({ fillColor: 'red' });
    			}
    	   
    			map.entities.push(data.results[0].Polygons);
    	   }
       });
    });
    Also, you can use rgba colors if you want to add transparency. For example, here is red that is 50% transparent: 'rgba(255, 0, 0, 0.5)'


    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Ricky_Brundritt Friday, July 22, 2016 8:02 PM
    • Marked as answer by dcmap2 Friday, July 22, 2016 9:34 PM
    Friday, July 22, 2016 8:02 PM

All replies

  • 'Polygons' is not a property of the Map class. To change the colour of your polygons you need to loop through your array of polygons either before you add it to the map or afterwards. The following code does it afterwards.
    for (var i = 0, len = map.entities.getLength(); i < len; i++) {
        map.entities.get(i).setOptions({ fillColor: 'red' });
    }


    • Proposed as answer by gwenci Thursday, July 21, 2016 10:03 AM
    Thursday, July 21, 2016 10:02 AM
  • To add to gwenci's response, here is how you would change the color before adding the polygons to the map:

    for (var i = 0, len = data.results[0].Polygons.length; i < len; i++) {
        data.results[0].Polygons[i].setOptions({ fillColor: 'red' });
    }
    map.entities.push(data.results[0].Polygons);


    [Blog] [twitter] [LinkedIn]

    Thursday, July 21, 2016 3:26 PM
  • Thanks for the suggestion gwenci.  I tried the code but it will not retrieve the number of entities in the map.  Below are a few lines of code I added just after loading the polygons to the map.  I tried 3 different ways to get i and then have it show in a textbox ('txtiMax3') I have on the web page: it will not return anything.

    1 of the 3 lines below is tried with 2 lines // commented out.

      var i = map.entities.getLength();
                  var i = map.entities.results[0].Polygons.length();
            var i = map.entities.results[0].Polygons.getLength();
     

    The i result should be visible in the textbox, but is not.
                 document.getElementById('txtiMax3').value = i;

    Is this a v7 vs v8 problem?  I'm using v8, fresh new code.

    Friday, July 22, 2016 2:27 AM
  • Thanks for the suggestion Ricky.  I tried the code (and gwenci's) but it will not retrieve the number of entities in the map.  Below are a few lines of code I added just after loading the polygons to the map.  I tried 3 different ways to get i and then have it show in a textbox ('txtiMax3') I have on the web page: it will not return anything.

    1 of the 3 lines below is tried with 2 lines // commented out.

      var i = map.entities.getLength();
                  var i = map.entities.results[0].Polygons.length();
            var i = map.entities.results[0].Polygons.getLength();

    The i result should be visible in the textbox, but is not.
                 document.getElementById('txtiMax3').value = i;

    Is this a v7 vs v8 problem?  I'm using v8, fresh new code.

    Friday, July 22, 2016 2:30 AM
  • Do I take it that the polygon colour isn't changing either?

    The first of your suggestions to display the entity count should work fine. The other two will not work as 'results' does not exist under the entities property - you're confusing the results array that's being returned by the Spatial Data Service.

    If you post your current code then it will be easier to see what's going wrong.

    Friday, July 22, 2016 9:54 AM
  • Don't mess around with looping through the entities on the map. Modify the color before adding the polygons to the map. Here is a modified version of the code you provided that does what you need, I also added in the request options since this is missing in your code sample:

    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: #### });
    
    var geoDataRequestOptions = {
    	entityType: 'AdminDivision1',
    	getAllPolygons: true
    };
    
    Microsoft.Maps.loadModule('Microsoft.Maps.SpatialDataService', function () {
       
       Microsoft.Maps.SpatialDataService.GeoDataAPIManager.getBoundary(map.getCenter(), geoDataRequestOptions, map, function (data) {
    	   if (data.results && data.results.length > 0) {
    			for (var i = 0, len = data.results[0].Polygons.length; i < len; i++) {
    				data.results[0].Polygons[i].setOptions({ fillColor: 'red' });
    			}
    	   
    			map.entities.push(data.results[0].Polygons);
    	   }
       });
    });
    Also, you can use rgba colors if you want to add transparency. For example, here is red that is 50% transparent: 'rgba(255, 0, 0, 0.5)'


    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Ricky_Brundritt Friday, July 22, 2016 8:02 PM
    • Marked as answer by dcmap2 Friday, July 22, 2016 9:34 PM
    Friday, July 22, 2016 8:02 PM
  • Ricky, thank you so much--it worked.

    Now what I'm really trying to do is create thematic maps (i.e. show population by county for Arizona or any other state).  I would show 3 different colors (green for low population, yellow for medium population and red for high population counties).  That is why I use a lot of sql queries for the data.

    Would I use the switch statement to pass parameters to javascript or is there a thematic option for v8 of maps (like there is for polygons)?

    Thanks again, David

    Friday, July 22, 2016 9:39 PM
  • Thank you for the information.  For some reason the var i = map.entities.getLength();
    does not get the number of polygons (which in my example is 5 counties) even though they are drawn on the map in green by county.  As you can see from my response to Ricky, my real goal is to create a thematic map where color represents population size.  So I need to be able to select a polygon color that depends on data I retrieve from a sql query of population size by county for a state.

    Any thoughts on the best way to do this?

    David

    Friday, July 22, 2016 9:46 PM
  • Before the for loop add in you switch statement to determine which color to use. All the polygons that are in the loop will be for a single boundary as the callback function will be called once for each boundary requested. Note that you can get your original query location in the callback function by using data.location.

    [Blog] [twitter] [LinkedIn]

    Friday, July 22, 2016 11:36 PM