# Using with MapLibre

[MapLibre](<https://maplibre.org/maplibre-gl-js/docs/>) is an Open-source JavaScript library for showing maps on a website. MapLibre can accept [MVT vector tiles](<https://github.com/mapbox/vector-tile-spec>) generated by Martin, and applies [a style](<https://maplibre.org/maplibre-style-spec/>) to them to draw a map using Web GL.

You can add a layer to the map and specify Martin [TileJSON](<https://github.com/mapbox/tilejson-spec>) endpoint as a vector source URL. You should also specify a `source-layer` property. For [Table Sources](<https://maplibre.org/martin/sources-pg-tables/index.md>) it is `{table_name}` by default.

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

```js
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](<https://maplibre.org/martin/sources-composite/index.md>). Each source in a composite source can be accessed with its `{source_name}` as a `source-layer` property.

```js
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'
    }
});
```