Git Product home page Git Product logo

react-vector-maps's Introduction

react-vector-maps

πŸ—ΊοΈ A React component for interactive vector maps of the world and 100+ countries

npm

Features

  • Simple and easy to implement React component for rendering interactive vector maps
  • 100+ vector maps included out of the box, free from MapSVG
  • Convert your own vector map for the component to use with the online converter
  • Quick and straight forward to style your map however you want to

Basic Usage

import React from 'react';
import { VectorMap } from '@south-paw/react-vector-maps';

// You'll need to download the json file from the docs site or you can create your own.
import world from './world.json';

export const Map = () => <VectorMap {...world} />;

See the documentation for more examples and advanced usage of the component.

Issues and Bugs

If you manage to find any, please report them here so they can be squashed.

Development and Contributing

Grab the repo and then install dependencies with npm i.

# Run TypeScript check and ESLint
npm run lint

# Run unit tests
npm run test

# Build package for publishing (/dist)
npm run build

# Remove build artifacts (/dist and /coverage)
npm run clean

# npm install for the docs
npm run docs:install

# Start docs for development
npm run docs:start

# Build docs for deployment
npm run docs:build

# Serve docs from /public after build
npm run docs:serve

# Clean up docs folders
npm run docs:clean

License

MIT, see the LICENSE file.

react-vector-maps's People

Contributors

south-paw avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

react-vector-maps's Issues

SVG to JSON converter not working for Mac paths

I might not have spent to much time on this yet so please point me in the correct direction if I'm wrong. But I'm trying to use this library to convert my SVG images to JSON files but I get this error:

(node:79418) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open 'resources\output'
    at Object.openSync (fs.js:443:3)
    at Object.readFileSync (fs.js:343:35)
    at asyncForEach (/<path_to_repo>/node_modules/@south-paw/react-vector-maps/maps/convert-svgs.js:57:22)
    at asyncForEach (/<path_to_repo>/node_modules/@south-paw/react-vector-maps/maps/convert-svgs.js:7:11)
    at ConvertSVGs.run (/<path_to_repo>/node_modules/@south-paw/react-vector-maps/maps/convert-svgs.js:54:11)
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at Function.Module.runMain (internal/modules/cjs/loader.js:834:11)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
(node:79418) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:79418) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Get the same result when using the absolut path as well get this something like this:
UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open '/Users/some_user/path/to/resources\output. To me it seems like this is using Windows formated paths? Is this something that will be fixed in the 3.0 or what is the plan for this?

Converter issue

Hi, I have been trying to convert an svg file I created via draw.io to a vector file, but whenever I put it in the converter I get back a blank image. The only point in which I get back an image is if my image is only made up of dotted lines. Can you please explain how the converter works?

Add gradients to SVG

any way to inject so i can put gradient definitions and then use it to fill layers ?

Add types for typescript

Would like to do a quick re-write of the project + docs at some stage and use Typescript which can then allow for types to also be provided in the npm package.

Npm page example typo

import VectorMap from '@south-paw/react-vector-maps'
import world from '@south-paw/react-vector-maps/maps/json/world.json

The s is missing

Improve documentation and examples

#11 raised the issue that the documentation and examples aren't as clear as they could be

would like to get round to updating the examples and ensuring they're helpful for new users

Tooltips

Hi! Is there a way to put a tooltip with the name of the region ?

type of "layerProps"

"layerProps" is for event handlers, and the type was "any" before.
Why the type has been changed into "React.SVGProps", and how do you apply for event handlers?

[Before] layerProps?: any;
[Current] layerProps?: React.SVGProps;

The tutorial from the document doesn't work.

Many thanks.

Import issue

I am getting error when try to import in my react js project

On hover increase size/scale of one Path

Hi man,
great library, but I have one question. How I achieve to increase scale / size of one path (region in my map) on hover and not to be hided by another path which are higher?. I need this behaviour, but unfortunately I did not achieve it :(
Thanks

Facing issue with onMouseOut event. Its not firing when the mouse is out of the map

I was facing issue while showing tooltip over the country. Tooltip is not hiding when the mouse is out of the map

const layerProps = {
    onMouseOver: countryHover,
    onMouseMove: MouseMove,
    onMouseOut: hideDetails,
  };
  const hideDetails = (e) => {
    console.log('mouse out');
    setDisplay({
      display: false,
      tooltipY: 0,
      tooltipX: 0,
    });
  };
  
  <Map>
          <VectorMap
            {...svgmap}
            currentLayers={['in', 'us']}
            layerProps={layerProps}
          />
        </Map>

Map Zoom

Is possible to implement Zoom?

Cannot read property 'map' of undefined ({layers.map(layer => ( ))

Simple map is running fine but when I try to implement any code from examples(e.g TooltipLayers.js) then it gives error on layers.map loop written in file VectorMap.js line 5. Full code and error screenshots are attached please help in resolving this issue.

Error:
image

Code VectorMap.js:
image

Labels

Hello, I wanted to know if it is possible to add labels to the map in each area?

Yarn Repository Not Found

Arguments:
/root/.nvm/versions/node/v10.16.3/bin/node /root/.nvm/versions/node/v10.16.3/bin/yarn add @south-paw/react-vector-map

PATH:
/root/.vscode-server/bin/f06011ac164ae4dc8e753a3fe7f9549844d15e35/bin:/root/.nvm/versions/node/v10.16.3/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/mnt/c/Program Files (x86)/Common Files/Intel/Shared Libraries/redist/intel64/compiler:/mnt/c/Program Files (x86)/Common Files/Oracle/Java/javapath:/mnt/c/Windows/system32:/mnt/c/Windows:/mnt/c/Windows/System32/Wbem:/mnt/c/Windows/System32/WindowsPowerShell/v1.0/:/mnt/c/Windows/System32/OpenSSH/:/mnt/c/Program Files/NVIDIA Corporation/NVIDIA NvDLISR:/mnt/c/Program Files (x86)/NVIDIA Corporation/PhysX/Common:/mnt/c/HashiCorp/Vagrant/bin:/mnt/c/Program Files/Git/cmd:/mnt/c/ProgramData/chocolatey/bin:/mnt/c/Program Files/nodejs/:/mnt/c/Users/Teste/AppData/Local/Microsoft/WindowsApps:/mnt/c/Users/Teste/AppData/Local/GitHubDesktop/bin:/mnt/c/Users/Teste/AppData/Local/Programs/Microsoft VS Code/bin:/mnt/c/Users/Administrator/Ubuntu:/mnt/c/Users/Teste/AppData/Roaming/npm:/snap/bin

Yarn version:
1.17.3

Node version:
10.16.3

Platform:
linux x64

Trace:
Error: https://registry.yarnpkg.com/@south-paw%2freact-vector-map: Not found
at Request.params.callback [as _callback] (/root/.nvm/versions/node/v10.16.3/lib/node_modules/yarn/lib/cli.js:66830:18)
at Request.self.callback (/root/.nvm/versions/node/v10.16.3/lib/node_modules/yarn/lib/cli.js:140464:22)
at Request.emit (events.js:198:13)
at Request. (/root/.nvm/versions/node/v10.16.3/lib/node_modules/yarn/lib/cli.js:141436:10)
at Request.emit (events.js:198:13)
at IncomingMessage. (/root/.nvm/versions/node/v10.16.3/lib/node_modules/yarn/lib/cli.js:141358:12)
at Object.onceWrapper (events.js:286:20)
at IncomingMessage.emit (events.js:203:15)
at endReadableNT (_stream_readable.js:1145:12)
at process._tickCallback (internal/process/next_tick.js:63:19)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.