Code Monkey home page Code Monkey logo

svg-world-map's Introduction

Render a world map with a pin at a specific location. Fiddle with it on the website.

map with pin at Berlin

npm version build status dependency status dev dependency status ISC-licensed chat on gitter support me on Patreon

svg-world-map returns a virtual-dom <svg> 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, minified and gzipped.

The data is from world.geo.json.

Installing

npm install svg-world-map

Usage

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:

const defaults = {
	ocean: '#8df', // color of the ocean
	land: 'white', // color of the land
	mapWidth: 500, // width of the `<svg>`
	pin, // virtual dom node with the pin
	pinHeight: 8 // relative to map viewBox
}

See also

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.

svg-world-map's People

Contributors

derhuerst avatar greenkeeper[bot] avatar netbofia avatar

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.