Live Demo: UCSB Campus Map
The site renders a map of the UCSB campus with custom styling and the ability to add user-made points on the map.
The app was created using MapBox GL JS and React.
The initial coordinates of the map was set to Santa Barbara's location in the component state.
const MapScene = () => {
// MapBox react component
const mapContainer = useRef(null);
const map = useRef(null);
const [lng, setLng] = useState(-119.8499);
const [lat, setLat] = useState(34.4118);
const [zoom, setZoom] = useState(15.5);
return (
<div id='mapbox'>
<div className="sidebar">
Longitude: {lng} | Latitude: {lat} | Zoom: {zoom}
</div>
<div ref={mapContainer} className="map-container" />
</div>
);
}
MapBox Studio allows for custom styling of the map. I decided to go with purple and green as the main coloring for the site.
useEffect(() => {
if (map.current) return; // initialize map only once
map.current = new mapboxgl.Map({
container: mapContainer.current,
style: 'mapbox://styles/asapcrafter/ckuuf5ndeqvr017pjaxtpgsra', // style URL
center: [lng, lat],
zoom: zoom
});
});