{{indexmenu_n>1}}
==== PICTURE-MAP ====
\\
Content Picture Mapa Data.\\
\\
Para definir content tipo Picture Map Data se hace la declaración del prop type="z" asociado al atributo **viewmode="picturemap"**.
 La colección asociada al content contendrá los datos de coordenadas, nombre de puntos, localizaciñons, marcas de mapa, iconos asociados
\\
{{ :wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:5.-listado-de-datos:6.-picture-map:screenshot_20231006-135803.png?200 |}}
\\
=== Declaración del Content: ===

\\
<code xml>
<frame name="frmPictureMap"  width="700p" lmargin="10p" height="700p" tmargin="20p" bmargin="20p" framebox="true">
              
            <prop name="PictureMapData" ignore-touch-in-transparent-area="true" type="Z" contents="PictureMapData" imgbk="mapa-GLOBAL.png" viewmode="picturemap" />
            <contents name="PictureMapData" src="ContentPictureMapData" />    
</frame>
</code>
\\

**Ejemplos**:\\
\\
=== Colección de datos para PictureMap ===

\\
<code xml>
<coll name="ContentPictureMapData" title="PictureMapData" loadall="true" 
sql="select t1.* from ##PREF##picturemapdata t1" objname="picturemapdata" updateobj="picturemapdata" progid="ASData.CASBasicDataObj">
      <group name="General" id="1">
        <prop name="ID" title="Codigo" type="N" visible="0" labelwidth="0" />
        <prop name="CODIGO" title="Codigo" type="T" visible="0" labelwidth="0" />
        <prop name="TITULO" title="Titulo" labelwidth="0" type="T" visible="4" />
        <prop name="DESCRIPCION" title="Descripcion" labelwidth="0" type="T" visible="4" />
        <prop name="ESTADO" title="Estado" labelwidth="0" type="T" visible="4" />
        <prop name="XCOORD" type="N" xcoord="true" visible="4" />
        <prop name="YCOORD" type="N" ycoord="true" visible="4" />
        <prop name="ICONBIG" width="126" height="168" type="T" size="250" icon-big="true" visible="4" />
        <prop name="RADIO" type="N" circle-radius="true" visible="4" />
        <prop name="ICONOFF" width="126" height="168" type="T" size="250" icon-mark="true" visible="4" />
        <prop name="ICONON" width="126" height="168" type="T" size="250" icon-touch="true" visible="4" />
      </group>
      <selecteditem show-wait-dialog="false" refresh="false">
        <action name="runscript">
          <script language="javascript">
            var parent = self.getOwnerCollection().getOwnerObject();
  			parent.MAP_ID=self.ID;
  			parent.MAP_NOMBRE = self.TITULO;
  			parent.MAP_DESCRIPCION = self.DESCRIPCION;
  			//ui.refresh("MAP_NOMBRE,MAP_DESCRIPCION");
  			ui.getView(parent).refresh("MAP_NOMBRE,MAP_DESCRIPCION");
  		</script>
        </action>
      </selecteditem>
    </coll>
	
	</code>
\\

Atributos para utilizar en los props de la colección del content vista %%PictureMap%%:
\\
|<55%>|
^ Atributos                                ^ Funcionalidad                                                                                                                           ^
| ignore-touch-in-transparent-area="true"  | Permite decartar si el usuario toca cualquier área contenida en el Mapa                                                                 |
| imgbk="archivo.png"                      | Para asociar imagen al content                                                                                                          |
| mapview-embedded="true"                  | El mapa se mostrará dentro de una ventana de la propia App Xone, en caso contrario se ejecuta la App de Mapas asociada al dispositivo.  |
| contents="Coordinates"                   | Para asociar contents de datos correspondiente al Mapa                                                                                  |
| width="100%"                             | Definir ancho                                                                                                                           |
| height="70%"                             | Definir alto                                                                                                                            |
| cluster-markers="true"                   | Este atributo permite definir si se mostrarán los markets points                                                                        |
| map-type=“terrain”                       | Definir Tipo de mapa a visualizar. Terreno, híbrido , satélite.                                                                         |
| show-pois=“true”                         | Mostarar puntos Pois                                                                                                                    |
| show-google-buttons=“true”               | Mostrar botones predefinidos en Mapas Google                                                                                            |
| show-user-location=“true”                | Mostar localización usuario                                                                                                             |
| zoom-to-my-location=“false”              | Permitir zoom a localización de usuario                                                                                                 |
| onmapclicked=“onMapClicked(e);”          | Con esta sentencia defeinimos eventos y acciones sobre el mapa                                                                          |

\\
\\
__Eventos para Mapas:__

  * 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);”
\\
\\
__Veáse también:__
\\
[[https://xoneisp.com/xonewiki/doku.php?id=wiki:2.-desarrollo-app:2.5.-controles-by-xone:mapas:start|Mapas by XONe]]