Create the maplibre map

back to Map.vue or back to Maplibre GL JS

Creating the map

Atlas uses MapLibre GL JS v4.x.x

MapLibre is an open source project, forked from the last open source version of Mapbox GL JS

When searching for help on the web, much of the old help about debugging Mapbox can still be tried and often works.

The basic map initiation code for any MapLibre project (and setting the map to not be tabbable) has to be run when the map component is mounted:

onMounted(async () => {
  // create the maplibre map
  let currentTopicMapStyle = route.params.topic ? $config.topicStyles[route.params.topic] : 'pwdDrawnMapStyle';
  let zoom = route.params.address ? 17 : 12;

  map = new maplibregl.Map({
    container: 'map',
    style: $config[currentTopicMapStyle],
    center: $config.cityCenterCoords,
    zoom: zoom,
    minZoom: 6,
    maxZoom: 22,
    attributionControl: false,
  });

  map.on('load', () => {
    let canvas = document.querySelector(".maplibregl-canvas");
    canvas.setAttribute('tabindex', -1);
  })

Map sources

A map source is a data source that a map uses. It is usually "tiles" for a map background, and "geojson" with geometry type "Point" or "Polygon" for map features.

Map layers

A map layer uses data from a map source, and describes how to style it on the map.