CODEWITHSUNDEEP
htmlcssangulartypescript
core114
core114

Reputation: 5325

how to do on the Angular svg map region select area?

I added this map for the angular type script project, dose any one know to how to create select region on the map

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}



#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}



#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}



#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;
  }
}

Upvotes: 2

Views: 1637

Answers (1)

Guy Nachshon
Guy Nachshon

Reputation: 2635

Adding it to angular | edit

To use it inside angular, you should use its (angular's) lifecycle hooks, and specifically, for your case, I would use ngAfterViewInit in your appComponent. There should be some altercations from the code I wrote earlier since typescript does not support style property on elements.

this is a working example, and below is the relevant code

ngAfterViewInit() {
    let selectedArea = null;
    let areas = document.querySelectorAll<SVGElement>('path'); // gets an array of all of the paths in the DOM
    areas.forEach((area) => {. // for each svg path
      area.addEventListener('mouseover', function () {
        area.style.fill = 'red'; // add red on hover
      });
      area.addEventListener('mouseout', function () {
        area.style.fill = '';  // return to default on mouse out
      });
      area.addEventListener('click', function () {
        console.log(selectedArea);
        if (selectedArea) {
          // check if there is a selectedArea
          document.querySelector<SVGElement>(`#${selectedArea}`).setAttribute('class', 'st0') // changed
        }
        if (selectedArea !== area.id) {
          selectedArea = area.id;
          area.setAttribute('class', 'selectedArea'); // changed
        }
      });
    });
  }

It depends on what you want to achieve. if you want to highlight a region on hover, add this to your CSS:

path:hover { fill: red; }

If you want a more customisable method that allows you to store your user's choice, you can use JS. here is a minimal version (stores the choice in a variable). I added to your CSS a class named selectedArea. And using JS, I chose all your SVG paths and assigned eventListeneres to them.

i cant attach your whole code because your HTML is to long, so the CSS will be as follows:

#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;
  }
}


.selectedArea {
  stroke: black;
  fill: purple;
}

JS:

let selectedArea = null
let areas = document.querySelectorAll("path")
areas.forEach((area) => {
  area.addEventListener("mouseover", function() {
    area.style.fill = "red"
  });
  area.addEventListener("mouseout", function() {
    area.style.fill = ""
  });
  area.addEventListener("click", function() {
    console.log(selectedArea)
    if (selectedArea) { // check if there is a selectedArea
      document.querySelector(`#${selectedArea}`).classList = "st0"
    }
    if (selectedArea !== area.id) {
      selectedArea = area.id
      area.classList = "selectedArea"
    }
  })
})

Upvotes: 3

Related Questions