CODEWITHSUNDEEP
javascriptleafletmapbox
Umaru
Umaru

Reputation: 15

Leaflet with mapbox - Setting up default language

I'm new to leaflet/mapbox and I'm trying to figure out how to apply a custom style to a map.

I followed the instruction shown here(https://leafletjs.com/examples/quick-start/) and could show a map in English.

var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'your.mapbox.access.token'
}).addTo(mymap);

Now I am tying to change the language to Japanese. For this, I went to mapbox studio and created my own style by referring to this instruction(https://docs.mapbox.com/help/troubleshooting/change-language/). Now I have my own style URL (mapbox://styles/[username]/[mystyleid]) and ready to setup a map in Japanese.

The problem here is how I can actually apply the style URL in the initialization process of the map. I looked at past articles in stack overflow and tried couple of codes but nothing worked. Please see below for what I have tried:

var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'your.mapbox.access.token'
}).styleLayer('mapbox://styles/[username]/[mystyleid]').addTo(mymap);

The error message is 'L.tileLayer(...).styleLayer is not a function'. I have also tried the following but it didn't work by saying 'TypeError: L.map(...).setView(...).styleLayer is not a function'

var mymap = L.map('mapid').setView([51.505, -0.09], 13).styleLayer('mapbox://styles/mapbox://styles/[username]/[mystyleid]');
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'your.mapbox.access.token'
}).addTo(mymap);

Can anyone please instruct me the exact code to apply my own style URL to a tileLayer?

Thanks in advance.

Upvotes: 0

Views: 406

Answers (1)

Falke Design
Falke Design

Reputation: 11348

Leaflet don't support the function styleLayer

I think you have to use your id instead of the default mapbox id:

var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.mapbox.com/styles/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: '[username]/[mystyleid]',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'your.mapbox.access.token'
}).addTo(mymap);

Upvotes: 0

Related Questions