Last active
May 29, 2020 21:40
-
-
Save yuletide/e89b4921d2dc87bf6de80c09f7aadde5 to your computer and use it in GitHub Desktop.
Mapbox Swap Studio Source for GeoJSON
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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