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;
    lef:25%;
    top:0;
    bottom:0;
    width: 75%;
}
 
     .mapboxgl-popup {
        max-width: 250px;
       /font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
       
       .map-overlay {
    position: absolute;
    width: 25%;
    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: 10px;
    margin: 0;
}

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

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

.map-overlay .listing > * {
    display: block;
    padding: 5px 10px;
    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;

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: [31.728, 3.691], // starting position
    zoom: 2 // starting zoom
});

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)
    });

    // 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-points",
        "type": "symbol",
        "source": "earthquakes",
        "filter": ["!has", "point_count"],
     "layout": {
	        	"icon-image":"marker-15",
	        	"icon-size":1,
	        	"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
            "text-field": "{title}",
	          "text-offset": [0, 0.6],
	          "text-anchor": "top",
        }
    });
// Display the earthquake data in three layers, each filtered to a range of
    // count values. Each range gets a different fill color.
    var layers = [
        [20, '#f28cb1'],
        [10, '#b4f175'],
        [0, '#ccc']
    ];

    layers.forEach(function (layer, i) {
        map.addLayer({
            "id": "cluster-" + i,
            "type": "circle",
       ...