Mapbox gl markers clustering

attention implantation à la même adresse

by designworksinteractive

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.0.1/mapbox-gl-geocoder.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.0.1/mapbox-gl-geocoder.css">
<script src="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700"></script>
  <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.js"></script>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.css" rel="stylesheet" />
  <link href="https://api.mapbox.com/mapbox-assembly/v1.2.1/assembly.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

<div id='map'></div>
<div class='map-overlay'>
    <fieldset>
        <input id='feature-filter' type='text' placeholder='Filtrer les unités SHS' />
    </fieldset>
    <div id='feature-listing' class='listing'></div>
</div>

CSS

body { margin:0; padding:0; 
}
#map { position:absolute; top:0; bottom:0; width:100%; }
#map {
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width: 100%;
}
 
     .mapboxgl-popup {
        max-width: 350px;
       font: 12px 'Helvetica Neue', Arial, Helvetica, sans-serif;
           padding: 0;
    margin: 0;
    
       
       .map-overlay {
    position: absolute;
    width: 45%;
    top: 0;
    bottom: 0;
    left: 0;
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    background-color: #fff;
    max-height: 100%;
    overflow: hidden;
}

.map-overlay fieldset {
    display: none;
    background: #ddd;
    border: none;
    padding: 0;
    margin: 0;
}

.map-overlay input {
    display: block;
    border: none;
    width: 100%;
    border-radius: 3px;
    padding: 0;
    margin: 0;
}

.map-overlay .listing {
    overflow: auto;
    max-height: 100%;
}

.map-overlay .listing > * {
    display: block;
    padding: 0;
    margin: 0;
}

.map-overlay .listing a {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    color: #404;
    text-decoration: none;
    
}

.map-overlay .listing a:last-child {
    border: none;
}

.map-overlay .listing a:hover {
    background: #f0f0f0;
    }
    
    
    
    
    
    
   .cardmap {
	position: absolute;
margin-top:6px;
	margin-left:6px;
	cursor: pointer;
height:auto;
	width:180px;
	border-radius: 6px 6px 6px 6px ;
    transition: opacity 0.6s ease-in-out, fade 0.6s ease-in-out;
background-color:#fff;
  opacity:1;
	      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 8px 0 rgba(0, 0, 0, 0.15);
  @media (min-width: $breakpoints-1) {
	width:210px;
  }
  @media (min-width: $breakpoints-2) {
  	width:180px;
  }
  @media (min-width: $breakpoints-3) {
	width:210px;
  }
  @media (min-width: $breakpoints-4) {
  	width:10px;
  }
    @media (min-width: $breakpoints-5) {
  	width:10px;
  }
	&::before {
	}
	&.js-active {
	//true
color:$cl-trip-logic-2-active;
    //true	background: #bae0d2;
   ...

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiZHVlcm1hZWwiLCJhIjoiNTRmNjc2MjYzN2Y0NDk5ZjRjMTM1MDA2YjQzYTY4NjUifQ.zdJRPPXa8WvpcMZC1_RAyw';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/light-v9', //stylesheet location
center: [-82.34997950000002, 23.135253],
zoom: 13.2,
});

map.addControl(new MapboxGeocoder({
    accessToken: mapboxgl.accessToken
}));
map.on('load', function() {

    // Add a new source from our GeoJSON data and set the
    // 'cluster' option to true.
    map.addSource("earthquakes", {
        type: "geojson",
        // Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
        // from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
        data: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/135743/hotels.geojson",
        cluster: true,
        clusterMaxZoom: 14, // Max zoom to cluster points on
        clusterRadius: 40 // Radius of each cluster when clustering points (defaults to 50)
    });


 map.addLayer({
    id: 'unclustered-points',
    source: 'earthquakes',
    type: 'circle',
        "filter": ["!has", "point_count"],
    paint: {
      'circle-radius': 8,
      'circle-color': '#b4f175' ,
    },
  });


    // Use the earthquakes source to create five layers:
    // One for unclustered points, three for each cluster category,
    // and one for cluster labels.
    map.addLayer({
        "id": "unclustered-points2",
        "type": "symbol",
        "source": "earthquakes",
        "filter": ["!has", "point_count"],
     "layout": {
	        	"icon-image":"marker-15",
	        	"icon-size":0,
	        	"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
            "text-field": "{HOTEL}",
	          "text-offset": [0, 0.9],
	          "text-anchor": "top",
            "text-size": 11,
            "text-letter-spacing": 0.05,
            "text-transform": "uppercase",
            "icon-allow-overlap": true,
             ...