I am using Mapbox API to create simple maps and learn. I have written a very simple code to display the centre on some coordinates but the map won't show.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A simple map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1Ijoicm9oYW4wNzkzIiwiYSI6IjhFeGVzVzgifQ.MQBzoHJmjH19bXDW0b8nKQ';
var map = L.mapbox.map('map', {
center: [28.611690, 77.191008],
zoom: 13
});
</script>
</body>
</html>
What am I doing wrong here?
You're using the wrong parameters for L.mapbox.map, the first element is correct, that's for the ID of a HTML element or a reference to an HTML element. The second however, isn't for the options object. The second is for your mapbox mapid (or url, or tilejson), which you get when you create your own map via the Mapbox editor: https://www.mapbox.com/editor/#app The third parameter is for the options object.
L.mapbox.accessToken = 'pk.eyJ1IjoicGF1bC12ZXJob2V2ZW4iLCJhIjoiZ1BtMWhPSSJ9.wQGnLyl1DiuIQuS0U_PtiQ';
var map = L.mapbox.map('map', 'examples.map-i86nkdio', {
center: [28.611690, 77.191008],
zoom: 13
});
Related
I'm trying to follow the instructions here: https://docs.mapbox.com/mapbox-gl-js/example/simple-map/
My code is as follows, just as in the example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display a map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%;}
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'MY_TOKEN';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/ericgithinji/ckfchv1sr0u581amw703zg3jh',//it also fails when I use one of the public styles
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});
</script>
</body>
</html>
The div for the map doesn't display anyting, i.e. I get a blank web page. I've followed the tests here for style_id, tileset id, and access token and they all work: https://docs.mapbox.com/help/troubleshooting/blank-tiles/
I have no idea what could be the problem. If it helps,my Index.html is hosted locally on Ubuntu Apache2 server.
I was making two mistakes: 1 - using my secret token instead of my public token and 2 - not generating a style for myself first (it didn't work with the default style from the example).
I'm trying to make the map move inside it, dragging the map to the side, so I can get around the map.
But this is only being possible onmousedown on map1, when choosing map2 the map does not move, it is not possible to drag it.
When clicking on the map1 button the map appears and it is possible to move within it, but after I click on the map2 button it is no longer possible to move within the map.
Follow the code of what is happening.
How could this be fixed?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"></script>
</head>
<body>
<div style="margin: 10px">
<button onclick="maps(['New York', 40.6971494, -74.2598757])">Map 1</button>
</div>
<div style="margin: 10px">
<button onclick="maps(['London', 51.528308, -0.3817849])">Map 2</button>
</div>
<div id="mapid" style="width: 200px; height: 200px; margin: 10px"></div>
<script>
function maps(location) {
var container = L.DomUtil.get('mapid');
if(container != null){
container._leaflet_id = null;
}
var map = L.map( 'mapid', {
center: [location[1], location[2]],
minZoom: 2,
zoom: 13
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
var m = L.marker([location[1], location[2]]).addTo(map).bindPopup(location[0])
}
</script>
</body>
</html>
I found the problem, I needed to change the way the map was initialized, follow the code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"></script>
</head>
<body>
<div style="margin: 10px">
<button onclick="maps(['New York', 40.6971494, -74.2598757])">Map 1</button>
</div>
<div style="margin: 10px">
<button onclick="maps(['London', 51.528308, -0.3817849])">Map 2</button>
</div>
<div id="mapid" style="width: 200px; height: 200px; margin: 10px"></div>
<script>
var map = null; //added
function maps(location) {
//var container = L.DomUtil.get('mapid'); //removed
//if(container != null){ //removed
// container._leaflet_id = null; //removed
//}
if (map !== undefined && map !== null) { map.remove(); }//added
map = L.map( 'mapid', { //alterated
center: [location[1], location[2]],
minZoom: 2,
zoom: 13
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
var m = L.marker([location[1], location[2]]).addTo(map).bindPopup(location[0])
}
</script>
</body>
</html>
I try to run MapBox under Blazor , using the next library
https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js
When I delete the line (from default app)
<script src="_framework/blazor.server.js"></script>
MapBox library works , except events. When i restore that line then events works, but the map disappear
How to fix the problem?
_host.cshtml:
#page "/"
#namespace BlazorApp3.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlazorApp3</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
<style>
#map {
position: absolute;
top: 0;
bottom: 0;
width: 85%;
height: 100%;
}
</style>
</head>
<body>
<app>
#(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoidGVyZW50ZXYiLCJhIjoiY2sycDN1Z21zMDBheTNrbzZ2aG42aWUyMiJ9._2hucdk7L6jhzEHE6LGv9A';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/terentev/ck2so0c4h1q5x1cqow0aj9nh8',
center: [34.047, 63.779],
zoom: 4.41
});
</script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
index.razor:
#page "/"
<div id='map'></div>
Did so:
#page "/"
#inject IJSRuntime JSRuntime;
<div id='map'></div>
#code {
protected override void OnAfterRender(bool firstRender)
{
JSRuntime.InvokeVoidAsync("mapBoxFunctions.initMapBox");
}
}
P.S. I noticed that despite the fact that the site seems to work fine, but in the console you can see an error at startup
Can't anybody say how to fix the problem.
After publishing the application - no error is visible in the browser
From Mapbox site I tested this code and success:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.cs
<style>
body { margin:0; padding:0; }
.map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map' class='map'> </div>
<script>
var map = new L.Map('map', {
center: new L.LatLng(51.505, -0.09),
zoom: 8,
layers: new L.TileLayer('https://a.tiles.mapbox.com/v3/mapbox.world-bright/{z}
});
</script>
</body>
</html>
How can I access my own map with markers and features? I suppose the "mapbox.world-bright" would be replaced by my own map.id, but how can I set the accessToken?
For some reasons I need to stick with Leaflet, and don't want to switch to mapbox.js.
It's just a matter of using the right url in L.TileLayer. You'll need to add your mapId and token and use the correct attribution. It's also much better if you load the tiles from multiple subdomains because your browser can handle up to four connection as once. Code example:
L.tileLayer('https://{s}.tiles.mapbox.com/v4/{mapId}/{z}/{x}/{y}.png?access_token={token}', {
attribution: '© Mapbox © OpenStreetMap',
subdomains: ['a','b','c','d'],
mapId: 'myMapId',
token: 'myUserToken'
});
To add the features of your map you'll need to query those in a separate request. Here's an example using jQuery. You'll need to swap the MAPID and TOKEN for your mapid and token ofcourse:
$.getJSON('http://a.tiles.mapbox.com/v4/MAPID/features.json?access_token=TOKEN', function (data) {
// Assuming the variable map contains your mapinstance
var geojson = L.geoJson(data).addTo(map);
map.fitBounds(geojson.getBounds());
});
Here's a working example on Plunker: http://plnkr.co/edit/h8F3kC?p=preview
I updated leaflet elevation example gpx just changing the gox name, working locally on win 7 or OS X and Safari or Chrome. Nothing shows up.
var map = new L.Map('map');
var url = 'http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpeg',
attr ='Tiles Courtesy of MapQuest — Map data © OpenStreetMap contributors, CC-BY-SA',
service = new L.TileLayer(url, {subdomains:"1234",attribution: attr});
var el = L.control.elevation();
el.addTo(map);
var g=new L.GPX("./maggiore.gpx", {
async: true,
marker_options: {
startIconUrl: './lib/leaflet-gpx/pin-icon-start.png',
endIconUrl: './lib/leaflet-gpx/pin-icon-end.png',
shadowUrl: './lib/leaflet-gpx/pin-shadow.png'
}
});
g.on('loaded', function(e) {
map.fitBounds(e.target.getBounds());
});
g.on("addline",function(e){
el.addData(e.line);
});
g.addTo(map);
map.addLayer(service);
<link href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" rel="stylesheet"/>
<head>
<title>Leaflet.Elevation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style>
html, body, #map {
height:100%;
width:100%;
padding:0px;
margin:0px;
}
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.ie.css" /><![endif]-->
<link rel="stylesheet" href="../dist/Leaflet.Elevation-0.0.2.css" />
<script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script type="text/javascript" src="../dist/Leaflet.Elevation-0.0.2.min.js"></script
><script type="text/javascript" src="./lib/leaflet-gpx/gpx.js"></script>
</head>
<body>
<div id="map"></div>
All I get is a grey page with zoom control and an empty diagram
do you have the leaftlet.elevation dist files ?
looking at your example you have :
<link rel="stylesheet" href="../dist/Leaflet.Elevation-0.0.2.css" />
<script type="text/javascript" src="../dist/Leaflet.Elevation-0.0.2.min.js"></script
you may copy these files to the lib folder.