Component Reactjs/Typescript Chart.tsx Geo

Chart.js module for charting standard maps azimuth with some features.

Component usage Example

Install

npm i chart_geo

import Chart from 'chart_geo';
//usage
return (
    
        <Chart/>
)

Data Structure

Component props types. All props are optional.

interface IChartProps {
  mapConfig: IMapConfig
  markerConfig: IMarkerConfig
  markersPoint: IPosition[]
  onCountryClick: any
  onCountryHover: any
  onMarkerClick: any
  onMarkerHover: any
}

Default props

const defaultRotation: IRotation = {
  speed: 0.005,
  enable: false,
}
const defaultMapConfig: IMapConfig = {
  url: 'https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json',
  width: 900,
  height: 600,
  scale: 300,
  rotation: defaultRotation,
  showGraticule: true,
}

const defaultMarkerConfig: IMarkerConfig = {
  markerStyle: { fill: '#86A3C3', stroke: 'blue', size: '5px' },
  markerIconUnicode: '\uf111',
}

Chart.defaultProps = {
  mapConfig: defaultMapConfig,
  markerConfig: defaultMarkerConfig,
  markersPoint: [],
  onCountryClick: () => {
    /* To be implemetend in parent component */
  },
  onCountryHover: () => {
    /* To be implemetend in parent component */
  },
  onMarkerClick: () => {
    /* To be implemetend in parent component */
  },
  onMarkerHover: () => {
    /* To be implemetend in parent component */
  },
  onMarkerClick: () => {
    /* To be implemetend in parent component */
  },
}

Map configuration : Type IMapConfig

interface IMapConfig {
  url: string
  width: number
  height: number
  scale: number
  seaColor: string
  rotation: IRotation
  showGraticule: boolean
  showBorder: boolean
  countryClickColors: object
}

Map configuration : Example

import React from 'react'
import ReactDOM from 'react-dom/client'
import Chart, { IMapConfig } from 'chart_geo';

const landColors = { clickable: 'black', hover: 'grey', clicked: "red", clickhover: "darkred" }


const mapConfig: IMapConfig = {
    url: 'https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json',
    width: 900,
    height: 600,
    scale: 300,
    showGraticule: true,
    enableRotation: true,
    countryClickColors: landColors,
    seaColor: '#C2DFFF'
}


root.render(
    <React.StrictMode>
        <div>
            <Chart
                mapConfig={mapConfig}
            />
        </div>
    </React.StrictMode>,
)

Country event handlers : onCountryClick,onCountryHover

onCountryClick: (e) => {/* custom behavior*/}
onCountryHover: (e) => {/*custom behavior */}

the parameter 'e' in those callback functions hold the information about the courty clicked/hoverd.

Marker configuration : Type IMarkerConfig

interface IMarkerConfig {
  markerStyle: object
  markerIconUnicode: string
}

markerStyle object example

markerStyle = { fill: '#86A3C3', stroke: 'black', size: '15px' }

markerIconUnicode can be retreived from library font awesome v4.7 (https://fontawesome.com/v4/cheatsheet/)

Marker Position : Type IPosition

interface IPosition {
  data: object //additional informations
  coordinates: number[]// [longitude,latitude]
}

Marker points (Array of type IPosition)

the markers point should be an array of object of type IPosition

example of markersPoint object :

[
    {
        "data": {
            "date": "1913-07-01",
            "place": "Devonport"
        },
        "coordinates": [
            -4.1,
            50.3
        ]
    },
    {
        "data": {
            "date": "1914-07-02",
            "place": "Vera Cruz"
        },
        "coordinates": [
            -96.1,
            19.2
        ]
    },
    ...
]

Marker event handlers : onMarkerClick,onMarkerHover

TODO

Map with markers : Example

import React from 'react'
import ReactDOM from 'react-dom/client'
import Chart, { IMapConfig, IMarkerConfig } from 'chart_geo';
import { IPosition } from 'chart_geo/dist/esm/components/types';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)

const landColors = { clickable: 'black', hover: 'grey', clicked: "red", clickhover: "darkred" }

const markerStyle = { fill: "#86A3C3", stroke: "black", size: "25px" };


const mapConfig: IMapConfig = {
    url: 'https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json',
    width: 900,
    height: 600,
    scale: 300,
    showGraticule: true,
    enableRotation: false,
    countryClickColors: landColors,
    seaColor: '#C2DFFF'
}

const markerConfig: IMarkerConfig = {
    markerStyle: markerStyle,
    markerIconUnicode: '\uf041'
}

const markerPoints : (IPosition)[] = [
    {
        "data": {
            "date": "1913-07-01",
            "place": "Devonport"
        },
        "coordinates": [
            -4.1,
            50.3
        ]
    },
    {
        "data": {
            "date": "1914-07-02",
            "place": "Vera Cruz"
        },
        "coordinates": [
            -96.1,
            19.2
        ]
    }
]
root.render(
    <React.StrictMode>
        <div>
            <Chart
            mapConfig={mapConfig}
            markerConfig={markerConfig}
            markersPoint={markerPoints}
            onMarkerClick={(d)=>console.log(d)}
            />
        </div>
    </React.StrictMode>,
)
)

Enable/Disable rotation

the props class of type IMapConfig contains an optional property called rotation of type IRotation.

interface IRotation {
  enable: boolean
  speed: number
}

• Property 'enable' : to enable rotation feature.
• Property 'speed' : a number to increase or decrease the speed of map rotation (example : speed = 2 means that we double the initial map rotation speed ...).
• By default rotation is disabled.

routes configuration

example of routes

const positions = [
    {
      "coordinates": [
        -4.1,
        50.3
      ]
    },
    ...
        {
      "coordinates": [
        -4.1,
        50.3
      ]
    },
    {
      "coordinates": [
        -4.1,
        50.3
      ]
    },
];

 <Chart
        mapConfig={mapConfig}
        markerConfig={markerConfig}
        markersPoint={markers}
        routes={positions}
        onCountryClick={(d) => console.log('country clicked', d)}
        onCountryHover={(d) => console.log('country hovered', d)}
        onMarkerHover={(d) => console.log(d)}
        onRouteHover={(d) => {
          console.log(d)
        }}
      />