I am trying to overlay multiple markers at the same lat/long using d3.js on
Google Maps. The data I am trying to display is weather data so I would
like the marker to display temp, dewpoint, relative humidity, etc. all at
one time. I need to get the markers to offset from the lat/long point
given to each marker . My map is at
http://alert.fcd.maricopa.gov/alert/Google/v3/mobile.html click on datasets
and then weather data. Right now only Dewpoint will display and I believe
temp is underneath because I am not getting any errors on my javascript
file. Picture of how I would like the marker to display is at *
http://alert.fcd.maricopa.gov/alert/Google/image/wxmarker.png*<http://alert.fcd.maricopa.gov/alert/Google/image/wxmarker.png>
.
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 the station data. When the data comes back, create an overlay.
// Calls currain.php which converts xml to json
d3.json("./php/currentwx.php", function(jsonData) {
overlayD3 = new google.maps.OverlayView();
var data = jsonData.data;
// Add the container when the overlay is added to the map.
overlayD3.onAdd = function() {
var layer = d3.select(this.getPanes().floatPane).append("div")
.attr("class", "stations")
.attr("id", "stations");
// Draw each marker as a separate SVG element.
// We could use a single SVG, but what size would it 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 a 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 a 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 as a separate SVG element.
// We could use a single SVG, but what size would it 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 a 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 a 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);
// Get the date that the report was created from the meta object in
the 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 that I need to edit this section but everything I have tried is
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");
}
};
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-maps-js-api-v3+unsubscr...@googlegroups.com.
To post to this group, send email to google-maps-js-api-v3@googlegroups.com.
Visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
