0

How do I fillColor map layers individually? I have a function set up to style building polygons based on a value stored in the GeoJSON. Please excuse my ignorance in terminology. I am new to JS and have been at this problem for a solid week, searching the web and watching hours of tutorials, but can't answer this specific question.

My functioning code contains to the following to initialize and create the map:

    function initialize() {

        var mapOptions = {
            zoom: 16,
            center: new google.maps.LatLng(30.284, -97.7325),
                    mapTypeControlOptions: {
                        mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
                    },
            mapTypeId: MY_MAPTYPE_ID
        };

        // build the map
        map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);

        // add colors
        stylePolygons();

        //fetch map layers
        $.getJSON( parkingLot, function( data ) {
            loadGeoJSON(data);
        });


        $.getJSON( building, function( data ) {
            loadGeoJSON(data);
        });
};

Later in the script I use this, which works, to color the buildings

// assign colors based on value property of each feature
    function stylePolygons () {
        map.data.setStyle(function(feature) {
            var value = feature.getProperty('value');
            var color = colors[value];
            return {
                fillColor: color,
                strokeWeight: 0.5,
                fillOpacity: 1
            };
        });
    };

How do I style the rest of my layers individually? An inline code or simple function would be good as the layers are simple and I don't want to append values to their tables.

I gather I should use a local variable, or a function targeting specific objects, and assume there is some simple code such as:

parkingLot.fillColr('red');

or

parkingLot(fillColr: 'red');

or

fillColor(parkingLot){
fillColor: 'red'
};

but i'm shooting in the dark. Any advice is really appreciated.

Thanks,

1 Answer 1

0

it's difficult to say without knowing the schema of your parkinglot geojson, but let's imagine they are something like

{
    "type": "FeatureCollection",

    "features": [{
        "type": "Feature",
        "properties": {
            "color": "red"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-116.9933, 34.0557, 14.3]
        }
    }, {
        "type": "Feature",
        "properties": {
            "color": "blue"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-147.7822, 61.9128, 38.3]
        }
    }, {
        "type": "Feature",
        "properties": {
            "color": "green"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-123.105, 38.6473, 1.1]
        }
    }, {
        "type": "Feature",
        "properties": {
            "color": "purple"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-122.7997, 38.8318, 2.3]
        }
    }]
}

Now, you haven't said where are you storing your polygons. Are you instantiating a new google.maps.Data layer?

If you are, then every feature in your new data layer is a google.maps.Data.Feature object and it can be styles individualy using the getProperty() method and a function much alike your stylePolygons, iterating on each feature and setting its color as the outcome of feature.getProperty('color').

If you're looking to style the whole collection in one step, then you should do just

parkingLot.setStyle({'color':'red' });

but this is assuming parkingLot is an instance of google.maps.Data.

1
  • The layers are stored on my Google Drive as a GeoJSON. I've added a color field with values. It would be nice to be able to change the color values for the layers easily. Thanks, Sep 3, 2014 at 15:51

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.