/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.css' rel='stylesheet' />
   <script src="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet.js"></script>
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<style>
    #menu {
        position: absolute;
        background: #fff;
        padding: 10px;
        font-family: 'Open Sans', sans-serif;
    }
</style>

<div id='map'></div>

<script id="jsbin-javascript">
mapboxgl.accessToken = 'pk.eyJ1IjoiaHUtbWFuIiwiYSI6ImNpcmZldHRnbDAwOXZnNW5rNGo3ZWFzMzMifQ.ueq_GdVWBB-xcHbPcA9HOQ';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    zoom: 19,
    pitch: 60,
    bearing: -50,
    center: [-71.0899, 42.372]
});
map.scrollZoom.disable();

var source = null;
map.on('load', function () {
  const { lng, lat } = map.getCenter();
  const url = `https://localhost/test?lng=${lng}&lat=${lat}`;
  source = new mapboxgl.GeoJSONSource({
      data: url
  });

  map.addSource('dots', source);
  map.addLayer({
    "id": "dots",
    "type": "symbol",
    "source": "dots",
    "layout": {
      "icon-image": "circle-11"
    },
    // "paint": {
    //   "fill-color": "#337fff"
    // }
  });
});

map.on('moveend',function(move) {
  const { lng, lat } = map.getCenter();
  const url = `https://localhost/test?lng=${lng}&lat=${lat}`;

  map.getSource('dots').setData(url);
});

console.log(map);
</script>

<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.js'><\/script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.css' rel='stylesheet' />
   <script src="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet.js"><\/script>
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<style>
    #menu {
        position: absolute;
        background: #fff;
        padding: 10px;
        font-family: 'Open Sans', sans-serif;
    }
</style>

<div id='map'></div>

</body>
</html>
</script>


<script id="jsbin-source-javascript" type="text/javascript">mapboxgl.accessToken = 'pk.eyJ1IjoiaHUtbWFuIiwiYSI6ImNpcmZldHRnbDAwOXZnNW5rNGo3ZWFzMzMifQ.ueq_GdVWBB-xcHbPcA9HOQ';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    zoom: 19,
    pitch: 60,
    bearing: -50,
    center: [-71.0899, 42.372]
});
map.scrollZoom.disable();

var source = null;
map.on('load', function () {
  const { lng, lat } = map.getCenter();
  const url = `https://localhost/test?lng=${lng}&lat=${lat}`;
  source = new mapboxgl.GeoJSONSource({
      data: url
  });

  map.addSource('dots', source);
  map.addLayer({
    "id": "dots",
    "type": "symbol",
    "source": "dots",
    "layout": {
      "icon-image": "circle-11"
    },
    // "paint": {
    //   "fill-color": "#337fff"
    // }
  });
});

map.on('moveend',function(move) {
  const { lng, lat } = map.getCenter();
  const url = `https://localhost/test?lng=${lng}&lat=${lat}`;

  map.getSource('dots').setData(url);
});

console.log(map);
</script></body>
</html>

## jsbin.wuwugu.js
mapboxgl.accessToken = 'pk.eyJ1IjoiaHUtbWFuIiwiYSI6ImNpcmZldHRnbDAwOXZnNW5rNGo3ZWFzMzMifQ.ueq_GdVWBB-xcHbPcA9HOQ';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    zoom: 19,
    pitch: 60,
    bearing: -50,
    center: [-71.0899, 42.372]
});
map.scrollZoom.disable();

var source = null;
map.on('load', function () {
  const { lng, lat } = map.getCenter();
  const url = `https://localhost/test?lng=${lng}&lat=${lat}`;
  source = new mapboxgl.GeoJSONSource({
      data: url
  });

  map.addSource('dots', source);
  map.addLayer({
    "id": "dots",
    "type": "symbol",
    "source": "dots",
    "layout": {
      "icon-image": "circle-11"
    },
    // "paint": {
    //   "fill-color": "#337fff"
    // }
  });
});

map.on('moveend',function(move) {
  const { lng, lat } = map.getCenter();
  const url = `https://localhost/test?lng=${lng}&lat=${lat}`;

  map.getSource('dots').setData(url);
});

console.log(map);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title></title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.css' rel='stylesheet' />
	<script src="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet.js"></script>
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>

	<style>
	#menu {
	position: absolute;
	background: #fff;
	padding: 10px;
	font-family: 'Open Sans', sans-serif;
	}
	</style>

	<div id='map'></div>

	<script id="jsbin-javascript">
	mapboxgl.accessToken = 'pk.eyJ1IjoiaHUtbWFuIiwiYSI6ImNpcmZldHRnbDAwOXZnNW5rNGo3ZWFzMzMifQ.ueq_GdVWBB-xcHbPcA9HOQ';
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/light-v9',
	zoom: 19,
	pitch: 60,
	bearing: -50,
	center: [-71.0899, 42.372]
	});
	map.scrollZoom.disable();

	var source = null;
	map.on('load', function () {
	const { lng, lat } = map.getCenter();
	const url = `https://localhost/test?lng=${lng}&lat=${lat}`;
	source = new mapboxgl.GeoJSONSource({
	data: url
	});

	map.addSource('dots', source);
	map.addLayer({
	"id": "dots",
	"type": "symbol",
	"source": "dots",
	"layout": {
	"icon-image": "circle-11"
	},
	// "paint": {
	// "fill-color": "#337fff"
	// }
	});
	});

	map.on('moveend',function(move) {
	const { lng, lat } = map.getCenter();
	const url = `https://localhost/test?lng=${lng}&lat=${lat}`;

	map.getSource('dots').setData(url);
	});

	console.log(map);
	</script>

	<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title></title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.js'><\/script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.css' rel='stylesheet' />
	<script src="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet.js"><\/script>
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>

	<style>
	#menu {
	position: absolute;
	background: #fff;
	padding: 10px;
	font-family: 'Open Sans', sans-serif;
	}
	</style>

	<div id='map'></div>

	</body>
	</html>
	</script>


	<script id="jsbin-source-javascript" type="text/javascript">mapboxgl.accessToken = 'pk.eyJ1IjoiaHUtbWFuIiwiYSI6ImNpcmZldHRnbDAwOXZnNW5rNGo3ZWFzMzMifQ.ueq_GdVWBB-xcHbPcA9HOQ';
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/light-v9',
	zoom: 19,
	pitch: 60,
	bearing: -50,
	center: [-71.0899, 42.372]
	});
	map.scrollZoom.disable();

	var source = null;
	map.on('load', function () {
	const { lng, lat } = map.getCenter();
	const url = `https://localhost/test?lng=${lng}&lat=${lat}`;
	source = new mapboxgl.GeoJSONSource({
	data: url
	});

	map.addSource('dots', source);
	map.addLayer({
	"id": "dots",
	"type": "symbol",
	"source": "dots",
	"layout": {
	"icon-image": "circle-11"
	},
	// "paint": {
	// "fill-color": "#337fff"
	// }
	});
	});

	map.on('moveend',function(move) {
	const { lng, lat } = map.getCenter();
	const url = `https://localhost/test?lng=${lng}&lat=${lat}`;

	map.getSource('dots').setData(url);
	});

	console.log(map);
	</script></body>
	</html>