Skip to content

Instantly share code, notes, and snippets.

@mayra-cabrera
Last active January 12, 2017 18:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mayra-cabrera/526059d35ea72c2c03542676067f071a to your computer and use it in GitHub Desktop.
Save mayra-cabrera/526059d35ea72c2c03542676067f071a to your computer and use it in GitHub Desktop.
Bing vs Google Maps Examples

Bing Example

Ventajas:

  • Permite hasta 100 íconos en el mapa

Desventajas:

  • No es posible agregar estilos a los mapas
  • No permite los íconos personalizados, tenemos que elegir entre los que Bing sugiere (https://msdn.microsoft.com/en-us/library/ff701719.aspx), en este caso se eligió el 57 por ser el más parecido a nuestro diseño.
  • No es una tecnología familiar

Ejemplo: https://cloud.githubusercontent.com/assets/4439027/21901133/25d96a6e-d8bc-11e6-9853-ee947c85d16e.png

Si decidimos utilizar esta tecnología, tendríamos que cambiar el mapa en la versión html del reporte, de otra forma se vera inconsistente:

https://cloud.githubusercontent.com/assets/4439027/21901786/bd178c4c-d8be-11e6-99e3-fcfe7add3056.png

Google Maps Example

Ventajas

  • Permite agregar estilos a los mapas

Desventajas

  • No permite múltiples íconos y en nuestro caso necesitamos agregar hasta 100 íconos personalizados.

Estos son los pasos que hay que seguir para generar un mapa estático con más de 5 pines:

  1. Generar n número de mapas, cada uno con 5 íconos

https://cloud.githubusercontent.com/assets/4439027/21901157/39d56b26-d8bc-11e6-90b6-ac96a8bfed1d.png

  1. Únicamente el primer mapa debe llevar color, el resto debe llevar una transparencia

https://cloud.githubusercontent.com/assets/4439027/21901158/39e4f6ae-d8bc-11e6-8fde-52d73883b9ed.png

  1. Encimar los mapas

https://cloud.githubusercontent.com/assets/4439027/21901159/39e59ed8-d8bc-11e6-9c2c-0cb3d53d68ab.png

Desventajas del proceso

  • Necesitamos poner un zoom y un centro con base en el número de pines que se tiene que generar al momento, de otra forma se podra generar el siguiente resultado:

https://cloud.githubusercontent.com/assets/4439027/21901621/10732870-d8be-11e6-90e2-30360dba1d7f.png

Al generar un zoom y un centro puede ocasionar que el mapa en la versión de html se vea diferente a la versión en pdf

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment