This tutorial is to build a point-of-interest (POI) favouriting system.
Here are the two function utils to load state or save state with localStorage.
Mapbox: Uncaught ReferenceError: y is not defined in Production with CRA
When zooming in the map, save some national parks in the lists. Then, zooming out and clicking the national parks from the saved places, with flyTo method, it can fly to the selected Poi area. But the Poi mark may not be shown because the zoom size is not appropriate.
One issue I met is that I need to access Map instances outside of map-view.tsx file for example in the PoiListsDrawer component to call Map.flyTo method. So the Map instance needs to be saved globally.
Mapbox Popup setDOMContent parameter only accepts htmlNode as parameter. It is not possible to pass React elements directly to the setDOMContent. Need to utilise React.render method.
The way to mock mapbox-gl in setupTests.js which provided by Mapbox does not work. It will throw an error like 'TypeError: map.on is not a function'.
How to test useSelector, useDispatch from Redux with React, Nextjs and Typescript
- Next.js, React, Jest, useSelector, useDispatch
Jest test fails : TypeError: window.matchMedia is not a function
- Jest, Next.js, React
Mock nextjs dynamic loading with Jest
- Next.js, Jest, next/dynamic