custom sources for maplibre & mapbox
mapscr
allows the use of custom source formats in maplibre-gl-js / mapbox-gl-js maps. FlatGeobuf, Geobuf and TopoJSON are supported. All formats are first converted to GeoJSON and then loaded via the existing API. The additional effort in this intermediate step can be justified by the significantly smaller file sizes during loading.
The provided functions are not yet available on NPM because they are still experimental and subject to change.
Example with FlatGeobuf, Geobuf and TopoJSON Sources (source)
pnpm i https://github.com/indus/mapsrc
import addSourceTypeFGB from "mapsrc/packages/FGB";
let map = new maplibregl.Map({
//<map_options>
});
map.on("load", () => {
// add the custom source type once before using it
addSourceTypeFGB(map /*, () => { console.log("FGB ready")}*/);
map.addSource("us-counties", {
type: "flatgeobuf",
data: "./data/us-counties.fgb",
fgbProgressiv: 0.1, // optional
fgbFilter: [[-100, 35],[-50, 55]] // optional
});
});
fgbProgressiv
will update the map in steps during downloads.
0.3
will update the map when 30%, 60%, 90% and 100% of the features are loaded).30
will update the map when 30, 60, 90, ... and 100% of the features are loaded)fgbFilter
A spatial filter (see the flatgeobuf example). It takes a min-max object as used by the flatgeobuf library or a maplibre/mapbox LngLatBounds object or array.import addSourceTypeGPBF from "mapsrc/packages/GPBF";
let map = new maplibregl.Map({
//<map_options>
});
map.on("load", () => {
// add the custom source type once before using it
addSourceTypeGPBF(map /*, () => { console.log("GPBF ready")}*/);
map.addSource("de-counties", {
type: "geobuf",
data: "./data/de-counties.pbf"
});
});
import addSourceTypeTOPO from "mapsrc/packages/GPBF";
let map = new maplibregl.Map({
//<map_options>
});
map.on("load", () => {
// add the custom source type once before using it
addSourceTypeTOPO(map /*, () => { console.log("TOPO ready")}*/);
map.addSource("uk-counties", {
type: "topojson",
data: "./data/uk-counties.json",
topoFilter: "GBR_adm2" //optional
});
});
topoFilter
takes the place of the property object
in the functions of the topojson library.... If the specified object is a string, it is treated as topology.objects[object]. Then, if the object is a GeometryCollection, a FeatureCollection is returned, and each geometry in the collection is mapped to a Feature. ...