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?

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

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?

Thank you for your answer.

When i Click one time on the “Permalink” link, after i zoomed, here is the URL show for example in URL bar : http://www.lavilleavelo.org/carte/lvv2.html?zoom=17&lat=45.760154&lon=4.84909

And the map is not show.

But when i click a second time on “Permalink” link, the URL change : http://www.lavilleavelo.org/carte/lvv2.html?zoom=17&lat=45.760154&lon=-175.15091 and the Permalink is good. In fact, only the longitude change, and i dont understand at all. The right value for longitude is in the first URL but this is the second value (-175.15091 for example) which works.

When i add this line : map.setView(new L.LatLng(lat, lon), zoom).addLayer(cloudmade);
it doent work.

If this was OpenLayers you could use something like:

var lon = 16831422;
var lat=-4012608;
var zoom = 3;

        if(!map.getCenter())
            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);

You could try the GetCenter() (a lot of functions in leaflet seem to have the same names).

Hi,
do I understand correctly that leaflet is somethink like openlayers ?

Can it do more than OL or what are the advantages ?

Chris