CODEWITHSUNDEEP
cssangulartypescript
core114
core114

Reputation: 5325

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

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

mage description here

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}

Upvotes: 0

Views: 391

Answers (1)

Guy Nachshon
Guy Nachshon

Reputation: 2635

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)

Upvotes: 1

Related Questions