markeroptions - ¿Superpone las rutas d3 a Google Maps?

google.maps.marker example

Question

Estoy tratando de superponer un mapa en Google Maps usando d3.geo y GeoJson. Logré forzar a d3 a usar la proyección de Google Map para dibujar las rutas, lo que fue sorprendentemente fácil. Esto es lo que tengo hasta ahora:

http://www.caudillweb.com/temp/d3_choropleth.html

Esto funciona bien al acercar y alejar:

Pero cuando hago una panorámica, la superposición de SVG también se mueve y, dado que su tamaño es fijo, las formas se truncan:

¿Alguien ha conseguido algo como esto para trabajar? ¿Alguna idea de dónde podría ir desde aquí? El ejemplo anterior es un único archivo HTML independiente si alguien quiere jugar con él.

Answer 1

En este ejemplo, el ancho y alto de svg están configurados en 8000 x 8000, lo que parecía estar bien hasta el nivel de acercamiento 9-10. La parte superior e izquierda se configuran en -4000 x -4000 para centrarlo. Finalmente, la proyección se desplaza / desplaza para que se dibuje en el centro de la svg:

Agrandar y centrar el svg:

.SvgOverlay svg {
position: absolute;
top: -4000px;
left: -4000px;
width: 8000px;
height: 8000px;
}

Compensar la proyección:

return [pixelCoordinates.x + 4000, pixelCoordinates.y + 4000];

Answer 2

Pude solucionar el problema en ese nivel de zoom haciendo que el svg fuera más grande, añadiendo algo de relleno, y dando una posición superior e izquierda negativa así:

 .SvgOverlay, .SvgOverlay svg {
position: absolute;
top: -250px;
left: -250px;
padding: 500px;
}
var svg = layer.append("svg")
.attr("width", 1000)
.attr("height", 1000)

Si desea permitir que su usuario amplíe aún más, tendrá que aumentar todos estos números. Aumentarlos por un factor de 10, por ejemplo, parece solucionar el problema para todos los niveles de zoom. Sin embargo, es posible que desee restringir la capacidad del usuario para acercarse ya que la utilidad de la superposición de svg se reduce a medida que profundiza.

Aquí hay un violín que demuestra la idea. http://jsfiddle.net/VHWqq/7/

Editar: Como señala Herb, este enfoque no funciona en Firefox.

Answer 3

Una opción es establecer el tamaño del mapa inicial en algo muy grande, por ejemplo, 1000 x 1000 píxeles o más. Esto obligará a la superposición de SVG a mostrarse dentro del área visible (que parece ser la restricción con Firefox). Me doy cuenta de que esto puede afectar el diseño de su sitio, por lo que es posible que desee considerar envolver el mapa con un div para ocultar el desbordamiento.

#map-wrap {
width: 500px;
height: 500px;
overflow: hidden;
}
#map {
width: 1000px; /* just big enough to show the whole thing at zoom #6 */
height: 1000px;
}

Una vez renderizado el mapa, puede cambiar el tamaño del mapa al tamaño deseado de 500 x 500 y volver a centrar el mapa. Esto se puede hacer en el evento bounds_changed :

google.maps.event.addListener(map, ''bounds_changed'', function() {
$map.css({ height: ''500px'', width: ''500px'' }); // back to desired dims
google.maps.event.trigger(map, ''resize''); // trigger a ''refresh''
map.setCenter(new google.maps.LatLng(-18.2, 35.1)); // re-center map
google.maps.event.clearListeners(map, ''bounds_changed''); // don''t do this again
});

Aquí hay un ejemplo de trabajo (Probado en Firefox y Chrome).

Algunas advertencias:

1. Cuanto más lejos desee permitir que las personas hagan zoom, mayor será el tamaño del mapa inicial "temporal". Por ejemplo, si desea permitir el nivel de zoom 7, es posible que deba realizar el mapa inicial 2000 x 2000 para compensarlo. Obviamente, hay problemas de rendimiento al renderizar un mapa tan grande. Como señaló dispersa, puede ser prudente restringir los niveles de zoom.
2. Debido al cambio de tamaño de última hora, habrá un parpadeo cuando el mapa se reajuste. Es posible que desee considerar ocultar / mostrar el mapa usando jQuery, o tal vez colocar una superposición blanca encima de todo hasta que el mapa haya terminado de redimensionarse.