Leaflet test

by yozz84

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Leaflet example</title>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>

    <script src='http://cdn.jsdelivr.net/npm/tabletop@1.5.2/src/tabletop.min.js'></script>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="app.js"></script>

    <link rel="stylesheet" href="cmo.css" />

  </head>

  <body onload="myFunction()">

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

  </body>

</html>

CSS

body {
  padding: 0;
  margin: 0;
}

html,
body,
#map {
  height: 100%;
  width: 100vw;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
  border: 1px solid #ddd;
  background-color: #ddd;
}

JavaScript

function myFunction() {

  // Add MAP

  var map = L.map('map').setView([54.151, 17.823], 9);
  var basemap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    minZoom: 5,
  	maxZoom: 19
  });
  
  basemap.addTo(map);


  /* ----------------------------------------------- */

  // ZOOMING TO DETECT LOCATION
  // map.locate({setView: true, maxZoom: 16});

  // INFO ABOUT DETECT LOCATION      
  function onLocationFound(e) {
    var radius = e.accuracy;

    L.marker(e.latlng).addTo(map)
      .bindPopup("Jesteśw odległości " + radius + " [m] od tego punktu.").openPopup();

    L.circle(e.latlng, radius).addTo(map);
  }

  map.on('locationfound', onLocationFound);

  // ERROR DETECT LOCATION
  function onLocationError(e) {
    alert(e.message);
  }

  // MOUSE CLICK POSITION
  var popup = L.popup();

  function onMapClick(e) {
    popup
      .setLatLng(e.latlng)
      .setContent("" + e.latlng.toString())
      .openOn(map);
  }

  map.on('click', onMapClick);

  /* ----------------------------------------------- */

  // MARKERS
  //  var pkt = L.marker([54.46791, 17.0288]).addTo(map).bindPopup("CIO");

  /* ----------------------------------------------- */


  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/1BTlWo-T636OCGK-tRMHRP55MQ24OwQ-ZF9yOszyppxk/edit?usp=sharing',
      callback: addPoints,
      simpleSheet: true
    })
  }
  init()
  function init() {
    Tabletop.init({
      key: 'https://docs.google.com/spreadsheets/d/1BTlWo-T636OCGK-tRMHRP55MQ24OwQ-ZF9yOszyppxk/edit?usp=sharing',
      callback: addPoints,
      simpleSheet: true
    })
  }
  init()


  /*...