CODEWITHSUNDEEP
javascriptdictionaryleafletgeojson
BDD
BDD

Reputation: 715

Choropleth in Leaflet

I'm fairly new to Leaflet (and stackoverflow) and I've been trying to get a choropleth to show up on my map. I have a basic leaflet map that currently shows up, but when I try to get my geoJson to display, I get thrown an error.

var map;
window.onload = initialize();

function initialize(){
    setMap();
};

function setMap() {
    map = L.map('map').setView([45, -90], 7);

    var layer = L.tileLayer('http://{s}.acetate.geoiq.com/tiles/acetate/{z}/{x}/{y}.png',{
    attribution: 'Acetate tileset from GeoIQ',
}).addTo(map);

var myLayer = L.geoJson().addTo(map);
myLayer.addData(counties);
};

"counties" refers to the name of my geoJson file that I created. Do I need to style it in anyway for it to show up?

Any help would be great appreciated.

Thanks!

Upvotes: 1

Views: 1055

Answers (1)

Mr. Concolato
Mr. Concolato

Reputation: 2230

To get it to show up properly yes. Start with:

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'; //You pick your own colors using say CSS Color Wheel etc
}

Followed by:

function style(feature) {
    return {
        fillColor: getColor(feature.properties.density), //Based on the value in your data
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7
    };
}

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

In case you are wondering about additional info on this map. Try this: http://leafletjs.com/examples/choropleth.html

Upvotes: 3

Related Questions