javascripthtmlsvggisbing-maps

pulse animation pushpoint on Bing Map

Heloo everyone I am Trying to add animated pulse pushpoint on bing map by using svg on the flowing code :

////////////////////////////////  pushpoint.svg
<svg width="200" height="200" viewbox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
  <circle cx="20" cy="20" fill="red" r="10" stroke="red" stroke-width="2">
    <animate attributeName="r" from="8" to="20" dur="1.5s" begin="0s" repeatCount="indefinite"/>
    <animate attributeName="opacity" from="1" to="0" dur="1.5s" begin="0s" repeatCount="indefinite"/>
  </circle>
  <circle cx="20" cy="20" fill="red" r="10"/>
</svg>

/////////////////////////////////////////////////////



   return new Microsoft.Maps.Pushpin(location, {
        icon: "pushpoint.svg",
        title: "name",
        anchor: new Microsoft.Maps.Point(radius, radius)
    });

the svg not animated on the map

please any one can help with solution or is there another way to achieve like this picture

enter image description here

Solution

  • As noted in the comments, SVG pushpins are converted into a static image and then drawn onto the map HTML5 canvas. Using DOM elements such as SVG's and image elements as pushpins have severe performance limitations, so the Bing Maps V8 SDK draws these onto the canvas to provide high performance.

    There are a couple of ways around this.

    1. There is a sample that adds support for a HTML Pushpin layer. https://samples.bingmapsportal.com/?sample=html-pushpin-layer This could be used to load your SVG as a DOM element on the map so that it animates normally. Note that this sample creates a custom module that you will need to load in as an additional javascript file.
    2. It looks like your pulsing pin is two circles. That could be done using a polygon. However the size of the polygon would change with each zoom level, so you might want to scale the size accordingly. Animation of polygons isn't the smoothest in Bing Maps, so this might not be the best approach.

    If you are just starting out and not required to use Bing Maps, consider using Azure Maps. Its web SDK is newer and has more features, higher performance, supports animations, and has a built in HTML marker/pushpin class.

    https://samples.azuremaps.com/

    https://learn.microsoft.com/en-us/azure/azure-maps/