3

I am working on a google map with a slider that draws some geoJson country data whenever a slider is moved. The function that I wrote to draw each country is called 'colorCountry'

$("#dateRangeSlider").on("valuesChanged", function(e, data) {
...
    for (i = 0; i < CountriesArray.items.length; i++) { 
        alpha = CountriesArray.items[i].downloads / maximum;
        colourCountry(CountriesArray.items[i].country,alpha);
    }
...
}

...

colourCountry = function (countryCode, alpha) {

    var url = 'data/' + countryCode.toString() + '.geo.json';

    var feature = map.data.loadGeoJson(url);

    map.data.setStyle(function (feature) {
        return/** @type {google.maps.Data.StyleOptions} */ 
        {
            fillOpacity: alpha              
        };
    });
}

The result of the above is that all countries are coloured with an opacity equal to the final alpha value passed. (What I want is to replace alpha in the above styling function with something like feature.getProperty('opacity') Is it possible to:

(i) add a property to each feature that contains the alpha information when drawing them to use in the style function later? This article does something like this though they parse XML into JSON and I already have geoJSON (https://developers.google.com/maps/articles/combining-data)

(ii) draw each feature with the opacity defined inside the loadGeoJson() function?

or finally, should I just use openLayers/leaflet? I've been searching for a way to colour geoJSON features individually based on a parameter for a while and can't find the functionality. Thanks for any help!

6
  • I tried map.data.feature.setProperty with no luck. Sep 30, 2014 at 14:57
  • Why/how did you try map.data.feature.setProperty? Did you look at the example in the documentation? Change Appearance Dynamically
    – geocodezip
    Sep 30, 2014 at 16:09
  • Saw that example - I want to set the styles when the geojson is added and not onclick... Ideally I would like to write: map.data.setStyle(function (feature) { if feature.getProperty(id) == country { return/** @type {google.maps.Data.StyleOptions} */ { fillOpacity: alpha }; } }); Sep 30, 2014 at 16:39
  • Not understand I follow your statement: jsfiddle.net/y1pd8Lt4/3
    – geocodezip
    Sep 30, 2014 at 17:43
  • the difference between this google example and my situation is that in the example, the geoJSON file, each feature has a property called "color". In my code, the value of alpha is not present in the geoJSON files. Further, I will likely re-draw the same geoJSON features with different alpha values, so including it there is not possible. Oct 1, 2014 at 0:18

4 Answers 4

2

You will need to do the same they did for the XML but since you have geojson then I would do this

Bring the geojson file in an object then pass its data to this function

function drawPolys(data) {
for (var i =0; i < data.features.length; i++) {
// collect polygon points  
var polyPath = [];
    for (var p =0; p < data.features[i].geometry.coordinates[0].length; p++) {
    polyPath.push(new google.maps.LatLng(data.features[i].geometry.coordinates[0][p][1],data.features[i].geometry.coordinates[0][p][0]));
    }
    var opacity = data.features[i].properties.opacity;
    var poly = new google.maps.Polygon({
        paths: polyPath,
        strokeColor: "white",
        strokeOpacity: 0.7,
        strokeWeight: 1,
        fillOpacity: opacity,
        map: map
        });
    }
}

This will bring geojson on the map using ploygon class with an opacity set by the properties opacity or you can call a method to decide your opacity based on a value in each poly.

3
  • this is great - how does it change in the case of multi-polygons? Oct 3, 2014 at 15:38
  • This does loop all polygons already in data right, to solve the slider issue and fill in each poly when slider move then I would suggest to get polys fillOpacity equals 0 as a start and then color it "valueschanged" triggered the listener in the listener. Oct 3, 2014 at 17:44
  • To let listener choose the right polyon to highlight, u can add a property to the poly in order to identify it since its an MVCobject. make a function that returns a key from the values already used in your slider in order to use it with its poly during the creation loop. Oct 3, 2014 at 17:47
1

Partial Answer -- I have made some progress working with the setStyle() function. This still only colours one country (the last one) properly. I think each time the function runs it returns the correct style for the matching country, but returns default styles for the rest of the features.

map.data.setStyle( function(feature){
var featurecountry = feature.getProperty('name');
    if (featurecountry == countryCode) {

                        return/** @type {google.maps.Data.StyleOptions} */ {
                           fillOpacity: alpha               }; 

                        }

                        });
1

Ali's answer was very helpful. For anyone still working on this, I had to adapt the code slightly to also consider the case of 'MultiPolygon' data. The following accomplishes that.

function(data) {

    if (data.features[0].geometry.type =='Polygon'){
            for (var i =0; i < data.features.length; i++) {
            // collect polygon points  
            var polyPath = [];
                for (var p =0; p < data.features[i].geometry.coordinates[0].length; p++) {
                polyPath.push(new google.maps.LatLng(data.features[i].geometry.coordinates[0][p][1],data.features[i].geometry.coordinates[0][p][0]));
                }
                var opacity = alpha;
                var poly = new google.maps.Polygon({
                    paths: polyPath,
                    fillColor: "red",
                    strokeColor: "white",
                    strokeOpacity: 0.7,
                    strokeWeight: 2,
                    fillOpacity: opacity,
                    map: map
                    });
                }
       }

     if (data.features[0].geometry.type =='MultiPolygon'){
            for (var i =0; i < data.features.length; i++) {
            // collect polygon points  

            for (j=0;j<data.features[i].geometry.coordinates.length;j++) {
            var polyPath = [];

                for (var p =0; p < data.features[i].geometry.coordinates[j][0].length; p++) {
                polyPath.push(new google.maps.LatLng(data.features[i].geometry.coordinates[j][0][p][1],data.features[i].geometry.coordinates[j][0][p][0]));
                }
                var opacity = 4*alpha;
                var poly = new google.maps.Polygon({
                    paths: polyPath,
                    fillColor: "red",
                    strokeColor: "white",
                    strokeOpacity: 0.7,
                    strokeWeight: 2,
                    fillOpacity: opacity,
                    map: map
                    });
             }
        }


     }

    }

It may be interesting to try to overload gmaps' loadGeoJson() function to also accept parameters like opacity, or color. I am not sure if that is possible, but would be interested in anyone who comes up with an answer in that style.

0

In case your application is not tied up with google maps, you can try geojson2svg. Check the color coded example, you can change (add and remove) class for countries svg path elements when values are changed on slider move.

Disclaimer: I am author of geojson2svg.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.