I am using %code% to create an interactive map with %code% online, for the map I use a file %code% to load marks. The problem is that when opening the %code% the map is not shown and the following appears in the console:
%pre%Then the code %code% :
%pre%Here the file %code% :
%pre% I am using jvectormap to create an interactive map with svg online, for the map I use a file json to load marks. The problem is that when opening the html the map is not shown and the following appears in the console:
Uncaught TypeError: Cannot read property '0' of undefined jquery-jvectormap-2.0.3.min.js:2
at jvm.Map.getMarkerPosition (jquery-jvectormap-2.0.3.min.js:2)
at jvm.Map.createMarkers (jquery-jvectormap-2.0.3.min.js:2)
at new jvm.Map (jquery-jvectormap-2.0.3.min.js:2)
at r.fn.init.$.fn.vectorMap (jquery-jvectormap-2.0.3.min.js:1)
at Mexico.html:21
Then the code html :
<!DOCTYPE html>
<html>
<head>
<title>Prueba</title>
<link rel="stylesheet" href="jquery-jvectormap-2.0.3.css" type="text/css" media="screen"/>
<script src="./jquery-3.2.1.min.js" charset="utf-8"></script>
<script src="./jquery-jvectormap-2.0.3.min.js" charset="utf-8"></script>
<script src="./jvectormap.mexico.js" charset="utf-8"></script>
<script src = "./markers.json"> </script>
</head>
<body>
<div id="world-map" style="width: 1000px; height: 600px;">
</div>
</body>
<script>
var jsonData; function reqListener () { jsonData = JSON.toString(this.responseText); console.log(jsonData); }; var oReq = new XMLHttpRequest(); oReq.onload = reqListener; oReq.open("get", "markers.json", true); oReq.send();
$('#world-map').vectorMap({
map: 'Mexico',
backgroundColor: '#b3d1ff',
series: {
regions: [{
values: {"c0": "1", "c1": "2"},
scale: ['#d9d4ca', '#b3d1ff'],
normalizeFunction: 'polynomial'
}]
},
regionStyle: {
initial: {
fill: "#f4f3f0",
stroke: "#666666",
"stroke-width": 1,
"stroke-opacity": 1
},
hover: {
fill: "#faa432",
"fill-opacity": "1"
}
},
markerStyle: {
initial: {
fill: '#F8E23B',
stroke: '#383f47'
}},
markers: jsonData
})
</script></html>
Here the file json :
[{
"coords": [520, 360],
"name": "2 Junior",
"style": {"fill": "green"}
},
{
"coords": [530, 360],
"name": "1 Master",
"style": {"fill": "pink"}
},
{
"coords": [570, 330],
"name": "1 Master",
"style": {"fill": "pink"}
},
{
"coords": [620, 310],
"name": "2 Junior",
"style": {"fill": "green"}
},
{
"coords": [620, 325],
"name": "1 Master",
"style": {"fill": "pink"}
},
{
"coords": [410, 345],
"name": "1 Junior",
"style": {"fill": "green"}
},
{
"coords": [370, 330],
"name": "1 Master",
"style": {"fill": "pink"}
},
{
"coords": [270, 310],
"name": "1 Master",
"style": {"fill": "pink"}
},
{
"coords": [280, 310],
"name": "1 Senior",
"style": {"fill": "orange"}
},
{
"coords": [340, 300],
"name": "2 Master",
"style": {"fill": "pink"}
},
{
"coords": [255, 270],
"name": "1 Junior",
"style": {"fill": "green"}
},
{
"coords": [360, 270],
"name": "1 Master",
"style": {"fill": "pink"}
},
{
"coords": [360, 200],
"name": "2 Master",
"style": {"fill": "pink"}
},
{
"coord": [220, 100],
"name": "2 Master",
"style": {"fill": "pink"}
},
{
"coords": [230, 100],
"name": "1 Junior",
"style": {"fill": "green"}
}
]