CODEWITHSUNDEEP
javascriptleaflet
MuxBH
MuxBH

Reputation: 51

How to fly to specific coordinates that are stored in variable? Leaflet.js

I am making some fire location tracking website, and I encounter problem with leaflet.js. I am new to the leaflet, so any help is appreciated!

I have a script that will get id of specific row from table (table is connected to sql), and it works:

var coordinates = [43.855202, 18.417892];//some basic location
var kordinate1 = [43.855202, 18.417892];//same like first
var kordinate;
//code for getting specific id down
const Listen = (doc) => {
    return {
        on: (type, selector, callback) => {
            doc.addEventListener(type, (event)=>{
                if(!event.target.matches(selector)) return;
                callback.call(event.target, event);
            }, false);
        }
    }
};


Listen(document).on('click', '.btn', function (e) {
    idoffire = e.target.id - 100;//ignore this, it works
    coordinates = document.getElementById(idoffire).innerHTML;//read from table space with specific id, also tried changing this to .innerText, .value, but it doesn't work.
    kordinate1 = coordinates.replace(/\s/g, ',');//in table coordinates have only space between them and not comma
    kordinate = "[" + kordinate1 + "]"; //put them like this so map.flyTo can read it, but it doesn't
    console.log(kordinate);//console log of kordinate, and in console, kordinate looks like in picture below
    map.flyTo(kordinate, 18);//PROBLEM HERE!
});

(don't look at e.target.id - 100, it's just how to get my specific id ;) )

Picture of console:

Thank You for your help!

Note: I am not trying to get coordinates from user input, I already have them in database, so this question is not the same like this one.

Again, thank You for your help.

Upvotes: 1

Views: 512

Answers (1)

Oliver
Oliver

Reputation: 1645

You are passing a string to flyTo. This is not accepted by the method. The method accepts (as the first argument) LatLng – you can use the utility method L.latLng(number, number, number?) to create one – see https://github.com/Leaflet/Leaflet/blob/main/src/geo/LatLng.js. As with the nature of JavaScript, you could also pass an array [number, number].

You can convert your stringified-array to an literal like the latter with JSON.parse(kordinate).

...
kordinateArr = JSON.parse(kordinate);
map.flyTo(kordinateArr, 18);

Upvotes: 2

Related Questions