Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/derhuerst/svg-world-map
Show a location on a world map.
https://github.com/derhuerst/svg-world-map
dataviz svg virtual-dom
Last synced: about 1 month ago
JSON representation
Show a location on a world map.
- Host: GitHub
- URL: https://github.com/derhuerst/svg-world-map
- Owner: derhuerst
- License: isc
- Created: 2016-11-01T00:31:45.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-05-12T04:55:46.000Z (almost 5 years ago)
- Last Synced: 2024-10-03T23:57:52.332Z (5 months ago)
- Topics: dataviz, svg, virtual-dom
- Language: JavaScript
- Homepage: http://jannisr.de/svg-world-map/
- Size: 359 KB
- Stars: 19
- Watchers: 3
- Forks: 6
- Open Issues: 9
-
Metadata Files:
- Readme: readme.md
- License: license.md
Awesome Lists containing this project
README
# [svg-world-map](https://derhuerst.github.io/svg-world-map/)
**Render a world map with a pin at a specific location.** Fiddle with it on [the website](https://derhuerst.github.io/svg-world-map/).

[](https://www.npmjs.com/package/svg-world-map)
[](https://travis-ci.org/derhuerst/svg-world-map)
[](https://david-dm.org/derhuerst/svg-world-map)
[](https://david-dm.org/derhuerst/svg-world-map#info=devDependencies)

[](https://gitter.im/derhuerst)
[](https://patreon.com/derhuerst)`svg-world-map` returns a [virtual-dom](https://github.com/Matt-Esch/virtual-dom#dom-model) `` node. You can either stringify it into a file or embed it into your Frontend stack.
Note that because shapes of all countries are quite a lot of data, this module weighs **roughly `43k`** when [browserified](http://browserify.org), [minified](https://github.com/mishoo/UglifyJS2#uglifyjs-2) and gzipped.
The data is from [world.geo.json](https://github.com/johan/world.geo.json).
## Installing
```shell
npm install svg-world-map
```## Usage
```js
const map = require('svg-world-map')
const stringify = require('virtual-dom-stringify')const myMap = map(81.8, 28.4) // Nepal
process.stdout.write(stringify(myMap))
```## API
```
map(longitude, latitude, [opt])
````opt` is optional and has the following default values:
```js
const defaults = {
ocean: '#8df', // color of the ocean
land: 'white', // color of the land
mapWidth: 500, // width of the ``
pin, // virtual dom node with the pin
pinHeight: 8 // relative to map viewBox
}
```## See also
- [`svg-patterns`](https://github.com/derhuerst/svg-patterns) – Create SVG patterns programmatically to visualize data.
- [`svg-radar-chart`](https://github.com/derhuerst/svg-radar-chart) – A reusable radar chart in SVG.## Contributing
`npm test` is a regression test: It compares the generated output, to a `example/berlin.svg`, which has been manually checked by me. If you introduce a change that changes the output, *check it manually* and commit it as `example/berlin.svg`.
If you **have a question**, **found a bug** or want to **propose a feature**, have a look at [the issues page](https://github.com/derhuerst/svg-world-map/issues).