Context Navigation

Geoposición (varios puntos)

Generación del mapa

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>

Obtención de datos

Una vez instanciado un mapa podemos hacer "queries" al servidor para obtener una lista de los distintos valores de un atributo de los puntos. Un ejemplo sería obtener las distintas Comunidades Autonomas en las que se encuentran los puntos:

// Obtiene las distintas comunidades autonomas
// En este caso el nombre de la instancia del mapa es "samplemap"
function getAllCCAA() {
  samplemap.emptyAllQueryFilters();
  samplemap.getDistinctValues("extradata.ccaa", function(res) {
    var options = '<option value="">Seleccione una CCAA</option>';
    for (var i = 0; i < res.length; i++) {
      aValues = res[i].split("|");
      if (aValues.length > 1) options += '<option value="' + aValues[0] + '">' + aValues[1] + '</option>';
    }
    $("select#ccaa").html(options);
  });
}

Tambien se puede establecer algún filtro. Vemos como ser buscarían las distintas provincias de una comunidad autónoma:

// Obtiene las provincias de una comunidad autonoma
function getAllProvincias(iCCAA) {
  if (iCCAA != "") {
    samplemap.emptyAllQueryFilters();
    samplemap.setQueryFilter("extradata.ccaa", "bw", iCCAA + "\\|");
    samplemap.getDistinctValues("extradata.provincia", function(res) {
      var options = '<option value="">Seleccione una Provincia</option>';
      for (var i = 0; i < res.length; i++) {
        aValues = res[i].split("|");
        if (aValues.length > 1) {
          sProvincia = aValues[1].split(",")[0];
          options += '<option value="' + aValues[0] + '">' + sProvincia + '</option>';
        }
      }
      $("select#provincia").html(options);
    });
  } else {
    $("select#provincia").html("");
  }
}

Last modified 13 years ago Last modified on Jan 17, 2012, 9:55:42 AM

Download in other formats:

Plain Text