Created
August 19, 2021 20:14
-
-
Save cigzigwon/905a65e6670101b67bfc2ee4151dee2b to your computer and use it in GitHub Desktop.
React useMapbox hook in ES6
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
import mapboxgl from 'mapbox-gl/dist/mapbox-gl-csp' | |
import MapboxWorker from 'worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker' // Load worker code separately with worker-loader | |
import 'mapbox-gl/dist/mapbox-gl.css' | |
export const useMapbox = (opts) => { | |
mapboxgl.workerClass = MapboxWorker | |
mapboxgl.accessToken = "public/private access token" | |
const init = (sources) => { | |
const [poisA, poisB, poisC] = sources | |
const map = new mapboxgl.Map(opts) | |
map.on('load', () => { | |
// defaults for map load event | |
}) | |
// add any other default event handlers for map (operate on sources) | |
return map | |
} | |
return init | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you for such a detailed breakdown of the code!