2

I am trying to do something similar to the interactive choropleth map (http://leafletjs.com/examples/choropleth.html) on leaflet's website.

In my case I want to use a click instead of a hover and want to show the results in a side panel (i.e. separate div).

Can someone point me to an example or suggest how I can do this?

UPDATE: Based on Bronco's reply:

That part I understand. It is this snippet that I need to change but I don't know how:

var info = L.control();

info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
this.update();
return this._div;
};

// method that we will use to update the control based on feature properties passed
info.update = function (props) {
this._div.innerHTML = 'US Population Density' + (props ? '' + props.name + '
' + props.density + ' people / mi2'
: 'Hover over a state');
};
info.addTo(map);
  • Can someone tell me who voted down my question and why – ChrisJ Aug 19 '14 at 17:46
3

You just need to change the code a little bit. Look at this function that adds the listeners:

function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature, //you need to change this
        mouseout: resetHighlight,
        click: zoomToFeature
    });
}

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

Where I marked the change, you can change it from mouseover to click and that should fire the highlightFeature function. Of course, you would want to change the current click event zoomToFeature to something different probably.

I didn't look through the code enough to see if the highlightFeature function posts the data into a separate div, but you should be able to adjust the code accordingly to put the information wherever you'd like it to go.

  • That part I understand. It is this snippet that I need to change but I don't know how var info = L.control(); info.onAdd = function (map) { this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info" this.update(); return this._div; }; // method that we will use to update the control based on feature properties passed info.update = function (props) { this._div.innerHTML = '<h4>US Population Density</h4>' + (props ? '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>' : 'Hover over a state'); }; info.addTo(map); – ChrisJ Aug 19 '14 at 17:30
1

Just came across this while looking for clues to a further task. For doing this quickly, follow what Branco suggested : change mouseover: to click: and comment out the mouseout: and click: lines.

The example you're working on is a step further than what you seek: It creates a div in the map itself for use as an info panel. If you're looking for populating another element entirely that you've defined outside of the map, then you actually don't need even the whole info control. You can just as easily do what you need in the onEachFeature >> layer.on >> click part too.

function onEachFeature(feature, layer) {
    layer.on({
        click: function populate() {
            document.getElementById('externaldiv').innerHTML = "BLAH BLAH BLAH " + feature.properties.name + "<br>" + feature.properties.description;
        }
    });
}

In your html body, you just have to make sure your <div id="externaldiv"> or whatever is placed where you want it.

This demo populates an external <pre> when the user clicks on a map feature : http://labs.easyblog.it/maps/leaflet-geojson-list/

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.