Search code examples
javascriptsvghere-api

here-api how to search and move an svg marker from a H.map.Group to an other

I have a map group containing blue svg markers and a map group containing green svg markers when the user klick on a marker I would like to find the clicked marker and move it to the opposite group, which means if the user klick on blue marker the marker should change group and color from blue to green and vice versa.

here comes the code html and js without api_key:

    <html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    
    <title>Display a map with custom SVG markers</title>
    <link rel="stylesheet" type="text/css" href="demo.css" />
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
  </head>
  <body id="markers-on-the-map">
    
    <div class="page-header">
        <h1>SVG Graphic Markers</h1>
    <div id="map"></div>
    <script> 
    function PinpointsvgMarkers() {
     map.addObject(blueGroup);
       blueGroup.addEventListener('tap', function (evt) {
     }, false);
     for (i=0;i<list.length;i++){
           var point = new H.geo.Point(list[i].lat, list[i].lng);
           var svgicon = new H.map.Icon(svg.replace('#090', '#009').replace( /__num__/g, 1 ), options);
           addsvgMarkerToGroup(i+1, blueGroup, point, '#009', 2);
         }
  }


function addsvgMarkerToGroup(i, group, coords, color, onOff) {
 var svgBlueMarker = new H.map.Icon(svg.replace('#090', color).replace( /__num__/g, i ), options);
 var svgGreenMarker = new H.map.Icon(svg.replace('#009', '#090').replace( /__num__/g, i ),options);

   var marker = new H.map.Marker(coords,{icon: svgBlueMarker});
   marker.addEventListener('tap', function(e) {
     if(onOff === 1){
       marker.setIcon(svgBlueMarker);
     }else if(onOff === 2){
       marker.setIcon(svgGreenMarker);
     }  
 });
 blueGroup.addObject(marker);
 }
 
 
 function changeGroupForTheClickedMarker(marker, oldGroup, newGroup){
     // here I wont to find the the marker and delete it from the old group and create it in the new group and change to the appropriate color.
 }


var platform = new H.service.Platform({
  apikey: "YOUR_API_KEY"
});
var defaultLayers = platform.createDefaultLayers();

var map = new H.Map(document.getElementById('map'),
  defaultLayers.vector.normal.map,{
  center: {lat:59.34084, lng:18.03298},
  zoom: 11,
  pixelRatio: window.devicePixelRatio || 1
});
window.addEventListener('resize', () => map.getViewPort().resize());
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);
var blueGroup = new H.map.Group();
var greenGroup = new H.map.Group();
var list = [
                {lat:'59.34084', lng:'18.03298'},
                {lat:'59.34199', lng:'18.09176'},
                {lat:'59.33713', lng:'18.06236'},
                {lat:'59.34025', lng:'18.11398'}
            ]

 var svg = `<svg xmlns="http://www.w3.org/2000/svg" width="28px" height="36px">
            <path d="M 19 31 C 19 32.7 16.3 34 13 34 C 9.7 34 7 32.7 7 31 C 7 29.3 9.7 28 13 28 C 16.3 28 19
             29.3 19 31 Z" fill="#000" fill-opacity=".2"/>
            <path d="M 13 0 C 9.5 0 6.3 1.3 3.8 3.8 C 1.4 7.8 0 9.4 0 12.8 C 0 16.3 1.4 19.5 3.8 21.9 L 13 31 L 22.2
             21.9 C 24.6 19.5 25.9 16.3 25.9 12.8 C 25.9 9.4 24.6 6.1 22.1 3.8 C 19.7 1.3 16.5 0 13 0 Z" fill="#fff"/>
            <path d="M 13 2.2 C 6 2.2 2.3 7.2 2.1 12.8 C 2.1 16.1 3.1 18.4 5.2 20.5 L 13 28.2 L 20.8 20.5 C
             22.9 18.4 23.8 16.2 23.8 12.8 C 23.6 7.07 20 2.2 13 2.2 Z" fill="#090"/>
            <text id="label-text" xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="12" font-weight="bold" y="16" x="13" stroke-width="0" fill="#ffffff">__num__</text>
            </svg>`
  var options = {
    'size': new H.math.Size(28, 36),
    'anchor': new H.math.Point(14, 32),
    'hitArea': new H.map.HitArea(
        H.map.HitArea.ShapeType.POLYGON, [0, 16, 0, 7, 8, 0, 18, 0, 26, 7, 26, 16, 18, 34, 8, 34])
  };

PinpointsvgMarkers(map);
    </script>
  </body>
</html>
Solution

  • The toggle between the SVG markers can be achieved by setting any arbitary value using the method setData (data)

    Documentation link: https://developer.here.com/documentation/maps/3.1.25.0/api_reference/H.map.Marker.html

    For example:

       var marker = new H.map.Marker(coords,{icon: svgBlueMarker});
     marker.setData({status: 'on'})
   marker.addEventListener('tap', function(e) {
console.log("1");
     if(marker.getData().status == "on"){
               marker.setIcon(svgGreenMarker);
                 console.log("2");
marker.setData({status: 'off'})
}else if(marker.getData().status == "off"){
       marker.setIcon(svgBlueMarker);
             console.log("3");
             marker.setData({status: 'on'})
     }
 });
 blueGroup.addObject(marker);
 }

    Adding the working example here: https://jsfiddle.net/raj0665/emwvub89/9/