MapboxGL js deel 1

Zelf een standaard kaart maken met MapboxGL.js

▶️ Open het bestand basemap.html 2 keer! 1 keer in de browser, en 1 keer in je tekst editor.

We will start with the most basic form of using MapboxGL.js using their already provided styles. In order to use the default styles and data we need a Mapbox token. Later on we will use MapboxGL.js without this token, because we will use our own data and styles!

De kaart doet het nog niet, want je moet een access token gebruiken om gebruik te maken van de Mapbox services:

▶️ Gebruik je eigen access token!

Vervang mapboxgl.accessToken = 'yourowntoken'; met de token die je van Mapbox studio hebt gekregen in de vorige stap.

A default Mapbox style contains all the elements we need for a map:

• Vector Tiles
• Styling information
• Fonts, Sprites and Glyphs

This is how to initialize a basic map:

var map = new mapboxgl.Map({
        container: 'map-container',
        style: 'mapbox://styles/mapbox/streets-v9',
        hash: true,
        zoom: 11,
        pitch: 60,
        bearing: 62.4,
        center: [ 4.8, 52.4]
    });

De uitleg:

ℹ️ new mapboxgl.Map({...}); creates a mapbox GL map!

ℹ️ container: "map-container" places the map in our <div id="map-container"> object from the HTML file.

ℹ️ style: 'mapbox://styles/mapbox/streets-v9' is the mapbox url for the tiles, style, fonts and Glyphs! .

ℹ️ hash: true puts the #location in the URL of our map. With /zoom/lat/long/angle. See what happens to the URL of your map when you pan around.

ℹ️ zoom,pitch , bearing and center set the starting position of our map when opening it the first time. Now pointing to Amsterdam.

Je eigen stijl gebruiken!

In de vorige stap hebben we bij Mapbox studio ook een eigen stijl gecreerd. Deze gaan we nu bebruiken ipv de standaard mapbox stijl.

▶️ Vervang de style: url met de url die Mapbox Studio je geeft bij je aangemaakte stijl.

 mapboxgl.accessToken = 'yourowntoken';
    var map = new mapboxgl.Map({
        container: 'map-container',
        style: 'mapbox://styles/nieneb/cjg3h8yp80oi82rldxukpu0oi',
        hash: true,
        zoom: 11,
        pitch: 60,
        bearing: 62.4,
        center: [ 4.8, 52.4]
    });

▶️ Refresh je browser en zie je eigen kaart!

Problemen?

Gebruik de Web console.

▶️ In your browser when you opened your html

▶️ Click with your right mouse button, choose : Inspect Element ▶️ Or Press F12

The web inspector shows you the content of your page and the current state of the DOM. DOM stands for Document Object Model and refers to the hierarchical structure of HTML. Web browsers parse the DOM in order to make sense of a page’s content.

▶️ Go to the Inspector, Do you see the same content as we just made in our text editor?

▶️ Just have a look around. Nothing can happen!

The Console logs any errors or comments!

▶️ Go to the tab Web Console to see if it reports anything useful for you.

Fix your problems!

🚫 Solution