reactjstypescripthighchartsproj

How to load proj4 for lat/long in highmaps using typescript and react

I would like to reproduce this highmaps example in react using typescript. However, the lat/long points are not being displayed which seems related to proj4 package as it is working in this javascript demo.

I have tried it in a live demo. If I load the package as follows, it is not used but I do not know where it should be called:

import * as proj4 from "proj4";

Thanks in advance!

Solution

  • Highcharts needs that the proj4 library should be available on window, so you can create your own file which exports that package as a module, and which will have the code below:

    import proj4 from 'proj4';

if (typeof window !== 'undefined') {
  window.proj4 = window.proj4 || proj4;
}

export default proj4;

    Save it to the other file e.g. 'proj4-module.js' and then import it like that:

    import './proj4-module'

    Live example: https://codesandbox.io/s/m4o2q0pzzy