npmap5-plugins

maplibre-gl-vector-text-protocol

Supports geospatial text based vector data using MapLibre GL JS in v1.15.0 or later.

It makes use of the addProtocol functionality that was added in version 1.15.0.

It can be used with Mapbox GL JS 1.x.x using the mapbox-gl-custom-protocol library. I haven’t tested it with Mapbox GL JS 2+.

Web workers are used to convert CSV, TSV, Topojson, and OSM formats. KML, GPX, and TCX formats are based on XML and use the DOMParser, which isn’t available to web workers, so they are converted to GeoJSON in the main thread.

Supported Formats 🗎

Objective ✨

The addProtocol feature makes it extremely easy to extend the existing functionality of MapLibre sources without creating a new source type using the addSourceType feature. This makes it very easy to support all kinds of new things in MapLibre.

Inspiration 💡

I have worked on many projects where users want to add their own data to a map, but their data is rarely in the right format. This library makes it as easy as adding a csv:// before the file path to bring a csv file in.

There are a lot of Geospatial File Formats out there, this library is intended to serve the most common formats (CSV, KML, GPX, Topojson, OSM) without creating a huge library. There are other formats I would like to support, but they will be available in different libraries.

External Libraries 📚

This project would not be possible if it weren’t for three core libraries that drive it:

I’d also like to thank the Mapbox🚀 and MapLibre teams for creating such a great project that is easily extendable.

Usage 🛠️

<script src="https://loc8.us/maplibre-gl-vector-text-protocol/dist/maplibre-gl-vector-text-protocol.js"></script>

// Add all types
VectorTextProtocol.addProtocols(maplibregl);

// Individual protocols can be added as well
maplibregl.addProtocol('csv', VectorTextProtocol);
maplibregl.addProtocol('kml', VectorTextProtocol);

Examples ⚙️