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.