Existen algunas ocasiones donde la página o sitio web necesita extender esta funcionalidad y Google maps no la proporciona. En estas ocasiones podemos utilizar Polymaps, una librería Javascript gratis y de código abierto con la cual podemos implementar mapas de cualquier tipo y funcionalidad en nuestro sitio web.
Polymaps es ideal para desplegar información en diferentes de niveles de países, ciudades y hasta calles individuales, esto gracias a su tecnología de SVG (Scalable Vector Graphics) que no es más que un formato de imagen vectorizada basado en XML el cual brinda el soporte para la interacción y animación de gráficos en dos dimensiones, ya visto de que va un poco Polymaps veamos sus métodos, controles y algunos ejemplos de la implementación del mismo.
Cada Polymap empieza con una instancia del método map(), pero antes que construyamos un mapa importamos el espacio de nombre en una variable local:
var po = org.polymaps;
Polymaps no usa los constructores tradicionales de Javascript, en ese caso Polymaps nos proporciona unos métodos que instancian los métodos internamente. Adicionalmente el mismo usa el encadenamiento de métodos, todos los métodos retornan la instancia de map(). También podemos insertar en un nuevo documento SVG y luego añadir una etiqueta a la imagen:
var map = po.map() .container(document.body.appendChild(po.svg("svg"))) .add(po.image().url(…))También podemos no enviar nada en el método de container y la instancia de map regresara el valor asociado al campo y servirá tanto de setter como getter:
map.container();
En los casos más simples, los mapas tienen una sola capa pero los mismos pueden constar de múltiples capas que están una encima de otra, los parámetros aceptados son los siguientes:
- {X} – Coordenada de la Columna.
- {Y} – Coordenada de la Fila.
- {B} – Cuadro Delimitador.
- {Z} – Nivel de Zoom.
- {S} - Anfitrión.
Este mapa tiene un diseño restringido que trabaja bien con toneladas de puntos de información, está más enfocado a destacar la información de primer plano. Este mapa está construido con una sola capa, coordenadas y tiene algunos controles básicos interactivos, es un buen punto de comienzo para empezar a customizar el mismo:
Aquí el código fuente completo:
var po = org.polymaps; var map = po.map() .container(document.getElementById("map").appendChild(po.svg("svg"))) .add(po.interact()) .add(po.hash()); map.add(po.image() .url(po.url("http://{S}tile.cloudmade.com" + "/1a1b06b230af4efdbb989ea99e9841af" // http://cloudmade.com/register + "/998/256/{Z}/{X}/{Y}.png") .hosts(["a.", "b.", "c.", ""]))); map.add(po.compass() .pan("none"));Ahora veamos un ejemplo mucho más completo
Tile Grid
En este ejemplo tenemos distintos tipos zoom, así como el manejo de diferentes capas, adicionalmente podemos rotar la zona del mapa y así poder ver otras áreas en el mismo, veamos unas capturas del mismo:
Y por último el código fuente para que lo puedan probar por ustedes mismos:
var po = org.polymaps; var div = document.getElementById("map"), svg = div.appendChild(po.svg("svg")), g = svg.appendChild(po.svg("g")); var map = po.map() .container(g) .tileSize({x: 128, y: 128}) .angle(.3) .add(po.interact()) .on("resize", resize); resize(); map.add(po.layer(grid)); var rect = g.appendChild(po.svg("rect")); rect.setAttribute("width", "50%"); rect.setAttribute("height", "50%"); function resize() { if (resize.ignore) return; var x = div.clientWidth / 2, y = div.clientHeight / 2; g.setAttribute("transform", "translate(" + (x / 2) + "," + (y / 2) + ")"); resize.ignore = true; map.size({x: x, y: y}); resize.ignore = false; } function grid(tile) { var g = tile.element = po.svg("g"); var rect = g.appendChild(po.svg("rect")), size = map.tileSize(); rect.setAttribute("width", size.x); rect.setAttribute("height", size.y); var text = g.appendChild(po.svg("text")); text.setAttribute("x", 6); text.setAttribute("y", 6); text.setAttribute("dy", ".71em"); text.appendChild(document.createTextNode(tile.key)); } var spin = 0; setInterval(function() { if (spin) map.angle(map.angle() + spin); }, 30); function key(e) { switch (e.keyCode) { case 65: spin = e.type == "keydown" ? -.004 : 0; break; case 68: spin = e.type == "keydown" ? .004 : 0; break; } } window.addEventListener("keydown", key, true); window.addEventListener("keyup", key, true); window.addEventListener("resize", resize, false);