appending custom animation to a custom map marker in d3

Question

I have some d3 animation i want to append to a custom map marker created with an overlay. Since I customized the markers they have a class which I can target, but they are attached to the map/overlay not the svg so i am not sure how to select them.

Here is the map and custom marker creation:

var map = new google.maps.Map(mapCanvas, mapOptions)
    overlay = new CustomMarker(
      myLatlng,
      map,
      {
        marker_id: '1'
      }
    );

Which results in a class of marker. Here is the failing attempt to append my svg elements to that marker:

svg.selectAll(".marker")
  .data(locationsArray)
  .enter()
  .append("circle")
  .attr("stroke-width", 20)
  .attr("r", 20)
  // .attr("cx", function(d) { return d[1] })//position of pulse on canvas
  // .attr("cy", function(d) { return d[0] })
  .attr("class", function(d) {
    if (d[3] >= 30 && d[3] < 60) {
      d[2] == 1 ? result = "smallBadVibe" :
      d[2] == 2 ? result = "smallNeutralVibe" : result = "smallGoodVibe";
      return result;
    }
    else if (d[3] >=60 && d[3] < 90) {
      d[2] == 1 ? result = "mediumBadVibe" :
      d[2] == 2 ? result = "mediumNeutralVibe" : result = "mediumGoodVibe";
      return result;
    }
    else if (d[3] >= 90) {
      d[2] == 1 ? result = "largeBadVibe" :
      d[2] == 2 ? result = "largeNeutralVibe" : result = "largeGoodVibe";
      return result;
    }
  })

I think maybe I have to type in something other than svg.select since the marker is not on my svg but don't know what to type. In case it matters here is the animation I am applying:

function cyanBigPulse() {
  var circle = svg.selectAll(".largeNeutralVibe");
  (function repeat() {
    circle = circle.transition()
      .attr("fill", "rgba(0,255,255, .35)")
      .attr("stroke", "rgba(0,255,255,1)")
      .duration(20)//circle close
      .attr("stroke-width", 0.5) //how thick is the stroke at min size
      .attr("r", 5) //inner circle radius
      .transition()
      .duration(2000)//circle open
      .attr('stroke-width', 0.5) //how thick is the stroke at full size
      .attr("r", 150) //circle outer radius
      .ease('sine')
      .each("end", repeat)
  })();
}

A note: I will be attaching multiple circles to different spots on the map, and will be iterating through some data to create many more markers, but for now i must know how to append to that one marker, before applying that on a bigger scale. Thanks in advance for help.

Are you overlaying an SVG on top of the map? Looking at this [example](https://google-developers.appspot.com/maps/tutorials/customizing/js/markers) it looks like the custom markers are drawn on the map in `` tags. Do you have a jsFiddle or plunker with your code we could take a look at? — Mark, Jul 04 '15 at 15:06
http://plnkr.co/edit/UEW9759a3iwtCeZvsU9R?p=preview I compiled the files I am working with into a plunker. Thanks for your help Mark. In the file I have two test pulses without given x or y coordinates in hopes that appending one to the marker will set its position. — justin, Jul 04 '15 at 17:40

score 1 · Accepted Answer · answered Jul 04 '15 at 23:04

So, you want your animation to happen on top of the custom marker?

Having a little trouble wading through all that code, but in essence you can accomplish what you want appending the SVG (or SVGs if more then one) into the marker div:

var canvas = d3.select("#map-canvas");
setTimeout(function(){
   // find your "marker" and add the circle
   canvas
    .select(".marker")
    .append('svg')
    .attr('width', 50)
    .attr('height',50)
    .append('circle')
    .attr("fill", "orange")
    .attr("r", 20)
    .attr("cx", 25)
    .attr("cy", 25)
    .attr("class","smallGoodVibe");
    // kick off animations
    VYBZ();
, 500); // had to do it in a setTimeout to let the map API finish executing, perhaps this could move to a callback: http://stackoverflow.com/questions/832692/how-can-i-check-whether-google-maps-is-fully-loaded?

Here's an updated example.

Thanks Mark this was exactly the information I needed to be able to do what I am trying to do. I appreciate you taking the time to assist me. — justin, Jul 04 '15 at 23:39

appending custom animation to a custom map marker in d3

1 Answers1