Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[PROBLEM] Map not showing up in the production build #209

Closed
Dhaiwat10 opened this issue Jan 28, 2021 · 4 comments
Closed

[PROBLEM] Map not showing up in the production build #209

Dhaiwat10 opened this issue Jan 28, 2021 · 4 comments
Assignees
@Dhaiwat10
Labels
Module: MAP Issues related to the Mapping Platform. ⌨ Need: Code This Issue involves some sort of coding. 🔥 Priority: Critical This task has Critical priority. Project: PLD Issue related to Project Lockdown. 💫 Stage: In Progress This Task is currently being implemented. ⌨ Team: Devs Task related to Team Developers. 💥 Type: Error This Issue was created during execution time in any of the modules.

Comments

@Dhaiwat10
Copy link
Contributor

Dhaiwat10 commented Jan 28, 2021 •
edited
Loading

logo

Describe the bug
The map is not loading properly in the production build. Instead of the world map, you will see a blank white screen.

To Reproduce
Steps to reproduce the behavior:

  1. Create a production build of the MAP module by running npm install and npm run build.
  2. Serve the production build on a local server using serve -s build.
  3. Open the address where the build is being served in your browser.

Expected behavior
The map should load a simple color-coded world map instead of the white empty space.

Screenshots
image.png

Desktop:

  • OS: Windows 10
  • Browser: Chrome
  • Version 88

Additional context
Check the error message from the mapboxgl library in the screenshot attached above.
@Dhaiwat10 Dhaiwat10 added Project: PLD Issue related to Project Lockdown. ⌨ Need: Code This Issue involves some sort of coding. ⌨ Team: Devs Task related to Team Developers. ⚡ Priority: High This task has High priority. 💥 Type: Error This Issue was created during execution time in any of the modules. 🚧 Stage: Not Ready This Task is not yet ready and its description needs to be finalized. labels Jan 28, 2021
@Dhaiwat10 Dhaiwat10 self-assigned this Jan 28, 2021
@Dhaiwat10 Dhaiwat10 added 🔥 Priority: Critical This task has Critical priority. 💫 Stage: In Progress This Task is currently being implemented. Module: MAP Issues related to the Mapping Platform. and removed ⚡ Priority: High This task has High priority. 🚧 Stage: Not Ready This Task is not yet ready and its description needs to be finalized. labels Jan 28, 2021
@Dhaiwat10
Copy link
Contributor Author

Dhaiwat10 commented Jan 28, 2021 •
edited
Loading

Looked around for possible solutions. Here is a Github discussion I found: mapbox/mapbox-gl-js#10240. Tried the suggested fix and the problem is gone. Are we okay with downgrading to v1.13.0 of the mapboxgl package?

@jeff-knurek @JFQueralt maybe you could look into this and make a decision?

