Error when run MapBox under Blazor
Open
Nobody has claimed this yet.
bug :lady_beetle:
environment-specific :desktop_computer:
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
Hi!
When starting MapBox under Blazor I get an error:

How to fix?
In default Blazor project I added:
In head of _Host.cshtml:
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
<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>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
</style>
<script src="~/scripts/mapboxMng.js"></script>
mapboxMng.js:
window.mapBoxFunctions = {
initMapBox: function () {
mapboxgl.accessToken = 'pk.eyJ1IjoidGVyZW50ZXYiLCJhIjoiY2sycDN1Z21zMDBheTNrbzZ2aG42aWUyMiJ9._2hucdk7L6jhzEHE6LGv9A';
window.myMap = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [34.047, 63.779],
zoom: 4.41
});
return;
}
};
Index.razor:
@page "/"
@inject IJSRuntime JSRuntime;
<div id='map'></div>
@code {
private string toolbarId = "jqxToolbar";
protected override void OnAfterRender(bool firstRender)
{
JSRuntime.InvokeVoidAsync("mapBoxFunctions.initMapBox");
}
}
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the scripts in _Host.cshtml, mapboxMng.js, and Index.razor, then reproduce the reported error in the default Blazor project using the supplied Mapbox setup. Use the linked error image and browser output to identify the failing integration point; done means the map initializes without the reported error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100