maplibre_gl

Due to the changes of mapbox terms of use. This is a fork of module https://www.drupal.org/project/mapbox_gl/ to use maplibre instead of mapbox , more to read in https://www.maptiler.com/news/2021/01/maplibre-mapbox-gl-open-source-fork/ and https://maplibre.org/maplibre-gl-js/docs/

Initial code for integration with Maplibre GL JS.

This is an API only module. There is no UI. Maps can be generated using hook_maplibre_gl_info() and calling the render method.

popup should either be "popup" to display the layer properties in a popup, or the ID of a separate element in which to display the information. e.g. "my-properties-div".

"My Locations" in the example below is a tile set created within Mapbox Studio (or uploaded). The URL includes the "Map ID" found on the Tileset's page.

e.g.

function hook_maplibre_gl_map_info() {
  // For options, see: https://maplibre.org/maplibre-gl-js/docs/API/
  return [
    'Streets' =>
    [
      'access_token' => '<Your access token>',
      'options' => [
        'container' => 'mapv2',
        'style' => 'https://api.maptiler.com/maps/basic-v2/style.json',
        'zoom' => 6,
        'center' => [146.315918, -41.640079],
      ],
      'config' =>
      [
        'height' => '400px',
        'popup' => 'popup',
        'controls' =>
        [
          'NavigationControl' => 'top-left',
          'AttributionControl' => [
            'compact' => true
          ],
          'MaplibreGeocoder' => [
            'accessToken' => '<Your access token>'
          ]
        ]
      ],
      'layers' =>
      [
        [
          'id' => 'Ports',
          'type' => 'circle',
          'source' => [
            'type' => 'geojson',
            'data' => 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_ports.geojson'
          ]
        ],
        [
          'id' => 'Terrain',
          'type' => 'line',
          'source' =>
          [
            'type' => 'vector',
            'url' => 'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
          ],
          'source-layer' => 'contour',
          'layout' => [
            'line-join' => 'round',
            'line-cap' => 'round',
          ],
          'paint' => [
            'line-color' => '#ff69b4',
            'line-width' => 1
          ],
          [
          'id' => 'My Locations',
          'type' => 'circle',
          'source' => [
            'type' => 'vector',
            'url' => 'maplibre://companyname.cj9s1qkic03un32plq1klqfms-5c4qn'
          ],
          'source-layer' => 'My_Locations_Tileset'
        ]
      ]
    ]
  ];
}

To display the map:

use Drupal\maplibre_gl\Controller\MaplibreGlController;

$map = MaplibreGlController::renderMap('Streets');

Drupal Content as Source Data

To use Drupal content as source data for a layer, create a path with Maplibre compatible output. For example, create a View with GeoJSON output.

e.g. https://www.mysite.com/my-locations.geojson