===== Mapas by XOne =====
\\
XOne ha implementado entre sus funcionalidades la posibilidad de incorporar mapas a las aplicaciones tomando como proveedores Google Maps u %%OpenStreetMap%%.\\
En en el caso los entornos **Android** e **IOS** se activa por defecto Google Maps mediante el uso del atributo "viewmode=mapview" y en el específico de IOs, se usa el de Apple con todas sus funcionalidades. El uso de %%OpenStreet%% Map no está habilitado en IOs y para utilizarlo en Android se define mediante atributo.\\
Este módulo que provee XOne comprende cada uno de los detalles que en materia de mapa estamos acostumbrados a utilizar.\\
\\
* Modo Plano Normal.
* Modo Satélite.
* Modo Terreno.\\
Puede iniciar el funcionamiento desde el geoposicionamiento del dispositivo del usuario de forma opcional. Adjuntamos imágenes de como se visualiza la implementación de esta función en las aplicaciones XOne.\\
\\
|<70%>|
^ Mapas ^
| [[wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:5.-listado-de-datos:1.-mapview:start#MapView|MapView]] |
| [[wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:5.-listado-de-datos:1.-mapview:start#OpenStreetMap|OpenstreetMap]] |
\\
La visualización de los mapas en las Apps XOne se muestra de la siguiente forma:
\\
|<70%>|
^ **Implementación con Google Maps:** ^ **%%Implementación con OpenStreetMaps:%%** ^
| {{:wiki:2.-desarrollo-app:2.5.-controles-by-xone:q.-mapas:screenshot_20200310-162335.png?200&nolink}} | {{:wiki:2.-desarrollo-app:2.5.-controles-by-xone:q.-mapas:screenshot_20200310-162108.png?200&nolink}} |
\\
\\
==== MapView ====
\\
**Métodos del prop Z, viewmode="mapview"**
\\
Al definir en la declaración el atributo viewmode="mapview", logramos mostrar los datos en forma de mapa asociado a GoogleMaps. De la misma forma, detallamos otros atributos que se usan conjuntamente con el mapview para perfilar y lograr funcionalidades propias de este tipo de visualización de mapas.
\\
__Declaración del Content tipo MapView__
\\
\\
\\
\\
{{:wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:5.-listado-de-datos:1.-mapview:screenshot_20230822-133731_1_.png?290x450}} {{:wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:5.-listado-de-datos:1.-mapview:screenshot_20230822-134059_1_.png?290x450}}
\\
\\
\\
=== Atributos y funcionalidades para Mapa tipo MapView: ===
\\
|<70%>|
^ ATRIBUTOS y EVENTOS ||
| isUserLocationEnabled | Para saber si la ubicación del usuario está activada |
| enableUserLocation | Para activar la ubicación del usuario |
| disableUserLocation | Para desactivar la ubicación del usuario |
| cambiar POIs | cambiar puntos de interés |
| refresh | refresca y actualiza visualización del mapa |
| routeTo | Calcula la ruta usando google maps, osmand, etc, según el valor definido en el parámetro source |
| drawLine | Dibuja líneas especificando el nombre, color y tipo del trazo, la latitud y longitud del origen y destino |
| drawRoute | Dibuja la ruta especificando el nombre, color y tipo del trazo, la latitud y longitud del origen y destino |
| clearLine | Elimina la línea por su nombre |
| clearAllLines | Elimina todas las líneas |
| clearRoute | Elimina la ruta por su nombre |
| clearAllRoutes | Elimina todas las rutas |
| showPoisMenu | Muestra el menú de los puntos de interés |
| hidePoisMenu | Oculta el menú de los puntos de interés |
| togglePoisMenu | Cambia el estado del menú de los puntos de interés |
| zoomTo | Hace zoom a unas coordenadas |
| zoomToEncodeData | Hace zoom a unas coordenadas codificadas |
| startDistanceMeter | Punto inicial para medir distancia entre puntos |
| stopDistanceMeter | Punto final para medir distancia entre puntos |
| showMarkers | Muestra los marcadores definidos por el usuario |
| hideMarkers | Oculta los marcadores definidos por el usuario |
| removeMarkers | Elimina los marcadores establecidos por el usuario |
| drawArea | Dibuja la región definida por varias coordenadas |
| drawEncodeArea | Dibuja la región definida por coordenadas codificadas |
| startdistanceMeter | Establece punto de inicio para medir distancia |
| stopdistanceMeter | Establece punto final para medir distancia |
| clearAllAreas | Elimina todas las áreas |
| removeArea | Elimina un área por su nombre |
| getUserLocation | Devuelve las coordenadas de la ubicación del usuario |
| zoomToBounds | Hace zoom a una región |
| restrictMapToBounds | Limita el área del mapa a visualizar, por ejemplo, se quiere definir solo a una región o país determinado |
| zoomToMyLocation | Hace zoom a la ubicación del usuario |
| setFollowUserLocation | Activa o desactiva el seguimiento de la posición del usuario |
| setMapType | Indica el tipo de mapa de entre las opciones (normal, satellite, terrain, hybrid, none) |
| setDraggable | con valor true hace zoom a la posición actual, con valor false, no hace zoom a la posición actual e intenta que se vean todos los POIs. |
| startDistanceMeter | Medir distancias entre puntos |
| mapview-embedded | Con valor "true" este atributo embebe el mapa en la colección donde se haya definido. Valor por defecto false. |
| onmapclicked="onMapClicked(e);" | Atributo para definir evento cuando se haga un click sobre el mapa para poder ejecutar una acción. |
| mapview-address="true" | Dirección del POI |
| mapview-latitude="true" | Latitud del POI |
| mapview-longitude="true" | Longitud del POI |
| mapview-marker-icon="true" | Icono del POI |
| map-features="roads" | Visualizará prestaciones de carreteras. |
| map-type="normal" | Tipo de Mapa normal, satélite, híbrido. |
| clear-lines-on-refresh="false" | Para borrar líneas de imagen |
| show-google-buttons="true" | Mostrar botones definidos por Google |
| show-user-location="true" | Mostrar localización de usuario. |
| show-zoom-buttons="true" | Mostrar botones para zoom. |
| zoom-to-my-location="false" | Hacer zoom a posición de usuario. |
| zoom-to-pois="true" | Hacer zoom a posición de usuario. |
| restrict-map-to-bounds="35.946850084,-9.39288367353,44.025196,-9.600513" | Restringe visualización a las coordenadas detalladas. |
| **onstreetviewenable**="onStreetViewenable(e);" | Evento que se ejecuta para para habilitar vista %%StreetView%% de Google |
| **onstreetviewunavailable**="onStreetViewUnavailable(e);" | Evento que se ejecuta para para deshabilitar vista %%StreetView%% de Google |
| **ondrop="**="onMapDrop(e);" | Este evento ocurre cuando el elemento arrastrado se suelta en el destino de colocación. |
| **onmarkerdragend**="onMarkerDraggedEnd(e);" | Este evento se utiliza para finalizar el arrastre de un elemento. |
| **onmapready**="onMapReady(e);" | Método se activa cuando el mapa está listo para usarse. |
| **onlocationready**="onLocationReady(e);" | Evento localización disponible. |
| **onlocationchanged**="onLocationChanged(e);" | Evento que se lanza para cambio de localización. |
| **onmapzoomchanged**="onMapZoomChanged(e);" | Evento que se lanza cuando se varía el zoom. |
| **ondistancemeter**="onDistanceMeter(e);" | Evento que se lanza para medir distancia entre puntos |
\\
\\
====OpenStreetMap====
\\
\\
**Métodos del prop Z, viewmode="openstreetmap"**
\\
Definir en la declaración del content el atributo viewmode="openstreetmap",conjuntamente con otros atributos logramos funcionalidades propias de este tipo de visualización de mapas.
\\
__Declaración del Content tipo OpenStreetMap__
\\
\\
**%%Visualización en la App con OpenStreetMaps:%%**
\\
\\
{{:wiki:2.-desarrollo-app:2.5.-controles-by-xone:q.-mapas:screenshot_20200310-162108.png?200&nolink}}
\\
=== Atributos y funcionaliodades para Mapa tipo OpenstreetMap ===
\\
|<70%>|
^ Funciones Implementadas ^ Descripción ^
| isUserLocationEnabled | Para saber si la ubicación del usuario está activada |
| enableUserLocation | Para activar la ubicación del usuario |
| disableUserLocation | Para desactivar la ubicación del usuario |
| cambiar POIs | cambiar puntos de interés |
| refresh | refresca y actualiza visualización del mapa |
| routeTo | Calcula la ruta usando google maps, osmand, etc, según el valor definido en el parámetro source |
| drawLine | Dibuja líneas especificando el nombre, color y tipo del trazo, la latitud y longitud del origen y destino |
| drawRoute | Dibuja la ruta especificando el nombre, color y tipo del trazo, la latitud y longitud del origen y destino |
| clearLine | Elimina la línea por su nombre |
| clearAllLines | Elimina todas las líneas |
| clearRoute | Elimina la ruta por su nombre |
| clearAllRoutes | Elimina todas las rutas |
| showPoisMenu | Muestra el menú de los puntos de interés |
| hidePoisMenu | Oculta el menú de los puntos de interés |
| togglePoisMenu | Cambia el estado del menú de los puntos de interés |
| zoomTo | Hace zoom a unas coordenadas |
| zoomToEncodeData | Hace zoom a unas coordenadas codificadas |
| showMarkers | Muestra los marcadores definidos por el usuario |
| hideMarkers | Oculta los marcadores definidos por el usuario |
| removeMarkers | Elimina los marcadores establecidos por el usuario |
| setDragabble | Activa o desactiva arrastrar los puntos definidos por usuario en el área del mapa |
| drawArea | Dibuja la región definida por varias coordenadas |
| drawEncodeArea | Dibuja la región definida por coordenadas codificadas |
| startdistanceMeter | Establece punto de inicio para medir distancia |
| stopdistanceMeter | Establece punto final para medir distancia |
| clearAllAreas | Elimina todas las áreas |
| removeArea | Elimina un área por su nombre |
| getUserLocation | Devuelve las coordenadas de la ubicación del usuario |
| zoomToBounds | Hace zoom a una región |
| zoomToMyLocation | Hace zoom a la ubicación del usuario |
| setFollowUserLocation | Activa o desactiva el seguimiento de la posición del usuario |
\\
\\
==== MÉTODOS Y EVENTOS: ====
\\
===isUserLocationEnabled===
\\
Método que te devuelve si el usuario tiene activa la geolocalización.\\
**Ejemplo:** \\
\\
var ventana = ui.getView(self);
if (ventana != null) {
ui.showToast("Enabled: " + ventana.MAP_MAPA.isUserLocationEnabled());
}
\\
===enableUserLocation===
\\
Método que activa la geolocalización del dispositivo.\\
\\
**Ejemplo**:\\
\\
var ventana = ui.getView(self);
if (ventana != null) {
ventana.MAP_MAPA.enableUserLocation();
}
\\
===disableUserLocation===
\\
Método que desactiva la geolocalización del dispositivo.\\
**Ejemplo**:\\
\\
var ventana = ui.getView(self);
if (ventana != null) {
ventana.MAP_MAPA.disableUserLocation();
}
===drawLine===
\\
Método que dibuja una línea uniendo los puntos que se le pasen como parámetros.\\
^PARÁMETROS ^ Definición^
|**PARÁMETRO 1**|Nombre identificativo de la linea.|
|**PARÁMETRO 2**|Color de la línea que se dibuje.|
|**PARÁMETRO 3**|Tipo de línea que va a dibujar.|
|**PARÁMETRO 4**|Del cuarto parámetro en adelante ,define los puntos por lo que se va a guiar la línea en este formato (Latitud,Longitud).|
\\
**Ejemplo**:
\\
var ventana = ui.getView(self);
ventana.MAP_MAPA.drawLine("ruta 1", "#FF00FF", "dashed", 40.4167747, -3.70379019, 41.3850632, 2.1734035);
ventana.MAP_MAPA.drawLine("ruta 1", "#FF0000", "normal", 40.4167747, -3.70379019, 43.3850632, 3.1734035);
ventana.MAP_MAPA.drawLine("ruta 2", "#FFFF00", "normal", 39.4167747, -2.70379019, 42.3850632, 2.0004035);
\\
===drawRoute===
\\
Método que dibuja una ruta que une dos puntos.\\
\\
^PARÁMETROS^ Definición^
|**PARÁMETRO 1**|Nombre identificativo de la ruta.|
|**PARÁMETRO 2**|Latitud del punto de destino.|
|**PARÁMETRO 3**|Longitud del punto de destino.|
|**PARÁMETRO 4**|Latitud del punto de destino.|
|**PARÁMETRO 5**|Longitud del punto de destino.|
|**PARÁMETRO 6**|Tipo de línea que va a dibujar.|
|**PARÁMETRO 7**|Color de la línea que se dibuje.|
\\
\\
**Ejemplo**:
\\
var ventana = ui.getView(self);
ventana.MAP_MAPA.drawRoute("ruta 1", 40.4167747, -3.70379019, 41.3850632, 2.1734035, "walking", "#FFFF00");
ventana.MAP_MAPA.drawRoute("ruta 2", 40.4167747, -3.70379019, 39.3850632, -2.1734035, "walking", "#FFFF00");
\\
===clearLine===
\\
Método que limpia la línea que se dibuje con drawLine.\\
\\
|**PARÁMETRO**|Nombre identificativo de la línea. |
\\
**Ejemplo**:\\
var ventana = ui.getView(self);
ventana.MAP_MAPA.clearLine("ruta 1");
\\
===clearAllLines===
\\
Método que limpia todas las líneas que se dibujen con drawLine.\\
\\
**Ejemplo**:
\\
var ventana = ui.getView(self);
ventana.MAP_MAPA.clearAllLines();
\\
===clearRoute===
\\
Método que limpia la ruta que se dibuje con drawRoute.\\
\\
|**PARÁMETRO** | Nombre identificativo de la ruta. |
\\
\\
**Ejemplo**:\\
\\
var ventana = ui.getView(self);
ventana.MAP_MAPA.clearRoute("ruta 1");
\\
===clearAllRoutes===
\\
Método que limpia todas las líneas que se dibujen con drawRoute.\\
\\
**Ejemplo**:\\
\\
var ventana = ui.getView(self);
ventana.MAP_MAPA.clearAllRoutes();
\\
===addMarker===
\\
Añade una marca en las coordenadas que se le pasan por parámetros.\\
\\
^PARÁMETROS^ Definición^
| **PARÁMETRO 1**| Define la latitud. |
| **PARÁMETRO 2** | Define la longitud. |
\\
**Ejemplo**:
\\
var ventana = ui.getView(self);
ventana.MAP_MAPA.addMarker(40.4167747, -3.70379019);
\\
===setOnMapClickedListener===
\\
Define la función cuando se haga click sobre el mapa.\\
\\
**Ejemplo:**
\\
var ventana = ui.getView(self);
ventana.MAP_MAPA.setOnMapClickedListener(function(nLatitude, nLongitude) {
ui.showToast("onMapClicked(), nLatitude: " + nLatitude + " nLongitude: " + nLongitude);
ventana.MAP_MAPA.addMarker(nLatitude, nLongitude);
});
===onMapClicked===
Define evento que llama a función cuando se haga click sobre el mapa.\\
onmapclicked="onMapClicked(e);"
===onMarkerDraggedEnd===
Define evento que llama a función cuando marca punto en Mapa.\\
onmarkerdragend="onMarkerDraggedEnd(e);"
function onMarkerDraggedEnd(evento) {
ui.showToast("Tag: " + evento.tag + " latitude: " + evento.latitude + " longitude: " + evento.longitude);
}
\\
\\
==== FUNCIONES IMPLEMENTADAS by XOne PARA MAPAS ====
let allMarkers=[];
let currentMarkers={};
let distanceMarkers=[];
let listNumlineasDraw=[];
let drawstate=0;
let cancelPromise=false;
function initMapaData() {
allMarkers=[];
currentMarkers={};
distanceMarkers=[];
listNumlineasDraw=[];
drawstate=0;
cancelPromise=false;
let coll=appData.getCollection("CntLineas");
coll.setFilter("");
coll.startBrowse();
while (coll.getCurrentItem()!==null) {
coll.getCurrentItem().SEL=0;
coll.getCurrentItem().save();
coll.moveNext();
}
coll.endBrowse();
coll.clear();
}
/**
* Mostrar la posicion de GPS actual.
**/
function showMyLocation() {
var view=ui.getView();
var result=view.MapaActivos.zoomToMyLocation(16);
if (result!==null) {
onMapClicked({
latitude:result.latitude,
longitude:result.longitude
});
//updateCurrentAction(self,1,result.latitude,result.longitude,"Posición:\n"+ result.latitude.toString().substr(0,9) + " , " + result.longitude.toString().substr(0,9),0);
}
}
/**
* Borrar el marker de Crear nueva averia
**/
function removeCurrentMarker(view) {
if (view===null || view===undefined)
view=ui.getView();
while (allMarkers.length>0)
view.MapaActivos.removeMarker(allMarkers.pop());
if (self!==null) {
self.MAP_SHOWACTIONS=0;
}
}
// Calcular el segmentos
function segmentClicked(evento) {
var objSelf=self;
var id=evento.id;
var spl=id.split("_");
var collSeg=appData.getCollection("MapaActivosSegmentos");
collSeg.setFilter("SUBESTACION="+appData.variantToString(spl[0])+" AND NUMLINEA="+spl[1]+" AND NUMERO="+spl[2]);
collSeg.loadAll();
let n=collSeg.getCount();
if (n>0) {
var objSeg=collSeg.get(0);
addNAveriaMarker(evento.latitude,evento.longitude,false, 0, function() {
let lat=this.getLatitude();
let lng=this.getLongitude();
crearAveria(objSelf, 4);
//updateCurrentAction(self,1,lat,lng, "Posición:\n"+lat.toString().substr(0,9)+" , " +lng.toString().substr(0,9),0);
}
);
updateCurrentAction(self,3,evento.latitude,evento.longitude,"Segmento: "+objSeg.NUMERO,0);
self.MAP_ACTSEGMENTO=objSeg.NUMERO;
}
collSeg.clear();
}
function startDistanceMeter() {
let window = ui.getView(self);
if (self.MAP_SHOWDISTANCE===0)
window.MapaActivos.startDistanceMeter();
else
window.MapaActivos.stopDistanceMeter();
self.MAP_SHOWDISTANCE=1-self.MAP_SHOWDISTANCE;
}
function showDistance(e) {
if (e!==null && e!==undefined) {
ui.showToast(parseInt(e.distance));
}
}
function reloadMapViewPois(objSelf,filter) {
let cnt=objSelf.getContents("MapaActivos");
cnt.unlock();
cnt.setLinkFilter(filter);
cnt.loadAll();
cnt.lock();
}
function startGpsCallback() {
let jsParams = {
nodeName : "callbackgps",
timeBetweenUpdates : 10000,
minimumMetersDistanceRange: 0,
foreground : true,
title : "Titulo",
text : "Texto"
};
ui.startGps(jsParams);
ui.showSnackbar("Invocado con callback 50 segs");
}
function startGpsInterval() {
let jsParams = {
timeBetweenUpdates : 0,
minimumMetersDistanceRange: 0
};
ui.startGps(jsParams);
}
function comprobarEstadoGps() {
let sDeviceOs = appData.getGlobalMacro("##DEVICE_OS##");
if (sDeviceOs == "android") {
let nStatus = ui.checkGpsStatus();
if (nStatus === 0) {
ui.showToast("No hay GPS, no se puede activar.");
}
if (nStatus == 1) {
ui.showToast("Está activada la localización por GPS.");
}
if (nStatus == 2) {
ui.showToast("Está activada la localización por redes wifi y de telefonía.");
}
if (nStatus == 3) {
ui.showToast("No está activado el GPS ni la ubicación por redes wifi y telefonía, a ver si nos lo activan.");
ui.askUserForGpsPermission();
}
if (nStatus == 4) {
ui.showToast("Está activada la localización por GPS y redes wifi y de telefonía.");
}
if (nStatus == -1) {
ui.showToast("Error inesperado, compruebe la consola de mensajes.");
}
}
}
function actualizarGps() {
let collGps, objCollGps;
collGps = appData.getCollection("GPSColl");
collGps.startBrowse();
try {
objCollGps = collGps.getCurrentItem();
if (!objCollGps) {
throw "GPS no disponible. objCollGps es: " + objCollGps;
}
if (objCollGps.STATUS != 1) {
throw "GPS no disponible. STATUS vale: " + objCollGps.STATUS;
}
if (!objCollGps.LONGITUD) {
throw "Sin cobertura GPS";
}
self.MAP_LONGITUD = objCollGps.LONGITUD;
self.MAP_LATITUD = objCollGps.LATITUD;
self.MAP_ALTITUD = objCollGps.ALTITUD;
self.MAP_VELOCIDAD = objCollGps.VELOCIDAD;
self.MAP_RUMBO = objCollGps.RUMBO;
self.MAP_FGPS = objCollGps.FGPS;
self.MAP_HGPS = objCollGps.HGPS;
self.MAP_STATUS = objCollGps.STATUS;
self.MAP_SATELITES = objCollGps.SATELITES;
self.MAP_FUENTE = objCollGps.FUENTE;
self.MAP_PRECISION = objCollGps.PRECISION;
ui.getView(self).refresh("MAP_LONGITUD,MAP_LATITUD,MAP_ALTITUD,MAP_VELOCIDAD,MAP_RUMBO,MAP_FGPS,MAP_HGPS,MAP_STATUS,MAP_SATELITES,MAP_FUENTE,MAP_PRECISION");
} finally {
collGps.endBrowse();
}
}
function onMapClicked(evento) {
ui.showToast("onMapClicked(): latitude: " + evento.latitude + " longitude: " + evento.longitude);
let mapControl = getControl(evento.target);
let params = {
latitude: evento.latitude,
longitude: evento.longitude,
//rotation: 100,
//alpha: 0.5,
draggable: true,
icon: "icon.png",
tag: "Soy un marker"
};
let marker = mapControl.addMarker(params);
allMarkers.push(marker);
}
function onMapLongClicked(evento) {
ui.showToast("onMapLongClicked(): latitude: " + evento.latitude + " longitude: " + evento.longitude);
}
function onMarkerDraggedEnd(evento) {
let nResult = ui.msgBox("¿Aquí está bien?", "Mensaje", 4);
if (nResult != 6) {
// Moverlo a un sitio particular
// evento.marker.setPosition(38.8685452, -6.8170906);
// Quitarlo
evento.marker.remove();
}
ui.showToast("Tag: " + evento.tag + " latitude: " + evento.latitude + " longitude: " + evento.longitude);
}
function onMapReady(evento) {
ui.showToast("El mapa ha sido creado");
}
function onLocationReady(evento) {
ui.showToast("Localización encontrada por primera vez.\nLatitud: " + evento.latitude + "\nLongitud:" + evento.longitude);
}
function onLocationChanged(evento) {
ui.showToast("Localización cambiada.\nLatitud: " + evento.latitude + "\nLongitud:" + evento.longitude);
}
function onDistanceMeter(evento) {
ui.showToast("Distancia en metros: " + evento.distance);
}
function showMarkers() {
let nLength = allMarkers.length;
for(let i = 0;i < nLength;i++) {
let marker = allMarkers[i];
marker.setVisible(true);
}
}
function hideMarkers() {
let nLength = allMarkers.length;
for(let i = 0;i < nLength;i++) {
let marker = allMarkers[i];
marker.setVisible(false);
}
}
function setMarkersDraggable(bDraggable) {
let nLength = allMarkers.length;
for(let i = 0;i < nLength;i++) {
let marker = allMarkers[i];
marker.setDraggable(bDraggable);
}
}
function removeMarkers() {
let nLength = allMarkers.length;
for(let i = 0;i < nLength;i++) {
let marker = allMarkers[i];
marker.remove();
}
allMarkers.splice(0, allMarkers.length);
}
function doChangeMapPois(sMapControl) {
let mapContent = self.getContents("ClientesCoord");
if (mapContent.getFilter() == "t1.NOMBRE = 'Madrid'") {
mapContent.setFilter("");
} else {
mapContent.setFilter("t1.NOMBRE = 'Madrid'");
}
mapContent.unlock();
mapContent.clear();
mapContent.loadAll();
mapContent.lock();
ui.refresh(sMapControl);
}
function doRefresh(sControl) {
if (!sControl) {
throw "El nombre del control no puede estar vacío";
}
ui.refresh(sControl);
}
function getUserLocation(sMapControl) {
let mapControl = getControl(sMapControl);
if (!mapControl) {
return;
}
let userLocation = mapControl.getUserLocation();
if (userLocation === null) {
ui.showToast("No se ha podido obtener la localización del usuario");
} else {
ui.showToast("Latitud: " + userLocation.latitude + "\nLongitud: " + userLocation.longitude);
}
}
function isUserLocationEnabled(sMapControl) {
let mapControl = getControl(sMapControl);
if (!mapControl) {
return;
}
ui.showToast("Enabled: " + mapControl.isUserLocationEnabled());
}
function enableUserLocation(sMapControl) {
let mapControl = getControl(sMapControl);
if (!mapControl) {
return;
}
mapControl.enableUserLocation();
}
function disableUserLocation(sMapControl) {
let mapControl = getControl(sMapControl);
if (!mapControl) {
return;
}
mapControl.disableUserLocation();
}
function drawLine(sMapControl) {
let mapControl = getControl(sMapControl);
if (!mapControl) {
return;
}
mapControl.drawLine("ruta 1", "#FF0000", "normal", 37.348394305664385, -9.723497182130814, 37.348394305664385, -0.002672821283340454);
mapControl.drawLine("ruta 1", "#00FF00", "dashed", 38.47718888472095, -9.644861854612827, 38.63807799294125, -0.1756015419960022);
mapControl.drawLine("ruta 2", "#0000FF", "dotted", 41.053614029734, -9.531369879841805, 40.98011827779008, 0.7152241095900536);
mapControl.drawLine("ruta 2", "#FFFF00", "mixed", 43.67910133655382, -10.153294019401073, 43.03194923828824, 3.0807440355420117);
}
function drawLine2(sMapControl) {
let mapControl = getControl(sMapControl);
if (!mapControl) {
return;
}
let params = {
line : "ruta 1",
strokeColor: "#FF0000",
mode : "normal",
locations : [{
latitude : 37.348394305664385,
longitude: -9.723497182130814
}, {
latitude : 37.348394305664385,
longitude: -0.002672821283340454
}]
};
mapControl.drawLine(params);
params = {
line : "ruta 1",
strokeColor: "#00FF00",
mode : "dashed",
locations : [{
latitude : 38.47718888472095,
longitude: -9.644861854612827
}, {
latitude : 38.63807799294125,
longitude: -0.1756015419960022
}]
};
mapControl.drawLine(params);
params = {
line : "ruta 2",
strokeColor: "#0000FF",
mode : "dotted",
locations : [{
latitude : 41.053614029734,
longitude: -9.531369879841805
}, {
latitude : 40.98011827779008,
longitude: 0.7152241095900536
}]
};
mapControl.drawLine(params);
params = {
line : "ruta 2",
strokeColor: "#FFFF00",
mode : "mixed",
locations : [{
latitude : 43.67910133655382,
longitude: -10.153294019401073
}, {
latitude : 43.03194923828824,
longitude: 3.0807440355420117
}]
};
mapControl.drawLine(params);
}
function drawRoute(sMapControl) {
let mapControl = getControl(sMapControl);
if (!mapControl) {
return;
}
let params = {
route : "ruta 1",
// Estos dos parámetros solo están soportados con OpenStreetMap
// urlType : "osm2po",
// url : "http://127.0.0.1:8888/Osm2poService",
// urlType : "osrm",
// url : "http://127.0.0.1:5000/route/v1/",
// Usar accurate para tener una ruta precisa con Google Maps. Consume bastante más recursos y puede hacer el mapa de Google lento
// accurate : true,
// Badajoz
sourceLatitude : latorigen,
sourceLongitude : lonorigen,
destinationLatitude : latdestino,
destinationLongitude: londestino,
sourceLatitude : 38.8685452,
sourceLongitude : -6.8170906,
// Madrid
destinationLatitude : 40.4167747,
destinationLongitude: -3.70379019,
/*
* Usar waypoints para indicar una ruta con más de dos posiciones (no
* soportado con osm2po)
*/
// waypoints: [{
// // Madrid
// latitude : 40.4893538,
// longitude: -3.6827461
// }, {
// // Badajoz
// latitude : 38.8685452,
// longitude: -6.8170906
// }, {
// // Barcelona
// latitude : 41.3850632,
// longitude: 2.1734035
// }],
mode : "driving",
strokeColor : "#FFFF00",
strokeWidth : 5.0
};
mapControl.clearRoute(ruta);
mapControl.drawRoute(params);
//mapControl.zoomTo(40.4167747, -3.70379019);
}
Función util de getcontrol:
function getControl(sPropName) {
let window = ui.getView(self);
if (!window) {
return null;
}
let control = window[sPropName];
if (!control) {
return null;
}
return control;
}
Otro modo de hacer lo mismo seria:
ui.drawMapRoute("MapaParada", "Ruta", self.MAP_LATITUDPARADA, self.MAP_LONGITUDPARADA, ui.getLastKnownLocationLatitude(), ui.getLastKnownLocationLongitude(), "driving", "#FF0000");
function drawArea(sMapControl) {
let mapControl = getControl(sMapControl);
if (!mapControl) {
return;
}
let params = {
id : "Area #2",
fillcolor: "#7F00FF00",
color : "#FF0000FF",
width : 5,
pattern : "normal",
// El polígono a dibujar (La Coruña -> Bilbao -> Lisboa)
data : ["43.3712591, -8.4188010", "43.2603479, -2.9334110", "38.7166700, -9.1333300"]
};
mapControl.drawArea(params);
}
function drawEncodeArea(sMapControl) {
let mapControl = getControl(sMapControl);
if (!mapControl) {
return;
}
let params = {
id : "Area #1",
fillcolor: "#7F0000FF",
color : "#FFFF0000",
width : 5,
pattern : "normal",
// El polígono a dibujar (Badajoz -> Madrid -> Barcelona -> Valencia)
data : toEncoded(["38.8685452, -6.8170906", "40.4167747, -3.70379019", "41.3850632, 2.1734035", "39.4561165, -0.3545661"])
};
mapControl.drawEncodeArea(params);
}
function removeArea(sMapControl) {
let mapControl = getControl(sMapControl);
if (!mapControl) {
return;
}
mapControl.removeArea("Area #1");
}
function clearAllAreas(sMapControl) {
let mapControl = getControl(sMapControl);
if (!mapControl) {
return;
}
mapControl.clearAllAreas();
}
function routeTo(sMapControl) {
let mapControl = getControl(sMapControl);
if (!mapControl) {
return;
}
let params = {
route: "ruta 1",
sourceLatitude: 40.4167747,
sourceLongitude: -3.70379019,
destinationLatitude: 41.3850632,
destinationLongitude: 2.1734035,
mode: "driving",
strokeColor: "#FFFF00",
strokeWidth: 5.0,
//Valores posibles: internal, external, google_maps, osmand, osmand_plus
source: "external"
};
mapControl.routeTo(params);
//mapControl.zoomTo(40.4167747, -3.70379019);
}
function clearRoute(sMapControl) {
let mapControl = getControl(sMapControl);
if (!mapControl) {
return;
}
mapControl.clearRoute("ruta 1");
}
function clearAllRoutes(sMapControl) {
let mapControl = getControl(sMapControl);
if (!mapControl) {
return;
}
mapControl.clearAllRoutes();
}
function clearLine(sMapControl) {
let mapControl = getControl(sMapControl);
if (!mapControl) {
return;
}
mapControl.clearLine("ruta 1");
}
function clearAllLines(sMapControl) {
let mapControl = getControl(sMapControl);
if (!mapControl) {
return;
}
mapControl.clearAllLines();
}
function showPoisMenu(sMapControl) {
let mapControl = getControl(sMapControl);
if (!mapControl) {
return;
}
mapControl.showPoisMenu();
}
function hidePoisMenu(sMapControl) {
let mapControl = getControl(sMapControl);
if (!mapControl) {
return;
}
mapControl.hidePoisMenu();
}
function togglePoisMenu(sMapControl) {
let mapControl = getControl(sMapControl);
if (!mapControl) {
return;
}
mapControl.togglePoisMenu();
}
function zoomTo(sMapControl) {
let mapControl = getControl(sMapControl);
if (!mapControl) {
return;
}
mapControl.zoomTo(38.886546, -7.0043193);
}
function zoomToEncodeData(sMapControl) {
let mapControl = getControl(sMapControl);
if (!mapControl) {
return;
}
mapControl.zoomToEncodeData(toEncoded(["38.8685452, -6.8170906", "40.4167747, -3.70379019"]));
}
function zoomToBounds(sMapControl) {
let mapControl = getControl(sMapControl);
if (!mapControl) {
return;
}
mapControl.zoomToBounds(["35.946850084, -9.39288367353", "43.7483377142, 3.03948408368"]);
}
function zoomToMyLocation(sMapControl) {
let mapControl = getControl(sMapControl);
if (!mapControl) {
return;
}
mapControl.zoomToMyLocation(20);
}
function restrictMapToBounds(sMapControl) {
let mapControl = getControl(sMapControl);
if (!mapControl) {
return;
}
mapControl.restrictMapToBounds(["35.946850084, -9.39288367353", "43.7483377142, 3.03948408368"]);
}
function startDistanceMeter(sMapControl) {
let mapControl = getControl(sMapControl);
if (!mapControl) {
return;
}
let jsParams = {
latitude : 38.886546,
longitude : -7.0043193,
startMarkerIcon: "start_distance_marker_icon.png",
endMarkerIcon : "end_distance_marker_icon.png",
};
mapControl.startDistanceMeter(jsParams);
// mapControl.startDistanceMeter("38.886546,-7.0043193");
mapControl.zoomTo(38.886546, -7.0043193);
}
function stopDistanceMeter(sMapControl) {
let mapControl = getControl(sMapControl);
if (!mapControl) {
return;
}
mapControl.stopDistanceMeter();
}
function testInexistente(sMapControl) {
let contents = self.getContents("ClientesCoord");
let newObject = contents.createObject();
newObject.NOMBRE = "Test POI";
newObject.DIRECCION = "Calle Falsa";
contents.unlock();
contents.clear();
contents.addItem(newObject);
contents.lock();
let window = ui.getView(self);
if (!window) {
return;
}
window.refresh(sMapControl);
}
function distanceTo() {
//let jsParams = ["38.8685452, -6.8170906", "40.4167747, -3.70379019"];
let jsParams = [
{
latitude : 38.8685452,
longitude: -6.8170906
}, {
latitude : 40.4167747,
longitude: -3.70379019
}
];
let nMeters = new GpsTools().distanceTo(jsParams);
ui.showToast("Distancia entre Badajoz y Madrid: " + nMeters + " metros.");
}
function getAddressFromPosition() {
let result = new GpsTools().getAddressFromPosition("38.8862106, -7.0040345");
let str = "Localidad: " + result.locality
+ "\nSublocalidad: " + result.subLocality
+ "\nÁrea administración: " + result.adminArea
+ "\nSubárea de administración: " + result.subAdminArea
+ "\nCaracterísticas: " + result.features
+ "\nPaís: " + result.country
+ "\nCódigo país: " + result.countryCode
+ "\nCalle: " + result.street
+ "\nNúmero: " + result.number
+ "\nDirección: " + result.address
+ "\nCódigo postal: " + result.postal;
ui.msgBox(str, "Resultado", 0);
}
function containsLocation() {
let bResult;
ui.msgBox("¿Es Teruel una ciudad contenida en un polígono formado por La Coruña -> Bilbao -> Lisboa?", "Mensaje", 0);
bResult = new GpsTools().containsLocation("40.3633442, -1.0893794", ["43.3712591, -8.4188010", "43.2603479, -2.9334110", "38.7166700, -9.1333300"]);
if (bResult) {
ui.msgBox("Por ahí anda Teruel", "Mensaje", 0);
} else {
ui.msgBox("No, Teruel no está ahí", "Mensaje", 0);
}
ui.msgBox("¿Es Teruel una ciudad contenida en un polígono formado por Badajoz -> Madrid -> Barcelona -> Valencia?", "Mensaje", 0);
bResult = new GpsTools().containsLocation("40.3633442, -1.0893794", ["38.8685452, -6.8170906", "40.4167747, -3.70379019", "41.3850632, 2.1734035", "39.4561165, -0.3545661"]);
if (bResult) {
ui.msgBox("Por ahí anda Teruel", "Mensaje", 0);
} else {
ui.msgBox("No, Teruel no está ahí", "Mensaje", 0);
}
}
function getLastKnownLocation() {
let location = new GpsTools().getLastKnownLocation();
if (!location) {
ui.showToast("No hay última localización conocida");
return;
}
ui.msgBox("Latitud: " + location.latitude + "\nLongitud: " + location.longitude + "\nPrecisión (metros): " + location.accuracy + "\nAltitud (metros elipsis WSG 84): " + location.altitude + "\nRumbo (grados): " + location.bearing + "\nVelocidad (metros/segundo): " + location.speed + "\nFecha: " + location.time.toString(), "Mensaje", 0);
}
function encoded() {
let sEncoded = toEncoded(["38.8685452, -6.8170906", "40.4167747, -3.70379019"]);
ui.showToast(sEncoded);
}
function toEncoded(lstCoords) {
if (!lstCoords) {
return null;
}
return new GpsTools().encode(lstCoords);
}
function doFollowUserLocation(sControl, bFollow) {
let control = getControl(sControl);
if (!control) {
return;
}
control.setFollowUserLocation(bFollow);
}
function doSetMapType(sControl, sMapType) {
let control = getControl(sControl);
if (!control) {
return;
}
control.setMapType(sMapType);
}
function getControl(sControl) {
if (!sControl) {
throw "El nombre del control no puede estar vacío";
}
let window = ui.getView(self);
if (!window) {
return null;
}
let control = window[sControl];
if (!control) {
return null;
}
if (control === undefined) {
return null;
}
return control;
}