Scribble Maps Blog
Nuestro mayor lanzamiento hasta la fecha, móvil y API.
Estamos súper entusiasmados (y un poco aliviados) de tener finalmente nuestra nueva versión de Scribble Maps en el mercado. Hay mucho de qué hablar. Hemos lanzado un nuevo editor básico, así como una API completa.
Queríamos que la experiencia de la nueva versión fuera lo suficientemente consistente como para que la gente ni siquiera supiera que esencialmente reconstruimos todo desde cero. Cosas tan simples como los cursores personalizados fueron un desafío porque queríamos mantener la compatibilidad entre navegadores. Así que la nueva versión funciona incluso en IE7.
Después de que Google anunciara que ya no daría soporte a la versión Flash de su API de Maps, decidimos un par de cosas principales que queríamos hacer, ya que necesitábamos realizar una reconstrucción completa.
Una de las mayores peticiones que recibimos fue la posibilidad de usar Scribble Maps en un entorno móvil y, en particular, en tabletas. Dado que utilizamos Javascript, la aplicación se ejecutaría en dispositivos de tipo tableta.
Sin embargo, que una aplicación de mapas se ejecute es diferente a que sea utilizable. En la versión de escritorio de Scribble Maps, por ejemplo, se tienen efectos al pasar el cursor (roll overs), mientras que las tabletas no los tienen.
Dibujar en Scribble Maps funciona igual que en un lienzo (canvas), por lo que se puede especificar un estilo de antemano y dibujar múltiples líneas que adopten ese estilo. Esto no solo se aplica a las formas, sino también a elementos como los marcadores. Así que es posible hacer cosas como
La relación que un usuario tiene con el mapa se define a través de las herramientas, y al cambiar las herramientas se cambia la forma en que el usuario interactúa con el mapa.
Con Scribble Maps, por otro lado, no hay restricciones. Una vez que se guarda un mapa, se puede solicitar una imagen de ese mapa independientemente de la cantidad de datos que contenga. Además, cuando se guarda un mapa, la imagen se invalida y la próxima vez que se solicita se vuelve a renderizar. Esto le permite de manera efectiva crear enlaces de imágenes que se actualizan a medida que cambia el mapa.
A continuación se muestra un ejemplo de una de estas imágenes.
Enlaces
API de Scribble Maps
Grupo de la API de Scribble Maps
De Flash a HTML5/Javascript
Aunque muchos de nuestros usuarios no entiendan el cambio de tecnología, las implicaciones de esto son muy grandes. Pasar de Flash a HTML5/Javascript no fue algo particularmente fácil, especialmente porque queremos mantener la experiencia lo más similar posible a lo que hizo que el Scribble Maps original fuera tan popular.Queríamos que la experiencia de la nueva versión fuera lo suficientemente consistente como para que la gente ni siquiera supiera que esencialmente reconstruimos todo desde cero. Cosas tan simples como los cursores personalizados fueron un desafío porque queríamos mantener la compatibilidad entre navegadores. Así que la nueva versión funciona incluso en IE7.
Después de que Google anunciara que ya no daría soporte a la versión Flash de su API de Maps, decidimos un par de cosas principales que queríamos hacer, ya que necesitábamos realizar una reconstrucción completa.
- Queríamos que la aplicación web funcionara tanto en un entorno de escritorio como móvil.
- Queríamos construir nuestro propio motor de renderizado para que, si fuera necesario, pudiéramos cambiar a diferentes proveedores de API.
- No queríamos violar los Términos de Servicio de ningún proveedor de API de mapas.
- Queríamos que la reconstrucción estuviera centrada en la API para que los desarrolladores pudieran utilizar nuestras herramientas de creación de mapas en sus aplicaciones.
Scribble Maps en dispositivos móviles
Una de las mayores peticiones que recibimos fue la posibilidad de usar Scribble Maps en un entorno móvil y, en particular, en tabletas. Dado que utilizamos Javascript, la aplicación se ejecutaría en dispositivos de tipo tableta.Sin embargo, que una aplicación de mapas se ejecute es diferente a que sea utilizable. En la versión de escritorio de Scribble Maps, por ejemplo, se tienen efectos al pasar el cursor (roll overs), mientras que las tabletas no los tienen.
Esto nos llevó a modificar la experiencia del usuario en función de si se encontraba en un dispositivo táctil. Esto ocurre automáticamente sin necesidad de modificar ningún tipo de código.
API de Scribble Maps
Existen aproximadamente media docena de APIs de mapas muy populares, por lo que queríamos centrarnos específicamente en la edición y la interactividad, dejando la visualización y el renderizado de teselas a las otras APIs. Al decidir cómo queríamos estructurar la API, decidimos que uno de los mejores estilos para la programación en Javascript era JQuery. Por lo tanto, es posible crear superposiciones e interactividad en una sola línea.
ScribbleMap.draw.line([[lat, lng], [lat2, lng2]], { lineColor: "#0000FF" }).click(function() { alert("I have been clicked") });
Dibujar en Scribble Maps funciona igual que en un lienzo (canvas), por lo que se puede especificar un estilo de antemano y dibujar múltiples líneas que adopten ese estilo. Esto no solo se aplica a las formas, sino también a elementos como los marcadores. Así que es posible hacer cosas como
La relación que un usuario tiene con el mapa se define a través de las herramientas, y al cambiar las herramientas se cambia la forma en que el usuario interactúa con el mapa.
API de Imagen Dinámica
Una de las cosas principales para las que se utiliza Scribble Maps es para generar imágenes. Esto planteó no solo un gran problema para nosotros, sino también una nueva oportunidad a medida que nos alejábamos de Flash. Con otras APIs de mapas existe la capacidad de crear una "imagen estática". El problema con estas APIs de imágenes estáticas es que casi todas tienen restricciones sobre la cantidad de datos que se pueden representar en la imagen renderizada.Con Scribble Maps, por otro lado, no hay restricciones. Una vez que se guarda un mapa, se puede solicitar una imagen de ese mapa independientemente de la cantidad de datos que contenga. Además, cuando se guarda un mapa, la imagen se invalida y la próxima vez que se solicita se vuelve a renderizar. Esto le permite de manera efectiva crear enlaces de imágenes que se actualizan a medida que cambia el mapa.
Nuevo Widget
También con la versión 2.0 hemos introducido un widget que tiene más controles de interfaz de usuario. Esta es nuestra primera versión y la iremos mejorando a lo largo de las próximas semanas.Enlaces
API de Scribble Maps
Grupo de la API de Scribble Maps