5

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?

2 Answers 2

5

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.

2

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

2
  • 1
    Thanks for your feedback, but I am confused about how to use the method. If I loop through every coordinate I still can't add any marker. Or do I have to call the method with onEachFeature? for (i in terraPoints) { latLng = containerPointToLatLng(i.geometry.coordinates); L.marker(latLng).addTo(map); }
    – chringel21
    Nov 4, 2013 at 17:58
  • 2
    containerPointToLatLng refers to screen coordinate relative to the map container div, so it won't help here. Apr 7, 2014 at 18:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.