[GIS] How to display information in a div outside the map

javascriptleaflet

I tried a bit around and created a simple map with two polygons(most of the code I got from the Interactive Choropleth Map Tutorial).
I added a "L.control()" to show information about the polygons in a div.
Contrary to the tutorial I would like to have this div outside the map.

To get a clue what I mean please look here: http://jsfiddle.net/Tbr9p/

Best Answer

Here you go. You just call the update method on the outside div, not the L.control element. I used JQuery for easier selection of the div.

Related Solutions

[GIS] Displaying click results in a side panel

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.

[GIS] Trigger a layers ‘on hover’ effect through another layer in Leaflet

A more "leaflet" way to do it now is to set the interactive flag to be false. This will allow all events to be passed to other layers and ignored on this layer.

L.geoJson(geoJsonData, {
    onEachFeature: aFunction,
    interactive: false
}).addTo(group);

Best Answer

Related Solutions

[GIS] Displaying click results in a side panel

[GIS] Trigger a layers ‘on hover’ effect through another layer in Leaflet

Related Question