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

Today CloudMade announced the first public release of Leaflet, its new open source JavaScript library for interactive maps on both desktop and mobile browsers (currently in beta).

I’m Leaflet lead developer at CloudMade and I’ll be happy to hear what you think and answer any questions about the library here. :slight_smile:

The official website: http://leaflet.cloudmade.com/
GitHub repository: https://github.com/CloudMade/Leaflet


Had a quik look. The javascript code looked like that of google maps and openlayers.

In the example a not closed polygon is defined. But it is shown as closed. Why? An area is made out of it. The area gets colored. How to make a polygon which is only a track (not closed, not an area)?

I was able to change the urltemplate in such a way that it grabs mapnik/osmarender tiles. Nice.

It’s just a syntactic sugar, because most of the time you want polygons closed and it assumes that. If you don’t want the area colored, just pass {fill: false} as a second argument in the Polygon constructor, or use a Polyline instead.

Thank you for the hint to use a polyline.

In the example changed
polygon = new L.Polygon(polygonPoints);
polygon = new L.Polyline(polygonPoints);
and ready.

If the map is clicked a popup tells the coordinates. I was wondering if doubleclicking the map would let it zoom. But it did’t. Then I removed part of the script with the onclick() function. Now zooming worked as expected.

Pretty weird for me to give up zooming for an on click function. It would be nice that both clicking and double clicking is functioning at the same timel. And in such a way that if the user doubleclicks only the doubleclick event is triggered.

Tried an url template for maps-for-free.com. Dit did not work. I think because the zoomlevel {z} appears twice in the url.

Had a look at your javascript code:

Now I’m not so familiar with javascript so the questions is: how to replace all occurrences of {z} ? (Or does it so already? If so then something else is the culprit).

Having had a look at the .js file I wondered why it is so badly human readable? I would think that if this code is open source that it would be nicely formatted and hence readable.

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. :slight_smile: 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.


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.


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

It would be handled by the same component. :slight_smile:

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.