Skip to content

Instantly share code, notes, and snippets.

@yuletide

yuletide/index.html

Last active May 29, 2020 21:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yuletide/e89b4921d2dc87bf6de80c09f7aadde5 to your computer and use it in GitHub Desktop.
Save yuletide/e89b4921d2dc87bf6de80c09f7aadde5 to your computer and use it in GitHub Desktop.
Download ZIP
Mapbox Swap Studio Source for GeoJSON
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Swap Studio Source for GeoJSON</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="shortcut icon"
href="https://static-assets.mapbox.com/branding/favicon/v1/favicon.ico"
type="image/x-icon"
/>
<!-- Mapbox GL-JS CSS -->
<link
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css"
rel="stylesheet"
/>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.js"></script>
<!-- Custom styles -->
<link
href="https://api.mapbox.com/mapbox-assembly/v0.24.0/assembly.min.css"
rel="stylesheet"
/>
<script
async
defer
src="https://api.mapbox.com/mapbox-assembly/v0.24.0/assembly.js"
></script>
<style>
/* Add your custom styles here. */
.button-div {
z-index: 999;
position: absolute;
top: 10px;
right: 10px;
}
</style>
</head>
<body>
<div class="viewport-full relative clip">
<div class="button-div">
<button class="btn" id="swapButton">Swap Sources</button>
</div>
<div id="map" class="viewport-full absolute top left right bottom"></div>
</div>
<script>
mapboxgl.accessToken =
"pk.eyJ1IjoieXVsZXRpZGUiLCJhIjoiY2thZnZwZDExMDBxYjJ6cW5qa3Q4bWk5ayJ9.rcrHq-Oo0a1YLt9MEkwEZA";
const map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/yuletide/ckafvm8av038v1imlcoq41l4c?fresh=true",
center: [0, 0],
zoom: 1
});
map.on("load", () => {
map.addSource("geojson", {
type: "geojson",
data:
"https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_ports.geojson"
});
console.log("Map is ready");
// map.setStyle(style);
});
const swapButton = document.getElementById("swapButton");
swapButton.onclick = swapSources;
function swapSources() {
const style = map.getStyle();
const placesLayer = style.layers.find(item => item.id === "places");
console.log(placesLayer);
map.removeLayer("places");
placesLayer.source = "geojson";
delete placesLayer["source-layer"];
map.addLayer(placesLayer);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment