IMPORTANT: https://www.cssscript.com/interactive-vector-map/
A lightweight Javascript library for creating interactive maps and pretty data visualization.
Explore docs
.
Report bug
·
View demo
·
Download
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+
- 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.
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',
})
Your contributions always welcome
- Please don't update the build files when sending pull requests, modifications should be committed within src/js/*.
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/
- 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
- Set devServer.host to the IP address you wish to expose (
- When using
npm run dev
, changes made on the filesystem are immediately available on theindex.html
page. This is not the case for the samples directory.
jsvectormap licensed under MIT.