Skip to content

Instantly share code, notes, and snippets.

@lxbarth
Created May 29, 2015 16:29
Show Gist options
  • Save lxbarth/293e22750dc040746e1d to your computer and use it in GitHub Desktop.
Save lxbarth/293e22750dc040746e1d to your computer and use it in GitHub Desktop.
Branded Mapbox map
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A simple map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
/* # 1 Add watermark styling */
.mapbox-maplogo {
position:absolute;
display:block;
height: 18px;
width: 65px;
left:10px;
bottom:10px;
text-indent: -9999px;
z-index:99999;
overflow:hidden;
background-image: url(data:image/png;base64,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);
background-repeat:no-repeat;
background-position: 0 0 ;
background-size: 65px 18px;
}
</style>
</head>
<body>
<div id='map'>
<!-- # 2 Add watermark -->
<a href="http://mapbox.com/about/maps" class='mapbox-maplogo' target="_blank">Mapbox</a>
</div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoibHhiYXJ0aCIsImEiOiJFVXdYcUlvIn0.bbaHTEWlnAwGgyVwJngMdQ';
var map = L.mapbox.map('map', 'lxbarth.i6fgdd0o')
.setView([40, -74.50], 9);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment