You are not logged in.

Announcement

*** NOTICE: forum.openstreetmap.org is being retired. Please request a category for your community in the new ones as soon as possible using this process, which will allow you to propose your community moderators.
Please create new topics on the new site at community.openstreetmap.org. We expect the migration of data will take a few weeks, you can follow its progress here.***

#1 2011-05-13 15:11:11

Mourner
Member
From: Kiev, Ukraine
Registered: 2008-04-03
Posts: 69
Website

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. smile

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

Thanks!

Last edited by Mourner (2011-05-13 15:14:28)


Leaflet — A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by CloudMade

Offline

#2 2011-05-14 09:34:08

greencaps
Member
Registered: 2009-10-05
Posts: 423

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

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.

Offline

#3 2011-05-14 16:09:14

Mourner
Member
From: Kiev, Ukraine
Registered: 2008-04-03
Posts: 69
Website

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

greencaps wrote:

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)?

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.


Leaflet — A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by CloudMade

Offline

#4 2011-05-16 08:56:24

greencaps
Member
Registered: 2009-10-05
Posts: 423

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

Thank you for the hint to use a polyline.

In the example changed
    polygon = new L.Polygon(polygonPoints);
to
    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.

Offline

#5 2011-05-16 09:44:34

greencaps
Member
Registered: 2009-10-05
Posts: 423

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

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:
http://leaflet.cloudmade.com/dist/leaflet.js

......]).replace("{z}",b).replace("{x}",a.x).replace("{y}",a.y)},_.....

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.

Offline

#6 2011-05-16 12:44:37

Mourner
Member
From: Kiev, Ukraine
Registered: 2008-04-03
Posts: 69
Website

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

greencaps wrote:

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.

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.

greencaps wrote:

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

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

greencaps wrote:

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.

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


Leaflet — A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by CloudMade

Offline

#7 2011-05-16 16:56:48

stephan75
Member
Registered: 2008-05-28
Posts: 2,918

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

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

Offline

#8 2011-05-17 13:26:24

greencaps
Member
Registered: 2009-10-05
Posts: 423

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

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?

Offline

#9 2011-05-17 13:43:50

Mourner
Member
From: Kiev, Ukraine
Registered: 2008-04-03
Posts: 69
Website

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

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?


Leaflet — A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by CloudMade

Offline

#10 2011-05-17 14:08:30

greencaps
Member
Registered: 2009-10-05
Posts: 423

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

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

http://greencaps.nl/cloudmade/china.fro … aflet.html

What did I wrong?

Offline

#11 2011-05-17 14:12:41

Mourner
Member
From: Kiev, Ukraine
Registered: 2008-04-03
Posts: 69
Website

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

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


Leaflet — A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by CloudMade

Offline

#12 2011-05-17 15:46:54

greencaps
Member
Registered: 2009-10-05
Posts: 423

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

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

Offline

#13 2011-05-19 13:52:43

Mourner
Member
From: Kiev, Ukraine
Registered: 2008-04-03
Posts: 69
Website

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

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


Leaflet — A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by CloudMade

Offline

#14 2011-05-19 14:27:24

greencaps
Member
Registered: 2009-10-05
Posts: 423

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

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

Last edited by greencaps (2011-05-19 14:29:09)

Offline

#15 2011-05-20 09:21:02

Mourner
Member
From: Kiev, Ukraine
Registered: 2008-04-03
Posts: 69
Website

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

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


Leaflet — A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by CloudMade

Offline

#16 2011-05-20 09:51:38

greencaps
Member
Registered: 2009-10-05
Posts: 423

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

Works fine now. Thanks.

Now have a look at http://greencaps.nl/cloudmade/albania.n … aflet.html

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

Offline

#17 2011-05-20 09:54:29

Mourner
Member
From: Kiev, Ukraine
Registered: 2008-04-03
Posts: 69
Website

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

Not yet, but it will be eventually.


Leaflet — A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by CloudMade

Offline

#18 2011-05-20 10:12:36

greencaps
Member
Registered: 2009-10-05
Posts: 423

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

Ok.

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

Offline

#19 2011-05-20 10:55:50

Mourner
Member
From: Kiev, Ukraine
Registered: 2008-04-03
Posts: 69
Website

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

It would be handled by the same component. smile


Leaflet — A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by CloudMade

Offline

#20 2011-07-01 03:16:07

Michael Belt
Member
Registered: 2011-07-01
Posts: 1

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

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.

Offline

#21 2011-07-19 09:14:12

smackcode
Member
Registered: 2011-07-19
Posts: 1

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

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

Offline

#22 2011-07-22 08:17:21

s-s-s
Member
From: Russia, Moscow
Registered: 2009-09-10
Posts: 373
Website

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

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

Last edited by s-s-s (2011-07-22 08:22:10)


С уважением, Сергей.

Offline

#23 2011-07-22 08:32:44

s-s-s
Member
From: Russia, Moscow
Registered: 2009-09-10
Posts: 373
Website

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

smackcode wrote:

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

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

Last edited by s-s-s (2011-07-22 08:33:51)


С уважением, Сергей.

Offline

#24 2011-12-12 10:49:01

Nitram
Member
Registered: 2011-05-03
Posts: 5

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

Hello,

I try to add Permalink Function to leaflet.
I found this : https://github.com/shramov/Leaflet/comm … f1af78e8c6
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.

Offline

#25 2011-12-14 16:35:19

greencaps
Member
Registered: 2009-10-05
Posts: 423

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

Nitram wrote:

http://carte.lavilleavelo.org/
When i click "Permalink" the map disappear.

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. … on=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. … on=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?

Last edited by greencaps (2011-12-14 16:36:17)

Offline

Board footer

Powered by FluxBB