Using with MapLibre

MapLibre is an Open-source JavaScript library for showing maps on a website. MapLibre can accept MVT vector tiles generated by Martin, and applies a style to them to draw a map using Web GL.

You can add a layer to the map and specify Martin TileJSON endpoint as a vector source URL. You should also specify a source-layer property. For Table Sources it is {table_name} by default.

map.addLayer({
    id: 'points',
    type: 'circle',
    source: {
        type: 'vector',
        url: 'http://localhost:3000/points'
    },
    'source-layer': 'points',
    paint: {
        'circle-color': 'red'
    },
});
map.addSource('rpc', {
    type: 'vector',
    url: `http://localhost:3000/function_zxy_query`
});
map.addLayer({
    id: 'points',
    type: 'circle',
    source: 'rpc',
    'source-layer': 'function_zxy_query',
    paint: {
        'circle-color': 'blue'
    },
});

You can also combine multiple sources into one source with Composite Sources. Each source in a composite source can be accessed with its {source_name} as a source-layer property.

map.addSource('points', {
    type: 'vector',
    url: `http://0.0.0.0:3000/points1,points2`
});

map.addLayer({
    id: 'red_points',
    type: 'circle',
    source: 'points',
    'source-layer': 'points1',
    paint: {
        'circle-color': 'red'
    }
});

map.addLayer({
    id: 'blue_points',
    type: 'circle',
    source: 'points',
    'source-layer': 'points2',
    paint: {
        'circle-color': 'blue'
    }
});