Maps for the web, without the baggage.

Mapkern GL JS draws vector tiles, raster tiles, GeoJSON and 3D terrain with WebGL2. It has no dependencies, it reads the styles written for MapLibre and Mapbox as they are, and it can build its own street map tiles from OpenStreetMap data.

Get started See examples

A map in a few lines

Install it from GitHub:

npm install github:grangedevgroup-code/mapkern-gl-js

Then give it a container. That's the whole world, the same map you see above, with no tile server or API key:

import * as mapkern from "mapkern-gl";

const map = new mapkern.Map({ container: "map" });

Your own data goes on top once the map has loaded:

map.on("load", () => {
  map.addSource("places", { type: "geojson", data: "places.geojson" });
  map.addLayer({ id: "places", type: "circle", source: "places", paint: { radius: 7, color: "#246a50" } });
});

Any style, or your own

The map above is OpenFreeMap's Liberty style, loaded as it is. Point Mapkern at any other style URL, or run npx mapkern-tiles on an OpenStreetMap extract and host the single file it makes anywhere.

Live data

Replace GeoJSON while the map runs and the old data stays up until the new tiles are ready, so moving things never flicker.

No empty squares

While you pan and zoom, Mapkern fills gaps with tiles it already has from other zoom levels and loads what's on screen first.