@ixnode/geo-sphere

@ixnode/geo-sphere is a powerful and flexible Node.js package for rendering interactive maps. It supports various projections (currently only Mercator projection - more are planned), languages, and advanced interactivity, allowing you to display geographical points and create a fully interactive mapping experience.

• Map Display: Render world maps or other geographical maps in Mercator projection.
• Point Rendering: Display geographical points using latitude and longitude.
• Resizable: Dynamically adjust the map size to fit different screen dimensions.
• Integrated Country Database: Includes all countries with multiple resolution levels by default.
• Interactive Countries: Countries can be clicked, triggering a customizable callback function. Hover and title effects are also supported.
• Multi-language Support: Available in multiple languages: cz|de|en|es|fr|hr|it|pl|sv.
• Mouse and Touch Interaction: The map supports zooming and panning via mouse and touch gestures.
• Lightweight and built with TypeScript
• Build on top with storybook

npm install @ixnode/geo-sphere

or

yarn add @ixnode/geo-sphere

import React from 'react';
import { WorldMap } from '@ixnode/geo-sphere';
import '@ixnode/geo-sphere/dist/styles.css';

const App = () => (
    <WorldMap
        height={500}
        width={1000}
        country="de"
        language="en"
    />
);

export default App;

import React from 'react';
import { WorldMap, CountryData } from '@ixnode/geo-sphere';
import '@ixnode/geo-sphere/dist/styles.css';

const App = () => (
    <WorldMap
        height={500}
        width={1000}
        country="de"
        language="en"
        dataSource="medium"
        onClickCountry={(data: CountryData) => { console.log(data); }}
    />
);

export default App;

The callback function logs something like (according to the clicked country and the given language):

{
    "id": "de",
    "name": "Germany",
    "latitude": 50.304018990688554,
    "longitude": 7.5794992771470975,
    "screenPosition": {
        "x": 401,
        "y": 333
    },
    "svgPosition": {
        "x": 843746,
        "y": 6499094
    }
}

import React from 'react';
import { WorldMap, PlaceData } from '@ixnode/geo-sphere';
import '@ixnode/geo-sphere/dist/styles.css';

const App = () => (
    <WorldMap
        height={500}
        width={1000}
        country="de"
        language="en"
        dataSource="medium"
        onClickPlace={(data: PlaceData) => { console.log(data); }}
    />
);

export default App;

The callback function logs something like (according to the clicked place and the given language):

{
    "id": "place-berlin",
    "latitude": 52.5235,
    "longitude": 13.4115,
    "name": "Berlin",
    "population": 3662381, 
    "country": {
        "id": "de",
        "name": "Germany"
    },
    "state": {
        "id": "de-be",
        "name": "Berlin",
        "area": 891.1,
        "population": 3662381
    },
    "screenPosition": {
        "x": 629,
        "y": 295 
    },
    "svgPosition": {
        "x": 1580.7000732421875,
        "y": 6909.73095703125
    }
}

Use ISO 3166-1 alpha-2 code to select a country. Examples:

See https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2 for more information.

Currently supported languages:

To build the project locally:

npm run build

View and develop components in isolation:

npm run storybook

Open: http://localhost:6006/

• Runs the TypeScript compiler to detect errors without generating any JavaScript output
• Should not throw an error

npx tsc --noEmit

• Runs the build process to produce production-ready artifacts
• Test build for a future release process to npmjs.org
• Should not throw an error

npm run build

• Checks that the compiled code runs as expected
• Should not throw an error

node dist/index.js

or to ignore possible warnings:

node --no-warnings dist/index.js

node dist/index.cjs

Update the version in the package.json, e.g., from 1.0.0 to 1.0.1, to create a new release:

npm version patch

Alternatively:

• Use npm version minor for new features.
• Use npm version major for breaking changes.

npm publish --access public

Check the package on npm: https://www.npmjs.com/package/@ixnode/geo-sphere.

This project is licensed under the MIT License. See the LICENSE file for details.

• Björn Hempel bjoern@hempel.li - Initial work - https://github.com/bjoern-hempel

Contributions are welcome! Feel free to submit issues or pull requests to improve this project.

Special thanks to the open-source community for providing amazing tools like React, TypeScript, and Storybook.