Link Search Menu Expand Document
Introduction to Mapbox

Map Parameters: A closer look at the script


This section will break down the javascript responsible for containing, styling, and making your map interactive. We will modify parameters of the boilerplate’s script to explore how customizable even the basemap can be. The definitions that follow are drawn from Mapbox’s API reference, which offers a comprehensive description of map properties and options.

Return to the boilerplate basemap open in your web-browser. Because we will be working back and forth between the browser page the code editor, it’s helpful to arrange your computer screen(s) in a way where you can either see both windows at once or are able to toggle between the two. This way, every time you modify the html code you can see the changes by refreshing the browser page. (Or, if you are using the Live Server extension, the page will automatically refresh to render your updates.) You’ll also want to have workshop website accessible.

The Script element 

    <script>
        mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN_HERE'; 
        const map = new mapboxgl.Map({
            container: 'map', 
            style: 'mapbox://styles/mapbox/streets-v12', 
            center: [-123.11738086752482, 49.25090077610571], 
            zoom: 10, 
            projection: 'globe' 
        });
        map.addControl(new mapboxgl.NavigationControl());
    </script>


Map Object 

const map = new mapboxgl.Map({

});

Below your access token is the map object. Contained within the map object are various methods and properties such as container, style, center, zoom, and projection. Mapbox GL JS takes the values you set for these options and renders the map object as specified on your screen.


Container 

container: 'map'

The container option specifies an the HTML element within which the map will be rendered.


Style 

style: 'mapbox://styles/mapbox/streets-v12'

The style option indicates the style of your basemap. While you can create your own map styles in Mapbox Studio, there are an array of Mapbox styles available for you to choose from. Look through the gallery for visual reference. Then replace the style in your boilerplate code with a style URL. Save your code and refresh your browser page. The map should now render with your chosen style.


Center 

center: [-123.11738086752482, 49.25090077610571]

The center option specifies the geographic centerpoint of the map when it first loads. The parameter is in decimal degrees in the format [longitude, latitude]. Go to Google Maps and navigate to any location in the world. Right click to copy the coordinates to your clipboard. Paste them into your boilerplate code. Make sure to switch the positions of latitude and longitude to match the input format noted above. Save your code and refresh your browser page. The map should now be centered on a new location.

Zoom 

zoom: 10

While your map can interactively zoom between discreet levels, the zoom option specifies the initial scale of your map. Mapbox zoom levels go from 0 to 22, with 22 being the most zoomed in or largest scale. Try changing the zoom level. Save your code and refresh your browser page to see your changes.

Projection 

projection: 'globe'

The projection option sets the projection your map will be rendered in. The boilerplate projection will display the map as a 3D globe if you zoom out enough. Take a look at the supported projections and try a few out. 

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

The addControl() function adds buttons for zooming in and out. You can also zoom using your fingers on a track pad or the scroll wheel of a mouse. Note that this function is outside the map object and not required for your map to load or be interactive.

Now that we are familiar with the script that builds a basemap it’s time to add our own data to it.