Created
July 19, 2024 19:06
-
-
Save jasloe/8991ec293a031ddf96688420eb0bfc8d to your computer and use it in GitHub Desktop.
Mapbox skeleton
This file contains 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'; | |
| import { Node } from '@/types/vendor/Node'; | |
| export const initializeMap = ( | |
| container: HTMLElement | null, | |
| lng: number, | |
| lat: number, | |
| initialZoom: number, | |
| minZoom: number, | |
| maxZoom: number | |
| ): mapboxgl.Map => { | |
| mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN || ''; | |
| return new mapboxgl.Map({ | |
| container: container!, | |
| style: 'mapbox://styles/hemidemisemi/cly9jpmha00wu01p8goxobxvd', | |
| center: [lng, lat], | |
| zoom: initialZoom, | |
| minZoom: minZoom, | |
| maxZoom: maxZoom, | |
| projection: 'globe', | |
| }); | |
| }; | |
| export const addNavigationControl = (map: mapboxgl.Map) => { | |
| map.addControl(new mapboxgl.NavigationControl(), 'top-right'); | |
| }; | |
| export const addSkyLayer = (map: mapboxgl.Map) => { | |
| map.on('style.load', () => { | |
| map.addLayer({ | |
| id: 'sky', | |
| type: 'sky', | |
| paint: { | |
| 'sky-type': 'atmosphere', | |
| 'sky-atmosphere-sun': [0.0, 0.0], | |
| 'sky-atmosphere-sun-intensity': 0, | |
| }, | |
| }); | |
| }); | |
| }; | |
| export const addMarker = (map: mapboxgl.Map, lng: number, lat: number, text: string): mapboxgl.Marker => { | |
| const markerEl = document.createElement('div'); | |
| markerEl.style.backgroundColor = 'white'; | |
| markerEl.style.border = '1px solid black'; | |
| markerEl.style.borderRadius = '3px'; | |
| markerEl.style.padding = '5px'; | |
| markerEl.innerText = text; | |
| return new mapboxgl.Marker(markerEl).setLngLat([lng, lat]).addTo(map); | |
| }; | |
| export const updateMarkers = (map: mapboxgl.Map, nodes: Node[]): mapboxgl.Marker[] => { | |
| return nodes.map((node) => { | |
| return new mapboxgl.Marker().setLngLat([node.longitude, node.latitude]).addTo(map); | |
| }); | |
| }; | |
| export const removeMarkers = (markers: mapboxgl.Marker[]) => { | |
| markers.forEach((marker) => marker.remove()); | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment