Skip to content

Instantly share code, notes, and snippets.

@suddeb

suddeb/Mapbox_2

Last active August 29, 2015 14:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save suddeb/0a0a6d9fe7aba29929fa to your computer and use it in GitHub Desktop.
Save suddeb/0a0a6d9fe7aba29929fa to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Mapbox_2
<apex:page showHeader="true" standardStylesheets="false" sidebar="false">
<html>
<head>
<meta charset="urf-8"/>
<title> First Mapbox Map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=mo' />
<script src='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
<style type="text/css">
body { margin:0; padding:0; }
#map { width: 1000px; height:500px; }
</style>
<script type="text/javascript">
window.onload = function(){
L.mapbox.accessToken = '<ENTER YOUR DEFAULT PUBLIC TOKEN>';
//Creating a variable to hold the reference of the map
var myMap = L.mapbox.map('map', null,{minZoom: 11}); //Here map is the div id where Mapbox map will be drwan
//Define layers
var layers = {
"Base Layer":L.mapbox.tileLayer('ENTER YOUR BASE PROJECT ID'),
"Sudipta First Map":L.mapbox.tileLayer('ENTER YOUR FIRST PROJECT ID')
};
layers["Base Layer"].addTo(myMap);
L.control.layers(layers).addTo(myMap);
//Let's add the scale control
L.control.scale({imperial: false, position: "bottomright"}).addTo(myMap);
//Let's add Attribution control
myMap.attributionControl.addAttribution('Sudipta 2015');
//Let's make the mapbox point to Zurich
myMap.setView([47.3667,8.5500],12); //This is Zurich's Coordinate
}
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
</apex:page>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment