ThinkGeo.com    |     Documentation    |     Premium Support

Adding a VectorTileLayer in blazor

#1

Your Cloud Online Samples shows the javascript for adding a VectorTileLayer, however blazor does not have that same capability since the VectorTileLayer does not seem to exist. See the sample code here:
ThinkGeo Cloud Online Samples - Build Better Mapping Apps Faster.

I would like to do something similar in Blazor. Am I missing something?

Thanks,
James R.

#2

Hi James,

There are now three options depending on what you want to render.

  1. In the current version, you can use the existing ThinkGeo Cloud vector maps overlay:
<MapView Id="map" MapUnit="GeographyUnit.Meter">
    <OverlaysSetting>
        <ThinkGeoCloudVectorMapsOverlay Id="thinkgeo-vector"
                                        ApiKey="YOUR_THINKGEO_CLOUD_API_KEY"
                                        MapType="ThinkGeoCloudVectorMapsMapType.Light" />
    </OverlaysSetting>
</MapView>

2. In the latest beta (v15.0.0-beta054), ThinkGeoCloudVectorMapsOverlay has been extended to support the newer ThinkGeo Cloud vector map style. The default is still V1 for backward compatibility. To use the new style, set StyleVersion to V2:

<MapView Id="map" MapUnit="GeographyUnit.Meter">
    <OverlaysSetting>
        <ThinkGeoCloudVectorMapsOverlay Id="thinkgeo-vector-v2"
                                        ApiKey="YOUR_THINKGEO_CLOUD_API_KEY"
                                        MapType="ThinkGeoCloudVectorMapsMapType.Light"
                                        StyleVersion="ThinkGeoCloudVectorMapsStyleVersion.V2" />
    </OverlaysSetting>
</MapView>

3. The latest beta also adds a generic VectorTileOverlay for third-party vector tile services that
   provide a MapLibre/Mapbox-compatible Style JSON. For example:

<MapView Id="map" MapUnit="GeographyUnit.Meter">
    <OverlaysSetting>
        <VectorTileOverlay Id="third-party-vector"
                           StyleJson="https://tiles.preludemaps.com/styles/WorldStreets_Light/
                           style.json" />
    </OverlaysSetting>
</MapView>

Use ThinkGeoCloudVectorMapsOverlay when you are using ThinkGeo Cloud vector maps. Use
VectorTileOverlay when you want to consume a third-party MapLibre/Mapbox Style JSON vector tile
service.

Thanks,
Ben
#3

I will try those out.

Thanks,
James R.

#4

Just let us know if you see any issues.

#5

Just to see if it worked, I tried testing the StyleVersion=“ThinkGeoCloudVectorMapsStyleVersion.V2” and got the following error(s):

warn: Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer[100]
Unhandled exception rendering component: This vector tile overlay requires vectormap-v2.js to be loaded before the map is initialized.
Error: This vector tile overlay requires vectormap-v2.js to be loaded before the map is initialized.
at ThinkGeoMap.addOrUpdateVectorTileLayer (https://localhost:7297/_content/ThinkGeo.UI.Blazor/js/blazormap.n93kpjhp7j.js:676:23)
at Object.invoke (https://localhost:7297/_content/ThinkGeo.UI.Blazor/js/index.rl21mjusi9.js:61:23)
at b.processJSCall (https://localhost:7297/_framework/blazor.web.ej96puwv3k.js:1:4448)
at b.beginInvokeJSFromDotNet (https://localhost:7297/_framework/blazor.web.ej96puwv3k.js:1:4125)
at In._invokeClientMethod (https://localhost:7297/_framework/blazor.web.ej96puwv3k.js:1:69109)
at In._processIncomingData (https://localhost:7297/_framework/blazor.web.ej96puwv3k.js:1:66474)
at Ln.onreceive (https://localhost:7297/_framework/blazor.web.ej96puwv3k.js:1:60125)
at WebSocket. (https://localhost:7297/_framework/blazor.web.ej96puwv3k.js:1:84183)
Microsoft.JSInterop.JSException: This vector tile overlay requires vectormap-v2.js to be loaded before the map is initialized.
Error: This vector tile overlay requires vectormap-v2.js to be loaded before the map is initialized.
at ThinkGeoMap.addOrUpdateVectorTileLayer (https://localhost:7297/_content/ThinkGeo.UI.Blazor/js/blazormap.n93kpjhp7j.js:676:23)
at Object.invoke (https://localhost:7297/_content/ThinkGeo.UI.Blazor/js/index.rl21mjusi9.js:61:23)
at b.processJSCall (https://localhost:7297/_framework/blazor.web.ej96puwv3k.js:1:4448)
at b.beginInvokeJSFromDotNet (https://localhost:7297/_framework/blazor.web.ej96puwv3k.js:1:4125)
at In._invokeClientMethod (https://localhost:7297/_framework/blazor.web.ej96puwv3k.js:1:69109)
at In._processIncomingData (https://localhost:7297/_framework/blazor.web.ej96puwv3k.js:1:66474)
at Ln.onreceive (https://localhost:7297/_framework/blazor.web.ej96puwv3k.js:1:60125)
at WebSocket. (https://localhost:7297/_framework/blazor.web.ej96puwv3k.js:1:84183)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, JSCallType callType, Object[] args)
at A.K.A[A](IJSRuntime, String, Object[] args)
at ThinkGeo.UI.Blazor.ThinkGeoCloudVectorMapsOverlay.InitAsync()
at ThinkGeo.UI.Blazor.MapView.OnAfterRenderAsync(Boolean firstRender)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
Unhandled exception in circuit ‘CPTxPZRcpyGnqiZESb5BJymHCrGenL2KBZ1LsgM_9mA’.
Microsoft.JSInterop.JSException: This vector tile overlay requires vectormap-v2.js to be loaded before the map is initialized.
Error: This vector tile overlay requires vectormap-v2.js to be loaded before the map is initialized.
at ThinkGeoMap.addOrUpdateVectorTileLayer (https://localhost:7297/_content/ThinkGeo.UI.Blazor/js/blazormap.n93kpjhp7j.js:676:23)
at Object.invoke (https://localhost:7297/_content/ThinkGeo.UI.Blazor/js/index.rl21mjusi9.js:61:23)
at b.processJSCall (https://localhost:7297/_framework/blazor.web.ej96puwv3k.js:1:4448)
at b.beginInvokeJSFromDotNet (https://localhost:7297/_framework/blazor.web.ej96puwv3k.js:1:4125)
at In._invokeClientMethod (https://localhost:7297/_framework/blazor.web.ej96puwv3k.js:1:69109)
at In._processIncomingData (https://localhost:7297/_framework/blazor.web.ej96puwv3k.js:1:66474)
at Ln.onreceive (https://localhost:7297/_framework/blazor.web.ej96puwv3k.js:1:60125)
at WebSocket. (https://localhost:7297/_framework/blazor.web.ej96puwv3k.js:1:84183)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, JSCallType callType, Object[] args)
at A.K.A[A](IJSRuntime, String, Object[] args)
at ThinkGeo.UI.Blazor.ThinkGeoCloudVectorMapsOverlay.InitAsync()
at ThinkGeo.UI.Blazor.MapView.OnAfterRenderAsync(Boolean firstRender)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

#6

Never mind I needed the add the following in the correct location:
(formatted incorrectiy so the code would show)

script src=“https://cdn.thinkgeo.com/vectormap-js/4.0.0/vectormap.js”>
script src=“https://cdn.thinkgeo.com/vectormap-js/4.0.0/vectormap-v2.js”> */

#7

Hi James,

Just FYI v14.5.3 was just released, the recent Blazor changes were included, here is the detail:
Changelog - ThinkGeo Docs

Thanks,
Ben