CODEWITHSUNDEEP
reactjstypescripthighchartsproj
Peterhack
Peterhack

Reputation: 1061

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!

Upvotes: 0

Views: 2563

Answers (4)

Michael
Michael

Reputation: 21

import * as proj4_ from 'proj4';
const proj4 = proj4_.default;

Upvotes: 2

Antonio Alvarado Hernandez
Antonio Alvarado Hernandez

Reputation: 1

You can use proj4 property https://api.highcharts.com/highmaps/chart.proj4

Example:

import proj4 from "proj4";
import highcharts from "highcharts";
import mapInit from "highcharts/modules/map";

mapInit(highcharts);

const chartOptions: highcharts.Options = {
            chart: {
                type: "map",
                map: "mexico",
                proj4: proj4,                
            }
};

Upvotes: 0

daniel_s
daniel_s

Reputation: 3732

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

Upvotes: 6

Matt McCutchen
Matt McCutchen

Reputation: 30939

For better or for worse, it looks like Highmaps expects proj4 to be defined on the global object. Just add this line of code:

(window as any).proj4 = proj4;

Upvotes: -1

Related Questions