How to create an animated marker in jVectorMap

Question

I want to create an animated marker on Jvector map, I want to use this Bootstrap Growing Spinner with different colors as makers how can I do that.

My Jvector map code:

jQuery.noConflict();
jQuery(function(){
  var $ = jQuery;
  $('#map').vectorMap({
    map: 'world_mill_en',
    panOnDrag: true,
    focusOn: {
      x: 0.5,
      y: 0.5,
      scale: 1,
      animate: true
    },
    series: {
      regions: [{
        scale: ['#C8EEFF', '#0071A4'],
        normalizeFunction: 'polynomial',
      }]
    },
    markerStyle: {
  initial: {
    fill: '#F8E23B',
  },
  hover: {
    stroke: '#4d53c9',
    "stroke-width": 2,
    cursor: 'pointer'
  },
  selected: {
    fill: 'blue !importanr'
  },

},

     backgroundColor: '#13acbf',
    markers: [
  {latLng: [41.90, 12.45], name: 'Location: Vatican City'},
  {latLng: [43.73, 7.41], name: ' Location: Monaco'},
  {latLng: [44.73, 7.42], name: ' Location: Monaco', style:{fill:'#ff1100'}},
  {latLng: [12.9716, 77.5946], name: 'Location: Bengaluru', style: {fill: '#258210'}},
  ]
  });
})

I tried many by adding css but it didn't worked.

Answer 1

I've wanted to do this for years but I never had the time.

DEMO #1:

 $(document).ready(function() { var animatedIcon = '<svg width="40" height="40" viewbox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" fill="none" r="4" stroke="currentColor" stroke-width="3"><animate attributeName="stroke-width" from="3" to="0" dur="1.5s" begin="0s" repeatCount="indefinite"/> <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></svg>', values = ["0"], locations = [{latLng: [35.45582, 139.68187], name: 'Diamond Princess'}]; function addAniMarkers(map, locations, values) { var svg = $(animatedIcon)[0], circle = svg.firstChild, mapObj = $(map).vectorMap('get', 'mapObject'), svgRoot = mapObj.canvas.node, g = document.createElementNS('http://www.w3.org/2000/svg', 'g'); mapObj.aniMarkers = []; for(var i=0, l=locations.length; i<l; i++) { var marker = locations[i], clone = circle.cloneNode(true); mapObj.addMarker(i, marker, []); mapObj.aniMarkers.push(clone); g.appendChild(clone); } svgRoot.appendChild(g); mapObj.series.markers[0].setValues(values); $(mapObj.container).trigger("viewportChange"); } function repositionAniMarkers(map) { var mapObj = $(map).vectorMap('get', 'mapObject'), markers = mapObj.markers, aniMarkers = mapObj.aniMarkers; for (var i in markers) { var point = mapObj.getMarkerPosition(markers[i].config), el = markers[i].element, cx = el.shape.node.getAttribute("cx"), cy = el.shape.node.getAttribute("cy"), clone = aniMarkers[i]; clone.setAttribute("cx", cx); clone.setAttribute("cy", cy); } } $("#map").vectorMap({ map: "world_mill_en", backgroundColor: "aliceblue", zoomOnScroll: true, regionStyle: {initial: {fill: "lightgrey"}}, markerStyle: {initial: {fill: '#F8E23B', stroke: '#383f47'}}, markers: [], series: { markers: [{ attribute: 'fill', scale: { '0': '#ff0000' }, values: [], }] }, onViewportChange: function(event, scaleFactor) { repositionAniMarkers("#map"); } }); addAniMarkers("#map", locations, values); });

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.css" type="text/css"> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/tests/assets/jquery-jvectormap-world-mill-en.js"></script> </head> <body> <div id="map" style="width: 600px; height: 400px"></div> </body> </html>

Explanation:

You need to take the animated SVG icon and clone the content to the same position as the map markers. After that, You can use the jVectorMap fill option for markers. That's it.

DEMO #2:

 $(document).ready(function() { var markerIcon = '<svg width="40" height="40" viewbox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" fill="none" r="10" stroke="#000000" 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="pointColor" stroke="#000000" stroke-width="1" r="6"/></svg>'; function imgFromSVG(svg, pointColor) { var newSVG = svg.replace(/pointColor/gi, pointColor); return 'data:image/svg+xml;charset=UTF-8,' + escape(newSVG); } $("#map").vectorMap({ map: "world_mill_en", backgroundColor: "aliceblue", zoomOnScroll: true, regionStyle: {initial: {fill: "lightgrey"}}, markerStyle: {initial: {fill: '#F8E23B', stroke: '#383f47'}}, markers: [{latLng: [35.45582, 139.68187], name: 'Diamond Princess'}], series: { markers: [{ attribute: 'image', scale: { '0': imgFromSVG(markerIcon, '#ff0000') }, values: ['0'], }] } }); });

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.css" type="text/css"> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/tests/assets/jquery-jvectormap-world-mill-en.js"></script> </head> <body> <div id="map" style="width: 600px; height: 400px"></div> </body> </html>

Explanation:

You need to take the animated SVG icon and use the jVectorMap image option for markers. This way, You can tweak the svg attributes according to Your scale values.

BTW, thanks to bjornd for the great jVectorMap.

How to create an animated marker in jVectorMap

Question

1 answers

solution1
1 2020-02-13 13:18:55

How to create an animated marker in jVectorMap

Question

1 answers

solution1 1 2020-02-13 13:18:55

solution1
1 2020-02-13 13:18:55