Mapbox gl markers clustering

attention implantation à la même adresse

by msjade

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.css">
<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://api.mapbox.com/mapbox-assembly/v0.3.0/assembly.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-assembly/v0.3.0/assembly.min.css">
<script src="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700"></script>
<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>

  <!-- Nav tabs -->
                        <div class="sidebar-tabs">
                            <ul role="tablist">
                                <li><a href="#home" role="tab"><i class="fa fa-pencil"></i></a></li>

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;
    } 
    #sidebar {
    position: absolute;
    height:  650px;
    top: 10px; 
    right: 10px;
    z-index: 1000;
    padding: 1em;
    background: white;
  }

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: [9.407, 7.401], // starting position
    zoom: 5 // starting zoom
});
var nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'top-right');


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://gist.githubusercontent.com/msjade/a19a9938cdb2692c19536fb165ba408a/raw/3590ec902b8d0e5f7784df4bc5402d0565e2d725/lga.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"
        }
    });
// 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, '#f1f075'],
        [0, '#51bbd6']
    ];

    layers.forEach(function (layer, i) {
        map.addLayer({
            "id": "cluster-" + i,
            "type": "circle",
            "source": "earthquakes",
            "paint": {
                "circle-color": layer[1],
                "circle-radius": 18
...