Problem with UTM map projection on a Google-style cache-server. Undefined {z}, {x}, and {y}.

220 views
Skip to first unread message

Agnar Renolen

unread,
Jan 19, 2014, 7:09:20 AM1/19/14
to leafl...@googlegroups.com
Basically, I'm trying to set up a leaflet with maps from the Norwegian mapping authority in UTM zone 32 projection..

Not Easy.

Started by copying the Aukland example for ProjLeaflet at GitHub.

Made some minor modifications to it, so it would work from my site.

Then started replacing things to use a cahce-service from the Norwegian mapping authority in UTM zone 32.

Some extra information about theier services can be found here. Unfortunately it's written in Norwegian, but the technical information should be possible to get for most of you.

This means:

Change the map projection into:

var utm32 = new L.Proj.CRS('EPSG:32632',
                          '+proj=utm +zone=32 +ellps=wgs84 +datum=WGS84 +units=m +no_defs',
        {
                origin: [-2000000 ,9045984],
                resolutions: [
                    5545984,
                    2772992,
                    1386496,
                    693248,
                    346624,
                    173312,
                    86656,
                    43328,
                    21664,
                    10832,
                    5416,
                    2708,
                    1354,
                    677,
                    338.5,
                    169.25,
                    84.625,
                    42.3125,
                    21.15625,
                    10.578125,
                    5.28906259
               ]
        });

The map declaration is then the same as in the example.

var map = new L.Map('map', {
        crs: utm32,
        continuousWorld: true,
        worldCopyJump: false
});

The finally, I added a layer, chaning the template and the attribution string:

var tileUrl = 'http://opencache.statkart.no/gatekeeper/gk/gk.open_gmaps?layers=topo2graatone&zoom={Z}&x={X}&y={Y}',
        attrib = 'Kartverket',
        tilelayer = new L.TileLayer(tileUrl, {
                maxZoom: 20,
                minZoom: 0,
                continuousWorld: true,
                attribution: attrib,
                crs: utm32
        });

        map.addLayer(tilelayer);


And finally I centered the map on the Starmoen airfield, and added a marker to the same point.

map.setView([60 + (52.688 / 60), 11 + (40.394 / 60)], 10);
L.marker([60 + (52.688 / 60), 11 + (40.394 / 60)]).addTo(map).bindPopup("Starmoen");

The entire page can be seen here.

When I load the page, I now get an error message in my concole.

Request URL:     http://opencache.statkart.no/gatekeeper/gk/gk.open_gmaps?layers=topo2graatone&zoom=undefined&x=undefined&y=undefined
Request Method:     GET
Status Code:     HTTP/1.1 400 Bad Request

So, some where in the process, {z}, {x}, and {y} become undefined.

Can anyone help me out?





Neil

unread,
Jan 21, 2014, 12:25:59 AM1/21/14
to leafl...@googlegroups.com
Just wondering if you definitely have lowercase z,x y in your code, as in the example you posted, the url has uppercase letters?

Olav Kvittem

unread,
Feb 13, 2014, 2:31:10 AM2/13/14
to leafl...@googlegroups.com


How are you doing ?

There are error messages for the map-servers urls in your demo : http://www.emap.no/wpserve/wps2/leaflet2.php

GET http://opencache.statkart.no/gatekeeper/gk/gk.open_gmaps?layers=topo2graatone&zoom=10&x=1&y=-3

400 Bad Request


I copied your resolutions,but used a WMS-service and voila. I can not get to the last zoom-in level with this setup compared to the google-projection.

  working demo/hack at http://orientering.stbik.no/graf/kart/utm-spor.html

the WMS call :

var topo2 = L.tileLayer.wms(
"http://opencache.statkart.no/gatekeeper/gk/gk.open?",
{layers: 'topo2', format: 'image/png',transparent: false,
  attribution: "Topografisk rasterkart2" , crs: mycrs, maxZoom: 23, minZoom: 0 } );

I am overlaying a map image supposed to be in UTM-32 projection, but the fitting is poor.

The problem might be in transforming utm corners to degrees for leaflet,which then takes them back again.

Here is a snippet of the translation code :

var putm32="+proj=utm +zone=32 +ellps=WGS84 +datum=WGS84 +units=m +no_defs";
var pgeo= "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs";
  var sv = new proj4.Point(562969, 7032405);

proj4( putm32, pgeo, sv);


cheers

  Olav

 
Reply all
Reply to author
Forward
0 new messages