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//aquí se crea el mapa
var map = L.map('map').setView([20.6946, -103.39755], 13);
L.tileLayer('http://{s}.tile.cloudmade.com/{key}/22677/256/{z}/{x}/{y}.png', {
attribution: 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
key: 'BC9A493B41014CAABB98F0471D759707'
}).addTo(map);
//aquí se especifica el formato de los íconos
var LeafIcon = L.Icon.extend({
options: {
shadowUrl: 'map1.png',
iconSize: [8, 8],
shadowSize: [0, 0],
iconAnchor: [8, 8],
shadowAnchor: [0, 0],
popupAnchor: [-3, -76]
}
});
//aquí se crean las variables que contienen los íconos, que verán que tienene un link (pero yo no quiero usar ese,
//no tienen el formato que yo quiero y además no me sirve aquí porque abajo
//genero los íconos dinámicamente on PHP (en este código solo se ve el resultado en HTML para mejor explicación)
var greenIcon = new LeafIcon({iconUrl: 'map1.png'}),
redIcon = new LeafIcon({iconUrl: 'map2.png'}),
orangeIcon = new LeafIcon({iconUrl: 'map3.png'});
L.icon = function (options) {
return new L.Icon(options);
};
// Aquí se generan los íconos dinámicamente y se geolocalizan en el mapa con ayuda de la API de Twitter
//(cada ícono es un tweet). Aquí es donde quiero habilitar el link (el cual también se generará dinámicamente).
// No quiero usar el "bindPopup
L.marker([20.669142, -103.368931], {icon: greenIcon}).addTo(map).bindPopup('<a href="http://www.alvarols.com" target="_blank">alvarols.com</a>');
L.marker([20.724844, -103.387746], {icon: greenIcon}).addTo(map).bindPopup('<a href="http://www.alvarols.com" target="_blank">alvarols.com</a>');
L.marker([20.733334, -103.343962], {icon: greenIcon}).addTo(map).bindPopup('<a href="http://www.alvarols.com" target="_blank">alvarols.com</a>');
L.marker([20.736199, -103.387771], {icon: greenIcon}).addTo(map).bindPopup('<a href="http://www.alvarols.com" target="_blank">alvarols.com</a>');
L.marker([20.720709, -103.388968], {icon: greenIcon}).addTo(map).bindPopup('<a href="http://www.alvarols.com" target="_blank">alvarols.com</a>');
L.marker([20.715166, -103.351662], {icon: greenIcon}).addTo(map).bindPopup('<a href="http://www.alvarols.com" target="_blank">alvarols.com</a>');
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/