I am trying to add leaflet maps to my webpage and I am using Mapbox tiles. I am not able to get the map in the basic tutorial to work, all I am seeing is a grey screen. I have a mp id from mapbox and I have added it to my code. Attaching relevant code below.
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tiles.mapbox.com/v3/rakshak.l937n12c/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18
}).addTo(map);
and this is what I am seeing in the console:
GET http://a.tiles.mapbox.com/v4/rakshak.l937n12c/13/4093/2723.png 401 (Unauthorized)
In the css I have just put the map height to height: 100vh.
All I am seeing on my screen are the map zoom controllers and a grey screen. Am I missing an important step ?
Edit 1: Update JS code:
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://api.tiles.mapbox.com/v4/rakshak.l937n12c/{z}/{x}/{y}.{format}?access_token=pk.eyJ1IjoicmFrc2hhayIsImEiOiJ5cHhqeHlRIn0.Vi87VjI1cKbl1lhOn95Lpw', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18
}).addTo(map);
Set up your tileLayer to include your map's id and your user token:
var tileLayer = L.tileLayer('https://{s}.tiles.mapbox.com/v4/{mapId}/{z}/{x}/{y}.png?access_token={token}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
subdomains: ['a','b','c','d'],
mapId: <YOUR MAPID HERE>,
token: <YOUR TOKEN HERE>
});
Here's a working example on Plunker: http://plnkr.co/edit/Kf3f8h?p=preview
Related
I have integrated Leaflet in my website. But, if I set the map in a collapse, the map doesn't become fully visible.enter image description here
var mymap = L.map('mapid').setView([33.841954, 10.995487], 11);
const mainLayer = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}? access_token={accessToken}', { attribution: 'Map data © OpenStreetMap contributors, Imagery © Mapbox', maxZoom: 18, enter: [33.841954, 10.995487], id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, accessToken: 'AccessToken'});
mainLayer.addTo(mymap);
You need to call after expanding the view map.invalidateSize()
I am using Geoserver to host my mbtiles file on EC2. I am trying to open this file in Leaflet but it don't understand how I should set the url.
L.tileLayer('http://ec2-35-180-202-91.eu-west-3.compute.amazonaws.com:8080/geoserver/nurc/wms?service=WMS&version=1.1.0&request=GetMap&layers=nurc%3Afichierdeformesdesvoiesdureseauferrenational', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap'
})
.addTo(map);
Any clue?
Based on comments, here is a solution that worked. Thank you for the comments.
var mapboxurl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.XXXXX';
var mapboxattributes = 'Map data © OpenStreetMap contributors, ' + 'Imagery © Mapbox';
var voiesferrees = L.tileLayer.wms("http://ec2-35-180-202-91.eu-west-3.compute.amazonaws.com:8080/geoserver/nurc/wms?", {
layers: "nurc:fichierdeformesdesvoiesdureseauferrenational",
format: "image/png",
transparent: true,
attribution: mapboxattributes,
});
I got
the quick start guide loaded up here...
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('API KEY', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);
How would I go about coding this when I want the country border to be highlighted when it is hovered over? Do I need a .js file that contains the list/dictionary for all these polygons?
Anything helps.
Thanks
I have been using leaflet to show map in my website, which is in dark mode, but until recently, I found dark mode in leaflet map stopped working at all,
This is my code,
this.map = L.map('dv-map', {
minZoom: this.props.minZoom,
maxZoom: this.props.maxZoom
}).setView(this.props.center, this.props.initLevel);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + this.props.mapBoxToken, {
maxZoom: this.props.maxZoom,
id: 'mapbox.dark'
})
.addTo(this.map);
I tested other id, such as mapbox.streets, mapbox.satellite etc., still fine, only dark is not working at all.
Can anybody tell me how to prvoide dark mode for the leaflet map?
Thanks
Did you tried this?
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: '© Mapbox © OpenStreetMap <strong>Improve this map</strong>',
tileSize: 512,
maxZoom: this.props.maxZoom,
zoomOffset: -1,
id: 'mapbox/dark-v10',
accessToken: this.props.mapBoxToken
});
I'm attempting to use this simple example from LeafletJS but am unable to get the layer to display using my Mapbox public key. The map displays a grey background with my sample marker and pop up.
var map = L.map('map').setView([39.5, -105.5], 7);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18,
id: 'test.project',
accessToken: 'copied.and.pasted.my.mapbox.key.here'
}).addTo(mymap);
L.marker([39.5, -105.5]).addTo(map)
.bindPopup('This is my first marker!')
.openPopup();
You are calling .addTo(mymap); on the tilelayer, but your map object is map. Use this: .addTo(map);
You might also have to change the URL a bit. Following the documentation here I created a map based on a style:
var map = L.map('map').setView([39.5, -105.5], 7);
L.tileLayer('https://api.tiles.mapbox.com/styles/v1/{username}/{id}/tiles/{tileSize}/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18,
username: 'mapbox username',
id: 'mapbox style id',
accessToken: 'mapbox access token',
tileSize: 512,
zoomOffset: -1
}).addTo(map);
L.marker([39.5, -105.5]).addTo(map)
.bindPopup('This is my first marker!')
.openPopup();
If you want to retrieve tiles for a certain tileset use this (documentation):
L.tileLayer('https://api.mapbox.com/v4/{tilesetId}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18,
accessToken: 'mapbox access token',
tilesetId: 'mapbox tileset id'
}).addTo(map);
tilesetId has the form of username.id, it's not your project's name, you can find it in the editor/Studio.