This tutorial is to build a point-of-interest (POI) favouriting system.
- React, Javascript, Typescript, Create-react-app, CRA, Mapbox, point-of-interest, POI
Here are the two function utils to load state or save state with localStorage.
- Javascript, Typescript, localStorage
Mapbox: Uncaught ReferenceError: y is not defined in Production with CRA
- React, Javascript, Typescript, CRA, Create-react-app, mapbox, Production
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.
- React, Javascript, Typescript, Create-react-app, CRA, Mapbox, Zoom
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.
- React, Javascript, Typescript, Create-react-app, CRA, Mapbox, useMap
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.
- React, Javascript, Typescript, Create-react-app, CRA, Mapbox, Popup, setDOMContent
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'.
- React, Javascript, Typescript, Jest, Mapbox
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
