Leaflet — a new open source JavaScript library for maps by CloudMade

That happens because of the popup appearance (the second click points at the popup instead of the map and so is not considered a part of double click). Thanks for reporting this problem, I’ll think what I can do with this. Created an issue for it in the issue tracker: https://github.com/CloudMade/Leaflet/issues/48 - you can track the progress there.

Yep, you’re right — I never thought that would happen, but it’s easy to fix. https://github.com/CloudMade/Leaflet/issues/49

Hehe, that’s because you’re looking at the compressed source. The human-readable code is spread across many files in the src directory: https://github.com/CloudMade/Leaflet/tree/master/src

At the moment [[Leaflet]] is printed in red at the OSM wiki …

In the example file is:

 <div id="map" style="width: 600px; height: 400px"></div> 

I changed that to:

<div id="map" style="width: 80%; height: 80%"></div> 

But no map at all then. Percentage not supported?

Further I put a polyline in it (53 points representing the border of China). Now on high zoomlevels this is shown ok. But zooming out the line schrinks to one point (where China still is about mapfilling). What is happening here?

Regarding percentages, take a look at our example: http://leaflet.cloudmade.com/examples/mobile.html (making a percentage-based block is not a Leaflet-specific problem, it’s related to the page’s CSS).

Regarding broken polyline - could you upload the test page somewhere so I could take a look?

If you once zoom out there is only a blue dot left in the right upper corner.

http://greencaps.nl/cloudmade/china.frontier.gpx.leaflet.html

What did I wrong?

This is weird, seems to be a Polyline bug, I’ll take a closer look.

Zoom one time out. Then move the map and see that it reappears.

greencaps, just fixed this bug - thanks for pointing it out!

The example I provided still behaves badly though. But then it uses http://leaflet.cloudmade.com/examples/…/dist/leaflet.js. You did not update that file?

Try reloading the page (maybe it was cached) - your example works for me.

Works fine now. Thanks.

Now have a look at http://greencaps.nl/cloudmade/albania.nl.frontier.gpx.leaflet.html

Does Leaflet provide gui elements to switch both polylines on/off individually?

Not yet, but it will be eventually.

Ok.

Next question: Does Leaflet provide gui elements to switch differentt tile layers?

It would be handled by the same component.

Hey Mourner,

You should replace the current /dist/leaflet.js in the “current stable” version with what’s available at http://leaflet.cloudmade.com/dist/leaflet.js . I spent HOURS trying to debug something that was fixed after reading this thread, and doing just that.

Otherwise, I’ve been pretty happy with Leaflet, and am seriously considering it as our default tool for our new mobile app.

hi mourner…great work on leaflet. How do I use mapnik or opencycle as the basemap? am I limited to cloudmade tiles?

I have tried on local tiles made by mapnik, thank you. Sergey.
(опробовал на локальных тайлах, сделаных мапником, спасибо за работу)

Simply change a format of record in the address of a server on necessary in html-file of a map.
For mapnik :

var cloudmadeUrl = 'http://yourserver_of_mapnik_tiles/{z}/{x}/{y}.png',

Regards, Sergey

Hello,

I try to add Permalink Function to leaflet.
I found this : https://github.com/shramov/Leaflet/commit/3eed58e157685da2b9e4bcc3c2f3e9f1af78e8c6
I upload .js and add map.addControl(new L.Control.Permalink()) but it doesnt work : http://carte.lavilleavelo.org/
When i click “Permalink” the map disappear.

Has anybody an idea to help ? Thank You.

Why not refer to http://www.lavilleavelo.org/carte/lvv2.html and if you took the pagetracker script out there would be even less code to look at. Please keep the problem as simple as possible.

Clicking the Permalink gives:
http://www.lavilleavelo.org/carte/lvv2.html?xzoom=14&xlat=45.76&xlon=4.84132
and the map is empty.

Apparently you have to do something with the zoom, lat and lon parameters. I don’t know what because I did not look to much at the source. Think you omitted a piece of javascript.

I tried with unknown parameter xzoom, xlat, and ylon.
http://www.lavilleavelo.org/carte/lvv2.html?xzoom=14&xlat=45.76&xlon=4.84132
Then the map is shown.

So the script really does something wit known parameters.

What you should do - i think- is take out the line

	map.setView(new L.LatLng(45.76, 4.835), 14).addLayer(cloudmade);

(this line is always the same even if you move the map first to a new position)

and replace that with something like

	map.setView(new L.LatLng(lat, lon), zoom).addLayer(cloudmade);

Did you follow the example?