topotech/jsvectormap

A lightweight Javascript library for creating interactive maps

IMPORTANT: https://www.cssscript.com/interactive-vector-map/

Jsvectormap

A lightweight Javascript library for creating interactive maps and pretty data visualization.

Explore docs . Report bug · View demo · Download

Jsvectormap

Bringing data to life with interactive maps

This project is a deeply modified version of jvectormap and was created to help developers who aren't using jQuery anymore in their projects.

Jsvectormap supports all modern brownsers including IE9+

What's an interactive map

• Interactive maps are powerful tools for presentation.
• The ability to create layers of information that can be shown or hidden at the click of a button on a region or maybe a marker.
• Data can be quickly updated, and these updates made transparent to users.
• Zoom functions that allow users to focus on either the details of a particular region, or to gain a quick overview of a wider area.

Quick start

Installing via npm

npm i jsvectormap

import your preferred map you want to work with, after importing the jsvectormap

@import 'jsvectormap'
@import 'jsvectormap/dist/maps/world.js'

const map = new jsVectorMap({
  selector: '#map',
  map: 'world',
})

Contributions

Your contributions always welcome

• Please don't update the build files when sending pull requests, modifications should be committed within src/js/*.

Developing

To work on the code, you will require the following:

• this repository
• A node environment with a version prior to v15 due to dependency constraints

If you are new to Node, consider doing the following (Linux) to get started quickly:

### Install node via your preferred mechanism. Ensure the binaries are in your path

# Obtain a copy of this repository and change into the working directory
git clone https://github.com/themustafaomar/jsvectormap.git && cd jsvectormap

# Start up the live web server
npm run dev

# Make your changes and view them in your browser. By default, it will answer on port 9000
your-browser http://localhost:9000/

# Perform a build to view your changes on the samples directory
npm run-script build && npm run dev
your-browser http://localhost:9000/samples/

Tips

• If you need to expose the webpack runtime (such as if you are developing inside a container), you will need to modify webpack.config.js
  • Set devServer.host to the IP address you wish to expose (0.0.0.0 for all addresses)
  • Set devServer.allowedHosts or devServer.disableHostCheck to permit access
• When using npm run dev, changes made on the filesystem are immediately available on the index.html page. This is not the case for the samples directory.

License

jsvectormap licensed under MIT.