CODEWITHSUNDEEP
javascriptjqueryleaflet
rob.m
rob.m

Reputation: 10571

How to generate a fill colours range for polygons on a map?

I am trying to assign a fill colour for each polygons on a map, I am following leaflet example for choropleth, the example generates the colours based on a propriety on the geojson file, e.g. "density":94.65

// get color depending on population density value
function getColor(d) {
    return d > 1000 ? '#800026' :
            d > 500  ? '#BD0026' :
            d > 200  ? '#E31A1C' :
            d > 100  ? '#FC4E2A' :
            d > 50   ? '#FD8D3C' :
            d > 20   ? '#FEB24C' :
            d > 10   ? '#FED976' :
                        '#FFEDA0';
}

function style(feature) {
    return {
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7,
        fillColor: getColor(feature.properties.density)
    };
}

I am not using that propriety, what I would like to do is to generate the fill colours probably using each "properties":{"name": or "id":

This is what I am trying:

function style(feature) {
    jQuery("svg path").each(function(){
        myColour = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6)
    });
    return {
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7,
        fillColor: myColour
    };
}

var geojson = L.geoJson(statesData, {
    style: style,
}).addTo(map);

Uncaught ReferenceError: myColour is not defined

Upvotes: 0

Views: 1010

Answers (1)

rob.m
rob.m

Reputation: 10571

Resolved it:

function style(feature) {
    return {
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7,
        fillColor: '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6)
    };
}

Upvotes: 1

Related Questions