Jump to content

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

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.