I created a SVG on google map and I want to control on the width and length of the SVG object
The size is ok but the problem that the location of the SVG is not in the right place.
How i can control also on the location of the object ?
I tried to add transform for the
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
but then the size didn’t work.
When I tried also to add scale and translate to the projection the size also didn’t work.
Could you advise me how I can control on the location and the size ?
The idea that the first location of the SVG should be the same location only the size should change but the location should be always the same.
The current issue that when I change the zoom the SVG also change the location
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://mbostock.github.com/d3/d3.v2.js?2.8.1"></script>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true"></script>
<style>
html,body,#map {
width: 95%;
height: 95%;
margin: 0;
padding: 0;
}
.stations,.stations svg {
position: absolute;
}
.stations svg {
width: 60px;
height: 20px;
padding-right: 100px;
font: 10px sans-serif;
}
.stations circle {
fill: brown;
stroke: black;
stroke-width: 1.5px;
}
.background {
fill: none;
pointer-events: all;
}
#states path:hover {
stroke: white;
}
#state-titels text {
font-family: "ff-dagny-web-pro-1", "ff-dagny-web-pro-2", sans-serif;
font-size: 8px;
font-weight: 700;
font-style: normal;
font-size-adjust: none;
color: #333333;
text-transform: none;
text-decoration: none;
letter-spacing: normal;
word-spacing: 0;
text-align: start;
vertical-align: baseline;
direction: ltr;
text-overflow: clip;
}
#states path {
fill: #ccc;
stroke: #fff;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
//Create the Google Map…
var first = 1;
var zoom = 2;
var map = new google.maps.Map(d3.select("#map").node(), {
zoom : 2,
center : new google.maps.LatLng(-53.76487, -110.41948),
mapTypeId : google.maps.MapTypeId.TERRAIN
});
google.maps.event.addListener(map, 'zoom_changed', function() {
zoom = map.getZoom();
});
var width = 10000, height = 1000, centered;
var projection = d3.geo.albersUsa();
var path = d3.geo.path().projection(projection);
var count = 1;
d3.json("../d3/us-states.json", function(json) {
var overlay = new google.maps.OverlayView();
overlay.onAdd = function() {
var layer = d3.select(this.getPanes().overlayLayer).append("div");
var width1 = 1000;
var height1 = 1000;
var svg = layer.append("svg").attr("width", width1).attr(
"height", height1);
var states = svg.append("g").attr("id",
"states");
states.selectAll("path").data(json.features).enter()
.append("path").attr("d", path)//.attr("transform", "scale(" + (zoom) + ")")//.each(transform)
.style("opacity", "0.7");
overlay.draw = function() {
if ( zoom == 2)
states.transition().attr("transform", "scale(" + (zoom / 8 ) + ")").style("stroke-width", 2 / zoom + "px");
else if ( zoom == 3)
states.transition().attr("transform", "scale(" + (zoom / 6 ) + ")").style("stroke-width", 2 / zoom + "px");
else if ( zoom == 4)
states.transition().attr("transform", "scale(" + (zoom / 4 ) + ")").style("stroke-width", 2 / zoom + "px");
else if ( zoom == 5)
states.transition().attr("transform", "scale(" + (zoom / 2 ) + ")").style("stroke-width", 2 / zoom + "px");
};
};
overlay.setMap(map);
});
</script>
</body>
</html>
Unless I’m misunderstanding the question, you should be able to control the size of the SVG simply by using CSS. So, with d3, rather than using
attr()usestyle():Similarily, you’d control the position with
.style("left", ...)and.style("top", ...), presuming your svg is absolutely positioned.