frodrigo/gist:588c5054eb20d0940adc5783f3f38ada

## gistfile1.txt
<html>

<head>
  <script src='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>
  <link href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' rel='stylesheet' />
</head>

<body>
  <div id='map' style='width: 400px; height: 300px;'></div>
  <button id="switch">switch</button>
  <script>
    function setLayerSource(layerId, source, sourceLayer) {
      const oldLayers = map.getStyle().layers;
      const layerIndex = oldLayers.findIndex(l => l.id === layerId);
      const layerDef = oldLayers[layerIndex];
      const before = oldLayers[layerIndex + 1] && oldLayers[layerIndex + 1].id;
      layerDef.source = source;
      if (sourceLayer) {
        layerDef['source-layer'] = sourceLayer;
      }
      map.removeLayer(layerId);
      map.addLayer(layerDef, before);
    }

    var map = new maplibregl.Map({
      container: 'map',
      style: {
        version: 8,
        sources: {
          carto: {
            type: 'raster',
            tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
            tileSize: 256,
            maxzoom: 19,
          },
          multipoints: {
            type: 'geojson',
            cluster: true,
            data: {
              type: "FeatureCollection",
              features: [
                {
                  type: "Feature",
                  geometry: {
                    type: "MultiPoint",
                    coordinates: [[0, 0], [1, 1]]
                  }
                },
                {
                  type: "Feature",
                  geometry: {
                    type: "Point",
                    coordinates: [-1, -1]
                  }
                }
              ]
            }
          },
        },
        layers: [
          {
            id: 'background',
            type: 'raster',
            source: 'carto',
          },
          {
            id: 'cluster',
            type: 'point',
            source: 'multipoints',
            type: 'circle'
          }
        ]
      },
      center: [0, 0],
      zoom: 5
    });
  </script>
</body>

</html>
	<html>

	<head>
	<script src='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>
	<link href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' rel='stylesheet' />
	</head>

	<body>
	<div id='map' style='width: 400px; height: 300px;'></div>
	<button id="switch">switch</button>
	<script>
	function setLayerSource(layerId, source, sourceLayer) {
	const oldLayers = map.getStyle().layers;
	const layerIndex = oldLayers.findIndex(l => l.id === layerId);
	const layerDef = oldLayers[layerIndex];
	const before = oldLayers[layerIndex + 1] && oldLayers[layerIndex + 1].id;
	layerDef.source = source;
	if (sourceLayer) {
	layerDef['source-layer'] = sourceLayer;
	}
	map.removeLayer(layerId);
	map.addLayer(layerDef, before);
	}

	var map = new maplibregl.Map({
	container: 'map',
	style: {
	version: 8,
	sources: {
	carto: {
	type: 'raster',
	tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
	tileSize: 256,
	maxzoom: 19,
	},
	multipoints: {
	type: 'geojson',
	cluster: true,
	data: {
	type: "FeatureCollection",
	features: [
	{
	type: "Feature",
	geometry: {
	type: "MultiPoint",
	coordinates: [[0, 0], [1, 1]]
	}
	},
	{
	type: "Feature",
	geometry: {
	type: "Point",
	coordinates: [-1, -1]
	}
	}
	]
	}
	},
	},
	layers: [
	{
	id: 'background',
	type: 'raster',
	source: 'carto',
	},
	{
	id: 'cluster',
	type: 'point',
	source: 'multipoints',
	type: 'circle'
	}
	]
	},
	center: [0, 0],
	zoom: 5
	});
	</script>
	</body>

	</html>