mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
https://docs.mapbox.com/mapbox-gl-js/
Other
11.07k stars 2.21k forks source link

Error when run MapBox under Blazor #9145

Open aviabunin opened 4 years ago

aviabunin commented 4 years ago

Hi! When starting MapBox under Blazor I get an error:

errorBlazor1 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");
     }
 }
aviabunin commented 4 years ago

An error occurs with any style.

aviabunin commented 4 years ago

In debug mode of VS 2019. When app published I don't see error

mourner commented 4 years ago

@aviabunin interesting! It looks like the culprit is somewhere in this file which uses the new CacheStorage API — looks like it's broken in some way in Blazor in debug mode.

Since none of the maintainers use Blazor, we would need help to solve this — perhaps you could try working on a fix and send a pull request? It probably involves adding some additional error handling in that file above (e.g. making sure window.caches.open resolves to a cache object, and if not, disabling caching).

aviabunin commented 4 years ago

I'll try, but I need some time.

aviabunin commented 4 years ago

One more feature.The style of the div 'map' is: `