BUSCADOR |
---|
INDICE |
---|
INDICE PÁGINA ACTUAL |
---|
Tabla de Contenidos
BUSCADOR |
---|
INDICE |
---|
INDICE PÁGINA ACTUAL |
---|
XOne ha implementado entre sus funcionalidades la posibilidad de incorporar mapas a las aplicaciones tomando como proveedores Google Maps u OpenStreetMap.
Este módulo que provee XOne comprende cada uno de los detalles que en materia de mapa estamos acostumbrados a utilizar.
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.
Mapas |
---|
MapView |
OpenstreetMap |
La visualización de los mapas en las Apps XOne se muestra de la siguiente forma:
Implementación con Google Maps: | Implementación con OpenStreetMaps: |
---|---|
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
<prop name="MAP_MAPA" visible="1" type="Z" viewmode="mapview" mapview-embedded="true" contents="Coordinates" width="100%" height="70%" map-features="roads" map-type="normal" map-type="satellite" clear-lines-on-refresh="false" show-pois="true" show-google-buttons="true" show-user-location="true" show-zoom-buttons="true" zoom-to-my-location="false" zoom-to-pois="true" restrict-map-to-bounds="35.946850084,-9.39288367353,44.025196,-9.600513" onmapclicked="onMapClicked(e);" ondrop="onMapDrop(e);" onstreetviewenabled="onStreetViewEnabled(e);" onstreetviewunavailable="onStreetViewUnavailable(e);" onmaplongclicked="onMapLongClicked(e);" onmarkerdragend="onMarkerDraggedEnd(e);" onmapready="onMapReady(e);" onlocationready="onLocationReady(e);" onlocationchanged="onLocationChanged(e);" onmapzoomchanged="onMapZoomChanged(e);" ondistancemeter="onDistanceMeter(e);" />
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 |
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
<prop name="MAP_MAPA_OPENSTREET" visible="1" type="Z" viewmode="openstreetmap" width="100%" height="70%" contents="Coordinates" show-compass="true" show-minimap="true" show-scale="true" follow-location-on-background="true" ignore-geocoding-errors="false" zoom-buttons-visibility="never" clear-lines-on-refresh="false" show-pois="true" show-google-buttons="false" show-user-location="true" zoom-to-my-location="false" zoom-to-pois="false" tile-source="mapnik_hd" onmapclicked="onMapClicked(e);"
Visualización en la App con OpenStreetMaps:
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é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()); }
Método que activa la geolocalización del dispositivo.
Ejemplo:
var ventana = ui.getView(self); if (ventana != null) { ventana.MAP_MAPA.enableUserLocation(); }
Método que desactiva la geolocalización del dispositivo.
Ejemplo:
var ventana = ui.getView(self); if (ventana != null) { ventana.MAP_MAPA.disableUserLocation(); }
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);
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");
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");
Método que limpia todas las líneas que se dibujen con drawLine.
Ejemplo:
var ventana = ui.getView(self); ventana.MAP_MAPA.clearAllLines();
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");
Método que limpia todas las líneas que se dibujen con drawRoute.
Ejemplo:
var ventana = ui.getView(self); ventana.MAP_MAPA.clearAllRoutes();
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);
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); });
Define evento que llama a función cuando se haga click sobre el mapa.
onmapclicked="onMapClicked(e);"
<function onMapClicked(evento) { ui.showToast("latitude: " + evento.latitude + " longitude: " + evento.longitude); var window = ui.getView(self); var params = { latitude: evento.latitude, longitude: evento.longitude, //rotation: 100, //alpha: 0.5, draggable: true, icon: "icon.png", tag: "Soy un marker" }; window["MAP_MAPA"].addMarker(params); }
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); }
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; }