Create a gist now

Instantly share code, notes, and snippets.

Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- note that this example loads jQuery in order to use its $.when and $.getJSON methods -->
<!-- These methods can be swapped for their equivalents if you're already using another library -->
<script src='https://code.jquery.com/jquery-3.1.1.min.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoidG1jdyIsImEiOiJIZmRUQjRBIn0.lRARalfaGHnPdRcc-7QZYQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-22.486052, 37.830348],
zoom: 2
});
map.on('load', function () {
// Load two GeoJSON files, using $.when to call a callback when
// both are loaded
$.when($.getJSON('a.geojson'), $.getJSON('b.geojson')).done(function(a, b) {
map.addSource("circles", {
"type": "geojson",
"data": {
type: 'FeatureCollection',
// concat combines arrays in JavaScript: here we're combining
// the arrays of features into one featurecollection
features: a[0].features.concat(b[0].features)
}
});
map.addLayer({
"id": "route",
"type": "circle",
"source": "circles",
"layout": {
},
"paint": {
"circle-radius": 10
}
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment