FOSS4G SotM Oceania

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.

Google Sites

Report abuse