I have displayed a layer of points using Leaflet. Here is my script embedded in the HTML code :

var map = L.map('map', {
                center: [45.7604276, 4.8335709],
                zoom: 13
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
              attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
$.getJSON("personnes.geojson", function(data_point){

Outside the box of the map, I got some sections that I would like to connect with my map e.g. show selected entities in a certain color on my Leaflet after an onclick action in my box.

Any ideas?

  • 1
    You can do something like: document.getElementById("elementID").innerHTML = properties.GeoJSONField; where "GeoJSONField" refers to the key in your GeoJSON layer whose values you want to add to the <div id="elementID"></div>
    – b_jugger
    Commented Feb 24, 2020 at 16:10
  • What have you tried so far and what does not work? Commented Feb 24, 2020 at 16:31
  • Question leaves more or less everything to guessing: What are these "some sections"? What are "selected entities"? What is "my box"? Please include all relevant code into body of the question.
    – TomazicM
    Commented Feb 24, 2020 at 17:06
  • 1
    I have some demos from a class up at gistechsolutions.com/leaflet/DEMO the Panel Map or Panel Select Map may help. Commented Feb 24, 2020 at 18:25

1 Answer 1


I got more or less what I was looking for. This command document.getElementById("test").innerHTML is very useful for my purpose.

Not the answer you're looking for? Browse other questions tagged or ask your own question.