17

I'm stumped, and quite a lot of searching has turned up nothing helpful.

I'm on the first step of what will ultimately be a map with three raster layers and three layers of markers (with controls to toggle between the rasters and their associated data, with popups/tooltips for the data), but I can't get the Tilemill tiles to render properly. (I created the rasters in QGIS, ran them through GDAL to colorize and re-project them, and then put them into TileMill.)

To wit: enter image description here That's in Chrome. This is Safari: enter image description here

And here's the code, which looks quite innocuous to me (I've commented out everything but the tiles at this point, so that's all I've included):

<html>
<head>
 <title> - Leaflet demo</title>
 <script type='text/javascript' src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
 <style type='text/css'>
 html, body{ width:100%; height: 100%, margin:0; padding:0; }
 #map{ width:700px; height:600px }
 img {margin:0px;padding:0px};
</style>
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
//one base layer on map
var map = new L.Map( "map" ).setView([38.173,-94.384],5);
L.tileLayer('http://a.tiles.mapbox.com/v3/mtgmediagroup.beef2013/{z}/{x}/{y}.png', {
 attribution: 'Dani Friedland/MTG Media Group',
 maxZoom: 9
}).addTo(map);
</script>
</head>
<body>
<b>Map</b>
<div id="map"></div>
</body>
</html>

Has anyone ever encountered this problem? If so, how did you overcome it? I'm eager to start into the rest of the process of making this map (by which of course I mean "uncovering the next problem to solve").

Edited to add: I tried re-exporting a new MBTiles file, uploading it as new data, and creating a new Mapbox project from that data. No dice. Next step in isolating the issue would be to set up the MBTiles file on a server, skipping Mapbox, but that seems more likely to create problems than to fix them.

Improve this question

3 Answers 3

Reset to default
32

You forgot to add Leaflet CSS:

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />

Also there are numerous typos in your code: for example, in html, body{} stylesheet line. Do check for them before deploying to production.

Improve this answer
1
  • 1
    You're absolutely right, and that took care of it! I just knew it was something stupid like that. Thank you so much for your help!!
    – Dani
    Jun 6, 2014 at 14:45
0

I know this question is old and has already been solved, but I have another solution for anyone who is presently having this same issue. If you've loaded in your CSS and it is still not displaying the tiles correctly, you need to include tms: true in your TileLayer options.

An example of my code:

var mymap = L.map('mapid').setView([0, 0], 3)

L.tileLayer('http://localhost/map/MapData/sat/{z}/{x}/{y}.png', {
        minZoom: 1, maxZoom: 7,
        tms: true,
        attribution: 'World Map'
    }).addTo(mymap);

Hope this helps someone else with the same issue.

Improve this answer
0

When we do not add css/Style for map, it does not render map as it should looks like.

In react just import leaflet and leaflet.css.

> import L from "leaflet"; 
> import 'leaflet/dist/leaflet.css';

Before writing any code for the map, you need to do the following preparation steps on your page:

Include Leaflet CSS file in the head section of your document:

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>

Include Leaflet JavaScript file after Leaflet’s CSS:

<!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>

Put a div element with a certain id where you want your map to be:

 <div id="mapid"></div>

Make sure the map container has a defined height, for example by setting it in CSS:

#mapid { height: 180px; }
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.