Geek Answers Handbook

Interactive map of Choropleth with leaflet issue

edit ** Here is a link to my site . The Leaflet test on one page is what still works, and the Leaflet test page 2 when I try to add interactive features.

It's hard for me to draw an interactive map to be interactive. I am mapping a number of wells in Pennsylvania counties. I followed the instructions on

http://leafletjs.com/examples/choropleth.html#interactive-choropleth-map

I managed to find / create a GeoJSON file with all the necessary information, and I can display it with colors that match the attribute data, but when I try to make it interactive (the boundaries of the county’s borders are highlighted when it hangs), it works.

    var map = L.map('map').setView([40.6473, -99.84375], 5);

        L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
                '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                'Imagery © <a href="http://mapbox.com">Mapbox</a>',
            id: 'examples.map-i875mjb7'
        }).addTo(map);

// start GeoJson

function base (feature,layer){

    layer.bindPopup("<h1 class='info'> Hi, I'm a box</h1><p class='info2'>" + feature.properties.count_ + "</p>  <p class='info2'>" + feature.properties.name + "</p>");    
};



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 {
        fillColor: getColor(feature.properties.count_),
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7
    };
}

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

//good up to here

, , .

    function highlightFeature(e) {
    var layer = e.target;

    layer.setStyle({
        weight: 5,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
    });

    if (!L.Browser.ie && !L.Browser.opera) {
        layer.bringToFront();
    }
}

function resetHighlight(e) {
    geojson.resetStyle(e.target);
}

, , - . , e.target. . !

+4
1

. , geojson.

var geojson;
// ... our listeners
geojson = L.geoJson(...);

geojson var

var geojson;
// ... our listeners
geojson = L.geoJson(wcc);

( , , !)

+1

More articles:


All Articles