wiki:multipleGeoPosicion

Version 3 (modified by xabi, 13 years ago) (diff)

--

Geoposición (varios puntos)

Para mostrar varios puntos puntos geoposicionados y clusterizados en una página primero tenemos que añadir todo el código Javascript necesario para mostrarlo. Esto se realiza añadiendo el siguiente tag a la página: 

<!--$ FUNCION geoposMultipleCode ( "ES" ) $-->

"ES" se utiliza para indicar que todo está en castellano (Botones, nombres de ciudades, búsquedas, ...)

Los puntos se mostrarán en un mapa, y para ellos deberemos crear un "DIV" en la página con las medidas que consideremos. Este div tiene que tener un ID único. Ejemplo: 

<div id="map_canvas" style="height: 300px; width: 500px;"></div>

Antes de poder mostrar los puntos en el mapa tenemos que instanciarlo. Antes de crear una instancia de un mapa se pueden proporcionar unos parámetros opcionales. Para establacer estos parámetros usaremos la siguiente función: 

<!--$ FUNCION setMapOption ( 'nombre_opcion', 'valor' ) $-->

Los parámetros opcionales son los siguientes

  • zoom: (entero) nivel de zoom que queremos mostrar en el mapa (1 .. 12).
  • lat: (real) latitud del centro del mapa. Si no se establece se pondrá la Latitud de Madrid
  • lon: (real) longitud del centro del mapa. Si no se establece se pondrá la Longitud de Madrid
  • autoPosition: (0 | 1) indica si el mapa va a tratar de centrars basándose e en la posición del usuario (html5).
  • url: (string) URL donde se optienen los puntos. Por defecto se establece: '​http://127.0.0.1/cgi-bin/syncGeoPos/getPoints.pl'
  • defaultIcon: (string) URL del icono por defecto de un punto. Si no se establece será: '/images/ico_confesion/default.png'
  • getIcon: (function(point)) Nombre de la funcion javascript encargada de devolver el icono basándose en el punto proporcionado. Si no se establece se genera el icono por defecto.
  • getMarkerInfo: (function(point)) Nombre de la funcion javascript encargada de devolver e HTML de información de un icono.
  • gotoBig: (function(point)) Nombre de la funcion javascript encargada de realizar alguna acción al pulsar en un punto.
  • gotoBigCaption: (string) Texto que se mostrará en un icono, se esta establecida la funcion gotoBig. Por defecto es: 'Pulsa para ampliar'

Para resetear los parámetros opcioneles de un mapa se usa la siguiente función: 

<!--$ FUNCION resetMapOptions () $-->

Cada instancia del mapa tienen unas opciones mediante el siguiente tag: 

<!--$ FUNCION instanceMultipleMap ( instanceName, divId, service_id, class_id ) $-->

Todos los parámetros son obligatorios y son los siguientes:

  • instanceName: (string) nombre de la instancia.
  • divId: (string) El el div que mostrará el mapa
  • service_id: (entero) service_id
  • class_id: (entero) class_id

Ejemplo completo un punto: 

<!DOCTYPE html>
<html>
<head>
<!--$ FUNCION geoposMultipleCode ( "ES" ) $-->
</head>
<body>
  <div id="map_canvas" style="height: 300px; width: 500px;"></div>
</body>
<!--$ FUNCION resetMapOptions () $-->
<!--$ FUNCION setMapOption ( 'url', 'http://deve.ecliente.com/cgi-bin/syncGeoPos/getPoints.pl' ) $-->
<!--$ FUNCION instanceSimpleMap ("mapa1", "map_canvas", "54", "1125" ) $-->
</html>

Ejemplo completo con funciones específicas para los iconos y los mensajes: 

<!DOCTYPE html>
<html>
<head>
<!--$ FUNCION geoposMultipleCode ( "ES" ) $-->
</head>
<body>
  <div id="map_canvas" style="height: 300px; width: 500px;"></div>
</body>
<script type="text/javascript" charset="utf-8">
function _getIcon(point) {  // Funcion que genera el icono partiendo de los datos del marcador
  var confesion = point.extradata.confesion.replace(/(\|.*)/g, '');
  return '/geopos/img/' + confesion + ".png";
};
function _getMarkerInfo(point) { // Función que genera los textos de info partiendo de los datos del marcador
  var data = point.userInfo;
  var confesion = data.extradata.confesion.replace(/(.*\|)/g, '');
  var provincia = data.extradata.provincia.replace(/(.*\|)/g, '');
  var ccaa      = data.extradata.ccaa.replace(/(.*\|)/g, '');
  return '<div><p>'+
    (data.extradata.nombre ? '<b>Nombre</b>: ' + data.extradata.nombre + '<br/>' : '') +
    (data.extradata.denominacion ? '<b>Denominaci&oacute;n</b>: ' + data.extradata.denominacion + '<br/>' : '') +
    (confesion ? '<b>Confesi&oacute;n</b>: ' + confesion + '<br/>' : '') +
    '<b>Direcci&oacute;n</b>: ' + (data.geodata.calle ? data.geodata.calle  + " " : "") +
        (data.geodata.numero ? data.geodata.numero  + " " : "") +
    (data.geodata.ciudad ? '<b>Poblaci&oacute;n</b>: ' + data.geodata.ciudad + '<br/>' : '') +
    (data.geodata.cp ? '<b>CP</b>: ' + data.geodata.cp + '<br/>' : '') +
    (provincia ? '<b>Provincia</b>: ' + provincia + '<br/>' : '') +
    (ccaa ? '<b>Comunidad</b>: ' + ccaa + '<br/>' : '') +
    (data.extradata.telefono ? '<b>Tel&eacute;fono</b>: ' + data.extradata.telefono + '<br/>' : '') +
    (data.extradata.web ? '<b>Web</b>: <a href="' + data.extradata.web + '" target="_new">' + data.extradata.web + '</a><br/>' : '') +
    (data.extradata.email ? '<b>Email</b>: <a href="mailto:' + data.extradata.email + '" target="_new">' + data.extradata.email + '</a>' : '') +
    '</p></div>'
}
</script>
<!--$ FUNCION resetMapOptions () $-->
<!--$ FUNCION setMapOption ( 'url', 'http://deve.ecliente.com/cgi-bin/syncGeoPos/getPoints.pl' ) $-->
<!--$ FUNCION setMapOption ( 'getIcon', '_getIcon' ) $-->
<!--$ FUNCION setMapOption ( 'getMarkerInfo', '_getMarkerInfo' ) $-->
<!--$ FUNCION instanceSimpleMap ("mapa1", "map_canvas", "54", "1125" ) $-->
</html>