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).
Related
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
In a previous question, someone asked about image overlays with map styles:
How do I add a simple image overlay in Mapbox Javascript?
I got it to work with their example, but I want to use my own style.
Here's a link to my map style.
This is the style they use that works:
mapbox://styles/mapbox/satellite-v9
This is my style, it doesn't work:
mapbox://styles/nittyjee/ck0fasve30an21cpalmwct518
Below is the code that works, you can run it yourself. My style is commented out.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Add an image</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.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 = 'pk.eyJ1Ijoibml0dHlqZWUiLCJhIjoid1RmLXpycyJ9.NFk875-Fe6hoRCkGciG8yQ';
var map = new mapboxgl.Map({
container: 'map',
maxZoom: 5.99,
minZoom: 4,
zoom: 5,
center: [-75.789, 41.874],
//Style from Stack Overflow:
style: 'mapbox://styles/mapbox/satellite-v9'
//My style does not work:
//style: 'mapbox://styles/nittyjee/ck0fasve30an21cpalmwct518'
});
map.on('load', function() {
map.addSource("myImageSource", {
"type": "image",
"url": "https://docs.mapbox.com/mapbox-gl-js/assets/radar.gif",
"coordinates": [
[-80.425, 46.437],
[-71.516, 46.437],
[-71.516, 37.936],
[-80.425, 37.936]
]
});
map.addLayer({
"id": "overlay",
"source": "myImageSource",
"type": "raster",
"paint": {
"raster-opacity": 0.85
}
});
});
</script>
</body>
</html>
You need to bump up mapbox-gl version. You're using a way older SDK.
Change your script/css definition to this:
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.css' rel='stylesheet' />
That doesn't look like a style URL https://docs.mapbox.com/help/glossary/style-url/
You'd need to create a style in Mapbox Studio and grab the style ID.
When you're in Studio looking at your style, you can click on Share in the top right corner.
Then from there, you should see a panel that will have a section called Your style url. If you copy that link and paste it into your code, your style should come through.
You can also click on the 3 dots by your style and copy the style id at the bottom of the panel that appears:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Drawing Tools Sample</title>
<!-- Bing Map Control references -->
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
function GetMap() {
map = new Microsoft.Maps.Map(document.getElementById("myMap"), {
credentials: "",
zoom: 17,
center: new Microsoft.Maps.Location(47.592, -122.332)
});
var infoboxOptions = {
width: 200,
height: 100,
showCloseButton: true,
zIndex: 0,
offset: new Microsoft.Maps.Point(10, 0),
showPointer: true
};
var defaultInfobox = new Microsoft.Maps.Infobox(map.getCenter(), infoboxOptions);
map.entities.push(defaultInfobox);
defaultInfobox.setHtmlContent('<div>MY TEXT <input type="text"></div>');
}
</script>
</head>
<body onload="GetMap()">
<div style="position:relative;width:250px;height:150px;float:left;">
<div id="myMap" style="position:relative; width:600px;height:200px;"></div>
</div>
</body>
</html>
I am looking add custom Html elements such as textbox, textarea to bing map pushpin therefore it can be editable when it placed.
problem is can be place push pin with textbox or textarea but it cannot be editable.
This is a limitation of the default infobox class. You can work around this by using the custom infobox module found here: https://bingmapsv7modules.codeplex.com/wikipage?title=Custom%20Infobox%20Control
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
});
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