How to run MapBox under Blazor? RRS feed

  • Question

  • Dear Gurus!

    I try to run MapBox under Blazor , using the next library

    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>

     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?


    @page "/"
    @namespace BlazorApp3.Pages
    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
    <!DOCTYPE html>
    <html lang="en">
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <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' />
            #map {
                bottom: 0;
                width: 100%;
                height: 100%;
            @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
            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 src="_framework/blazor.server.js"></script>


    @page "/"
    <div id='map'></div>

    Сделал так:

    @page "/"
    @inject IJSRuntime JSRuntime;
    <div id='map'></div>
    @code {
        protected override void OnAfterRender(bool firstRender)

    Tuesday, December 10, 2019 11:16 AM