1

I have this code:

    var SupIncend = L.mapbox.featureLayer().addTo(map);
    var ArbolesAntes = L.mapbox.featureLayer().addTo(map);
    var ArbolesX = L.mapbox.featureLayer().addTo(map);
    var ArbolesDespues = L.mapbox.featureLayer().addTo(map);

    L.control.layers({
        'Superficie incendiada': SupIncend.loadURL('http://www.mapatraslasierra.com.ar/ProyectoForestal/geojson/zona_incendio_unida.geojson')
    },{
        'Superficie arbolada Agosto 2013': ArbolesAntes.loadURL('http://www.mapatraslasierra.com.ar/ProyectoForestal/geojson/ArbolesPerennes_AntesIncendio.geojson'),
        'Superficie arbolada Octubre 2013': ArbolesX.loadURL('http://www.mapatraslasierra.com.ar/ProyectoForestal/geojson/ArbolesPerennes_Sobrevivantes.geojson'),
        'Superficie arbolada Julio 2014': ArbolesDespues.loadURL('http://www.mapatraslasierra.com.ar/ProyectoForestal/geojson/ArbolesPerennes_Rebrote.geojson')
        }).addTo(map);

It is working but I need to give differents colors and opacity to each layers (geojson representing polygons).

3

It's also possible to define all the styles w/i your javascript file using the path.setStyle() method. Something like:

SupIncend.setStyle({
        fillColor: '<color>',
        color: '<color',
        weight: <number>
    });

Note that the style options are leaflet path options, which are not the same as the simple-style-spec options.

The simple-style-spec options are really useful, but it can be nice to keep your data and styles separate. Also, using the setStyle() method makes it possible to dynamically style features, e.g. in response to a button click. Something like:

button.on('click', function(){
    SupIncend.eachLayer(function(cell){
        var p = cell.feature.properties;

        // color
        if(p.field === <value1>){
            cell.setStyle({
                fillColor:<color1>
            });
        }else if(p.field === <value2>){
            cell.setStyle({
                fillColor:<color2>
            });
        }else{
            cell.setStyle({
                fillColor:<color3>
            });
        }
    };
};
1

It is as simple as to add properties field to the Geojson with the simple style specifications

 "properties": {"fill": "#B10001","fill-opacity": 0.2,"stroke": "#B10001",
 "stroke-opacity": 1,"stroke-width": 2,"title": "Ãrea del Incendio"}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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