Panel division and white marker around markers in MapBox

Question

Does anyone have MapBox experience?

I'm trying to implement a personal map with specific markers, complete with pan and zoom features. I was trying to implement the code from the website that does just this that comes directly from the MapBox website. However, when I implemented in to my own page I got the following:

enter image description here

As you can see there is a weird paneling effect happening as well as white blocks around the markers. The map is pretty ineffective this way so I was hoping someone out there knew the solution.

Here's the code I used:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Pan and vertical zoom</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; height:500px}
</style>
</head>
<body>


<style>
.ui-control {
  font:bold 12px/28px Helvetica, sans-serif;
  text-align:center;
  position:absolute;
  top:10px;
  left:10px;
  z-index:1000;
  }

.ui-pan {
  position:absolute;
  top:0;
  left:0;
  z-index:1000;
  }
  .ui-pan .panner {
    background:#fff;
    color:#404040;
    font-size:9px;
    position:absolute;
    top:0;
    left:0;
    width:28px;
    height:28px;
    border:1px solid rgba(0,0,0,0.4);
    border-radius:3px;
    }
    .ui-pan .panner:hover { background-color:#f8f8f8; color:#404040; }
    .ui-pan .panner.up    { left:28px; }
    .ui-pan .panner.right { left:58px; top:28px; }
    .ui-pan .panner.down  { left:28px; top:58px; }
    .ui-pan .panner.left  { top:28px; }

.ui-zoombar {
  background:#FFF;
  position:relative;
  top:93px;
  left:28px;
  width:28px;
  height:200px;
  border:1px solid rgba(0,0,0,0.4);
  border-radius:3px;
  cursor:pointer;
  }
  .ui-zoombar:hover { background-color:#f8f8f8; }
  .ui-zoombar .handle {
    position:absolute;
    cursor:pointer;
    width:26px;
    height:28px;
    background:#404040;
    color:#fff;
    border-radius:2px;
    }
    .ui-zoombar .handle:hover { background:#303030; }

</style>

<div class='ui-control'>
  <div id='pan' class='ui-pan'>
    <a href='#' id='up' class='panner up'>&#9650;</a>
    <a href='#' id='right' class='panner right'>&#9654;</a>
    <a href='#' id='down' class='panner down'>&#9660;</a>
    <a href='#' id='left' class='panner left'>&#9664;</a>
  </div>
  <div id='zoom-bar' class='ui-zoombar dragdealer'>
    <div id='handle' class='handle'>0</div>
  </div>
</div>

<div id='map'> </div>

<!-- If you plan to use this example, download dragdealer from
https://code.google.com/p/dragdealer/ instead of hotlinking it like this -->
<script src='https://dragdealer.googlecode.com/svn/tags/0.9.5/dragdealer.js'></script>
<script>
var zooms = 19;
var handle = document.getElementById('handle');
var map = L.mapbox.map('map', 'tlchang.ikgi2358', {
    zoomControl: false
  })
  .setView([42.0, -3.5], 2);

// Configure Dragdealer to update the map zoom
var zoom_bar = new Dragdealer('zoom-bar', {
    steps: zooms,
    snap: true,
    horizontal: false,
    vertical: true,
    callback: function(x, y) {
        var z = y * (zooms - 1);
        map.setZoom(z);
        handle.innerHTML = z;
    }
});

// Round the zoom value the number looks presentable.
map.on('zoomend', function() {
    var z = Math.round(map.getZoom());
    zoom_bar.setValue(0, z / 19);
    handle.innerHTML = z;
});

document.getElementById('left').onclick = function(e)  { e.preventDefault(); map.panBy([-100, 0]); };
document.getElementById('right').onclick = function(e) { e.preventDefault(); map.panBy([100, 0]);  };
document.getElementById('down').onclick = function(e)  { e.preventDefault(); map.panBy([0, 100]);  };
document.getElementById('up').onclick = function(e)    { e.preventDefault(); map.panBy([0, -100]); };
</script>


</body>
</html>

Any ideas?!

tmcw tmcw · Accepted Answer · 2014-06-30T17:33:35

This example works fine on its own.

However, when I implemented in to my own page I got the following:

This is probably the issue. If you can provide a link to your own page, then that would help - you probably have some over-eager CSS rules that are causing this problem.

Panel division and white marker around markers in MapBox

1 Answers