D3 JS - Overlapping Circle Issue - Google Map API

[vijay joshi]

Hi All,

I already created a Map Overlay view with Circles denoting with different colors. I am facing issue where data which is having same longitudes and latitudes they are overlapping with each other. 

Any thought what would be the best solution for this issue? I thought of force layout but the code which I have doesn't seems to be fit in easily in that.

Below is code snippet:

$('#gPStrack').change(function(event){

var map = new google.maps.Map(d3.select("#dashBoardGraph").node(), {

 zoom: 4,

 center: new google.maps.LatLng(38.029891, -95.225433),

 mapTypeId: google.maps.MapTypeId.ROADMAP

});

d3.json(mapDataResourceURLOverRide, function(data) {

console.info(data);

 var overlay = new google.maps.OverlayView();

 // Add the container when the overlay is added to the map.

 overlay.onAdd = function() {

   var layer = d3.select(this.getPanes().overlayMouseTarget).append("div")

       .attr("class", "stations");

// set this as locally scoped var so event does not get confused

var div = d3.select("div.stations");

var me = this;

// Add a listener - we'll accept clicks anywhere on this div, but you may want

// to validate the click i.e. verify it occurred in some portion of your overlay.

google.maps.event.addDomListener(div, 'mouseover', function() {

google.maps.event.trigger(me, 'mouseover');

});

   // Draw each marker as a separate SVG element.

   // We could use a single SVG, but what size would it have?

   overlay.draw = function() {

      var projection = this.getProjection(),

         padding = 10;

     var marker = layer.selectAll("svg")

         .data(d3.entries(data))

         .each(transform) // update existing markers

       .enter().append("svg:svg")

         .each(transform)

         .attr("class", "marker");

     

     

         

     // Add a circle.

     marker.append("svg:circle")

         .attr("r", 8.5)

         .attr("cx", padding)

         .attr("cy", padding)

         .style('opacity', 0.4)

         .on("mouseover", function(d){

          d3.select(this)

          .style("stroke-width", ".3em")

.style("cursor", "pointer")})

          .on("mouseout", function(d){d3.select(this).style("stroke-width", "");})

          .style("fill",function(d) { 

                var c = "green";

                if(d.value.flagValue !== undefined){

                if(d.value.flagValue == "red"){

                c = "red";

                }

                if(d.value.flagValue == "yellow"){

                c = "yellow";

                }

         }

             return c; })

           ;

          

   

        //tooltip

     

$('svg circle').tipsy({

gravity: 'nw',

html: true,

title: function(d) {

 var d = this.__data__;

 return '<span style="font size:18px"> + d.value.state +  '<span>';

}

});

     

     function transform(d) {

       d = new google.maps.LatLng(d.value.latitude, d.value.longitude);

       d = projection.fromLatLngToDivPixel(d);

       return d3.select(this)

           .style("left", (d.x - padding) + "px")

           .style("top", (d.y - padding) + "px");

     }

   };

 };

 // Bind our overlay to the map

 overlay.setMap(map);

});

}

});

Any help is really appreciated.

[Syamimi Aziah]

May I know how do you solve this?

[vijay joshi]

Not able to resolve yet.