Mapbox GL

Initial code for integration with Mapbox GL JS.

This is an API only module. There is no UI. Maps can be generated using hook_mapbox_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_mapbox_gl_map_info() {
  // For options, see: https://www.mapbox.com/mapbox-gl-js/api/
  return [
    'Streets' =>
    [
      'access_token' => '<Your access token>',
      'options' => [
        'container' => 'mapbox-streets',
        'style' => 'mapbox://styles/mapbox/streets-v9',
        'zoom' => 6,
        'center' => [146.315918, -41.640079],
      ],
      'config' =>
      [
        'height' => '400px',
        'popup' => 'popup',
        'controls' =>
        [
          'NavigationControl' => 'top-left',
          'AttributionControl' => [
            'compact' => true
          ],
          'MapboxGeocoder' => [
            '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' => 'mapbox://mapbox.mapbox-terrain-v2',
          ],
          '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' => 'mapbox://companyname.cj9s1qkic03un32plq1klqfms-5c4qn'
          ],
          'source-layer' => 'My_Locations_Tileset'
        ]
      ]
    ]
  ];
}

To display the map:

use Drupal\mapbox_gl\Controller\MapboxGlController;

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

Drupal Content as Source Data

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

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