4

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?

3

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().

  • 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); } – DeEgge Nov 4 '13 at 17:58
  • 1
    containerPointToLatLng refers to screen coordinate relative to the map container div, so it won't help here. – Marc Pfister Apr 7 '14 at 18:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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