@trailstash/map-view v0.1.6

TrailStash MapView

An opinionated configuration-driven map viewer powered by MapLibre GL JS.

A basic example comparing plain MapLibre GL JS usage and via TrailStash MapView:

// MapLibre GL JS
import maplibregl from "maplibre-gl.js";

const map = new maplibregl.Map({
  container: "map",
  style: "https://overpass-ultra.trailsta.sh/style.json",
  zoom: 4,
  center: [-100, 40],
  attributionControl: false,
});
map.addControl(new NavigationControl());
map.addControl(
  new GeolocateControl({
    positionOptions: {
      enableHighAccuracy: true,
    },
    trackUserLocation: true,
  }),
  "bottom-right",
);

// TrailStash MapView
import MapView from "@trailstash/map-view";
const mapView = new MapView({
  map: {
    container: "map",
    style: "https://overpass-ultra.trailsta.sh/style.json",
    zoom: 4,
    center: [-100, 40],
    attributionControl: false,
  },
  controls: [
    { type: "NavigationControl" },
    {
      position: "bottom-right",
      type: "GeolocateControl",
      options: {
        positionOptions: {
          enableHighAccuracy: true,
        },
        trackUserLocation: true,
      },
    },
  ],
});

In early stages of development and derived from OpenBikeHero.

Hosted

There is a hosted version of the viewer at https://trailstash.gitlab.io/map-view/

It can load JS or JSON configs passed to the config search parameter.

EG: https://trailstash.gitlab.io/map-view/?config=./configs/minimal.js

Configs: