| Ambos lados, revisión anterior
Revisión previa
Próxima revisión
|
Revisión previa
|
wiki:2.-desarrollo-app:2.5.-controles-by-xone:mapas:start [2023/10/23 13:09]
ary |
wiki:2.-desarrollo-app:2.5.-controles-by-xone:mapas:start [2024/02/28 13:13] (actual)
ary [Tabla] |
| ==== Mapas by XOne ==== | ===== Mapas by XOne ===== |
| | |
| |
| \\ | \\ |
| |
| XOne ha implementado entre sus funcionalidades la posibilidad de incorporar mapas a las aplicaciones tomando como proveedores Google Maps u OpenStreetMap.\\ | XOne ha implementado entre sus funcionalidades la posibilidad de incorporar mapas a las aplicaciones tomando como proveedores Google Maps u %%OpenStreetMap%%.\\ |
| |
| <note important>En en el caso los entornos **Android** e **IOS** se activa por defecto Google Maps 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.</note>\\ | <note important>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.</note>\\ |
| |
| Este módulo que provee XOne comprende cada uno de los detalles que en materia de mapa estamos acostumbrados a utilizar.\\ | 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.\\ | 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%>| | |<70%>| |
| ^ **Implementación con Google Maps:** ^ **%%Implementación con OpenStreetMaps:%%** ^ | ^ **Implementación con Google Maps:** ^ **%%Implementación con OpenStreetMaps:%%** ^ |
| | {{:wiki:2.-desarrollo-app:2.5.-controles-by-xone:q.-mapas:screenshot_20200310-162335.png?300&nolink}} | {{:wiki:2.-desarrollo-app:2.5.-controles-by-xone:q.-mapas:screenshot_20200310-162108.png?300&nolink}} | | | {{: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}} | |
| |
| \\ | \\ |
| \\ | \\ |
| === Principales Funcionalidades en la implementación de mapas con Google Maps === | |
| | |
| | ==== 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__ |
| | \\ |
| | <code xml> |
| | <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);" /> |
| | </code> |
| | \\ |
| | \\ |
| | |
| | \\ |
| | <WRAP group> |
| | <WRAP half column> |
| | {{: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}} |
| | </WRAP> |
| | |
| | <WRAP half column> |
| | |
| | </WRAP> |
| | </WRAP> |
| | |
| | \\ |
| | \\ |
| | |
| | \\ |
| | === Atributos y funcionalidades para Mapa tipo MapView: === |
| | |
| | \\ |
| |<70%>| | |<70%>| |
| ^ Funciones Implementadas ^ Descripción ^ | ^ ATRIBUTOS y EVENTOS || |
| | isUserLocationEnabled | Para saber si la ubicación del usuario está activada | | | isUserLocationEnabled | Para saber si la ubicación del usuario está activada | |
| | enableUserLocation | Para activar la ubicación del usuario | | | enableUserLocation | Para activar la ubicación del usuario | |
| | disableUserLocation | Para desactivar la ubicación del usuario | | | disableUserLocation | Para desactivar la ubicación del usuario | |
| | cambiar POIs | cambiar puntos de interés | | | cambiar POIs | cambiar puntos de interés | |
| | refresh | refresca y actualiza visualización del mapa | | | 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 | | | 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 | | | 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 | | | 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 | | | clearLine | Elimina la línea por su nombre | |
| | clearAllLines | Elimina todas las líneas | | | clearAllLines | Elimina todas las líneas | |
| | clearRoute | Elimina la ruta por su nombre | | | clearRoute | Elimina la ruta por su nombre | |
| | clearAllRoutes | Elimina todas las rutas | | | clearAllRoutes | Elimina todas las rutas | |
| | showPoisMenu | Muestra el menú de los puntos de interés | | | showPoisMenu | Muestra el menú de los puntos de interés | |
| | hidePoisMenu | Oculta 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 | | | togglePoisMenu | Cambia el estado del menú de los puntos de interés | |
| | zoomTo | Hace zoom a unas coordenadas | | | zoomTo | Hace zoom a unas coordenadas | |
| | zoomToEncodeData | Hace zoom a unas coordenadas codificadas | | | zoomToEncodeData | Hace zoom a unas coordenadas codificadas | |
| | startDistanceMeter | Punto inicial para medir distancia entre puntos | | | startDistanceMeter | Punto inicial para medir distancia entre puntos | |
| | stopDistanceMeter | Punto final para medir distancia entre puntos | | | stopDistanceMeter | Punto final para medir distancia entre puntos | |
| | showMarkers | Muestra los marcadores definidos por el usuario | | | showMarkers | Muestra los marcadores definidos por el usuario | |
| | hideMarkers | Oculta los marcadores definidos por el usuario | | | hideMarkers | Oculta los marcadores definidos por el usuario | |
| | removeMarkers | Elimina los marcadores establecidos 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 | |
| | drawArea | Dibuja la región definida por varias coordenadas | | | drawEncodeArea | Dibuja la región definida por coordenadas codificadas | |
| | drawEncodeArea | Dibuja la región definida por coordenadas codificadas | | | startdistanceMeter | Establece punto de inicio para medir distancia | |
| | startdistanceMeter | Establece punto de inicio para medir distancia | | | stopdistanceMeter | Establece punto final para medir distancia | |
| | stopdistanceMeter | Establece punto final para medir distancia | | | clearAllAreas | Elimina todas las áreas | |
| | clearAllAreas | Elimina todas las áreas | | | removeArea | Elimina un área por su nombre | |
| | removeArea | Elimina un área por su nombre | | | getUserLocation | Devuelve las coordenadas de la ubicación del usuario | |
| | getUserLocation | Devuelve las coordenadas de la ubicación del usuario | | | zoomToBounds | Hace zoom a una región | |
| | 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 | |
| | 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 | |
| | zoomToMyLocation | Hace zoom a la ubicación del usuario | | | setFollowUserLocation | Activa o desactiva el seguimiento de la posició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) | |
| | 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 | |
| | \\ |
| | \\ |
| |
| |
| === Principales Funcionalidades en la implementación con %%OpenStreet Maps%% === | ====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__ |
| | \\ |
| | <code xml> |
| | <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);" |
| | |
| | |
| | </code> |
| | \\ |
| | |
| | **%%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%>| | |<70%>| |
| ^ Funciones Implementadas ^ Descripción ^ | ^ Funciones Implementadas ^ Descripción ^ |
| | setFollowUserLocation | Activa o desactiva el seguimiento de la posición del usuario | | | setFollowUserLocation | Activa o desactiva el seguimiento de la posición del usuario | |
| |
| | \\ |
| | \\ |
| | ==== MÉTODOS Y EVENTOS: ==== |
| | \\ |
| |
| | |
| | |
| | ===isUserLocationEnabled=== |
| \\ | \\ |
| === Ejemplo de uso para aplicación con mapa de Google Maps === | Método que te devuelve si el usuario tiene activa la geolocalización.\\ |
| <code xml> | |
| <frame name="frmMidle" class="xnBodyC" align="top|center" > | **Ejemplo:** \\ |
| <!-- MAPA ACTIVOS --><!-- MAPA ACTIVOS --><!-- MAPA ACTIVOS --><!-- MAPA ACTIVOS --><!-- MAPA ACTIVOS --> | |
| <!-- MAPA ACTIVOS --><!-- MAPA ACTIVOS --><!-- MAPA ACTIVOS --><!-- MAPA ACTIVOS --><!-- MAPA ACTIVOS --> | |
| <!-- MAPA ACTIVOS --><!-- MAPA ACTIVOS --><!-- MAPA ACTIVOS --><!-- MAPA ACTIVOS --><!-- MAPA ACTIVOS --> | |
| <frame name="fmrOpcion1" disablevisible="MAP_SELECCION<>0" width="100%" height="100%" align="right|top" > | |
| <prop name="MapaActivos" contents="MapaActivos" width="99%" height="100%" title="MapaActivos" type="Z" visible="1" class="clsmapview" onmapclicked="onMapClicked(e);" onmapmovestarted="javascript:mapMoveStarted();" onmapmoveended="javascript:mapMoveEnded();" ondistancemeter="javascript:showDistance(e);" onlineclicked="javascript:segmentClicked(e);" /> | |
| <contents name="MapaActivos" src="MapaActivos" filter="1=1"/> | |
| </frame> | |
| | |
| <coll name="MapaActivos" title="Mapa de Averias" objname="activos" updateobj="activos" progid="ASData.CASBasicDataObj" loadall="true" dependent="false" check-owner="false" show-toolbar="false" | |
| sql="SELECT t1.*, | |
| case when t1.OK=1 then 'markerok.png' | |
| else 'markernook.png' end as MAP_ICON | |
| FROM gen_activos t1" class="xnDataList"> | |
| <group name="General" id="1"> | |
| <frame name="frm1"> | |
| <prop name="LATITUD" type="N6" visible="7" mapview-latitude="true" /> | |
| <prop name="LONGITUD" type="N6" visible="7" mapview-longitude="true" /> | |
| <prop name="MAP_ICON" mapview-marker-icon="true" visible="7" type="T" size="100" /> | |
| <prop name="SERIAL" visible="1" type="T" /> | |
| </frame> | |
| </group> | |
| <selecteditem refresh="false" show-wait-dialog="false"> | |
| <action name="runscript"> | |
| <script language="javascript"> | |
| //MsgBox(self.SERIAL, "Serial Activo", 0); | |
| selectedItemAveria(self.ID); | |
| </script> | |
| </action> | |
| </selecteditem> | |
| </coll> | |
| |
| | \\ |
| | <code javascript> |
| | var ventana = ui.getView(self); |
| | if (ventana != null) { |
| | ui.showToast("Enabled: " + ventana.MAP_MAPA.isUserLocationEnabled()); |
| | } |
| </code> | </code> |
| \\ | \\ |
| === Ejemplo de uso para aplicación con mapa de OpenStreet Map === | ===enableUserLocation=== |
| <code xml> | \\ |
| <group name="General" id="1"> | Método que activa la geolocalización del dispositivo.\\ |
| <frame name="group1Frame" class="frmtodo" height="1040p" bgcolor="#FFFFFF" align="top|center"> | \\ |
| <prop name="MAP_MAPA_OPENSTREET" show-compass="true" show-minimap="true" show-scale="true" Xuser-location-icon="start_distance_marker_icon.png" Xdirection-arrow-icon="right-arrow.png" 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" zoom-to-my-location="false" zoom-to-pois="true" visible="1" type="Z" contents="ClientesCoord" onmapclicked="onMapClicked(e);" onmaplongclicked="onMapLongClicked(e);" onmarkerdragend="onMarkerDraggedEnd(e);" onmapready="onMapReady(e);" onlocationready="onLocationReady(e);" onlocationchanged="onLocationChanged(e);" offline-maps="false" viewmode="openstreetmap" width="100%" height="60%" /> | **Ejemplo**:\\ |
| <frame name="botones_openstreetmap" width="100%" height="40%" align="center" scroll="true"> | \\ |
| <prop name="MAP_CAMBIOPOIS_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="Cambiar POIs" onclick="doChangeMapPois('MAP_MAPA_OPENSTREET');" labelwidth="1" label-wrap="true" /> | <code javascript> |
| <prop name="MAP_REFRESH_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="Refresh" onclick="doRefresh('MAP_MAPA_OPENSTREET');" labelwidth="1" label-wrap="true" newline="false" /> | var ventana = ui.getView(self); |
| <prop name="MAP_ISUSERLOCATIONENABLED_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="isUserLocationEnabled" onclick="isUserLocationEnabled('MAP_MAPA_OPENSTREET');" labelwidth="1" label-wrap="true" /> | if (ventana != null) { |
| <prop name="MAP_ENABLEUSERLOCATION_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="enableUserLocation" onclick="enableUserLocation('MAP_MAPA_OPENSTREET');" labelwidth="1" newline="false" label-wrap="true" /> | ventana.MAP_MAPA.enableUserLocation(); |
| <prop name="MAP_DISABLEUSERLOCATION_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="disableUserLocation" onclick="disableUserLocation('MAP_MAPA_OPENSTREET');" labelwidth="1" label-wrap="true" /> | } |
| <prop name="MAP_ROUTE_TO_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="RouteTo" onclick="routeTo('MAP_MAPA_OPENSTREET');" labelwidth="1" newline="false" label-wrap="true" /> | </code> |
| <prop name="MAP_DRAWLINE_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="DrawLine" onclick="drawLine('MAP_MAPA_OPENSTREET');" labelwidth="1" label-wrap="true" /> | \\ |
| <prop name="MAP_DRAWROUTE_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="DrawRoute" onclick="drawRoute('MAP_MAPA_OPENSTREET');" labelwidth="1" newline="false" label-wrap="true" /> | ===disableUserLocation=== |
| <prop name="MAP_CLEARLINE_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="ClearLine" onclick="clearLine('MAP_MAPA_OPENSTREET');" labelwidth="1" label-wrap="true" /> | \\ |
| <prop name="MAP_CLEARALLLINES_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="ClearAllLines" onclick="clearAllLines('MAP_MAPA_OPENSTREET');" labelwidth="1" newline="false" label-wrap="true" /> | Método que desactiva la geolocalización del dispositivo.\\ |
| <prop name="MAP_CLEARROUTE_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="ClearRoute" onclick="clearRoute('MAP_MAPA_OPENSTREET');" labelwidth="1" label-wrap="true" /> | |
| <prop name="MAP_CLEARALLROUTES_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="ClearAllRoutes" onclick="clearAllRoutes('MAP_MAPA_OPENSTREET');" labelwidth="1" newline="false" label-wrap="true" /> | **Ejemplo**:\\ |
| <prop name="MAP_SHOWPOISMENU_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="ShowPoisMenu" onclick="showPoisMenu('MAP_MAPA_OPENSTREET');" labelwidth="1" label-wrap="true" /> | \\ |
| <prop name="MAP_HIDEPOISMENU_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="HidePoisMenu" onclick="hidePoisMenu('MAP_MAPA_OPENSTREET');" labelwidth="1" newline="false" label-wrap="true" /> | <code javascript> |
| <prop name="MAP_TOGGLEPOISMENU_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="TogglePoisMenu" onclick="togglePoisMenu('MAP_MAPA_OPENSTREET');" labelwidth="1" label-wrap="true" /> | |
| <prop name="MAP_ZOOMTO_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="ZoomTo" onclick="zoomTo('MAP_MAPA_OPENSTREET');" labelwidth="1" newline="false" label-wrap="true" /> | var ventana = ui.getView(self); |
| <prop name="MAP_ZOOMTOENCODEDATA_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="ZoomToEncodeData" onclick="zoomToEncodeData('MAP_MAPA_OPENSTREET');" labelwidth="1" label-wrap="true" /> | if (ventana != null) { |
| <prop name="MAP_SHOW_MARKERS_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="ShowMarkers" onclick="showMarkers();" labelwidth="1" newline="false" label-wrap="true" /> | ventana.MAP_MAPA.disableUserLocation(); |
| <prop name="MAP_HIDE_MARKERS_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="HideMarkers" onclick="hideMarkers();" labelwidth="1" label-wrap="true" /> | } |
| <prop name="MAP_SET_MARKERS_DRAGGABLE_TRUE_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="SetDraggable(true)" onclick="setMarkersDraggable(true);" labelwidth="1" newline="false" label-wrap="true" /> | </code> |
| <prop name="MAP_SET_MARKERS_DRAGGABLE_FALSE_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="SetDraggable(false)" onclick="setMarkersDraggable(false);" labelwidth="1" label-wrap="true" /> | |
| <prop name="MAP_START_DISTANCE_METER_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="StartDistanceMeter()" onclick="startDistanceMeter('MAP_MAPA_OPENSTREET');" labelwidth="1" newline="false" label-wrap="true" /> | |
| <prop name="MAP_STOP_DISTANCE_METER_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="StopDistanceMeter()" onclick="stopDistanceMeter('MAP_MAPA_OPENSTREET');" labelwidth="1" label-wrap="true" /> | |
| <prop name="MAP_DRAW_AREA_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="DrawArea()" onclick="drawArea('MAP_MAPA_OPENSTREET');" labelwidth="1" label-wrap="true" newline="false" /> | |
| <prop name="MAP_DRAW_ENCODE_AREA_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="DrawEncodeArea()" onclick="drawEncodeArea('MAP_MAPA_OPENSTREET');" labelwidth="1" label-wrap="true" /> | |
| <prop name="MAP_CLEAR_ALL_AREAS_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="ClearAllAreas()" onclick="clearAllAreas('MAP_MAPA_OPENSTREET');" labelwidth="1" label-wrap="true" newline="false" /> | |
| <prop name="MAP_REMOVE_AREA_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="RemoveArea()" onclick="removeArea('MAP_MAPA_OPENSTREET');" labelwidth="1" label-wrap="true" /> | |
| <prop name="MAP_ANADIR_INEXISTENTE_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="Añadir POI inexistente" onclick="testInexistente('MAP_MAPA_OPENSTREET');" labelwidth="1" label-wrap="true" newline="false" /> | |
| <prop name="MAP_GET_USER_LOCATION_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="GetUserLocation" onclick="getUserLocation('MAP_MAPA_OPENSTREET');" labelwidth="1" label-wrap="true" /> | |
| <prop name="MAP_ZOOMTOBOUNDS_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="ZoomToBounds" onclick="zoomToBounds('MAP_MAPA_OPENSTREET');" labelwidth="1" newline="false" label-wrap="true" /> | |
| <prop name="MAP_RESTRICTMAPTOBOUNDS_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="RestrictMapToBounds" onclick="restrictMapToBounds('MAP_MAPA_OPENSTREET');" labelwidth="1" label-wrap="true" /> | |
| <prop name="MAP_ZOOMTOMYLOCATION_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="ZoomToMyLocation" onclick="zoomToMyLocation('MAP_MAPA_OPENSTREET');" labelwidth="1" newline="false" label-wrap="true" /> | |
| <prop name="MAP_FOLLOWUSERLOCATION_TRUE_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="FollowUserLocation(true)" onclick="doFollowUserLocation('MAP_MAPA_OPENSTREET', true);" labelwidth="1" label-wrap="true" /> | |
| <prop name="MAP_FOLLOWUSERLOCATION_FALSE_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="FollowUserLocation(false)" onclick="doFollowUserLocation('MAP_MAPA_OPENSTREET', false);" labelwidth="1" newline="false" label-wrap="true" /> | |
| <prop name="MAP_SETMAPTYPE_NORMAL_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="SetMapType(normal)" onclick="doSetMapType('MAP_MAPA_OPENSTREET', 'normal');" labelwidth="1" label-wrap="true" /> | |
| <prop name="MAP_SETMAPTYPE_SATELLITE_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="SetMapType(satellite)" onclick="doSetMapType('MAP_MAPA_OPENSTREET', 'satellite');" labelwidth="1" newline="false" label-wrap="true" /> | |
| <prop name="MAP_SETMAPTYPE_TERRAIN_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="SetMapType(terrain)" onclick="doSetMapType('MAP_MAPA_OPENSTREET', 'terrain');" labelwidth="1" label-wrap="true" /> | |
| <prop name="MAP_SETMAPTYPE_HYBRID_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="SetMapType(hybrid)" onclick="doSetMapType('MAP_MAPA_OPENSTREET', 'hybrid');" labelwidth="1" newline="false" label-wrap="true" /> | |
| <prop name="MAP_SETMAPTYPE_NONE_OPENSTREET" visible="1" type="B" width="50%" height="20%" title="SetMapType(none)" onclick="doSetMapType('MAP_MAPA_OPENSTREET', 'none');" labelwidth="1" label-wrap="true" /> | |
| </frame> | |
| </frame> | |
| | |
| <contents name="ClientesCoord" src="ClientesCoord" /> | |
| </group> | |
| | |
| <coll name="ContentmapaDatosDireccion" title="mapaDatos" | ===drawLine=== |
| sql="select t1.NOMBRE, t1.DIRECCION, replace(t1.LATITUD, ',', '.') as LATITUD, replace(t1.LONGITUD, ',', '.') as LONGITUD, 'xone_map_pin.png' as MAP_MARKERICON | \\ |
| from ##PREF##mapa_datos t1" objname="mapa_datos" updateobj="mapa_datos" progid="ASData.CASBasicDataObj"> | Método que dibuja una línea uniendo los puntos que se le pasen como parámetros.\\ |
| <group name="General" id="1"> | |
| <frame name="frm1"> | |
| <prop name="LATITUD" type="N6" visible="5" XXXmapview-latitude="false" mapview-latitude="true" /> | ^PARÁMETROS ^ Definición^ |
| <prop name="LONGITUD" type="N6" visible="5" XXXmapview-longitude="false" mapview-longitude="true" /> | |**PARÁMETRO 1**|Nombre identificativo de la linea.| |
| <prop name="NOMBRE" type="T" visible="5" /> | |**PARÁMETRO 2**|Color de la línea que se dibuje.| |
| <prop name="DIRECCION" type="T" visible="5" XXXmapview-address="true" XXXmapview-description="true" /> | |**PARÁMETRO 3**|Tipo de línea que va a dibujar.| |
| <prop name="MAP_MARKERICON" mapview-marker-icon="true" visible="1" type="T" /> | |**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).| |
| </frame> | |
| </group> | \\ |
| </coll> | **Ejemplo**: |
| | \\ |
| | <code javascript> |
| | |
| | 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); |
| </code> | </code> |
| \\ | \\ |
| | |
| | ===drawRoute=== |
| | \\ |
| | Método que dibuja una ruta que une dos puntos.\\ |
| \\ | \\ |
| |
| ===== Funciones Implementadas by XOne para Mapas ===== | ^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**: |
| | \\ |
| | <code javascript> |
| | |
| | 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"); |
| | </code> |
| | |
| | |
| | \\ |
| | ===clearLine=== |
| | \\ |
| | Método que limpia la línea que se dibuje con drawLine.\\ |
| | \\ |
| | |**PARÁMETRO**|Nombre identificativo de la línea. | |
| | \\ |
| | |
| | |
| | |
| | **Ejemplo**:\\ |
| | <code javascript> |
| | |
| | var ventana = ui.getView(self); |
| | ventana.MAP_MAPA.clearLine("ruta 1"); |
| | </code> |
| | \\ |
| | |
| | ===clearAllLines=== |
| | \\ |
| | Método que limpia todas las líneas que se dibujen con drawLine.\\ |
| | \\ |
| | **Ejemplo**: |
| | \\ |
| | <code javascript> |
| | |
| | var ventana = ui.getView(self); |
| | ventana.MAP_MAPA.clearAllLines(); |
| | |
| | </code> |
| | \\ |
| | |
| | ===clearRoute=== |
| | \\ |
| | Método que limpia la ruta que se dibuje con drawRoute.\\ |
| | \\ |
| | |**PARÁMETRO** | Nombre identificativo de la ruta. | |
| | \\ |
| | |
| | \\ |
| | **Ejemplo**:\\ |
| | \\ |
| | <code javascript> |
| | |
| | var ventana = ui.getView(self); |
| | ventana.MAP_MAPA.clearRoute("ruta 1"); |
| | </code> |
| | \\ |
| | |
| | ===clearAllRoutes=== |
| | \\ |
| | Método que limpia todas las líneas que se dibujen con drawRoute.\\ |
| | \\ |
| | **Ejemplo**:\\ |
| | \\ |
| | <code javascript> |
| | |
| | var ventana = ui.getView(self); |
| | ventana.MAP_MAPA.clearAllRoutes(); |
| | |
| | </code> |
| | |
| | \\ |
| | ===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**: |
| | \\ |
| | <code javascript> |
| | var ventana = ui.getView(self); |
| | ventana.MAP_MAPA.addMarker(40.4167747, -3.70379019); |
| | </code> |
| | \\ |
| | ===setOnMapClickedListener=== |
| | \\ |
| | Define la función cuando se haga click sobre el mapa.\\ |
| | \\ |
| | **Ejemplo:** |
| | \\ |
| | <code javascript> |
| | 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); |
| | }); |
| | |
| | |
| | </code> |
| | |
| | |
| | ===onMapClicked=== |
| | Define evento que llama a función cuando se haga click sobre el mapa.\\ |
| | |
| | <code javascript> |
| | onmapclicked="onMapClicked(e);" |
| | </code> |
| | <code javascript> |
| | <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); |
| | |
| | } |
| | |
| | </code> |
| | |
| | ===onMarkerDraggedEnd=== |
| | Define evento que llama a función cuando marca punto en Mapa.\\ |
| | |
| | <code javascript> |
| | onmarkerdragend="onMarkerDraggedEnd(e);" |
| | </code> |
| | <code javascript> |
| | function onMarkerDraggedEnd(evento) { |
| | |
| | ui.showToast("Tag: " + evento.tag + " latitude: " + evento.latitude + " longitude: " + evento.longitude); |
| | |
| | } |
| | |
| | |
| | </code> |
| | |
| | \\ |
| | |
| | \\ |
| | ==== FUNCIONES IMPLEMENTADAS by XOne PARA MAPAS ==== |
| |
| |
| |
| |
| // Caluclar el segmentos | // Calcular el segmentos |
| function segmentClicked(evento) { | function segmentClicked(evento) { |
| var objSelf=self; | var objSelf=self; |