Leaflet JS World map link to a html table using Javascript

user_7495578 0
Viewed 544

I am using the following example to build a Leaflet Interactive Map using markers. https://asmaloney.com/2014/01/code/creating-an-interactive-map-with-leaflet-and-openstreetmap/ Source code at: https://github.com/asmaloney/Leaflet_Example

I want to build a table next to my map which is linked to the map. For example if you click on a row it will highlight or zoom into that point on the map. If I click on a point on the map it will highlight the row in the table that it is related to.

I have read a few examples and suggesting doing this using DT and Crosswalk but not sure how to apply it to the Javascript in the example above/my own solution:

html:

<div id="map" style="width: 900px; height: 500px; border: 1px solid #AAA;"></div>

Leaf-demo-js:

 var map = L.map( 'map', {
  center: [20.0, 5.0],
  minZoom: 2,
  zoom: 2
})

L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
  subdomains: ['a', 'b', 'c']
}).addTo( map )

var myURL = jQuery( 'script[src$="leaf-demo.js"]' ).attr( 'src' ).replace( 'leaf-demo.js', '' )

var myIcon = L.icon({
  iconUrl: myURL + 'images/pin24.png',
  iconRetinaUrl: myURL + 'images/pin48.png',
  iconSize: [29, 24],
  iconAnchor: [9, 21],
  popupAnchor: [0, -14]
})

for ( var i=0; i < markers.length; ++i )
{
 L.marker( [markers[i].lat, markers[i].lng], {icon: myIcon} )
  .bindPopup( '<a href="' + markers[i].url + '" target="_blank">' + markers[i].name + '</a>' )
  .addTo( map );
}

I have a JSON output which is being used exactly like the example above. How can I include a data table into this code as a seperate object and synchronize it to the leaflet map that is on the page? I found this example: https://matt-dray.github.io/earl18-crosstalk/04_leaflet-flexdash-dt-crosstalk.html#interactives But I think its written in R so not sure how to apply this to my above example.

Extra source of info I read into: https://rstudio.github.io/crosstalk/using.html

I created a html table using JS from JSON data:

 var html = '<table id="table" class="table table-striped">';
html += '<tr>';
var flag = 0;
$.each(markers[0], function (index, value) {
    html += '<th>' + index + '</th>';
});
html += '</tr>';
$.each(markers, function (index, value) {
    html += '<tr>';
    $.each(value, function (index2, value2) {
        html += '<td>' + value2 + '</td>';
    });
    html += '<tr>';
});
html += '</table>';
$('#dvTable').html(html);

How can i link these two together so when i click on a row it shows me the specific longitude/latitude on the leaflet map?

leaflet javascript
0 Answers
Related