javascript - Offset x,y location of D3 markers on Google Map v3 -
i trying overlay multiple markers @ same lat/long using d3.js on google maps. data trying display weather data marker display temp, dewpoint, relative humidity, etc. @ 1 time. need markers offset lat/long point given each marker . map @ http://alert.fcd.maricopa.gov/alert/google/v3/mobile_test.html click on datasets , weather data. right dewpoint display , believe temp underneath because not getting errors on javascript file.
picture of how marker display @ image
function updatewximage() { var reqstamp = number(new date()); var rptdate = " "; var strdataset = ""; var item = $('#date')[0]; item.style.background = "#ffff00"; item.style.color = "#000000"; item.innerhtml = "<strong>...updating dataset...</strong>"; clearoverlays(); var width = 36; var height = 12; // start d3 code var fill = d3.scale.linear() .domain([0.0, 150.0]) .range(["black", "black"]); // load station data. when data comes back, create overlay. // calls currain.php converts xml json d3.json("./php/currentwx.php", function(jsondata) { overlayd3 = new google.maps.overlayview(); var data = jsondata.data; // add container when overlay added map. overlayd3.onadd = function() { var layer = d3.select(this.getpanes().floatpane).append("div") .attr("class", "stations") .attr("id", "stations"); // draw each marker separate svg element. // use single svg, size have overlayd3.draw = function() { var projection = this.getprojection(); padding = 12; var marker1 = layer.selectall("svg") .data(d3.entries(data)) .each(transform) // update existing markers .enter().append("svg:svg") .each(transform) .attr("class", "marker") .attr("id", "marker") .attr("width", width) .attr("height", height) .attr("title", function(d) { return d.value.tempid + ' - ' + d.value.name; }) .on("click", function(d) { addtempinfowindow(d); }); // add rectangle. marker1.append("svg:rect") .attr("x", 0) .attr("y", 0) .attr("rx", 4) .attr("ry", 4) .attr("width", padding*3) .attr("height", padding) .attr("title", function(d) { return d.value.tempid + ' - ' + d.value.name; }) .style("fill", function(d) { return fill(d.value.temp); }) .style("display", function(d) { if (d.value.temp == 0 || d.value.temp < -90) { return "none"; } else { return "inline"; }}); // add label. marker1.append("svg:text") .attr("x", padding*1.5) .attr("y", padding*0.85) .attr("text-anchor", "middle") .attr("font-weight", "bold") .attr("font-size", function(d) { if (d.value.temp == 0 || d.value.temp < -90) { return padding*1.05; } else { return padding; }}) .style("fill", function(d) { if (d.value.temp < -90) { return "red"; } else { return "red"; } }) .text(function(d) { if (d.value.temp < -90) { return "m"; } else { return d.value.temp; } }); 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 + "px") .style("top", d.y + "px"); } }; overlayd3.onremove = function() { var marker = d3.select("#marker").remove(); var layer = d3.select("#stations").remove(); }; }; overlayd3.setmap(map); overlayd3.onadd = function() { var layer = d3.select(this.getpanes().floatpane).append("div") .attr("class", "stations") .attr("id", "stations"); // draw each marker separate svg element. // use single svg, size have overlayd3.draw = function() { var projection = this.getprojection(); padding = 12; var marker2 = layer.selectall("svg") .data(d3.entries(data)) .each(transform) // update existing markers .enter().append("svg:svg") .each(transform) .attr("class", "marker2") .attr("id", "marker2") .attr("width", width) .attr("height", height) .attr("title", function(d) { return d.value.dewpointid + ' - ' + d.value.name; }) .on("click", function(d) { adddewpointinfowindow(d); }); // add rectangle. marker2.append("svg:rect") .attr("x", 0) .attr("y", 0) .attr("rx", 4) .attr("ry", 4) .attr("width", padding*3) .attr("height", padding) .attr("title", function(d) { return d.value.dewpointid + ' - ' + d.value.name; }) .style("fill", function(d) { return fill(d.value.dewpoint); }) .style("display", function(d) { if (d.value.dewpoint == 0 || d.value.dewpoint < -90) { return "none"; } else { return "inline"; }}); // add label. marker2.append("svg:text") .attr("x", padding*1.5) .attr("y", padding*0.85) .attr("text-anchor", "middle") .attr("font-weight", "bold") .attr("font-size", function(d) { if (d.value.dewpoint == 0 || d.value.dewpoint < -90) { return padding*1.05; } else { return padding; }}) .style("fill", function(d) { if (d.value.dewpoint < -90) { return "red"; } else { return "turquoise"; } }) .text(function(d) { if (d.value.dewpoint < -90) { return "m"; } else { return d.value.dewpoint; } }); 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 + "px") .style("top", d.y + "px"); } }; overlayd3.onremove = function() { var marker2 = d3.select("#marker2").remove(); var layer = d3.select("#stations").remove(); }; }; overlayd3.setmap(map); // date report created meta object in json file var meta = jsondata.meta; var rptdate = meta.created; item = $('#date')[0]; item.style.background = "#9cf"; item.style.color = "black"; $('#date')[0].innerhtml = "data: " + rptdate + strdataset + "(weather)"; }); } i think need edit section have tried unsuccessful.
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 + "px") .style("top", d.y + "px"); } };
Comments
Post a Comment