Add markers on map

[victorcazanave]

Add markers on map

[VictorCazanave]

@valh1996 a new version of the package has been published containing slots (#10) and custom attributes (#11). Feel free to reopen the issue if it doesn't help to handle markers.

[VictorCazanave]

Fine, I would have liked to contribute, but I've never done unit tests like this before.
I've tried to modify the package, but whatever I do, i get this error when running tests (with "--updateSnapshot" param):
[Warn view]: Error in v-on handler: "TypeError: location.focus is not a function"

No worries! It's not easy to fix the tests of someone else's component 😅
This error was due to the slots because now the SVG may contain other elements than <path>. If you are interested, it has been fixed at this line.

On the other hand, you were thinking of a totally free slot to put whatever we want inside? In this case the positioning would be based on which data?

I think a slot before and a slot after all the locations (<path>) are enough to customize the map.

PS : It also seems that in small countries like Switzerland, you don't even see the country anymore.

Yes, if the marker is bigger than the location, it hides it. A solution may be to choose a smaller marker or to adjust its size according to the location's size.

[VictorCazanave]

Hi @valh1996 ,

I'm not familiar with markers but if I understand well, adding a slot after <svg> tag and handling the marker-start and marker-end attributes (or any custom attributes) should be enough.
Then the user can define the markers in the slot and customize the map to add <path> attributes.
What do you think?

Could you show an example of markers on a map please? I'm curious to see how it can be used 😃

[valh1996]

Yes, your solution also seems interesting.

In fact, there is no notion of latitude/longitude, so I was thinking of adding a marker in the middle of the desired area.

For my example (based on JsFiddle), I used document.createElementNS to add a marker to the map. I think it's a reliable solution, what do you think? This would allow us to add different types of markers: text, shapes, images, etc.

(In this example, I took a random icon from the internet)

function addMarker(location) {
  if (!location) return;

  let path = document.getElementById(location);
  if (path) {
    let iconMarker = document.createElementNS('http://www.w3.org/2000/svg','image');
    const box = path.getBBox();
    iconMarker.setAttributeNS(null, 'height', '30');
    iconMarker.setAttributeNS(null, 'width', '30');
    iconMarker.setAttributeNS('http://www.w3.org/1999/xlink','href', 'https://img.icons8.com/ios-glyphs/30/000000/marker-storm.png');
    iconMarker.setAttribute("transform", "translate(" + (box.x + box.width / 2) + " " + (box.y + box.height / 2) + ")");
    path.parentNode.insertBefore(iconMarker, path.nextSibling);
  }
}

addMarker('us')

However, this solution does not appear to be fully functional. I use the world map and for some countries the markers are not correctly placed or placed underneath (bad z-index). Maybe you have an idea how to place the marker always in the right zone ?

[VictorCazanave]

I tested your solution and I also think it's reliable 👍

Replacing path.parentNode.insertBefore(iconMarker, path.nextSibling) by path.parentNode.appendChild(iconMarker) seems to fix the markers placed underneath.

To place the marker exactly in the middle of the location, the translation should be (box.x + (box.width / 2) - 15) + " " + (box.y + (box.height / 2) - 15) (15 is half of the size of the icon).
However some countries may need a specific position because they contain islands or separate parts:

• Australia with a small island at the bottom right corner:
  
• USA with Alaska state:
  

If I have time this week, I will add slots in the components. Then we can take advantage of Vue and avoid to manipulate the DOM to add the markers.
Or if you know how to do it, feel free to open a pull request!

[valh1996]

Fine, I would have liked to contribute, but I've never done unit tests like this before.

I've tried to modify the package, but whatever I do, i get this error when running tests (with "--updateSnapshot" param):
[Warn view]: Error in v-on handler: "TypeError: location.focus is not a function"

On the other hand, you were thinking of a totally free slot to put whatever we want inside? In this case the positioning would be based on which data?

PS : It also seems that in small countries like Switzerland, you don't even see the country anymore.