How to configure/enable markercluster on a custom map?

Created on 29 February 2024, 10 months ago
Updated 17 March 2024, 9 months ago

Hello, I have a leaflet map rendering just fine with feature points and markers but I'm wondering if anyone can help convert this to a markercluster map. The map is generated on a form page. Thanks. Here's my hook_leaflet_map_info:

function nsc_leaflet_map_info() {
   return [
      'nsc_map' => [
         'label' => 'Dev NSC',
         'description' => t('This is the NSC map style.'),
         'settings' => [
            'dragging' => TRUE,
            'touchZoom' => TRUE,
            'scrollWheelZoom' => TRUE,
            'doubleClickZoom' => TRUE,
            'zoomControl' => TRUE,
            'zoomControlPosition' => 'topleft',
            'attributionControl' => TRUE,
            'trackResize' => TRUE,
            'fadeAnimation' => TRUE,
            'zoomAnimation' => TRUE,
            'closePopupOnClick' => TRUE,
            'minZoom' => 1,
            'maxZoom' => 18,
            'zoom' => 2,
            'layerControl' => TRUE,
            'layerControlOptions' => [
               'position' => 'topright',
            ],
            'leaflet_markercluster' => [
               'options' => [
                  'maxClusterRadius' => 50,
                  'disableClusteringAtZoom' => 2,
                  'spiderfyOnMaxZoom' => TRUE,
                  'showCoverageOnHover' => TRUE,
                  'removeOutsideVisibleBounds' => FALSE,
                  'singleMarkerMode' => TRUE
               ]
            ],
         ],
         'layers' => [
            'layer' => [
               'type' => 'sat',
               'ext' => 'jpg',
               'urlTemplate' => '//server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
               'options' => [
                  'attribution' => 'Map tiles © Esri',
                  'noWrap' => FALSE,
               ],
            ],
         ],
         'plugins' => [],
      ],
   ];
}

Currently my map points are generated by added to a points array like so:

$points[] = array(
				'type' => 'point',
				'lat' => $lat,
				'lon' => $lng,
				'popup' => [
				   "content" => '',
				   "control" => '1',
				   "options" => '{"maxWidth":"300","minWidth":"50","autoPan":true}', 
				   "value" => '<p>'.$n->getTitle().'</p>',
				],
				'leaflet_id' => 'point-' . $n->id(). '-' . $lat,
			);

And I'm pushing the map out to a form element like this:
$form['map'] = \Drupal::service('leaflet.service')->leafletRenderMap($map_info, $map_points, '480px');

💬 Support request
Status

Fixed

Version

10.2

Component

Miscellaneous

Created by

🇺🇸United States dmudie

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

Comments & Activities

Production build 0.71.5 2024