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;
}
}
});
});
Related
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);
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 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();
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'
});
I've been using jVectorMap quite successfully-- it's a wonderful package for displaying interactive maps!
In this case, I only want some regions to be selectable, and there doesn't seem to be an option to set regions active/inactive. So instead, I set "regionsSelectable=false", and then set "selectedRegions" to the ones I want active.
This works fine (showing the correct hover attributes, etc. for "active" regions only)-- with one exception, in iOS. There, it takes two "clicks" (touches) for the "onRegionClick" handler to get invoked. On the first click, the "selectedHover" attributes are set correctly, but "handleRegion" never gets called. A second click, and "handleRegion" is called.
Initialization code looks like:
map = new jvm.WorldMap({
container: $('#mapdiv'),
map: 'world_mill_en',
regionsSelectable: false,
regionStyle: {
initial: { fill: '#0086d0' },
hover: { "fill-opacity": 1.0 },
selected: { fill: '#003a6a' },
selectedHover: { fill: '#ff7a00' }
},
onRegionClick: handleRegion,
selectedRegions:["CN","RU","US"],
...
});
function handleRegion(e,cc) {
alert("cc="+cc);
...
}
What is needed is either a way to "activate" only a few regions, or a way around this two-click problem.
I know this is a bit outdated question, but here is a hack around iOS issue for others like me who bumped to this question while searching for some hack around this.
As you already noted, iPad/iPhone are emulating hover with first "tap" .. and click with second "tap".
So to fix this ackward behavior we will do following (example on fiddle)
var lastCode = "";
var iOS = /(iPad|iPhone|iPod)/g.test( navigator.userAgent );
$('#world-map').vectorMap({
map: 'world_mill_en',
backgroundColor: 'green',
normalizeFunction: 'polynomial',
regionsSelectable: true,
regionsSelectableOne: true,
zoomOnScroll: true,
zoomButtons: true,
regionStyle: {
initial: {
fill: "white",
"fill-opacity": 1,
stroke: "none",
"stroke-width": 0,
"stroke-opacity": 1
},
hover: {
fill: "white",
"fill-opacity": 1
},
selected: {
fill: "#EC6602",
"fill-opacity": 1
},
selectedHover: {
fill: "#EC6602",
"fill-opacity": 1
}
},
onRegionClick: function(e, country){
if (lastCode && lastCode == country) {
e.preventDefault();
return;
}
var map = $("#world-map").vectorMap("get", "mapObject");
$("#world-map").vectorMap("set", "focus", country);
map.setScale(2);
if(country=="US" || country=="RU") {
map.setScale(1);
}
lastCode = country;
},
onRegionLabelShow: function (e, el, country) {
if (iOS) {
e.preventDefault();
var map = $("#world-map").vectorMap("get", "mapObject");
if (lastCode) {
map.regions[lastCode].element.setSelected(false);
}
map.regions[country].element.setSelected(true);
$("#world-map").vectorMap("set", "focus", country);
map.setScale(2);
if(country=="US" || country=="RU") {
map.setScale(1);
}
lastCode = country;
}
},
markers: [{
latLng: [37.7833, -122.4167],
name: 'San Francisco'
}]
});
In short words, we are overwriting onRegionLabelShow functionality with custom behavior (only for the iOS devices). Basically we are preventing the tooltip from showing and instead of that we are selecting the hovered (tapped) ccountry, focusing it and storing it's code in global variable.
On second tap we are detecting if the country has changed by comparing current code with last value and in that case un-selecting previously selected country and selecting new one.
It should be fairly easy to adapt the resolution to your needs.
actually, you should check onRegionTipShow:
...
handleIOSClick = function (e, el, code) {
if (istouch) {
var mapObject = $(map).vectorMap('get', 'mapObject');
map.regions[code].element.setSelected(true);
e.preventDefault();
}
},
CreateMap = function () {
if (typeof $(map) !== 'undefined'){
$(map).width(700);
$(map).height(400);
mapObject = $(map).vectorMap({
map: 'us_lcc_en',
onRegionClick: regionClicked,
onRegionTipShow: handleIOSClick,
backgroundColor: "inherit",
regionStyle: {
initial: {
fill: '#477294'
}
}
});
}
},
...