Dhaiwat10 added a commit that referenced this issue Jan 28, 2021
@Dhaiwat10
Downgrade to v1.13.0 of the mapboxgl package (#209)
e0eab14
@Dhaiwat10
Copy link
Contributor Author

Created a branch (mapboxgl-downgrade) containing the solution.

@jeff-knurek
Copy link
Contributor

I think the downgrade is a good temporary solution. For reference, this issue mapbox/mapbox-gl-js#10173 is the current open issue to track when the problem gets fixed upstream.

@Dhaiwat10
Copy link
Contributor Author

Integrated the changes into the ocg-dev-1 branch (PR #208).

Dhaiwat10 added a commit that referenced this issue Jan 31, 2021
@Dhaiwat10 @naz3eh
Add components and functionality (#208)
8442fbd 
* Add legend display, and automatic dark/light mode detection

* Add top stats display component

* Add Totals and Language selector components

* Render Header, Total stats and language selector on Map and fix styling

* Fix Header styling

* Fix invalid imports

* Fix css import in Header

* Fix styling of Header and Legend Component

* Integrate api to fetch Total stats

* Fix incorrect CSS import in Header

* Fix styling of Legends, Language Selector and Total stats

* Fix storybook error

* Fix clickHandler of Tabmenu

* Add basic color coding in the map

* Fix incorrect import

* Fix build error

* Fix warnings in Map.js

* Revert unwanted changes to some files

* Fix styling of Language selector

* Downgrade to v1.13.0 of the mapboxgl package (#209)

* Clean-up some code

* Add press play functionality

* Refactor some code

* Fix failing build

* Bug fix in press-play

Co-authored-by: Nazeeh Vahora <nazeehvahora.786@gmail.com>
naz3eh added a commit that referenced this issue Jan 31, 2021
@naz3eh @Dhaiwat10
Add more functionalities (#213)
7febbff 
* Add legend display, and automatic dark/light mode detection

* Add top stats display component

* Add Totals and Language selector components

* Render Header, Total stats and language selector on Map and fix styling

* Fix Header styling

* Fix invalid imports

* Fix css import in Header

* Fix styling of Header and Legend Component

* Integrate api to fetch Total stats

* Fix incorrect CSS import in Header

* Fix styling of Legends, Language Selector and Total stats

* Fix storybook error

* Fix clickHandler of Tabmenu

* Add basic color coding in the map

* Fix incorrect import

* Fix build error

* Fix warnings in Map.js

* Revert unwanted changes to some files

* Fix styling of Language selector

* Downgrade to v1.13.0 of the mapboxgl package (#209)

* Clean-up some code

* Add press play functionality

* Refactor some code

* Fix failing build

* Bug fix in press-play

* Timeslider integration (#211)

* Add timeslider boilerplate

* Fix timeslider errors

* Fix warnings

Co-authored-by: Nazeeh Vahora <nazeehvahora.786@gmail.com>

* Merge ocg-dev-2 (#212)

* Try fixing storybook error

* Add boilerplate for countriesSearch

* Add country search functionality

* Fix warnings

Co-authored-by: Nazeeh Vahora <nazeehvahora.786@gmail.com>

* Remove warnings

* Fix build errors

* Fix build errors

Co-authored-by: Dhaiwat10 <dhaiwatpandya@gmail.com>
@jackieo5023 jackieo5023 mentioned this issue Feb 18, 2021
Merged
jeff-knurek pushed a commit that referenced this issue Mar 24, 2021
@naz3eh @Dhaiwat10
@1337-ishaan @nakullondhe @stanley-miao
Fix UI bugs (#222)
a704f95 
* Add legend display, and automatic dark/light mode detection

* Add top stats display component

* Add Totals and Language selector components

* Render Header, Total stats and language selector on Map and fix styling

* Fix Header styling

* Fix invalid imports

* Fix css import in Header

* Fix styling of Header and Legend Component

* Integrate api to fetch Total stats

* Fix incorrect CSS import in Header

* Fix styling of Legends, Language Selector and Total stats

* Fix storybook error

* Fix clickHandler of Tabmenu

* Add basic color coding in the map

* Fix incorrect import

* Fix build error

* Fix warnings in Map.js

* Revert unwanted changes to some files

* Fix styling of Language selector

* Downgrade to v1.13.0 of the mapboxgl package (#209)

* Clean-up some code

* Add press play functionality

* Refactor some code

* Fix failing build

* Bug fix in press-play

* Try fixing storybook error

* Add boilerplate for countriesSearch

* Add country search functionality

* Fix warnings

* Timeslider integration (#211)

* Add timeslider boilerplate

* Fix timeslider errors

* Fix warnings

Co-authored-by: Nazeeh Vahora <nazeehvahora.786@gmail.com>

* Merge ocg-dev-2 (#212)

* Try fixing storybook error

* Add boilerplate for countriesSearch

* Add country search functionality

* Fix warnings

Co-authored-by: Nazeeh Vahora <nazeehvahora.786@gmail.com>

* Remove warnings

* Fix build errors

* Fix build errors

* Fix infinite rerendering

* Fix infinite rerendering

* fix: dialogbox styling & timeslider bug

* Fix CountryInfo UI, add dark and light mode for it, fix countrySearch, timeSlider

* Fix build errors

* added internationalization

* added internationalization

* add dependecy in useEffect

* add dependecy in useEffect

* Integrate LanguageSelector

* cleanup

* Fix warnings in CountryInfo.js

* pull ocg-dev-1

* pull ocg-dev-1

* Implement CountryInfo but api call is remaining

* Add getCountryData and getCountryDetailService api calls

* Add .gitignore at the top level

* Remove node_modules from top folder

* Delete commented code and unused variables

* Fix more errors

* Fix more build errors

* Delete duplicated code in App.js (#348)

* Clean up some code smells (#350)

* Delete duplicated code in App.js

* Simplify App.js date formatting

* Clean up CountryInfo.js

* Clean up router.js

* Rename servicesConfiguration.js to the constant it exports

* Rename TiimeSlider.stories.js to fix typo

* Extract CountryInfo.js nested ternary operations

* Remove commented code and simplify TimeSlider.js (#351)

* Delete duplicated code in App.js

* Simplify App.js date formatting

* Clean up CountryInfo.js

* Clean up router.js

* Rename servicesConfiguration.js to the constant it exports

* Rename TiimeSlider.stories.js to fix typo

* Extract CountryInfo.js nested ternary operations

* Remove commented code

* Remove (more) commented code from TimeSlider.js

* Refactor toSliderString to reduce complexity

* Remove toSliderStringShort

Co-authored-by: Dhaiwat10 <dhaiwatpandya@gmail.com>
Co-authored-by: 1337.ishaan <1337.ishaan@gmail.com>
Co-authored-by: nakullondhe <65081281+nakullondhe@users.noreply.github.com>
Co-authored-by: Stanley Miao <53798580+stanley-miao@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Dhaiwat10 Dhaiwat10

Labels
Module: MAP Issues related to the Mapping Platform. ⌨ Need: Code This Issue involves some sort of coding. 🔥 Priority: Critical This task has Critical priority. Project: PLD Issue related to Project Lockdown. 💫 Stage: In Progress This Task is currently being implemented. ⌨ Team: Devs Task related to Team Developers. 💥 Type: Error This Issue was created during execution time in any of the modules.
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jeff-knurek @Dhaiwat10