baileykane.co
this repo has no description
www.baileykane.co/
1import React, { useEffect } from "react";
2import mapboxgl from "mapbox-gl";
3
4export default function BaseMap(): React.ReactElement {
5 mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN;
6
7 useEffect(() => {
8 const map = new mapboxgl.Map({
9 container: "mapContainer",
10 style: "mapbox://styles/bk610/ckz729y46001t14uvxg7zuqpf", // My custom style, from Mapbox Studio configuration
11 center: [-71.95359716485645, 43.425838945936015], // Centered on Pleasant Lake
12 zoom: 9,
13 });
14
15 map.addControl(
16 // Add Fullscreen element. https://docs.mapbox.com/mapbox-gl-js/api/markers/#fullscreencontrol
17 new mapboxgl.FullscreenControl()
18 );
19
20 map.addControl(
21 // Add Navigation elements. https://docs.mapbox.com/mapbox-gl-js/api/markers/#navigationcontrol
22 new mapboxgl.NavigationControl()
23 );
24
25 map.addControl(
26 // Add Geolocate button to find users. https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol
27 new mapboxgl.GeolocateControl({
28 positionOptions: {
29 enableHighAccuracy: true,
30 },
31 trackUserLocation: true,
32 })
33 );
34
35 map.on("click", (event) => {
36 // If the user clicked on one of your markers, get its information.
37 const features = map.queryRenderedFeatures(event.point, {
38 layers: ["places-i-have-lived"],
39 });
40 if (!features.length) {
41 return;
42 }
43 const feature = features[0];
44
45 // console.log(feature);
46
47 // Code from the next step will go here.
48 const popup = new mapboxgl.Popup({ offset: [0, -15] })
49 .setLngLat(feature.geometry.coordinates)
50 .setHTML(
51 `<p className="mapboxgl-popup-content">${feature.properties.safe_address}, ${feature.properties.move_date}</p>`
52 )
53 .addTo(map);
54 });
55 });
56
57 return <div id="mapContainer" className="w-full h-full" />;
58}