search

visgl / react-map-gl

React friendly API wrapper around MapboxGL JS
http://visgl.github.io/react-map-gl/
Other
7.78k stars 1.35k forks source link

[Bug] #1907

Closed wakywayne closed 2 years ago

wakywayne commented 2 years ago

Description

My map Is Not Loading The Styles In Production.

Expected Behavior

On Local Host:

desktopMap

In Production:

prodMap

Steps to Reproduce

Here is App Component

allEvents is just javascript Array of Object as provided Example Below

Array of Events:

  "data": [
      {
          "id": 3,
          "attributes": {
              "name": "Grappling House WAR Zone",
              "slug": "grappling-house-war-zone",
              "venue": "Grappling House",
              "address": "3000 Schoolhouse Road, Tallahassee, FL",
              "date": "2022-06-11T04:00:00.000Z",
              "time": "",
              "performers": "https://docs.google.com/spreadsheets/d/e/2PACX-1vRUZn4CZzv1AO-HVhuLXcWqzSwFINS8fbFQiKCIt2ZQlfBb2HFRbHGH_0XLmr2E6jMQCq9V_BAYZirN/pubhtml?gid=266563558&single=true",
              "description": "<h2><span style=\"\\&quot;box-sizing:\"><strong>WAR Zone events only take 2 hours.</strong></span></h2><h2><span style=\"\\&quot;box-sizing:\"><u>Most wrestlers will get 5-6 competitive matches!</u></span></h2><p><span style=\"\\&quot;box-sizing:\"><u><br></u></span></p><h2>Early Registration: $20</h2><h2>Registration week of the event (June 4th): $30</h2><h2>June 8th through June 10th: $40</h2><h2>Late Registration: $45 (last 24 hours before the event)</h2><h1><strong>Refund Policy:</strong></h1><p class=\"\\&quot;has-medium-font-size\\&quot;\">We guarantee refunds! If you cannot make the event, or are not satisfied with potential matchups, just send an email to WellRunTournaments@gmail.com and we will refund 100% of the tokens to your account so you can use them at a future event. If the event is taking place where WAR Zone is not popular, we will refund the cash to your credit card. If you cancel within the last 24 hours, there will be a $10 penalty.</p><h1>Register&nbsp;at:&nbsp;<a href=\"http://www.wrestlingrating.com/\" alt=\"www.WrestlingRating.com\">www.WrestlingRating.com</a></h1><h1>Registration instructions:</h1><p>There is a $10 fee to create an account if this is your first WAR Zone event.</p><p><strong>You will need a separate account for each wrestler.</strong></p><p></p><ol><li>Go to&nbsp;<a href=\"http://www.wrestlingrating.com/\" target=\"_blank\" alt=\"www.WrestlingRating.com\">www.WrestlingRating.com</a></li><li>If you have wrestled in a WAR Zone event before, skip to step 6.</li><li>Click “Sign up” from the menu (on cellphones the menu is the 3 lines in the top right corner of your screen).</li><li>Create your username&nbsp;<strong>(IN ALL LOWER CASE LETTERS!)&nbsp;</strong>and activate your account. Please use wrestler’s full name, example: johndoe</li><li>Create your wrestler profile.</li><li>Click “Buy Tokens” from the menu. Purchase 20 tokens.</li><li>Click “Register for an event” from the menu and then select the correct event.</li><li>Click the blue button that says “Click here to register for this event”</li><li>You will receive a confirmation message telling you that you’ve registered.</li></ol><p></p><h1><a href=\"https://docs.google.com/spreadsheets/d/e/2PACX-1vRnH3ev4eAENLT3sYswNuVUpjzVujgOuwMAoE1jxI3Ln1OAhxUkBgbiO3NexeFOmo2_D3EIbvFOQ_J4/pubhtml?gid=990559777&amp;single=true\" target=\"_blank\" alt=\"Team Scoreboard\">Team Scoreboard</a></h1><h1><a href=\"https://docs.google.com/spreadsheets/d/e/2PACX-1vRnH3ev4eAENLT3sYswNuVUpjzVujgOuwMAoE1jxI3Ln1OAhxUkBgbiO3NexeFOmo2_D3EIbvFOQ_J4/pubhtml?gid=992338921&amp;single=true\" target=\"_blank\" alt=\"Individual Leaderboard\" class=\"on\">Individual Leaderboard</a></h1><p><strong>Awards:</strong>&nbsp;</p><p><strong>Bronze</strong>&nbsp;– 2 wins<br><strong>Silver</strong>&nbsp;– 3 wins<br><strong>Gold</strong>&nbsp;– 4+ wins</p><p><strong>Contact:</strong>&nbsp;Jason Layton – 516 386 0225 – WARZoneHelpDesk@gmail.com</p><p><strong>Event information:<span>&nbsp;</span></strong>Jason Weslager – 724 984 2413 – grapplinghousewrestling@gmail.com</p>",
              "createdAt": "2022-06-02T16:54:11.636Z",
              "updatedAt": "2022-06-30T19:15:30.200Z",
              "publishedAt": "2022-06-02T16:54:11.630Z",
              "image": {
                  "data": null
              },
              "event_links": {
                  "data": [
                      {
                          "id": 14,
                          "attributes": {
                              "linkLabel": "30.384212733079234",
                              "linkUrl": "-84.22252527116406",
                              "createdAt": "2022-06-30T19:12:54.960Z",
                              "updatedAt": "2022-06-30T19:12:54.960Z",
                              "publishedAt": "2022-06-30T19:12:54.959Z"
                          }
                      }
                  ]
              },
              "event_videos": {
                  "data": [
                      {
                          "id": 5,
                          "attributes": {
                              "videoDescription": "How WAR Zone Works",
                              "iframeLink": "https://www.youtube.com/embed/d7nsH7wLME0",
                              "createdAt": "2022-06-09T15:10:42.441Z",
                              "updatedAt": "2022-06-09T15:10:42.441Z",
                              "publishedAt": "2022-06-09T15:10:42.440Z"
                          }
                      }
                  ]
              }
          }
      },
      {
          "id": 2,
          "attributes": {
              "name": "Iron Faith War Zone #10",
              "slug": "iron-faith-war-zone-10",
              "venue": "Iron Faith Wrestling Club",
              "address": "53 Venturi Ave Warwick RI 02888",
              "date": "2022-06-11T04:00:00.000Z",
              "time": "",
              "performers": "https://docs.google.com/spreadsheets/d/e/2PACX-1vSGhc-87QccKfat_UZ5lYtkOWStwj6WvNsVxqBMiK-sygCKB3Qh_Qy9Wj8gFYbfFDEdkTFOgN_Mnb2V/pubhtml?gid=266563558&single=true",
              "description": "<h2><span style=\"\\&quot;box-sizing:\"><strong>WAR Zone events only take 2 hours.</strong></span></h2><h2><span style=\"\\&quot;box-sizing:\"><u>Most wrestlers will get 5-6 competitive matches!</u></span></h2><h2><br class=\"\\&quot;Apple-interchange-newline\\&quot;\">Registration: $35</h2><h2>Late Registration: $45 (last 24 hours before the event)</h2><h1><strong>Refund Policy:</strong></h1><p class=\"\\&quot;has-medium-font-size\\&quot;\">We guarantee refunds! If you cannot make the event, or are not satisfied with potential matchups, just send an email to WellRunTournaments@gmail.com and we will refund 100% of the tokens to your account so you can use them at a future event. If the event is taking place where WAR Zone is not popular, we will refund the cash to your credit card. If you cancel within the last 24 hours, there will be a $10 penalty.</p><h1>Register&nbsp;at:&nbsp;<a href=\"http://www.wrestlingrating.com/\" target=\"_blank\" alt=\"www.WrestlingRating.com\">www.WrestlingRating.com</a></h1><h1>Registration instructions:</h1><p>There is a $10 fee to create an account if this is your first WAR Zone event.</p><p><strong>You will need a separate account for each wrestler.</strong></p><p></p><ol><li>Go to&nbsp;<a href=\"http://www.wrestlingrating.com/\" target=\"_blank\" alt=\"www.WrestlingRating.com\" class=\"on\">www.WrestlingRating.com</a></li><li>If you have wrestled in a WAR Zone event before, skip to step 6.</li><li>Click “Sign up” from the menu (on cellphones the menu is the 3 lines in the top right corner of your screen).</li><li>Create your username&nbsp;<strong>(IN ALL LOWER CASE LETTERS!)&nbsp;</strong>and activate your account. Please use wrestler’s full name, example: johndoe</li><li>Create your wrestler profile.</li><li>Click “Buy Tokens” from the menu. Purchase 35 tokens.</li><li>Click “Register for an event” from the menu and then select the correct event.</li><li>Click the blue button that says “Click here to register for this event”</li><li>You will receive a confirmation message telling you that you’ve registered.</li></ol><p></p><h1>Additional information:</h1><p class=\"\\&quot;has-medium-font-size\\&quot;\"><strong>Spectator Admission: $5</strong></p><h1>​<a target=\"_blank\" href=\"https://docs.google.com/spreadsheets/d/1MR-LDd2ssq4t3onCxdd3vfefEuwDfKQolLJsRp6-ci8/edit#gid=1669397200\" alt=\"Individual and Team Leaderboard\" class=\"on\">Individual and Team Leaderboard</a>​</h1><p><strong>Contact:</strong>&nbsp;Jason Layton – 516 386 0225 – WARZoneHelpDesk@gmail.com</p><p><strong>Event information:<span style=\"\\&quot;box-sizing:\">&nbsp;</span></strong>Ebed Jarrell – 401 489 0965 – ebed@ironfaith.com</p>",
              "createdAt": "2022-06-02T16:41:03.930Z",
              "updatedAt": "2022-06-11T05:39:44.748Z",
              "publishedAt": "2022-06-02T16:41:03.923Z",
              "image": {
                  "data": null
              },
              "event_links": {
                  "data": [
                      {
                          "id": 2,
                          "attributes": {
                              "linkLabel": "41.765134550224126",
                              "linkUrl": "-71.39718164232816",
                              "createdAt": "2022-06-29T21:29:05.214Z",
                              "updatedAt": "2022-06-29T21:29:05.214Z",
                              "publishedAt": "2022-06-29T21:29:05.208Z"
                          }
                      }
                  ]
              },
              "event_videos": {
                  "data": [
                      {
                          "id": 8,
                          "attributes": {
                              "videoDescription": "How WAR Zone Works",
                              "iframeLink": "https://www.youtube.com/embed/d7nsH7wLME0",
                              "createdAt": "2022-06-09T15:12:47.226Z",
                              "updatedAt": "2022-06-09T15:12:47.226Z",
                              "publishedAt": "2022-06-09T15:12:47.224Z"
                          }
                      }
                  ]
              }
          }
      },
      {
          "id": 10,
          "attributes": {
              "name": "Wrestling Camp For All Ages And Experience At Dynamic",
              "slug": "wrestling-camp-for-all-ages-and-experience-at-dynamic",
              "venue": "The Dynamic Wrestling Academy",
              "address": "415 Oser Ave, Suite H, Hauppauge, NY 11788",
              "date": null,
              "time": "",
              "performers": "",
              "description": "<p><span style=\"font-size: 22px;\"><a href=\"https://form.jotform.com/221664195787065\" alt=\"Click here to register!\" class=\"on\">Click here to register!</a></span>​<br></p><p><strong>Mat space:</strong>&nbsp;We have 3 mats with 28′ circles and an additional auxiliary wrestling room. There is more than 4,000 sqft of mat space, the building is 10,000sqft.</p><p><strong>Cost:</strong>&nbsp;$200</p><p><strong>Daily Schedule:&nbsp;</strong>(late pickup and early drop-off is available)</p><p>9 am – Technique session 1 and live wrestling</p><p>11:30 am – Lunch</p><p>12:30 pm – Technique session 2 and live wrestling</p><p>2:50 pm – Closing discussion</p><p>3 pm – Camp concludes</p><p><strong>Lunch:</strong>&nbsp;You can pack your own lunch or order pizza for $2.50/slice.</p><p><strong>Contact: wellruntournaments@gmail.com</strong></p><p><strong>Coaches: Alex Gomez: 3x&nbsp;</strong><b>NCAA All American and National Finalist for Ithaca College, 2x All State and NY State Finalist For Brentwood High School, 6x All County Wrestler&nbsp;</b></p><p><b><br></b></p>",
              "createdAt": "2022-06-02T17:35:43.050Z",
              "updatedAt": "2022-06-22T20:12:07.085Z",
              "publishedAt": "2022-06-02T17:35:43.047Z",
              "image": {
                  "data": null
              },
              "event_links": {
                  "data": []
              },
              "event_videos": {
                  "data": []
              }
          }
      }
  ],
