how to do on the Angular svg map to bubble point? - css

Question

I added this map for the angular type script project, dose any one know to how to create bubble count region on the map like this image
Stack blitz here
here the jsFiddle code link
css here
p {font-size: 12px}
#core {
fill: #ff4f81;
animation: pulse1 1.5s ease-in-out infinite;
}
#radar {
fill: #F99EAD;
animation: pulse2 1.5s ease-in-out infinite;
}
#keyframes pulse1 {
0% {
opacity: 0;
transform: scale(0);
}
30% {
opacity: 1;
transform: scale(1.5);
}
60% {
opacity: 1;
transform: scale(2);
}
100% {
opacity: 0;
transform: scale(2);
}
}
#keyframes pulse2 {
0% {
transform: scale(1, 1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(6, 6);
opacity: 0;
}
}
.row-wrap {
text-align: center;
float: left;
margin: 0 10px;
}
.row-middle {
font-size: 30px;
color: #0E76FE;
font-weight: 700;
}
.row-middle-two{
font-size: 17px;color: #808490;
}
.row-middle-three{
font-size: 14px;color: #9DA2AE;
}
.row-bottom-small{
font-size: 10px; color: #B9C0CD;
}.row-top-small{
font-size: 10px;
color: #B9C0CD;
}
.row-bottom{
color: #A3A9B5;font-size: 12px;
}
.row-top{
color: #A3A9B5;font-size: 12px;
}
p {font-size: 12px}

Answer 1

So, to add an SVG bubble to your map (which is also SVG), you first need to pick the SVG file you'd like to add.
I chose the following (run the fiddle to see how it looks):
<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 293.334 293.334" style="enable-background:new 0 0 293.334 293.334;" xml:space="preserve">
<g>
<g>
<path style="fill:#010002;" d="M146.667,0C94.903,0,52.946,41.957,52.946,93.721c0,22.322,7.849,42.789,20.891,58.878
c4.204,5.178,11.237,13.331,14.903,18.906c21.109,32.069,48.19,78.643,56.082,116.864c1.354,6.527,2.986,6.641,4.743,0.212
c5.629-20.609,20.228-65.639,50.377-112.757c3.595-5.619,10.884-13.483,15.409-18.379c6.554-7.098,12.009-15.224,16.154-24.084
c5.651-12.086,8.882-25.466,8.882-39.629C240.387,41.962,198.43,0,146.667,0z M146.667,144.358
c-28.892,0-52.313-23.421-52.313-52.313c0-28.887,23.421-52.307,52.313-52.307s52.313,23.421,52.313,52.307
C198.98,120.938,175.559,144.358,146.667,144.358z"/>
<circle style="fill:#010002;" cx="146.667" cy="90.196" r="21.756"/>
</g>
</g>
</svg>
since you have already had everything set up beside the bubbles, and I didn't want to change it, I added a transform attribute to the <g> (so the bubble will be at the exact points and scale)
transform="translate(-64 -126) scale(0.5)"
To add it to the map, you just need to insert it in the location groups that you'd like and change the translate parameters so that it is in the right spot.
you can see it in work here (stackbitz)