I'm using jvectormap and I noticed that map data is actually accumulating on each call. For example, if there was 1 from spain, and on next load there is 1 from Italy, on 2nd map load it show 1 Spain and 1 Italy and so on.
var singlemap = $('#singleMap').vectorMap({
map: 'world_en',
backgroundColor: null,
color: '#eaeaea',
hoverOpacity: 0.7,
//selectedColor: '#666666',
enableZoom: false,
showTooltip: true,
values: {
},
scaleColors: ['#6FC6EA', '#0A4D70'],
normalizeFunction: 'polynomial'
});
I'm using setValues as below for reloading data, how can I clear data from map before showing new?
singlemap.setValues(mapstringJSON);
I found solution, on each setvalue i empty the html in div and set singlemap to null and then initialize the map again, before seting values.
$('#singleMap').empty();
singlemap = null;
singlemap = $('#singleMap').vectorMap({
map: 'world_en',
backgroundColor: null,
color: '#eaeaea',
hoverOpacity: 0.7,
enableZoom: false,
showTooltip: true,
values: {},
scaleColors: ['#6FC6EA', '#0A4D70'],
normalizeFunction: 'polynomial'
});
singlemap.setValues(mapstringJSON);
Related
This is my code:
HTML:
<div id="vmap" style="width: 400px; height: 400px;"></div>
JavaScript:
jQuery(document).ready(function () {
jQuery('#vmap').vectorMap({
map: 'iran_ir',
enableZoom: false,
showTooltip: true,
borderColor: '#FFF',
hoverColor: '#1A3B4C',
backgroundColor: '#add136',
borderWidth: 3,
borderColor: '#B0CE4A',
borderOpacity: 1,
color: '#112834',
//pins: {},
pinMode: 'content'
});
});
I think I should use pins property, but I don't know how to do that?!
Based on jqvmap documentation, there isn't any way for that.
pins { "pk" : "pk_pin_metadata", "ru" : "ru_pin_metadata", ... }
This option defines pins, which will be placed on the regions. The JSON can
have only one element against one country code. Elements should be
strings containing the HTML or id of the pin (depends on the 'pinMode'
option explained next).
I open an issue in GitHub for this feature.
I have currently Using Jvcetor Map showing error in IE8 browser.document mode and browser Mode different showing errot. but both same its working Here attach MY code :
<!DOCTYPE html>
<html>
<head>
<title>Country Footprint</title>
<script>
jQuery.noConflict();
jQuery(function(){
var $ = jQuery;
$('#focus-single').click(function(){
$('#map1').vectorMap('set', 'focus', {region: 'AU', animate: true});
});
$('#focus-multiple').click(function(){
$('#map1').vectorMap('set', 'focus', {regions: ['AU', 'JP'], animate: true});
});
$('#focus-coords').click(function(){
$('#map1').vectorMap('set', 'focus', {scale: 7, lat: 35, lng: 33, animate: true});
});
$('#focus-init').click(function(){
$('#map1').vectorMap('set', 'focus', {scale: 1, x: 0.5, y: 0.5, animate: true});
});
$('#map1').vectorMap({
map: 'world_mill_en',
panOnDrag: true,
focusOn: {
x: 0.5,
y: 0.5,
scale: 1,
animate: true
},
series: {
regions: [{
scale: ['#688FA0'],
normalizeFunction: 'polynomial',
values: {
</script>
its showing web page error In IE8. how to run when document mode and browser different ? please help me
This is like the fifth time you're asking the exact same question?
I've answered it in the comments, and you keep asking the same thing, with the same code, here
https://stackoverflow.com/questions/30475659/jvector-map-not-working-correctly-ie-8#comment49031731_30475659
and here, different user, but exact same code
Jvector Map not working when browser Mode and document mode different in IE8
Try to listen this time, you have a trailing comma inside the object that defines the options for jVectorMap
$('#map1').vectorMap({
map: 'world_mill_en',
panOnDrag: true,
focusOn: {
x: 0.5,
y: 0.5,
scale: 1,
animate: true
},
series: {
regions: [{
scale: ['#688FA0'],
normalizeFunction: 'polynomial',
values: {
"TL": 0.62,
"TO": 0.3,
"GB": 2258.57,
"US": 14624.18,
"VU": 0.72, // IT'S HERE ----------------
}
}]
},
Note the trailing comma, the last property in an object shouldn't have a trailing comma as there are no more properties following it.
Most browsers don't care, but in old IE you'll get the exact same error you're getting, and you have to remove the last comma.
I have a jQuery vector map defined as follows:
<div id="worldMap" style="width:800px;height:550px"></div>
In the JS onReady function:
$('#worldMap').vectorMap({
map: 'world_en',
backgroundColor: '#a5bfdd',
color: '#f4f3f0',
hoverColor: '#0000ff',
hoverOpacity: null,
selectedColor: '#666666',
attribute: 'fill',
enableZoom: true,
showTooltip: true,
values: sample_data,
scaleColors: ['#ffffff', '#a00000'],
normalizeFunction: 'polynomial',
onRegionClick: function(element,code,region) {
displayInfo(code,region);
}
});
I set a timer to kick every five minutes to update the map data. The function it calls is:
function updateMap() {
$.getJSON('docs/testdata.json',function(data) {
var map=$("#worldMap").vectorMap('get','mapObject');
map.series.region[0].setValues(data);
});
}
The map displays correctly in the browser with all data points. The problem arises when updateMap() is called. It cannot get the mapObject (it is always undefined). Thinking it was some kind of timing issue, I moved the var map=$(... line to immediately after the definition in the onready initialization of the map and MAP is still undefined.
Also, try:
var obj = $('#world-map .jvectormap-container').data('mapObject');
Then:
obj.series.region[0].setValues(data);
I have the same problem
I solve it with that :
map = new jvm.Map({
container: jQuery('#world-map'),
map: "map",
regionsSelectable: true,
regionsSelectableOne: true,
backgroundColor: 'transparent',
zoomMax: 1,
zoomMin: 1,
zoomOnScroll: false
});
map.clearSelectedRegions();
I would like to go to a URL when I click on a certain country, the code I am using at the moment is the sample code.
I am building a website that has the map on the index page and when you click on say 'Brazil', you go to the Brazil wiki page.
You can use the callback function onRegionClick to determine when an area has been clicked, and then proceed to do what you want.
Using the default sample from JQVMap you would initialize your map with the onRegionCallback and check if the returned country code corresponds to the one you're looking for.
jQuery(document).ready(function() {
jQuery('#vmap').vectorMap({
map: 'world_en',
backgroundColor: '#333333',
color: '#ffffff',
hoverOpacity: 0.7,
selectedColor: '#666666',
enableZoom: true,
showTooltip: true,
values: sample_data,
scaleColors: ['#C8EEFF', '#006491'],
normalizeFunction: 'polynomial',
onRegionClick: function (event, code, region) {
switch (code) {
case "br":
window.location.replace("http://en.wikipedia.org/wiki/Brazil");
break;
}
}
});
});
How i can get name of clicked country from jVectormap?
I using simple code, added alert to show the name of clicked country but doesn't work.
jQuery('#vmap').vectorMap({
map: 'world_en',
backgroundColor: '#e9e9e7',
color: '#dfdfdd',
hoverOpacity: 0,
selectedColor: '#5f8b98',
hoverColor: '#5f8b98',
enableZoom: true,
showTooltip: true,
values: sample_data,
scaleColors: ['#dfdfdd'],
onRegionClick: function (event, code) {
var map = $('#vmap').vectorMap('get', 'mapObject');
var name = map.getRegionName(code);
//ADDED ALERT TO SHOW NAME OF CLICKED COUNTRY
alert(name);
},
normalizeFunction: 'polynomial'
});
Here is the documentation of using script:
http://jvectormap.com/documentation/javascript-api-v1/jvm-worldmap/
What does "it does not work" mean?
Do you get an error? Or what do you get in the alert?
Not tested, but you could try to do it this way:
var mymap = new jvm.WorldMap({
container: $('#vmap'),
...
onRegionClick: function (event, code) {
alert(mymap.getRegionName(code));
}
});
Use this
onRegionClick:function(event, code) {
var name = (code);
alert(name);
}
All Script
jQuery('#vmap').vectorMap({
map: 'world_en',
backgroundColor: '#e9e9e7',
color: '#dfdfdd',
hoverOpacity: 0,
selectedColor: '#5f8b98',
hoverColor: '#5f8b98',
enableZoom: true,
showTooltip: true,
values: sample_data,
scaleColors: ['#dfdfdd'],
//alert
onRegionClick:function(event, code) {
var name = (code);
alert(name);
},
normalizeFunction: 'polynomial'
});