Martin vector tile server

[matthalstead]

I am trying to get svelte-maplibre to render multi polygons returned by a local Martin server which is backed by a postgis DB.

The code I have is:

<script>
    import { MapLibre, VectorTileSource, LineLayer } from 'svelte-maplibre';
</script>

<div>
    <MapLibre
        style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
        standardControls
        center={[174.833955, -36.745966]}
        class="map"
        zoom={10}>
        <VectorTileSource
            tiles={['http://localhost:3000/community_board_2018_clipped_generalised/{z}/{x}/{y}']}>
            <LineLayer
                paint={{
                    'line-opacity': 0.6,
                    'line-color': 'rgb(53, 175, 109)',
                    'line-width': 2
                }}
                sourceLayer={'sequence'}
            />
        </VectorTileSource>
    </MapLibre>
</div>

<style>
    :global(.map) {
        height: 800px;
        width: 800px;
    }
</style>

The official documentation on using Martin server in maplibre is https://maplibre.org/martin/using-with-maplibre.html - which configures sources a bit differently to the code you have for your vector tile map example.

The vector tile service works fine - e.g. in QGIS - and svelte-maplibre seems to be making valid requests and getting back a protobuf object, but the polygons aren't being rendered. Should I be using a different layer type or configuring the vector tile source differently?

[dimfeld]

I'm not really sure, sorry. I do note that the examples you referenced use the url property instead of tiles for the source, but I'm not sure if that's actually the problem.

If you can provide an example of it working with plain maplibre I'm happy to help convert that to work with this package.

[dimfeld]

Also is your sourceLayer prop correct? It looks like you used the one from the example but it needs to match something in the actual data. And if you're just using the raw tile url you may need to omit it completely.

[matthalstead-mfe]

It was the sourceLayer that was the issue. I tried out the url option but that didn't work, it seems it needs the tile attribute

<script>
    import { MapLibre, VectorTileSource, LineLayer } from 'svelte-maplibre';
</script>

<div>
    <MapLibre
        style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
        standardControls
        center={[174.833955, -36.745966]}
        class="map"
        zoom={10}>
        <VectorTileSource
            tiles={['http://localhost:3000/community_board_2018_clipped_generalised/{z}/{x}/{y}']}>
            <LineLayer
                paint={{
                    'line-opacity': 0.6,
                    'line-color': 'rgb(53, 175, 109)',
                    'line-width': 2
                }}
                sourceLayer="community_board_2018_clipped_generalised"
            />
        </VectorTileSource>
    </MapLibre>
</div>

<style>
    :global(.map) {
        height: 800px;
        width: 800px;
    }
</style>