1. LOAD A Simple BASEMap

Part 1: Loading a simple basemap

Open your favourite text editor to write some basic code. If you don't have choose one preferably with coloured syntax - here are some options.

Create two blank files one .html and one .css. Name them something sensible. Mine are called: example-map-1.html and example-style-1.css (be sure to update the link in the html header to the style css if you use a different name)

In the .css file you need only:

#map {
position: absolute; 
top: 0; 
bottom: 0;
width: 100%;
}

In the html file add the following - but before you try to load the html file in a browser make sure to update the Access code with your Mapbox Access code: 

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset='utf-8' />
// you need these two scrips to ensure the link to mapbox 
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />
  <link rel="stylesheet" type="text/css" href="example-style-1.css">
  <title> A simple map </title>
</head>

<body>
  <!--initiate map container -->
  <div id='map'></div>
  <script>
  // define access token - from user account mapbox
  mapboxgl.accessToken = 'ENTER YOUR ACCESS TOKEN HERE';
// create the map
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/light-v9'     
  });
  </script>
</body>

Once you open the .html file in a browser (recommend not using IE) you should see something like this:

If you re-styled a map in the previous exercise using mapbox studio you can now visualise this map instead. Instead of:

'mapbox://styles/mapbox/light-v9'

add your map style URL from Mapbox Studio

Changing the zoom level and angle

To zoom in and restrict the map to Melbourne add the following text after you enter the new style, (but inside the map function)

    ,
    maxZoom: 17, // set maxZoom
    minZoom: 13, // set minZoom
    maxBounds: [[144.9,-37.85],[145.0,-37.8]], // set bounding box
    bearing: 15,  // direction
    pitch: 60, // angle
    zoom: 15, // default zoom level
    center: [144.965, -37.815] // default location

Note that after '//' is a comment - these will appear throughout the code examples here but also feel free to add your own when needed.

Finally after the map function before the closing of the script add the following to add some mapbox navigation functions:

  map.addControl(new mapboxgl.NavigationControl());

Not working? Check the full html file for this example.