I’m creating an interactive map for office locations to make it easier for clients to reach out to the nearest office. I use HTML file, CSS file, and JS file together for this map. Everything works fine except when your point out a location on the map, information about the nearest office should popup on the right side of the screen. This information includes a hyperlink to the office’s website. The problem is that the hyperlink looks fine (blue and underlined) but it is not clickable. I mean the link does not work.
I tried all possible solutions to solve that. Can you help me? Thanks in advance.
This is the HTML file
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Interactive Geographical Map w/ SVG & JavaScript</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./vasbdc.css">
</head>
<body>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
inkscape:export-ydpi="96"
inkscape:export-xdpi="96"
inkscape:export-filename="/Users/maqabljh/OneDrive/test.png"
inkscape:version="1.0rc1 (09960d6, 2020-04-09)"
sodipodi:docname="test.svg"
id="vasbdc-map"
viewBox="-44643 -21466 74862 32467"
version="1.1"
width="1260"
height="585">
<g id="City1" transform="translate(1615 46.592)">
<title>New University Office - Central Region</title>
<desc>
<image xlink:href="1234.jpg" alt="LOGO"></image>
<p>
<br>Tel: 111.222.3333
<br><a href="http://www.google.com/">www.123.com</a>
</p>
</desc>
<path d="m26870-5569l816-130 1345-188 26 13 21 10-1 35-62 40-61-6-41 15-109 140 4 36 26 55-82-11-67-5-51-1-41-25-16 85 15 71-6 55-27 151 25 56 31 5h46l15 41-11 80-52 45-25-10-51-6-36 5-26 5-21 25-10 25-1 40 15 36 15 45 10 51 20 50-5 45-6 45-26 35-21 20v56l-52 65-31 20-36 55h-26l-36 4-57 35-20-25 11-35 26-25 36-65 1-51 15-25 26-65 31-15 31-30 42-30 5-30-15-20-62-26-20 10-88 35v10l-52 90-73 191-47 75-47 85 15 66 66 10 62-14 62 5 40 21-25 19-21 20-42 61-10 45-42 50-31 20-26 30-10 30-6 30-10 20-15-5v-25l10-35 11-10 5-36-5-20-30-20h-31l-26-1-41 35-16 35-5 21 15 10 26 25-1 25v66l5 30-11 25-21 10h-15l-51 20-26 40-32 45-36 15-10 30-6 30 10 65-10 25-16 46-6 60 5 45 10 25 5 21 15 30v40l-26 40-11 20v56l-21 40-67 19-26-10 1-15-5-20 5-25v-25l-5-36-15-30-20-15-31 15-21 50-21 40-16 40-21 80-5 46-26 35-11 40-16 35-21 75-10 20-26 40-37 40-92 55-32 90-21 86-73 120-31 55 10 36 51 25 71 31 56 15 41 46 25 61-31 45-21 25-21 30-41 25-46 4-26-5-30-20-21-6h-30l-16 25-6 35-20 46-21 20-46-1-46-15-62 40-27 75-31 95-47 90-52 76-47 44-15 36 20 30 25 30 10 26-20 20-16 20-26 25-10 30-11 30-36-6-31-10-35 5-21 15-11 20-20 30-26 45-26 30-11 30-5 50 10 31 25 35 25 10 52 1 56 10 20 21 47 5 30-20 26 5 46 6 67-5 82-9v55l-1 40-26 50-36 15-25-5-5-20-10-30-16-31-41-10-30 5-47 14-46 15-21 40 10 31 25 50 21 35 20 51 4 40h-36l-41-5-40-6-31 5-16-10-25-30-36-36-30-45-51-41-25-30-10-16-47 5-41 20-56 30-21 20-37 95-10 20-21 45-37 70-10 20-21 35-52 81-32 80 5 70 46 16 67-30 61 11 5 25-21 45 36 15 46 1 31 20 15 30 36 26 41-10 92-45v71l-31 20-47 35-62 39-35-10-36-30-41 4-21 35-31 71-36 25-26-41-4-75 5-51-35-20-46-11-62-10-87-6-88 80-31 45-57 25-41 25-31 70-37 20-35-5-21 56-20-52v-35l21-30 20-20 21-15 78-70-4-151 46-15-25-20-31-10-57 15-15-16v-20l1-20-15-45 5-10h41l10-5 5-5-5-30 11-5 26-15 20-20 5-15 6-30 15-20 6-5 5-15-408-255-21-10h-5l-84 9-23-35-67-11-51-5-41-16-26 5-15 35-26 10-57-10-71-26-77-16-66-15-87-21-62-31-15 15v30l-42 5-46-5-26 35-20 10-15-46 21-65 26-45 42-85 15-35 46 45 36-40 26-5 87 87 51 20 41-30 51 11 42-35-16-31-46-20-46-15-61-21-25-76 16-55-31-5-36 15-57 55-30-6-10-35-15-56-20-35 36-20 56-45 63-70 16-60v-75l31-5 10 25 20 51-10 40 35 45 20 71h36l72 6 61 40 46 46 51 5 10-35-20-50-25-20-51-11v-55h57l46 1 25-10-25-26-20-35 20-20 62-35 77-14 57-5 5-40 31-15 62-20v-40l-51 5-57 14-128 55-93 29-72 35-26 40-31 40-10-25-20-46-5-45 26-35 31-15-36-35-61-16-41-56 6-35 21-20 5-30v-55l62 5 61 21 41 25 16-25-10-45-20-25-26-26 6-30 41-30 25 5 139 2 72-25 46 5 67 31 19 65 5 51 62 10 46 21 25-35-35-86 26-35 41 15 51 26 46 5 6-60 37-60 16-65-31 4-31 25-16 40-36 25-57-5-76-26-52 5-5-25 11-46-36-5-31 20h-30l-41-21-62 5-25-46 26-45 5-40-9-70 16-46 66-14 46 20 41 16 52-5 5-35-41-26-46-20-36-10-30-41v-35l31-25h52l36 1 15 30h41l10-25 6-30 36-45 15 30-6 45-15 46 15 25 36 5 31-50 36-15 21-45 16-50 25 10 46 81 66 21 62 15 9 46v45h36l26-50h46l37-35-16-30-71-26-46-20-46-26-77-50-66-61-35-31-77-10-47 19h-56l-46-5-26 45-21 60h-31l-4-81 15-35 31-35 68-70 36-85h46v40l20 61 52-20 5-50 16-45 31-20 36-5 26-30 16-40 30-10 16 25-1 46 20 45 16 10 30-10 26 16 30 40 36 31 41 15 31-25-10-25-25-36-46-35-26-25-40-56-10-35 26-20 46-45-10-36h-31l-45-30-122-122-57-6-41 10-72 10-20-21-5 11-6 45-21 40-26 5-30-36-5-45 6-40 15-30 42-30 51-45 37-25 36-60 26-10 41 20 25-15 6-30 15-20 21 5 15 16 36 20 26-15 20 15 20 6 31 5 5 20-16 25h-30l-47 10-31 30v15l31 30 15 35 30 21 16-10 21-50 36-35 26-10 26-5 5 20 4 40 5 36 15 25 15 35 5 31-10 40-11 40 20 25 26 5 15-20 21-20v-30l-4-55-5-40 41-10 41-5 26 5 5 25 5 36 15 25h36l15-15 6-35-5-45-15-36-20-60 10-40 26-5 20 35 46 51 35 51 31 25 41-25 6-50-30-46-16-30 21-5 41-5 11-45-10-50-20-31h-41l-42 20-61 25-36-6-5-40 11-40v-30l-15-31-10-40 26-5 15 25 15 31 25 20 46 21 21-46-45-80 11-56 20-10 41 16 36-10 5-25-20-15-46-1-56-25 15-25 21-10 5-25 16-46 41-9 5-30 21-46 21 16 5 25-1 50 10 15 31 26 15 40 4 71v50l15 10 31-30 6-60 21-25h25l31 15 46 11 62 15 31-30-21-25-61-46-41-35-20-61 47-40 21-10 56-29 57-20v-35l-25-16h-67l-72 24-57 25-62 25-25-25-10-36 32-105 31-30 6-76 36 11 20 20 46 15 56-4 21-20-41-21-51-35-46-31-5-20 16-25-31-15-71-11-32 55-46 5-61-11-10-35 46-15 36-19 31-46 51 11 62-20 32-60-11-10h-20l-67-1-51-20-77 29-83 65-35-60-41-51-61-1 4 51 26 45-16 5-26 35-82 25-113 14-61-15-47 4-20-45 16-40 98-20 51 1 31-35-56-41 57-50 25-10 63-55 78-150 56-5 5 30 25 41 67 15 82-39 52-80 42-35 82 31 46 20 71 11 82 5 67-50 37-90-4-55-20-61-31-50-40-91 21-20 15-20 26-16 25 1 21 9 15 5 16-10 4-11-14-28-15-20v-25l14-22 14-16 25-25 31-53z"/>
</g>
</svg>
<div id="centerInfo"></div>
<script src="./vasbdc.js"></script>
</body>
</html>
This is the JS file
var vasbdcmap = document.getElementById("vasbdc-map"),
centerInfo = document.getElementById("centerInfo"),
allCenters = vasbdcmap.querySelectorAll("g");
vasbdcmap.addEventListener("click", function(e){
var center = e.target.parentNode;
if(e.target.nodeName == "path") {
for (var i=0; i < allCenters.length; i++) {
allCenters[i].classList.remove("active");
}
center.classList.add("active");
var centerName = center.querySelector("title").innerHTML,
centerPara = center.querySelector("desc p");
sourceImg = center.querySelector("img"),
imgPath = "http://gator2007.temp.domains/~virgibdc/";
// imgPath = "";
centerInfo.innerHTML = "";
centerInfo.insertAdjacentHTML("afterbegin", "<img src="+imgPath + sourceImg.getAttribute('xlink:href')+" alt='"+sourceImg.getAttribute('alt')+"'><h1>"+centerName+"</h1><p>"+centerPara.innerHTML+"</p>");
centerInfo.classList.add("show");
}
})
And this is the CSS file
* {
box-sizing: border-box;
}
body {
background: #88a;
color: #fff;
font-family: Avenir, Calibri, sans-serif;
}
#vasbdc-map {
fill: #174f17;
}
#vasbdc-map g {
-webkit-transition: .3s;
transition: .3s;
}
#vasbdc-map g:hover {
fill: #2e9e2e;
cursor: pointer;
}
.active, .active:hover {
fill: #2e2e9e !important;
}
#centerInfo {
position: absolute;
top: 0;
right: 0;
width: 25%;
background: rgba(0, 0, 0, 0.2);
pointer-events: none;
opacity: 0;
-webkit-transition: 1s;
transition: 1s;
}
@media all and (max-width: 800px) {
#centerInfo {
width: 40%;
}
}
@media all and (max-width: 750px) {
#centerInfo {
width: 100%;
position: static;
background: none;
}
#centerInfo.show p {
color: #000 !important;
margin-bottom: 2rem;
}
}
#centerInfo.show {
opacity: 1;
}
#centerInfo h1 {
background: #2e2e9e;
padding: .3rem;
padding-left: 1rem;
margin-top: -.5rem;
font-weight: 400;
}
#centerInfo p {
margin-left: 2rem;
margin-right: 2rem;
}
#centerInfo img {
width: 100%;
}
Advertisement
Answer
As s.kuznestov said, many of your tags are not closed, replace your HTML code like below-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodePen - Interactive Geographical Map w/ SVG & JavaScript</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./vasbdc.css">
</head>
<body>
<!-- partial:index.partial.html
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1900 822" id="vasbdc-map">-->
<g id="City1" transform="translate(1615 46.592)">
<title>New University Office - Central Region</title>
<desc>
<image xlink:href="1234.jpg" alt="LOGO"></image>
<p>
<br>Tel: 111.222.3333
<br><a href="http://www.google.com/">www.123.com</a>
<be>
</be>
</p>
</desc>
</g>
</body>
</html>