import dynamic from 'next/dynamic'
import 'mapbox-gl/dist/mapbox-gl.css';

export default function HomePage({ events, allEvents }) {

  return (
<div style={{ marginBottom: "5rem" }}>
          <h5>Please Bare With Us As We Are Trying To Integrate A WAR Map</h5>
          {/* <NewMapBoxMap events={events} /> */}
          <Map allEvents={allEvents} />
        </div>
)
}

NewMapBoxMap

import * as React from 'react';
import Map, { Marker, Popup } from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
// Pasted Styles from mapbox into index

export default function NewMapBoxMap({ allEvents }) {

    const [selectedEvent, setSelectedEvent] = React.useState(null);

    React.useEffect(() => {
        const listener = e => {
            if (e.key === "Escape") {
                setSelectedEvent(null);
            }
        };
        window.addEventListener("keydown", listener);

        return () => {
            window.removeEventListener("keydown", listener);
        };
    }, []);

    return (
        <>

            <Map
                initialViewState={{
                    longitude: -90,
                    latitude: 40,
                    zoom: 3.5
                }}
                style={{ width: "100%", height: 300 }}
                mapStyle="mapbox://styles/mapbox/satellite-v9"
                // mapStyle="mapbox://styles/coachwayne/cl51c70js000e14pd04dq2hc7"

                mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_TOKEN}
            >
                {allEvents.data.map(event => {

                    if (!event.attributes.event_links.data[0]) {
                        // console.log({
                        //     event
                        //     , locatiom: event.attributes.event_links[0]
                        // })

                        return (
                            null
                        )
                    }

                    else {

                        const Lat = Number(event.attributes.event_links.data[0].attributes.linkLabel)
                        const Long = Number(event.attributes.event_links.data[0].attributes.linkUrl)

                        // console.log({
                        //     event
                        //     , locatiom: `Lat: ${Lat} Long: ${Long}`
                        // })

                        return (
                            <>
                                <Marker
                                    key={`Marker:${event.id}`} event
                                    latitude={event.attributes.event_links.data[0] ? Lat : null}
                                    longitude={event.attributes.event_links.data[0] ? Long : null}
                                >
                                    <button
                                        className="marker-btn"
                                        onClick={e => {
                                            e.preventDefault();
                                            setSelectedEvent(event);
                                        }}
                                    >
                                        <h4 style={{ backgroundColor: "red", borderRadius: "50%" }}>War Zone</h4>
                                        {/* <img src="/skateboarding.svg" alt="Skate Park Icon" /> */}
                                    </button>
                                </Marker>
                            </>
                        )
                    }
                }
                )}

                {selectedEvent ? (
                    <Popup
                        key={`PopUp:${selectedEvent.id}`}
                        latitude={selectedEvent.attributes.event_links.data[0].attributes.linkLabel}
                        longitude={selectedEvent.attributes.event_links.data[0].attributes.linkUrl}
                        onClose={() => {
                            setSelectedEvent(null);
                        }}
                    >
                        <div>
                            <h2>{selectedEvent.attributes.name}</h2>
                            <p>{selectedEvent.attributes.address}</p>
                            <p>{selectedEvent.attributes.date}</p>
                        </div>
                    </Popup>
                ) : null}

            </Map>
        </>
    )
}

Environment

Logs

  1. 2c796e83.6c2c02564b6eab33.js:1 GET https://api.mapbox.com/styles/v1/mapbox/satellite-v9?access_token=%22pk.eyJ1IjoiY29hY2h3YXluZSIsImEiOiJjbDUxY3YzZWowNGZlM2pwanlqZ2NtbDU3In0.lcTms_PSOA9At1IUuAeFAg%22 401 (Unauthorized)
  2. react_devtools_backend.js:4026 Error: Unauthorized: you may have provided an invalid Mapbox access token. See https://www.mapbox.com/api-documentation/#access-tokens-and-token-scopes at 2c796e83.6c2c02564b6eab33.js:1:14887
Pessimistress commented 2 years ago

As the log shows, your access token has extra double quotes (") around it.

wakywayne commented 2 years ago

@Pessimistress Where do you see that in the logs? Sorry if I am being an idiot. That's what I had in development. How come it works there?

Pessimistress commented 2 years ago

Hard to say since that's part of your environment configuration.

You can log process.env.NEXT_PUBLIC_MAPBOX_TOKEN and check its value.

Please use Discussions if you need further help with your own setup. Issues are for bugs in the library.