1

I'm noob to javascript... I tried to find a solution to a problem on a similar thread, but I don't know why it doesn't work in my case. I can't comment there so I add new question.

All my code is here: Link to Fiddle

When I changed code with example, the map stopped showing. Where have I done the mistake? Thank You for helping me.

Main part of js is like this:

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()
}
KMYozz
  • 33
  • 3

1 Answers1

0

The code in JSFiddle doesn't work because the default JSFiddle javascript Load Type setting is On Load. This means that it will load everything that you have in JavaScript tab without you needing to load anything manually.

But your whole thing initializes with onload callback to myFunction() and it will never fire with that setting enabled. You have two possible solutions:

  • if you don't want to change anything in Fiddle configuration, than you need to remove onload from the body tag and change myFunction() into self-invoking function:

    (function () { **body of the function** }())

  • or just edit the Fiddle settings (change Load type to No wrap - Bottom of ): enter image description here

Community
  • 1
  • 1
Dima Mamchur
  • 1,104
  • 9
  • 8
  • Ok. Thank You. For now I changed Fiddle settings but this is only a temporary solution, becouse I have it all in local hard drive and I fire this in default Chrome browser. But after change settings it still didn't show points from gsheet file/link. I can't force the code to show any view points in any kind of method to show the markers from the outside file (from csv, json or gsheet). I don't know what I'm doing wrong. – KMYozz Sep 15 '19 at 13:08
  • I've made couple of changes to your Fiddle: https://jsfiddle.net/a21yb4uq/ The main thing is that you need to load every outside script over ```https``` - you were loading Tabletop script file over http and it can't be initialized in that way. – Dima Mamchur Sep 15 '19 at 16:42
  • Thank you, I did not pay attention to this small thing. After recent changes on many pages, I need to look more closely at the inserted links. Thank you again for your help and your time. – KMYozz Sep 15 '19 at 18:31