Leaflet with EPSG4326 Tile Layer

[Dr. YSG]

I have successfully been using Klokan Petr Pridal's MapTiler (maptiler.org) to take GeoTiff files and create TMS tile pyramids for Leaflet (option #1 which projects to EPSG3857, also called Google Maps compatible Spherical Mercator).

But my source data is in EPSG 4326, so I am now using option #3 for WGS84 Plate Caree (Geodetic). I believe it is using gdal2tiles under the hood.

The issue I have is that I do not see any of these overlay tiles in Leaflet. Even though am being careful to make sure the map is created with the right CRS.

I have tried tuning TMS: false, and TMS: true. No luck.

One thing I see is that the numbering even for the top levels z/x/y is weird: (e.g.  0/1/2.png )

Also, all the specs for TMS tile numbering that I have seen are only good for EPSG3857 (spherical Mercator) which I believe has bounds of _85/-85 lat. But EPSG4326 would go to 90. So what gives in the numbering?


var map;
var krakowLayer = null;
var mapOptions = {
    center: new L.LatLng(0, 0),
    zoom: 1,
    tms: true,
    crs: L.CRS.EPSG4326
};
    map = new L.Map('map', mapOptions);
    krakowLayer = new L.TileLayer("./tiles4326/{z}/{x}/{y}.png", { tms: false, opacity: 0.8 });

function addLayers() {
    var baseLayers = {
        "CloudMade": cloudLayer,
    };
    var overlays = {
        "Krakow Layer": krakowLayer
    };
    L.control.layers(baseLayers, overlays).addTo(map);
}

[Pat Keller]

Where you ever able to get this working? I'm trying to do something similar with EPSG 2263. I've used option 4 in maptiler to create image based tiles that I georeferenced using the options in maptiler.

I can get the tiles to show without changing the CRS in Leaflet, but when I try to change the CRS nothing shows for me. I'm using Proj4Leaflet (https://github.com/kartena/Proj4Leaflet) to try and change the crs to epsg 2263.

[Dr. YSG]

yes, it works for me (with the new V0.8 2x1 root tile stuff: https://github.com/Leaflet/Leaflet/pull/2247 (he did a major refactoring in 0.8) see issue: https://github.com/Leaflet/Leaflet/issues/1207

See my demo at: http://codepen.io/DrYSG/pen/ICzro

But note, I am using the native EPSG 4326, but the folks doing the proj4leaflet seem to be very happy with the update also, so it should work for you.

[Pat Keller]

Thanks for responding so quickly. I was finally able to get my tiles to load using a combination of the code at your demo and the examples over at the proj4leaflet page. I'm still unable to use coordinates from 2263 to create markers and other leaflet objects though. Any ideas on that?

Here's the code I have:

    <script>

        var resolutions = [127.99999999999942, 63.99999999999971, 31.99999999999985, 15.99999999999993, 7.99999999999996, 3.99999999999998, 1.99999999999999, 1.00000000000000, 0.50000000000000, 0.25000000000000];

        var crs = new L.Proj.CRS('EPSG:2263',

          '+proj=lcc +lat_1=41.03333333333333 +lat_2=40.66666666666666 +lat_0=40.16666666666666 +lon_0=-74 ' +

          '+x_0=300000.0000000001 +y_0=0 +ellps=GRS80 +datum=NAD83 +to_meter=0.3048006096012192 +no_defs ',

            {

                origin: [1030000, 182500],                              // origin of aerial, top left

                resolutions: resolutions

            }

        );

        var map = new L.Map('map', {

            crs: crs,

            continuousWorld: true,

            worldCopyJump: false,

            // setting max bounds makes it so you can not pan outside of the area you want to show

            //maxBounds: new L.LatLngBounds([40.62685618771871, -73.83524318683413], [40.57719281838508, -73.74309481282909])

        });

        var tileUrl = 'Tiles/{z}/{x}/{y}.png',

tile = new L.TileLayer(tileUrl, {

   maxZoom: 9,

   minZoom: 2,

   tms: true,

   noWrap: true

});

        map.setView(new L.LatLng(40.60224305197215, -73.7956045205781), 2).addLayer(tile);

        // this isnt working correctly, creates a marker at the edge of the image 

        // that moves as zoom level changes

        var latlng11 = L.latLng(1035546.12, 176231.75);

        var mark11 = L.marker(latlng11).addTo(map);

        // markers on the corners

        var latlng1 = L.latLng(40.62685618771871, -73.83524318683413);

        var mark1 = L.marker(latlng1).addTo(map);

        var latlng2 = L.latLng(40.626686909535934, -73.74296193767485);

        var mark2 = L.marker(latlng2).addTo(map);

        var latlng3 = L.latLng(40.57719281838508, -73.74309481282909);

        var mark3 = L.marker(latlng3).addTo(map);

        var latlng4 = L.latLng(40.577405934958406, -73.83530757095961);

        var mark4 = L.marker(latlng4).addTo(map);

        map.on('click', function (e) {

            console.log("map click: " + e.latlng.lat + "," + e.latlng.lng);

        });

    </script>

[Dr. YSG]

No, I don;t know what is wrong with your code, But I use the Leaflet Draw plug-in, and I can create polylines, markers, etc, and get the RSS out of it, so I don't know your issues would be, since I don't do things that way