How to project pixel coordinates in leaflet?

Question

I am trying to create a map based on an image which is 16384x16384 px, but I would also like to add markers at specific locations using pixel coordinates of this given image.

I created a tile layer, a map element and set maximum boundaries, so that I can't scroll out of the image, using this code:

var map = L.map('map', {
    maxZoom: 6,
    minZoom: 2,
    crs: L.CRS.Simple
}).setView([0, 0], 2);
var southWest = map.unproject([0,16384], map.getMaxZoom());
var northEast = map.unproject([16384,0], map.getMaxZoom());
map.setMaxBounds(new L.LatLngBounds(southWest, northEast));

L.tileLayer('tiles/{z}/{x}/{y}.png', {
    tms: true
}).addTo(map);

The points i'd like to add to the map are stored in an external file as GeoJSON, and they look like this http://www.de-egge.de/maps/terranigma/terraPoints.js

I load them using this snippet of code:

var terraPoints = new L.geoJson(points, {
    onEachFeature: function (feature, layer) {
        layer.bindPopup(
            "<b>Ort: </b>" + feature.properties["points[, 1]"] 
        );
    }
});

map.addLayer(terraPoints);

But of course, they don't show up, because the reference systems don't match. The points use pixel coordinates, but my map uses geographic coordinates.

Is there a way to "unproject" the points while loading them?

Answer 1

You need to convert the coordinates in your JSON object to also be 'unprojected', just like your base image. First loop through the points object and change the coordinates in each point from [x,y] to whatever is returned by map.unproject([x,y]). Then add the JSON object to the map.

Answer 2

You need to convert your points (in pixel coordinates) to geographic coords. Use the method containerPointToLatLng().