How to have multilayers icon show up?

Created on 16 August 2020, over 4 years ago
Updated 3 November 2023, about 1 year ago

I am new to Leaflet, this question might have been answered somewhere else, but I couldn't find an answer after some research.

With Leaflet view integration, how can I have the multi-layer icon show up? I noticed there is a multi-layer icon at top right corner at the demo. I want to show features in multiple layers, what should I do?

Thanks in advance.

💬 Support request
Status

Fixed

Version

10.2

Component

Documentation

Created by

🇨🇦Canada bluemoonj

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇩🇰Denmark ressa Copenhagen

    Thanks @itamair, your answers are always detailed and useful, and I really appreciate it.

    Since 2020, things have changed. Stamen tiles have moved to Stadia, and Hydda is not available. Here's a version which works in Nov 2023, based on the merge request in 🐛 Migration Guide for Stamen Map Tile Users Active .

    After adding this to your custom module, clear cache, and remember to enable "Multilayers" in your View under Format > Leaflet Map > Settings > Leaflet Map Tiles Layer.

    /**
     * Implements hook_leaflet_map_info().
     */
    function custom_module_leaflet_map_info() {
    
      $map_info['multilayers'] = [
        'label' => 'Multilayers',
        'description' => t('Multilayers'),
        'settings' => [
          'dragging' => TRUE,
          'touchZoom' => TRUE,
          'scrollWheelZoom' => TRUE,
          'doubleClickZoom' => TRUE,
          'zoomControl' => TRUE,
          'attributionControl' => TRUE,
          'trackResize' => TRUE,
          'fadeAnimation' => TRUE,
          'zoomAnimation' => TRUE,
          'closePopupOnClick' => TRUE,
          'minZoom' => 2,
          'maxZoom' => 20,
          'zoom' => 15,
          'layerControl' => TRUE,
          'layerControlOptions' => [
            'position' => 'topright',
          ],
        ],
        'layers' => [
          'OpenTopoMap' => [
            'urlTemplate' => '//{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
            'options' => [
              "minZoom" => 0,
              "maxZoom" => 18,
              "attribution" => 'Kartendaten: © <a href="https://openstreetmap.org/copyright">OpenStreetMap</a>-Mitwirkende, SRTM | Kartendarstellung: © <a href="http://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
            ],
          ],
          'Stamen Watercolor' => [
            'urlTemplate' => '//tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg',
              'options' => [
              "minZoom" => 0,
              "maxZoom" => 18,
              "attribution" => '&copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a> <a href="https://stamen.com/" target="_blank">&copy; Stamen Design</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/about" target="_blank">OpenStreetMap</a> contributors',
            ],
          ],
          'Google Roads' => [
            'type' => 'google',
            'urlTemplate' => '//mt{s}.googleapis.com/vt?x={x}&y={y}&z={z}',
            'options' => [
              'attribution' => 'Map data &copy; <a href="https://googlemaps.com">Google</a>',
              'detectRetina' => FALSE,
              'subdomains' => [0, 1, 2, 3],
            ],
          ],
    
        ],
      ];
    
      return $map_info;
    
    }
    
Production build 0.71.5 2024