About Metacubic

Metacubic is a leading mobile app and enterprise software development company! – expert in development, customization, and integration of complex enterprise-level solutions, business intelligence analytics, advanced web and mobile solutions since 2016. Metacubic offers winning app strategies, stunning app designs, powerful agile app development and stand-out launch marketing. One of the pioneers in mobile app development services, we have worked for clients that include individuals, startups, and organizations.

Contact Info
+1(302)520-2460 info@metacubic.com Suite B #305 2803 Philadelphia Pike Claymont, DE 19703 United States

How to initialize mapbox with different styles in Mapbox GL

Schedule Appointment if you want consultation regarding mapbox?

In this article we will show you how to initialize different map styles.

Create Mapbox studio account

Before start you need to create a mapbox studio account. After creating account on the dashboard you will see the access token. this token will be required to initialize the map, On the behalf of this token you can integrate the map style. if you use some other account token and map style from different account then it won’t work. So keep in mind that every thing in this account will be work on the access token. see below image.

Create Mapbox style

Click on the Create a map in studio on the mapbox dashboard then new window will be opened where you can see multiple map styles already created. you just need to customize according to your need. For each style have their sub styles(variations) of the map. Below is the list of map styles and sub styles (variations).

  • Basic
    • Base
    • Chilled
    • Galaxy
    • Overcast
    • Seashore
    • Spring
  • Monochrome
    • Sky
    • Dark
    • Light
    • Bubblegum
    • Midnight
    • Golden
  • Streets
  • Outdoors
  • Satellite Streets
  • Navigation
    • Navigation Night
    • Navigation Day
  • Blank
Basic – Base

We will go with the Basic – Base. Select the Basic – Base style from the mapbox studio then click on the Customize Basic. A new window will be opened, on the left side all the settings of the map where as right side the map will be visualize. Every change from the left bar it will be automatically reflect on the map. Once you done with all your customization you can pubish the map. see the below picture.

Initializing – Code level

Once you publish the map style you can copy style url which looks like mapbox://styles/metacubic/cl8akpjd700257567qli47fe2

Lets start initializing the map style into mapbox code. Include this style and script in your header to load the mapbox functionality.

<script src='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css' rel='stylesheet' />

This is the mapbox styles and script libraries. Now we are going to add the customizable code.

mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11' //this is default style by mapbox publically available for all

Finaly we need to load these configuration to visualize the map on browser. so for this you need to create a div with id map. The container value is map which indicates the id in the html.

<div id="map"></div>

That’s it for the part 1. Keep visiting our blog for the second part in which we can show you how to set origin and destination route line.

Post a Comment