mapbox gl js グローエフェクト

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/2.6.1/mapbox-gl.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/6.5.0/turf.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css">
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.4.0/mapbox-gl-compare.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.4.0/mapbox-gl-compare.css">
<div id="comparison-container">
  <div id="map" class='map'>

  </div>
  <div id="map2" class='map'>

  </div>
</div>

CSS

html, body {margin: 0}
body {
  overflow: hidden;
}

body * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoieWFuby1oLXduaSIsImEiOiJja3gxbGQzcXExZnVyMnFxOW9iNGJzZzR0In0.pDjoeUpFb2A2zEfB-ZFa6Q'

const points = turf.randomPoint(10000, {
  bbox: [138.5, 35.6, 140.5, 37]
})

const options = {
  style: 'mapbox://styles/mapbox/dark-v9',
  center: [139.5, 36.2],
  zoom: 7.5,
  maxZoom: 15,
}
const map = new mapboxgl.Map({
  container: 'map',
  ...options
});
const map2 = new mapboxgl.Map({
  container: 'map2',
  ...options
});

const compare = new mapboxgl.Compare(map2, map, '#comparison-container');

map.on('load', () => {
  map.addSource('points', {
    type: 'geojson',
    data: points
  })
  map.addLayer({
    id: 'Glowy things 1',
    source: 'points',
    type: 'circle',
    paint: {
      'circle-color': '#6ff77c',
      'circle-radius': 10,
      'circle-blur': 3,
      'circle-opacity': 0.4
    }
  })
  map.addLayer({
    id: 'Glowy things 2',
    source: 'points',
    type: 'circle',
    paint: {
      'circle-color': '#00ff37',
      'circle-radius': 5,
      'circle-blur': 3,
      'circle-opacity': 0.4
    }
  })
  map.addLayer({
    id: 'Glowy things 3',
    source: 'points',
    type: 'circle',
    paint: {
      'circle-color': '#ffffff',
      'circle-radius': 1,
      'circle-blur': 0,
      'circle-opacity': 1
    }
  })

})

map2.on('load', () => {
  map2.addSource('points', {
    type: 'geojson',
    data: points
  })
  map2.addLayer({
    id: 'Glowy things 1',
    source: 'points',
    type: 'circle',
    paint: {
      'circle-color': '#a6fcb0',
      'circle-radius': 1
    }
  })
})