• This tutorial is to build a point-of-interest (POI) favouriting system.
    • React, Javascript, Typescript, Create-react-app, CRA, Mapbox, point-of-interest, POI
    logo
  • Here are the two function utils to load state or save state with localStorage.
    • Javascript, Typescript, localStorage
    logo
  • Mapbox: Uncaught ReferenceError: y is not defined in Production with CRA
    • React, Javascript, Typescript, CRA, Create-react-app, mapbox, Production
    logo
  • 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
    logo
  • 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
    logo
  • 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
    logo
  • 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
    logo
  • How to test useSelector, useDispatch from Redux with React, Nextjs and Typescript
    • Next.js, React, Jest, useSelector, useDispatch
    logo
  • Jest test fails : TypeError: window.matchMedia is not a function
    • Jest, Next.js, React
    logo
  • Mock nextjs dynamic loading with Jest
    • Next.js, Jest, next/dynamic
    logo
  • Follow Anna Coding:
    About
    Contact
    Anna Coding ©2020