Ver Mensaje Individual
  #1 (permalink)  
Antiguo 19/12/2012, 16:20
alvarols
 
Fecha de Ingreso: diciembre-2008
Mensajes: 738
Antigüedad: 15 años, 5 meses
Puntos: 15
Asignar link a un objeto Javascript (framework Jeaflet)

Estoy usando Jeaflet para ubicar Tweets en un mapa. Lo que quiero hacer es que al darle clic en ese tweet geolocalizado te mande a un link, y no te abra el globito que trae por defecto. El link tiene que poderse colocar completo así <a href="tal.php">x página</a> porque necesito meter algunas cosas para hacerlo funcionar con un pop up de jQuery tipo Lightbox. Este es el código:

Código Javascript:
Ver original
  1. //aquí se crea el mapa
  2.  
  3. var map = L.map('map').setView([20.6946, -103.39755], 13);
  4.     L.tileLayer('http://{s}.tile.cloudmade.com/{key}/22677/256/{z}/{x}/{y}.png', {
  5.             attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
  6.             key: 'BC9A493B41014CAABB98F0471D759707'
  7.         }).addTo(map);
  8.  
  9. //aquí se especifica el formato de los íconos
  10.     var LeafIcon = L.Icon.extend({
  11.         options: {
  12.             shadowUrl: 'map1.png',
  13.             iconSize:     [8, 8],
  14.             shadowSize:   [0, 0],
  15.             iconAnchor:   [8, 8],
  16.             shadowAnchor: [0, 0],
  17.             popupAnchor:  [-3, -76]
  18.         }
  19.     });
  20. //aquí se crean las variables que contienen los íconos, que verán que tienene un link (pero yo no quiero usar ese,
  21. //no tienen el formato que yo quiero y además no me sirve aquí porque abajo
  22. //genero los íconos dinámicamente on PHP (en este código solo se ve el resultado en HTML para mejor explicación)   
  23.     var greenIcon = new LeafIcon({iconUrl: 'map1.png'}),
  24.     redIcon = new LeafIcon({iconUrl: 'map2.png'}),
  25.     orangeIcon = new LeafIcon({iconUrl: 'map3.png'});
  26.    
  27.     L.icon = function (options) {
  28.     return new L.Icon(options);
  29.     };
  30.  
  31. // Aquí se generan los íconos dinámicamente y se geolocalizan en el mapa con ayuda de la API de Twitter
  32. //(cada ícono es un tweet). Aquí es donde quiero habilitar el link (el cual también se generará dinámicamente).
  33. // No quiero usar el "bindPopup
  34.           L.marker([20.669142, -103.368931], {icon: greenIcon}).addTo(map).bindPopup('<a href="http://www.alvarols.com" target="_blank">alvarols.com</a>');
  35.               L.marker([20.724844, -103.387746], {icon: greenIcon}).addTo(map).bindPopup('<a href="http://www.alvarols.com" target="_blank">alvarols.com</a>');
  36.               L.marker([20.733334, -103.343962], {icon: greenIcon}).addTo(map).bindPopup('<a href="http://www.alvarols.com" target="_blank">alvarols.com</a>');
  37.               L.marker([20.736199, -103.387771], {icon: greenIcon}).addTo(map).bindPopup('<a href="http://www.alvarols.com" target="_blank">alvarols.com</a>');
  38.               L.marker([20.720709, -103.388968], {icon: greenIcon}).addTo(map).bindPopup('<a href="http://www.alvarols.com" target="_blank">alvarols.com</a>');
  39.               L.marker([20.715166, -103.351662], {icon: greenIcon}).addTo(map).bindPopup('<a href="http://www.alvarols.com" target="_blank">alvarols.com</a>');
  40.               L.marker([20.650419, -103.401813], {icon: greenIcon}).addTo(map).bindPopup('<a href="http://www.alvarols.com" target="_blank">alvarols.com</a>');

Espero me puedan ayudar. Gracias.

Aquí viene el mapa en acción (hagan caso omiso de los errores php de abajo que no tienen que ver con esto que les digo):http://colima.alvarols.com/mapas/

Última edición por alvarols; 19/12/2012 a las 16:30