문제

I created a map with tilemill and then exctracted the tiles with MBUtil. I'm able to show the tiles properly using Leaflet but i don't succeed using mapbox.js. I'm attaching the code , what I'm doing wrong??

Any help will be appreciated!

<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet Quick Start Guide Example</title>
    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />-->
    <link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />

  </head>
  <body>
    <div id="map" style="width: 1000px; height: 1000px"></div>

    <!-- <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script> -->
    <script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
    <script>

      //var tilesUrl = 'http://eccoilmoro.github.io/Mappa-Redditi-IRPEF-2012-/tiles-mappa-   redditi-2012/{z}/{x}/{y}.png',
      //tilesLayer = new L.TileLayer(tilesUrl);
      //map = new L.Map('map');
      //map.addLayer(tilesLayer);
      //map.setView(new L.LatLng(39.5,-5.0), 6);

      var map = L.mapbox.map('map');
      tilesLayer = new L.mapbox.TileLayer({ "tilejson": "2.0.0",
        "tiles": [ "http://eccoilmoro.github.io/Mappa-Redditi-IRPEF-2012-/tiles-mappa-redditi- 2012/{z}/{x}/{y}.png" ] ,
        "attribution": "franco"
      });
      tilesLayer.addTo(map);
      map.setView(new L.LatLng(39.5,-5.0), 6);

    </script>
  </body>
</html>
도움이 되었습니까?

해결책

You can try this syntax

<!DOCTYPE html>
<html>
 <head>
  <title>Leaflet Quick Start Guide Example</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />
 </head>
<body>
 <div id="map" style="width: 1000px; height: 1000px"></div>

 <script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
 <script>

  var map = L.mapbox.map('map');
  L.tileLayer('http://eccoilmoro.github.io/Mappa-Redditi-IRPEF-2012-/tiles-mappa-redditi-2012/{z}/{x}/{y}.png', {
   "attribution": "franco"
    }).addTo(map);

  map.setView(new L.LatLng(39.5, 9), 6);
</script>
</body>
</html>

다른 팁

Thank you vey much Selim, it works! I wanted to go a step forward adding interacativity (the map I created with tilemill is interactive) but I cannot see the tooltips! Perhaps I'm getting the wrong syntax again...

<!DOCTYPE html>
 <html>
 <head>
 <title>Leaflet Quick Start Guide Example</title>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />
 </head>
 <body>
  <div id="map" style="width: 1000px; height: 1000px"></div>

  <script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
  <script>

  var map = L.mapbox.map('map');
  //L.tileLayer('http://eccoilmoro.github.io/Mappa-Redditi-IRPEF-2012-/tiles-mappa-   redditi-2012/{z}/{x}/{y}.png', {"attribution": "franco"}).addTo(map);
  L.mapbox.tileLayer({ "tilejson": "2.0.0",
 "tiles": [ "http://eccoilmoro.github.io/Mappa-Redditi-IRPEF-2012-/tiles-mappa-redditi-2012/{z}/{x}/{y}.png" ] }).addTo(map);
  var myGridLayer = L.mapbox.gridLayer({ "tilejson": "2.0.0",
  "tiles": [ "http://eccoilmoro.github.io/Mappa-Redditi-IRPEF-2012-/tiles-mappa-redditi-2012/{z}/{x}/{y}.grid.json" ] }).addTo(map);
  var myGridControl = L.mapbox.gridControl(myGridLayer).addTo(map);
 map.setView(new L.LatLng(39.5, 9), 6);
</script>
 </body>
 </html>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top