Install Valhalla Plugin

Now, your valhalla server is ready. In this section, we are going to add mapbox-gl-valhalla plugin into your map. So you can use valhalla Isochrone API easily.

  • Installation
npm i @watergis/mapbox-gl-valhalla --save
  • Usage
import { MapboxValhallaControl} from "@watergis/mapbox-gl-valhalla";
import '@watergis/mapbox-gl-valhalla/css/styles.css';
import mapboxgl from 'mapbox-gl';

const map = new mapboxgl.Map();
map.addControl(new MapboxValhallaControl(
  'http://localhost:8002',
  {
    Contours: [
      {
        time: 3,
        distance: 1,
        color: 'ff0000',
      },
      {
        time: 5,
        distance: 2,
        color: 'ffff00',
      },
      {
        time: 10,
        distance: 3,
        color: '0000ff',
      },
    ]
  }
), 'top-right');

  • Time Isochrone Map image

  • Distance Isochrone Map image

Now, Isochrone function was added into your Mapbox GL application!