Where can I acquire skills to implement online maps?

Question

I'm interested in creating maps and map "mashups" online, and have been pointed to Leaflet as a great tool to help me do what I want.

Leaflet's documentation is clear and easy to follow, but it demands pre-existing knowledge of how to use tools like CloudMade. For instance, Leaflet documentation starts by telling the user something like:

// initialize the map on the "map" div with a given center and zoom
var map = L.map('map', {
    center: [51.505, -0.09],
    zoom: 13
});

Which I sort of understand, but I don't know how to get the map, point to the map, create the map, etc. There seems to be a huge "how to make maps work on Web sites" chunk of knowledge that's required before diving into Leaflet.

CloudMade also throws you in at the very deep end.

Where do I pick up the Maps 101 knowledge I need to make sense of how all this works?

Answer 1

I assume you were following the Quick-Start Tutorial on Leaflet's website? You can look at the source of the example for the full break down on how it works internally. Leaflet doesn't use any Cloudmade specific stuff other than itself, so you shouldn't have to refer to the Cloudmade tool.

If you're looking for some basic Javascript tutorials (the language that Leaflet uses), there are some mentioned on Language Books/Tutorials for Popular Languages.

Answer 2

Leaflet by itself doesn't include any maps (as opposed to Bing Maps and Google Maps for example). All the examples they display with Cloudmade are exactly that, just examples.

For instance, instead of using Cloudmade you could use OpenStreetMap (OSM) tiles directly, like this:

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

Or use tiles from other sources, or even your own tiles.

I'm guessing that what threw you off on the quick-start was the reference to Cloudmade. Don't mind that. Instead of going through the fuss of getting a Cloudmade key just create the layer as I've shown above. Everything will work the same and the only thing that will differ is the imagery on the background.