Jump to content

leaflet map help : tiles are out of sync


justin7410

Recommended Posts

Hey guys,

 

I am trying to add a open source map known as leaflet

 

i am not having so much of an issue adding the map , as i am the map not showing up correctly.

 

I have tried adding this to my webpage i am creating for a client, but through the layout i have, i was not able to correctly match the style.

 

I then went to a demo page to see if i can simply load the map by itself.

 

i added the .js file , css , and rel link in the html.

 

like i said the map shows up correctly, but when it does show up the map is out of sync. 

 

the tiles do not match, and the city is like a puzzle that you must solve. I tried reducing the amount of tiles being shown and the location of the geo points. Still the map in unusable.

 

here is the code: 

<html>
<head>

<title>Demo Page</title>

<style>

#map { 
height: 180px;

 }
</style>

</head>
<link rel="stylesheet" type="text/css" href="style1.css" media="all">
<link rel="stylesheet" type="text/css" href="leaflet.css" media="all">


<script type="text/javascript" src="js/leaflet.js"></script>

<script>
window.onload = function(){

var map = L.map('map').setView([51.505, -0.09], 13);

OR

var map = L.map('map').setView([30.0, 0], 5);

L.tileLayer('http://{s}.tile.cloudmade.com/8c0868ce935a4be48aea8d55f5f04e79/116859/256/{z}/{x}/{y}.png', {
    attribution: 'Select a City you would like to see',
    maxZoom: 15
}).addTo(map);
}
</script>
<body>

<div id="map"></div>

</body>

Any suggestions as to how to get these in order to show the map correctly ?

 

Thanks guys

 

 

Link to comment
https://forums.phpfreaks.com/topic/284841-leaflet-map-help-tiles-are-out-of-sync/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.