JSFiddle - React, Tailwind, and code Playground

by chheplo

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet-src.js"></script>
<div id="map" ></div>
<table id="properties"></table>

CSS

#map {
    height: 400px;
}

table{
    border:1px solid black;
    border-collapse: collapse;
}

td{
    border:1px solid black;
}

JavaScript

var lat = 46.566414;
var lng =  2.4609375;
var zoom =  5;

var map = new L.Map('map');

var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data &copy; OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 3, maxZoom: 8, attribution: osmAttrib});
map.addLayer(osm);

map.setView(new L.LatLng(lat, lng), zoom);

L.geoJson(getData(), {
    onEachFeature: handleFeature
    }
).addTo(map);



function handleFeature(feature, layer) {
   layer.bindPopup("<table><tr><td>Cell 1</td><td>Cell 2</td><td>Cell 2</td><td>Cell 2</td></tr><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 1</td><td>Cell 2</td></tr></table>");
}

function getData() { 
return {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
        "properties": { "id": "1", "where": "north" },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              1.3842773437499998,
              50.91688748924508
            ],
            [
              0.24169921874999997,
              50.10648772767335
            ],
            [
              0.263671875,
              49.1242192485914
            ],
            [
              1.9775390625,
              48.850258199721495
            ],
            [
              3.80126953125,
              48.73445537176822
            ],
            [
              4.7021484375,
              49.396675075193976
            ],
            [
              5.3173828125,
              50.17689812200105
            ],
            [
              3.6254882812499996,
              50.94458443495011
            ],
            [
              1.3842773437499998,
              50.91688748924508
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
        "properties": {  "id": "2", "where": "west" },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -2.83447265625,
  ...