Displaying click results in a side panel

I am trying to do something similar to the interactive choropleth map ( 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.density + ' people / mi2' : 'Hover over a state'); }; info.addTo(map);

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.

Just came across this while looking for clues to a further task. For doing this quickly, follow what Branco suggested : changemouseover:toclick:and comment out themouseout:andclick:lines.

The example you're working on is a step further than what you seek: It creates adivin 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 " + + "
" +; } }); }

In your html body, you just have to make sure youror whatever is placed where you want it.

This demo populates an external

when the user clicks on a map feature :


The Southeastern Virginia house districts include Districts: 21, 64, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 89, 90, 91, 92, 93, 94, 95, 96, 99, and 100.

The ODU onAir Chapter curates posts in the Southeastern VA region.

Current Position: State Delegate for District 21 since 2018
Affiliation: Democrat

Kelly Fowler’s life has always been dedicated to the service of others. She’s worked as an elementary school teacher and owns her own small real estate business specializing in military family relocation and advocacy. She has been a resident of Virginia Beach since childhood and cares deeply for her community.

Delegate Fowler supports transparency and will serve with integrity, and will support legislation to ensure others do the same.