A lightweight JavaScript library for creating interactive maps and pretty data visualization.
Home Page: https://jvm-docs.vercel.app
License: MIT License
Full stack web developer enthusiastic, innovator, persistent and passionate about software and technology.
I'm sorry for the delayed replies, I can only be reached on Fridays.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
A limited number of maps is included in this library.
Hi
dist/css and dist/js folders are empty, they contain only .gitignore file.
Hello - the new release made today breaks lines when scaling in/out (with a very basic definition). This doesn't seem to be reflected in the examples, so perhaps it is something isolated to my config. This can be reproduced with the following sample HTML.
When pinning to 1.4.3 in the script tags from unpkg.com, zooming in/out causes the lines to stay "frozen" due to the following error in the console. Pinning to 1.4.2 causes the issue to go away.
Uncaught TypeError: this.lines[i].element.setStyle is not a function
repositionLines https://unpkg.com/[email protected]:1
applyTransform https://unpkg.com/[email protected]:1
setScale https://unpkg.com/[email protected]:1
handleContainerEvents https://unpkg.com/[email protected]:1
on https://unpkg.com/[email protected]:1
handleContainerEvents https://unpkg.com/[email protected]:1
init https://unpkg.com/[email protected]:1
t https://unpkg.com/[email protected]:1
t https://unpkg.com/[email protected]:1
<anonymous> Backbone
[email protected]:1:23996
The reproduction recipe HTML page:
<html>
<head>
<title>Error</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/jsvectormap.css" />
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]/dist/maps/world.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 95%"></div>
<script>
var markers = [
{ name: 'STL', coords: [38.627003, -90.199402]},
{ name: 'AMS', coords: [52.3676, 4.9041] },
];
var lines = [
{ from: 'STL', to: 'AMS', style: { stroke: 'Blue', strokeWidth: 1.5 } },
]
var map = new jsVectorMap({
selector: "#map",
map: "world",
markers: markers,
lines: lines,
});
</script>
</body>
I will try looking into this further, but wanted to file an Issue in case you already know where the problem may be coming from.
Hello!
Current maps have old geopolitics borders. So i was try to regenerate it with manuals from mother-project "jvectormap" and new map file from naturalearthdata.com (site from manual).
After a few day of bloody battle with old scripts for python2, and tonns of old requerments (GDAL/OGR was born in Hell).. I got a result on my virtual machine.
And now i stand face-to-face with another problem. Format of final JSON map file. It`s really diffrent from yours in src folder (I attached new map file, which i got from manual. Difference in "" styling.).
I used temporaly workaround - copied only vector coordinates to your map file of new regions borders.
So.. may be U have a secret way to build new map in right format? Maybe Py3 native way?
Hi!
I am very grateful for this plugin, it's saved me a TON of time. I've just noticed a bug while I'm testing my map; if you click and drag the map with the mouse over a region, it selects the region.
Is there any way to disable or modify this behavior, besides disabling dragging? Is there an onDrag event or something? (Also asking because I'd like to change the cursor when it's dragging.)
Thank you!
Crystal
i'am using this example
onMarkerTooltipShow: function (tooltip, index) {
map.setSelected('regions', ['EG', 'RU', 'US']);
}
but i can't figure how to use clearSelectedRegions() when tooltips close or markers lost focus
Thx in advance
this error happens to me after last update
i have an array of two items but in this loop
for (var index in markers) {
markerConfig = markers[index];
point = this.getMarkerPosition(markerConfig);
uid = markerConfig.coords.join(':'); // We're checking if recently created marker is already existed
// If exists we don't need to create it again, so we'll continute
// Becuase we may have more than one marker.
it iterate three times and in the last one index = $family
any tips
Looking for an event listener that can be triggered when user click on a region
Similar to the onRegionSelected event but without triggering the selection
I have a map linked to a table with data for each country , for the moment a lot of data from most countries are missing .
So I set those few countries concerned as already selected as follows
If I enable parameters like regionsSelectable I will lose track of my already selected regions
So I want that when I click on a region it returns the code and if it is not selected in the map then I show a message no data for this country , otherwise if already selected I will show the corresponding data in my table . All without interfering with the setup of the regions that are deselected/selected
As a developer I am trying to solve by myself , and I have almost achieved a good result
For now i added an isRegionsClickable parameter and exploit the portion of code by adding an if
when i try to show label regions i get this error.
Unhandled Runtime Error
TypeError: e is undefined
Source
getLabelOffsets
node_modules/jsvectormap/dist/js/jsvectormap.min.js (1:8925)
e
node_modules/jsvectormap/dist/js/jsvectormap.min.js (1:9600)
_createRegions
node_modules/jsvectormap/dist/js/jsvectormap.min.js (1:18562)
V</e._init
node_modules/jsvectormap/dist/js/jsvectormap.min.js (1:27767)
t
node_modules/jsvectormap/dist/js/jsvectormap.min.js (1:27387)
t
node_modules/jsvectormap/dist/js/jsvectormap.min.js (1:32620)
The FR code is for two countries:
Is it possible to reload/refresh the map without reloading the page itself? Somthing like:
const map = new jsVectorMap({ ... })
map.reload()
Not sure if this is related to Angular.
I've added a navigate in onMarkerSelected, but the tooltip being hovered when clicking remains in DOM. Is there a way to destroy the map before navigating? As a workaround I'm using this before navigating:
window.document.querySelectorAll(".jsvmap-tooltip").forEach(n => n.remove());
I'm using the following code as instructed in the documentation but the visualization is not appearing on the map. The map is loading as expected with the default region color. I'm I missing anything?
const map = new jsVectorMap({
selector: "#map",
map: "world",
draggable: false,
zoomButtons: false,
zoomOnScroll: false,
regionStyle: {
initial: {
fill: "#FFEFD6",
"fill-opacity": 1,
stroke: "none"
},
},
viusalizeData: {
scale: ["#ecf0f1", "#7f8c8d"],
values: {
EG: 290,
US: 100,
CA: 120,
BR: 75,
}
}
});
is it possible to Drill-down in a multi hierarchy map(like jvectormap)?
Example:
var map = new jsVectorMap({
map: 'world',
selector: '#map',
markers: [...],
markerStyle: {
initial: {
image: true
}
},
series: {
markers: [{
attribute: 'image',
legend: {
title: 'Some title!',
vertical: true
},
scale: {
marker1title: {
url: '../assets/images/marker.png',
offset: [10, 0]
},
marker2title: {
url: '../assets/images/marker2.png',
offset: [0, 0]
}
},
values: {
0: 'marker1title',
1: 'marker2title',
2: 'marker2title',
3: 'marker1title',
}
}]
}
})Is there any way to change hover tooltip data?
I want to show additional data when user is hover region.
Hi, I have a map with custom markerStyle and regionStyle, which are using css variables.
These css variables are changing when you switch to dark mode. Unfortunately the map doesn't reload.
I tried with reset function but it didn't work:
const map = new jsVectorMap(options);
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
map.reset();
});
Is there a way to reset/reload the map or config?
hello
it seems that tooltip does not support html anymore, am i wrong?
tooltip.text("<h3>test</h3>"); show <h3>test</h3>
Hi this is a great library is there any tutorial on how to make a map of my city? we wanted to show locations of our wifi accesspoint but only countries and world available in dist.
I can set the initial, hover and selected style of regions globally but I need to set the selected style per region which does not seem possible at this moment, is it?
you forgot comma in "lineStyle" example documantation.
After "strokeDasharray: '6 3 6'" you have to add comma
Since updating jsvectormap to 1.3, when scrolling on the map, the page scrolls too. This causes weird behaviour.
I have fixed this on our branch with this change: kajgiesbersflavour@66e91a6
I made a sample to show the issue here: kajgiesbersflavour@ea678a2
Try zooming in and out on that sample page without the fix and you will see what I mean.
I am not sure removing the passive: true can cause any issues, but I haven't found any and it seems to fix the problem for us.
Hey there,
was just wondering if it is possible to zoom (not highlight) into a specific region. For instance, I can use the "focusOn" paramter in jVectorMap, set it to say "US" and the map would have loaded with the focus being on United States.
Kind Regards.
Here is how I do when window is resized (not a bug) it's just to share (AND if you have a better way let me know :)
jsvmap = new JsVectorMap({
//...
});
// window on resize
var resizeMapTimer;
window.addEventListener('resize', function(e) {
clearTimeout(resizeMapTimer);
resizeMapTimer = setTimeout(function() {
jsvmap.height = window.innerHeight;
$("#map svg").setAttribute("height", window.innerHeight);
jsvmap.width = window.innerWidth;
$("#map svg").setAttribute("width", window.innerWidth);
jsvmap.baseScale = 1;
//console.log(jsvmap);
}, 250);
});
// Trigger resize event one time at start
if (typeof(Event) === 'function') {
// modern browsers
window.dispatchEvent(new Event('resize'));
} else {
// for IE and other old browsers
// causes deprecation warning on modern browsers
var evt = window.document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false, window, 0);
window.dispatchEvent(evt);
}I'm trying to add new markers to the map. But an error was shown in the console, saying that:
Uncaught TypeError: Cannot read property 'join' of undefined.
var markers = [
{name: "11111", coords: [1,1], style: {}},
{name: "2222", coords: [2,2], style: {}},
];
map.removeMarkers();
map.addMarkers(markers); // The issue hereis it possile to add a custom propperties to markers so as to have those in tooltips box?
Hey @themustafaomar !
First Off: Thank you very much for porting the original project to this vanilla based one. Awesome work!
I just wanted to add some custom marker styles like I was able in jvectormap
Example: https://jvectormap.com/examples/marker-icons/
Is this possible with jsvectormap?
Im not sure if this line would make something like this possible:
jsvectormap/src/js/elements/marker.js
Line 14 in 61d2f5e
Thanks for creating this awesome version!
Hello. There is an amazing method updateSize(). But no mention in the documentation. Please, add this.
document.addEventListener("DOMContentLoaded", function() {
var map = new JsVectorMap({
map: "world",
selector: "#world_map",
zoomButtons: true,
markers: [
{ name: 'Foo', coords: [-14.2350, -51.9253], style: { fill: 'red' }},
{ name: 'Bar', coords: [35.8617, 104.1954], style: { fill: 'red' }}
],
lines: [{
from: 'Foo', to: 'Bar',
style: {
stroke: 'red',
strokeWidth: 1.5
}
}],
});
window.addEventListener("resize", () => {
map.updateSize();
});
});
Generates a map with markers, but no lines...
Hey there,
i have been trying to figure out if we could return the html for the marker
we can change the labels html by selecting it but can we do the same with the markers ?
i want to have a custom marker but i cant find any api for that i seem to remember that there was some kind of html() method in jvectormap. is it there on jsvectormap as well ?
thanks
At least the following countries are missing: Bahrain, Maldives, Seychelles, Mauritius, Singapore, and Palau
I have Indonesia's map that I got from https://commons.wikimedia.org/wiki/File:Indonesia_location_map.svg
How can I add the map into jsvectormap? Should I get every province's <path d=""> values and map it into object?
Hello guys,
is it possible to colorize only some countrys on the map ?
Thanks in advance :)
Any plans to add some of the missing small countries like Andorra, San Marino etc?
Are there any parameters that must be implemented in the map coordinate set for the marker to work?
Because I tested it with a map of Brazil and it doesn't work. But when I put the world map it works.
var map = new jsVectorMap({
selector: "#brazil-map",
map: "brazil",
zoomOnScroll: false,
zoomButtons: false,
regionsSelectable: true,
backgroundColor: "transparent",
// -------- Event --------
onRegionSelected: function (code, isSelected, selectedRegions) {
$('#estado option[value="' + code + '"]').prop("selected", true);
$("#search #submit").trigger("click");
},
regionStyle: {
initial: {
fillOpacity: 0.9,
stroke: "#000",
strokeWidth: 100,
strokeOpacity: 1,
},
hover: { fill: "#004f71" },
},
series: {
regions: [{
attribute: "fill",
scale: {
myScaleOne: "#00a1be",
},
values: {
// Região Norte
ac: "myScaleOne",
am: "myScaleOne",
ap: "myScaleOne",
pa: "myScaleOne",
ro: "myScaleOne",
rr: "myScaleOne",
to: "myScaleOne",
// Região Nordeste
al: "myScaleOne",
ba: "myScaleOne",
ce: "myScaleOne",
ma: "myScaleOne",
pb: "myScaleOne",
pe: "myScaleOne",
pi: "myScaleOne",
rn: "myScaleOne",
se: "myScaleOne",
// Região Centro-Oeste
df: "myScaleOne",
go: "myScaleOne",
ms: "myScaleOne",
mt: "myScaleOne",
// Região Sudeste
es: "myScaleOne",
mg: "myScaleOne",
rj: "myScaleOne",
sp: "myScaleOne",
// Região Sul
pr: "myScaleOne",
rs: "myScaleOne",
sc: "myScaleOne",
}
}]
},
markers: [{ name: "RS", coords: [-30.0179697, -51.1976631] }],
markerStyle: {
initial: {
image: "http://jvectormap.com/img/icon-np-2.png",
}
}
})Hello, I think setFocus is missing from compiled files in /dist
https://themustafaomar.com/open-source/jsvectormap/docs/visualize-data/#data-visualization-example
The code has viusalizeData, not visualizeData.
Does not work, please fix it:
https://themustafaomar.com/open-source/jsvectormap
Loading jsvectormap in an Angular component does not work. The proper way to get a reference to the container element is to use the @ViewChild annotation and then load the map on ngAfterViewInit. Doing so causes a stack overflow (InternalError: too much recursion).
Steps to reproduce:
ng new
npm install jsvectormap
package.json
{
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "~13.1.0",
"@angular/common": "~13.1.0",
"@angular/compiler": "~13.1.0",
"@angular/core": "~13.1.0",
"@angular/forms": "~13.1.0",
"@angular/platform-browser": "~13.1.0",
"@angular/platform-browser-dynamic": "~13.1.0",
"@angular/router": "~13.1.0",
"jsvectormap": "^1.4.5",
"rxjs": "~7.4.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.1.2",
"@angular/cli": "~13.1.2",
"@angular/compiler-cli": "~13.1.0",
"@types/jasmine": "~3.10.0",
"@types/node": "^12.11.1",
"jasmine-core": "~3.10.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.1.0",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.5.2"
}
}app.component.html
<div #map></div>app.component.ts
import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
// @ts-ignore
import jsVectorMap from "jsvectormap";
import "jsvectormap/src/maps/world"
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {
@ViewChild('map')
private mapRef!: ElementRef<HTMLDivElement>;
ngAfterViewInit(): void {
new jsVectorMap({
selector: this.mapRef.nativeElement,
});
}
}Error in FireFox:
ERROR InternalError: too much recursion
toString zone.js:1571
t jsvectormap.min.js:1
t jsvectormap.min.js:1
r jsvectormap.min.js:1
o jsvectormap.min.js:1
i jsvectormap.min.js:1
s jsvectormap.min.js:1
s jsvectormap.min.js:1
o jsvectormap.min.js:1
i jsvectormap.min.js:1
r jsvectormap.min.js:1
r jsvectormap.min.js:1
o jsvectormap.min.js:1
i jsvectormap.min.js:1
s jsvectormap.min.js:1
s jsvectormap.min.js:1
o jsvectormap.min.js:1
i jsvectormap.min.js:1
r jsvectormap.min.js:1
...
Error in Chrome:
core.mjs:6461 ERROR RangeError: Maximum call stack size exceeded
at TView.Object.toString (polyfills.js:5945:42)
at vendor.js:938:1000
at Object.t [as isMergeableObject] (vendor.js:938:1096)
at i (vendor.js:938:1217)
at vendor.js:938:1343
at Array.map (<anonymous>)
at Object.s [as arrayMerge] (vendor.js:938:1319)
at o (vendor.js:938:2199)
at i (vendor.js:938:1238)
at vendor.js:938:1992
The error happens when merging the map's options. Specifically when iterating over the properties of the selector property which is, in this case, a HTMLDivElement. I suspect that the infinite recursion is due to the hierarchical nature of the DOM element (the DOM element holds a reference to it's parent and children which, in turn, hold a reference to their parent and children).
A solution would be to not merge the properties of DOM elements.
Hello,
I'm trying to change the marker label text color with
markers: [
{
name: "Paris",
coords: [48.8566, 2.3522],
style: { fill: 'orange' , color:'white'} // Add style for this particular marker
}
],
Tried also text:'white' with no result either...
Wondering if it's possible ?
Thanks !
Denis
I was wondering if there is a map or a way to import a map that just shows continents rather than countries
First of all thanks so much for this library!
I am using the Vue wrapper for it and finding my way to achieve the necessary functionality in my project. One of them is that The tooltip should have different colors for selected vs unselected regions.
I've tried some hacks such as:
regionTooltipShow(tooltip: any, code: any) {
const color = this.selectedRegions.includes(code) ? "red" : "green";
tooltip.getElement().style.cssText =
`background-color: ${color};` + tooltip.getElement().style.cssText;
tooltip.text(tooltip.text() + " (Hello this is a modified text!)");
}or
regionTooltipShow(tooltip: any, code: any) {
tooltip._tooltip.style.backgroundColor = "red";
tooltip.text(tooltip.text() + " (Hello this is a modified text!)");
}to make the color change work and unfortunately, it doesn't!
The reason why I am trying to "hack it" is due to the fact that the tooltip.css() usage such as described on the docs doesn't work (throws an error saying that tooltip.css is not a function since it is undefined). I've noticed that the tooltip class implements the text() but not the css() functions.
Is something like the snippet below maybe missing?
css(styles: Object) {
if(!styles) {
return this._tooltip.style;
}
for (const [key, value] of Object.entries(styles)) {
this._tooltip.style[key] = value;
}
}(Also changes to handleElementEvents around line 45 and others)
If so I am happy to create a MR and later even create an MR in the vue wrapper. I just like to know if there is something I might be missing
Hi, since the update of 1.5.0 I get errors for both, this is my code which worked before:
onMarkerTooltipShow(tooltip, index) {
tooltip.getElement().innerHTML = `${tooltip.text()}<br/>${
worldMapMarkers[index].description || ''
`;
}
What do I need to change to make it work again?
Hello guys!
I've got a problem with adding markers via provided method addMarkers:
const test = new jsVectorMap({
selector: '.js-jsvectormap',
map: "world",
markers: [
{
"coords": [38, -97],
"name": "United States"
},
{
"coords": [20, 77],
"name": "India"
},
{
"coords": [60, -95],
"name": "Canada"
},
{
"coords": [51, 9],
"name": "Germany"
},
{
"coords": [54, -2],
"name": "United Kingdom"
}
],
});
test.addMarkers([{
name: 'Russia',
coords: [61, 105],
label: 'Russia',
offsets: [15, 10],
style: { fill: 'red' }
}]);
I've got an error
jsvectormap.min.js:1 Uncaught TypeError: Cannot read property 'createGroup' of undefined
at t.createMarkers (jsvectormap.min.js:1)
at t.e.addMarkers (jsvectormap.min.js:1)
at dashboard-alternative.html:3513
at dashboard-alternative.html:3525
Barebones project and trying to use the package. Getting this in console:
Uncaught ReferenceError: jsVectorMap is not defined
at Object.3r67O ((index):2496:1)
at newRequire ((index):89:24)
at localRequire ((index):101:14)
at Object.5HwUs.lodash/range ((index):490:16)
at newRequire ((index):89:24)
at localRequire ((index):101:14)
at Object.fUiC5../app.js ((index):480:14)
at newRequire ((index):89:24)
at (index):138:5
at (index):161:3
3r67O @ (index):2496
newRequire @ (index):89
localRequire @ (index):101
5HwUs.lodash/range @ (index):490
newRequire @ (index):89
localRequire @ (index):101
fUiC5../app.js @ (index):480
newRequire @ (index):89
(anonymous) @ (index):138
(anonymous) @ (index):161Downgrading to 1.3.3 worked, but what might be the problem?
Importing like so:
import 'jsvectormap';
import 'jsvectormap/dist/maps/world.js';
const map = new jsVectorMap({
selector: '#map',
map: 'world',
});Installed via npm. Node version 14.19.0.
After I converted to raect, no matter how I adjusted it after adding it in, I couldn't change the overall height
Good day for all of you and really tnx for your project!
I suggest splitting the "showTooltip" option into two - one for map tooltips and one for markers.
Expected Result:
showTooltip: false
showMarkerTooltip: true
For allows to show tooltips only for markers.
I get the following error when I want to use jsvectormap:
this is how I imported:
import { jsVectorMap } from '@/components/map/jsVectorMap'
import { Map } from '@/components/map/world'
Hello,
just checked your project as an alternative of jvectormap because I don't want jquery.
Like I said in the title zoomOnScroll not working on firefox where chrome works.
Regards.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.