Markers showing on wrong place / can not set center point in Leaflet

Question

I use Leaflet markercluster plugin: https://github.com/Leaflet/Leaflet.markercluster

When I change default coordinates of markers to other ones, the markers go wrong place. Example of this problem: https://jsfiddle.net/allu1/nbv17oqc/5/

Below the "geoJsonData" tag the first marker coordinates have been changed, but marker goes totally wrong place.

And also I can not set center point of the map. I have tried all of these, but nothing worked:

    var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        });
var centermap = L.latLng(64.299791, 27.182384);
        var map = L.map('map')
        .setView(centermap, 5)
.addLayer(tiles);

and

var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }),
            latlng = L.latLng(64.299791, 27.182384);

        var map = L.map('map', {center: latlng, zoom: 5.5, 
            fullscreenControl: true,
             }).addLayer(tiles);

and

var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        });

        var map = L.map('map', {
    center: L.latLng(64.299791, 27.182384),
    zoom: 4})
.addLayer(tiles);

I have used Leaflet fullscreen plugin: https://github.com/Leaflet/Leaflet.fullscreen And fullscreen option shows well, but center point of the map does not work. Main thing is that center point would work.

I give more information, if needed. Thanks for answers !

Answer 1

It looks like you are mixing up your Eastings and Northings. I'm not sure where you want your points to end up, but (N64, E27) is in Finland, while (N27, E64) is in Pakistan.

In Leaflet, you specify a coordinate like var latlng = L.latLng(latitude, longitude); (see the docs).

In GeoJSON (see RFC7946 for the specification), it's the other way round. Coordinates are specified in the format "coordinates": [longitude, latitude]. You can see it's this way round from the New Zealand points in your JSFiddle code, because 175° isn't valid as a latitude.

I can't see from your JSFiddle why centring the map isn't working. However, it may be because you are using map.fitBounds(markers.getBounds()); at the end of your script. This will centre the map at the centre of the cluster of markers, over-riding whatever you might originally have set as the centre point. Because your test coordinates are so far apart (one in Pakistan and the others in New Zealand), the code in the JSFiddle sets the centre point to somewhere near Borneo.