Cargando



Tutorial JavaScript – Mapas de Google

Muchos sitios web actuales relacionados a restaurantes, comercios, empresas, etc., ya poseen la implementación de Google maps en su formulario de contacto o de localización, para que cualquier usuario que tiene la inquietud de saber dónde se encuentran, puedan hacerlo sin ningún inconveniente.



Aquí veremos como instalar Polymaps, Pale Dawn, Tile Grid y sus códigos para implementarlo.


jul 22 2013 20:51
Avanzado
dic 01 2015 14:42

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.

 

Instanciando Polymaps

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();
Capas

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.
Ya vistos el concepto general veamos los ejemplos con su código completo de la implementación:

 

Pale Dawn

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:

 

javascript-google-maps.jpg

 

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:

 

javascript-google-maps-2.jpg

 

javascript-google-maps-3.jpg

 

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);


¿Te ayudó este Tutorial?


3 Comentarios

Gracias por el tutorial! Muy bueno.

Oscar Siro
oct 02 2013 19:25
Tremendo, gracias por el tuto!
Gracias chicos me algegro que guste.
No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X