maprc

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.

Demo

Example with FlatGeobuf, Geobuf and TopoJSON Sources
(source)

Install

pnpm i https://github.com/indus/mapsrc

Usage

FlatGeobuf

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-1] will be taken as a percentage of the full feature count (e.g. 0.3 will update the map when 30%, 60%, 90% and 100% of the features are loaded).
  • [>1] will be taken as feature count. (e.g. 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.

Geobuffer

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"
  });
});

TopoJSON

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. ...