JSFiddle - React, Tailwind, and code Playground

by aswinkumar863

HTML

<!DOCTYPE html>
<html>

  <head>
    <script src='//cdn.jsdelivr.net/npm/[email protected]/src/tabletop.min.js'></script>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <script src="//unpkg.com/[email protected]/dist/leaflet.js"></script>
    <style>
      #map-div {
        position: absolute;
        height: 100%;
        width: 100%;
      }

    </style>
  </head>

  <body>
    <div id="map-div"></div>
  </body>

</html>

JavaScript

var map = L.map('map-div').setView([60.1682653, 24.9422078], 5);
var basemap = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'Basemap (c) <a href="http://openstreetmap.org">OpenStreetMap</a>',
  minZoom: 5,
  maxZoom: 18
});
basemap.addTo(map);

function addPoints(data, tabletop) {
  for (var row in data) {
    var marker = L.marker([
      data[row].Latitude,
      data[row].Longitude
    ]).addTo(map);
    marker.bindPopup('<strong>' + data[row].Info + '</strong>');
  }
}

function init() {
  Tabletop.init({
    key: 'https://docs.google.com/spreadsheets/d/11Yg9_3Ttoh-_dvMWB5jhPirkx1Pi3oVxyf7tmm7FG9Q/edit?usp=sharing',
    callback: addPoints,
    simpleSheet: true
  })
}
init()