OSM: Using tiles to build a website

General talk
1

Hi,

I have already used mapnik to create a tile directory, and i don’t know how to use these tiles to create a map in my site.

This is the code which i used to create a map from tile.cloudmade.com. And now i want to change it to my local.


function initialize() {				
			
			var base_layer = new L.tileLayer(
			    'http://{s}.tile.cloudmade.com/63250e2ef1c24cc18761c70e76253f75/997/256/{z}/{x}/{y}.png',{
			        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
			        maxZoom: 16
			    }
			);

			map = new L.Map('map', {
			    layers: [base_layer],
			    center: new L.LatLng(48.621867, 2.443407),
			    zoom: 16,
				zoomControl: true
			});

			var markerUserPosition = L.marker([48.621867, 2.443407]);
			markerUserPosition.bindPopup("Vous etes ici").openPopup();
			markerUserPosition.addTo(map);
			
			lc = L.control.locate().addTo(map);									
		}

Can you give me some suggestions? Thanks!

2

I tried to create a file “index.html” follow a tutorial:


<html>
<head>
    <link rel="stylesheet" 
          href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" /> 
</head>
<body>
    <div id="map" style="width: 1000px; height: 1000px"></div>
 
    <script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>

    <script>
        var map = L.map('map').setView([0, 0], 2);
        L.tileLayer('tiles/{z}/{x}/{y}.jpg', {
            minZoom: 0,
            maxZoom: 2,
            tms: true
        }).addTo(map);
    </script>
</body>
</html>

With tiles is a folder where have a tree of tiles such as:
tiles/0/0/0.png, tiles/1/0/0.png, tiles/2/0/0.png
But it doesn’t run. Please help me! Thanks!

3

Not sure , but looks like the problem may be in this line

L.tileLayer(‘tiles/{z}/{x}/{y}.jpg’, {

You say:-

“With tiles is a folder where have a tree of tiles such as:
tiles/0/0/0.png, tiles/1/0/0.png, tiles/2/0/0.png”

but your code is looking for .jpg