Trouble on placing a map on the blazor server app

[SaeedP]

Hi there,

I'm looking to add a map to a Blazor Server page, but I'm encountering the following error:

Status 500

The map library I'm using is openstreetMap.

Here's the code I'm using:

<!-- Using jsDelivr CDN -->

<script src="https://cdn.jsdelivr.net/npm/openlayers@latest/build/ol.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/openlayers@latest/css/ol.css" type="text/css">

map.razor component:

@using System.Threading.Tasks

@inject IJSRuntime JSRuntime

<div id="map" style="width: 100%; height: 500px;"></div>

@code {

    private async Task InitMap()

    {

        await JSRuntime.InvokeAsync<object>("initMap");

    }

    protected override async Task OnAfterRenderAsync(bool firstRender)

    {

        if (firstRender)

        {

            await InitMap();

        }

    }

}

js file:

function initMap() {

    var map = new ol.Map({

        target: 'map',

        layers: [

            new ol.layer.Tile({

                source: new ol.source.OSM()

            })

        ],

        view: new ol.View({

            center: ol.proj.fromLonLat([-73.998672, 40.714728]), // Example: New York

            zoom: 12

        })

    });

}

And the component to my address page:

<OpenStreetMapComponent />

Please inform me. or if you know a better way for just placing a map on a blazor, let me know that.

regards

 

[Skydiver]

Perhaps I'm missing something, but why not just run it directly in the HTML page? Why do this dance between a razor page/component, C#, and JavaScript?

OpenLayers Simple Example - OpenStreetMap Wiki

wiki.openstreetmap.org