Skip to main content
Replace screenshot (dead link) with screenshot from other question
Source Link
IvanSanchez
  • 18.9k
  • 3
  • 36
  • 47

I am instantiating a leaflet map, but the tiles are basically being scattered all over the page - while the map is within a div, most of the tiles are not respecting that boundary:

<div class="widget-content listing-search-map-widget-content">
    <div class="ih-map" 
         id="Map_5333811_16"
         style="height:450px;"
         data-centerpoint="38.573955 -121.442478" 
         data-mousewheel="true" 
         data-maptype="TERRAIN"
         data-zoom="8"
        >
    </div>
</div>

The javascript comes down to:

mapOptions = {
               attributionControl: true,
               center: {
                   lat: 38.573955
                   lng: -121.442478
               },
               centerpoint: "38.573955,-121.442478", 
               layers: {},
               maptype: "Terrain", 
               scrollWheelZoom: false, 
               zoom: 8
            }

var map = L.map( "Map_5333811_16", mapOptions );

What would cause the tiles to plot all over the place?a couple of tiles are within the bounds of the div, but not the rest of them. You can see a screenshot of what happens here:

https://www.dropbox.com/s/w93tqnvd9e9m98f/Screen%20Shot%202016-08-08%20at%2010.47.43%20AM.png?dl=0

Thanks.screenshot of jumbled tiles

I am instantiating a leaflet map, but the tiles are basically being scattered all over the page - while the map is within a div, most of the tiles are not respecting that boundary:

<div class="widget-content listing-search-map-widget-content">
    <div class="ih-map" 
         id="Map_5333811_16"
         style="height:450px;"
         data-centerpoint="38.573955 -121.442478" 
         data-mousewheel="true" 
         data-maptype="TERRAIN"
         data-zoom="8"
        >
    </div>
</div>

The javascript comes down to:

mapOptions = {
               attributionControl: true,
               center: {
                   lat: 38.573955
                   lng: -121.442478
               },
               centerpoint: "38.573955,-121.442478", 
               layers: {},
               maptype: "Terrain", 
               scrollWheelZoom: false, 
               zoom: 8
            }

var map = L.map( "Map_5333811_16", mapOptions );

What would cause the tiles to plot all over the place?a couple of tiles are within the bounds of the div, but not the rest of them. You can see a screenshot of what happens here:

https://www.dropbox.com/s/w93tqnvd9e9m98f/Screen%20Shot%202016-08-08%20at%2010.47.43%20AM.png?dl=0

Thanks.

I am instantiating a leaflet map, but the tiles are basically being scattered all over the page - while the map is within a div, most of the tiles are not respecting that boundary:

<div class="widget-content listing-search-map-widget-content">
    <div class="ih-map" 
         id="Map_5333811_16"
         style="height:450px;"
         data-centerpoint="38.573955 -121.442478" 
         data-mousewheel="true" 
         data-maptype="TERRAIN"
         data-zoom="8"
        >
    </div>
</div>

The javascript comes down to:

mapOptions = {
               attributionControl: true,
               center: {
                   lat: 38.573955
                   lng: -121.442478
               },
               centerpoint: "38.573955,-121.442478", 
               layers: {},
               maptype: "Terrain", 
               scrollWheelZoom: false, 
               zoom: 8
            }

var map = L.map( "Map_5333811_16", mapOptions );

What would cause the tiles to plot all over the place?a couple of tiles are within the bounds of the div, but not the rest of them. You can see a screenshot of what happens here:

screenshot of jumbled tiles

Source Link

Leaflet drawing tiles disjointly

I am instantiating a leaflet map, but the tiles are basically being scattered all over the page - while the map is within a div, most of the tiles are not respecting that boundary:

<div class="widget-content listing-search-map-widget-content">
    <div class="ih-map" 
         id="Map_5333811_16"
         style="height:450px;"
         data-centerpoint="38.573955 -121.442478" 
         data-mousewheel="true" 
         data-maptype="TERRAIN"
         data-zoom="8"
        >
    </div>
</div>

The javascript comes down to:

mapOptions = {
               attributionControl: true,
               center: {
                   lat: 38.573955
                   lng: -121.442478
               },
               centerpoint: "38.573955,-121.442478", 
               layers: {},
               maptype: "Terrain", 
               scrollWheelZoom: false, 
               zoom: 8
            }

var map = L.map( "Map_5333811_16", mapOptions );

What would cause the tiles to plot all over the place?a couple of tiles are within the bounds of the div, but not the rest of them. You can see a screenshot of what happens here:

https://www.dropbox.com/s/w93tqnvd9e9m98f/Screen%20Shot%202016-08-08%20at%2010.47.43%20AM.png?dl=0

Thanks.