https://github.com/diogok/leaflet.table

Leaflet data table
https://github.com/diogok/leaflet.table

Last synced: about 2 months ago
JSON representation

Leaflet data table

• Host: GitHub
• URL: https://github.com/diogok/leaflet.table
• Owner: diogok
• Created: 2015-07-10T01:06:01.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-10-09T19:14:13.000Z (about 9 years ago)
• Last Synced: 2023-04-13T15:11:47.415Z (over 1 year ago)
• Language: JavaScript
• Size: 152 KB
• Stars: 9
• Watchers: 3
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Leaflet table 

To display a data table inside a leaflet map.

[Check it out](http://diogok.github.io/leaflet.table).

## Usage

Use the leaflet CSS and JS

    

    

Include the CSS and JS:

    

    

    

    

Create the map:

    


    

      var map = L.map('map').setView([0, 0], 1);

      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

    

Use the table control:

    var table_control = new L.control.Table({}).addTo(map);

    var fields = ['id','name'];

    var layer = new L.layerGroup();

    for(var i=0;i<50;i++) { // random points

      var marker = new L.marker([10.0+(i/100), 20.0+(i/100)]);

      marker.properties={id:i,name:"John "+i};

      marker.bindPopup('ID: '+marker.properties.id);

    }

    var data= layer.getFeatures().map(function(feat){return feat.properties});

    var table = new Supagrid({

      fields: fields,

      id_field: fields[0],

      data: data

    });

    layer.eachLayer(function(layer){

      layer.on('popupopen',function(){

        table.focus(layer.properties.id);

      });

    });

    table_control.addTable(table.supagrid,'my_table','My Table')

Take a look at the index.html for other usage.

## License

MIT