1

I'm using mapbox api for my application where user can add markers based on his current location. The map was loading just fine while it was running on localhost but after hosting it in netlify, all other components are loading but not the map. Even the markers on the map are showing but the map isn't showing up. This is my App link. There are some errors on the console. But I'm not sure what is causing this behavior. I saw a similar question before, but those solution didn't work for me. I even created a new api key, there were no URL restrictions. So any suggestions would be appreciated.

<ReactMapGL
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX}
        {...viewport}
        onViewportChange={(nextViewport) => setViewport(nextViewport)}
        mapStyle={process.env.REACT_APP_MAP_STYLE}
        onDblClick={handleAddPlace}
        transitionDuration={200}
      >
        {pins.map((pin, idx) => (
          <div key={idx}>
            <Marker
              latitude={pin.lat}
              longitude={pin.long}
              offsetLeft={-viewport.zoom * 3.5}
              offsetTop={-viewport.zoom * 7}
              onClick={() => handlePinClick(pin._id, pin.lat, pin.long)}
            >
              <FaMapMarkerAlt
                style={{
                  fontSize: viewport.zoom * 7,
                  color: pin.username === currentUser ? "#ff0984" : "#4f56a5",
                  cursor: "pointer",
                }}
              />
            </Marker>
            ...
      </ReactMapGL>
buzz
  • 896
  • 2
  • 10
  • 22
  • Did you ever find a resolution to this? I am having this exact issue. Everything seems to work with no errors but no base map. Everything works perfect on my local environment but when I move it to Google hosting the base map is absent. Plotted points show up, no errors in console or network tab in debugger. – pachyderm94 Apr 29 '22 at 13:29
  • @pachyderm94 No I didn't. I even contacted their customer support but no luck...Let me know if you find any solution. – buzz Apr 30 '22 at 08:54
  • If you follow the link given in the error message Mapbox does offer up three ways to fix the issue. I ended up using the browser white list option and our maps are now showing up. – pachyderm94 May 09 '22 at 12:10
  • @pachyderm94 how did you whitelisted the browsers? through package.json? could you share what did you do? – buzz May 10 '22 at 12:21

1 Answers1

1

Yes in the package.json I added the following:

  "browserslist": {
    "production": [
      ">0.2%", 
      "not dead", 
      "not ie 11", 
      "not chrome < 51", 
      "not safari < 10", 
      "not android < 51",
      "not op_mini all"
    ],

The "browserlist" attribute was already there I just augmented it to include more and that fixed the issue for me. The mapbox page is not super clear on how to implement the recommended fixes within a react app, so you have to do some translation of their suggestions. I hope this works for you as well.

pachyderm94
  • 431
  • 1
  • 5
  • 15
  • Sorry should have been added as a comment not an answer. Read comments below original question to follow. – pachyderm94 May 11 '22 at 14:00
  • i had these browser lists from the beginning. here's what mine looks like ` "browserslist": { "production": [ ">0.25%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }` – buzz May 11 '22 at 16:00
  • Correct. As I said in my earlier comment. The attribute is there already but you need to change it to include the entire list. That fixed it for me. Since it only happens when I published up to Google Cloud I only updated the "production" list. – pachyderm94 May 13 '22 at 11:46