Member Avatar for 9tontruck

I am trying to integrate Leaflet (http://leafletjs.com/index.html)

I just copy-and-paste'd the very first demo code but it only displays a gray map..

Here is my code:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
</head>
<body>
<div id='map'>
<script>
var map = $('#map');
map.css('height', 375);
map.css('width', 500);
var map2 = L.map('map').setView([51.505, -0.09], 13);
</script>
</body>
</html>

What is wrong with my code??

  • 1 Contributor
  • 1 Reply
  • 354 Views
  • 42 Minutes Discussion Span
  • Latest Post Latest Post by 9tontruck
Member Avatar for 9tontruck

Solution:

L.tileLayer( 'http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
    attribution: '© <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> 

contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" title="MapQuest" target="_blank">MapQuest</a> <img 

src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',
    subdomains: ['otile1','otile2','otile3','otile4']
}).addTo( map );
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.