ELE codes page Map .pdf



Nom original: ELE_codes-page-Map.pdfAuteur: BTS1SIO

Ce document au format PDF 1.7 a été généré par Microsoft® Word 2016, et a été envoyé sur fichier-pdf.fr le 20/02/2019 à 12:28, depuis l'adresse IP 176.132.x.x. La présente page de téléchargement du fichier a été vue 139 fois.
Taille du document: 242 Ko (22 pages).
Confidentialité: fichier public


Aperçu du document


Code Android Studio Page Map
Xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<RelativeLayout
android:id="@+id/menubar"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="@color/FreeCircuitColor"
android:layout_weight="0.1"
android:gravity="center">
<ImageView
android:id="@+id/boutonHome"
android:layout_width="40dp"
android:layout_height="40dp"
android:scaleType="fitCenter"
app:srcCompat="@drawable/home"
android:contentDescription="@string/imagedescription"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
/>
<TextView
android:id="@+id/titreparcoursmap"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:gravity="center"
android:padding="15dp"
android:text="@string/pculture"
android:textAlignment="center"
android:textAllCaps="true"
android:textColor="@color/white"
android:textSize="18sp" />
</RelativeLayout>
<fragment
android:id="@+id/map"
android:name="com.google.android.gms.maps.MapFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.9"

/>
</LinearLayout>
Java
package fr.yusit.gallevisit.view;
import android.Manifest;
import android.app.PendingIntent;
import android.content.Intent;
import android.content.pm.PackageManager;
import android.content.res.AssetManager;
import android.graphics.Color;
import android.graphics.Typeface;
import android.net.Uri;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.ActivityCompat;
import android.support.v4.app.NavUtils;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import com.bumptech.glide.Glide;
import com.bumptech.glide.request.RequestOptions;
import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.MapFragment;
import com.google.android.gms.maps.MapsInitializer;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.model.BitmapDescriptorFactory;
import com.google.android.gms.maps.model.CircleOptions;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.Marker;
import com.google.android.gms.maps.model.MarkerOptions;
import com.google.android.gms.location.*;
import com.google.android.gms.tasks.OnFailureListener;
import com.google.android.gms.tasks.OnSuccessListener;
import java.util.ArrayList;
import fr.yusit.gallevisit.control.GeofenceTransitionsIntentService;
import fr.yusit.gallevisit.control.Langue;
import fr.yusit.gallevisit.control.Texte;
import fr.yusit.gallevisit.model.*;
import fr.yusit.gallevisit.model.dao.POIDAO;
import fr.yusit.gallevisit.model.dao.ParcoursDAO;
import fr.yusit.gallevisit.R;

/*
* La map et l'activite qui démarre le geofencing
*/
public class MapActivity extends AppCompatActivity implements OnMapReadyCallback,
GoogleMap.OnInfoWindowClickListener{
private ArrayList<MarkerOptions> markerParcours = new ArrayList<>();
//private ArrayList<MarkerOptions> markerWCs = new ArrayList<>();
ArrayList<POI> poiArrayList;
private ArrayList<Geofence> geofenceList;
private final static int GEOFENCE_RADIUS_IN_METERS = 25;
private PendingIntent geofencePendingIntent;
private final static String TAG = "MapActivity";
private int idparcours;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
MapsInitializer.initialize(getApplicationContext());
setContentView(R.layout.map);
final AlertDialog.Builder builder = new AlertDialog.Builder(this);
String ligne = Texte.getContenu(getAssets(),Langue.getLangue(),"infomap.txt");
builder.setMessage(ligne);
builder.show();
//recupération de l'id du parcours
idparcours = getIntent().getIntExtra("idparcours", 0);
ParcoursDAO parcoursdao = new ParcoursDAO(this);
Parcours thisparcours = parcoursdao.select(idparcours);
String nom = (thisparcours != null) ? getNameParcours(thisparcours.getId()) : "";
poiArrayList = (thisparcours != null) ? thisparcours.getPOIs() : new ArrayList<POI>();
TextView titre = (TextView) findViewById(R.id.titreparcoursmap);
titre.setText(nom);
titre.setTypeface(Typeface.createFromAsset(getAssets(), "fonts/Foglihten.otf"));
ImageView boutonHome = findViewById(R.id.boutonHome);
boutonHome.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
goHome();
}
});
//charge la map
MapFragment mapFragment = (MapFragment)
getFragmentManager().findFragmentById(R.id.map);
mapFragment.getMapAsync(this);
/*
* Geofencing
*/
GeofencingClient geofencingClient = LocationServices.getGeofencingClient(this);
geofenceList = new ArrayList<>();

for (POI point: poiArrayList){
geofenceList.add(new Geofence.Builder()
.setRequestId(""+point.getId())
.setCircularRegion(point.getCoord().latitude,point.getCoord().longitude,
GEOFENCE_RADIUS_IN_METERS)
.setExpirationDuration(Geofence.NEVER_EXPIRE)
.setTransitionTypes(Geofence.GEOFENCE_TRANSITION_ENTER)
.build()
);
}
//lancement du geofencing
if (ActivityCompat.checkSelfPermission(this, Manifest.permission.ACCESS_FINE_LOCATION) !=
PackageManager.PERMISSION_GRANTED) {
ActivityCompat.requestPermissions(this, new
String[]{Manifest.permission.ACCESS_FINE_LOCATION}, 1);
}
if (ActivityCompat.checkSelfPermission(this,
Manifest.permission.ACCESS_COARSE_LOCATION) != PackageManager.PERMISSION_GRANTED) {
ActivityCompat.requestPermissions(this, new
String[]{Manifest.permission.ACCESS_COARSE_LOCATION}, 2);
}
geofencingClient.addGeofences(getGeofencingRequest(), getGeofencingPendingIntent())
.addOnSuccessListener(this, new OnSuccessListener<Void>() {
@Override
public void onSuccess(Void aVoid) {
Log.i(TAG, "Geofonces add");
}
})
.addOnFailureListener(this, new OnFailureListener() {
@Override
public void onFailure(@NonNull Exception e) {
e.printStackTrace();
Log.e(TAG, "Failure in Geofences Add: "+e.getMessage());
}
});
}
/*
* Configuration de la googlemap
*/
@Override
public void onMapReady(GoogleMap map) {
map.clear();
//zoom
map.setMinZoomPreference(16);
map.moveCamera(CameraUpdateFactory.newLatLng(new LatLng(6.0279102,80.2170132)));
//Ajout mylocation
if (ActivityCompat.checkSelfPermission(this, Manifest.permission.ACCESS_FINE_LOCATION) !=
PackageManager.PERMISSION_GRANTED) {
ActivityCompat.requestPermissions(this, new
String[]{Manifest.permission.ACCESS_FINE_LOCATION}, 1);

}
if (ActivityCompat.checkSelfPermission(this,
Manifest.permission.ACCESS_COARSE_LOCATION) != PackageManager.PERMISSION_GRANTED) {
ActivityCompat.requestPermissions(this, new
String[]{Manifest.permission.ACCESS_COARSE_LOCATION}, 2);
}
map.setMyLocationEnabled(true);
//map hybride
map.setMapType(GoogleMap.MAP_TYPE_HYBRID);
//On prépare les markers parcours
for (POI point : poiArrayList) {
MarkerOptions markerOptions = new MarkerOptions();
markerOptions.position(point.getCoord());
if (point.isAvecVue()) {
markerOptions.icon(BitmapDescriptorFactory.fromResource(R.drawable.marqueurcarteoeil));
}
else {
markerOptions.icon(BitmapDescriptorFactory.fromResource(R.drawable.marqueurcartesimple));
}
markerParcours.add(markerOptions);
}
/* //ajout des markers wc
if (!markerWCs.isEmpty()) {
for (MarkerOptions markerOptions : markerWCs) {
map.addMarker(markerOptions);
}
}*/
//ajout des markers du parcours
if (!markerParcours.isEmpty()) {
for (MarkerOptions markerOptions : markerParcours) {
map.addMarker(markerOptions);
}
}
//configuration des infosWindows
map.setInfoWindowAdapter(new GoogleMap.InfoWindowAdapter() {
@Override
public View getInfoWindow(Marker marker) {
return null;
}
@Override
public View getInfoContents(Marker marker) {
AssetManager am = getAssets();
String langue = Langue.getLangue();
POI point = new POIDAO(getBaseContext()).select(marker.getPosition());
View view = getLayoutInflater().inflate(R.layout.custominfowindow, null);
ImageView imageView = (ImageView) view.findViewById(R.id.infowindowimage);
TextView textView = (TextView) view.findViewById(R.id.infowindowtitle);
if (point != null) {

//Glide.with(imageView).load(Uri.parse("file:///android_asset/images/"+ point.getId()
+ "/mini.jpg")).into(imageView);
imageView.setImageBitmap(Image.getImageBmp(am, point.getId() + "/mini.jpg"));
textView.setText(point.getNom(langue));
return view;
} else return null;
}
});
//Listener des infos windows des markers
map.setOnInfoWindowClickListener(this);
//dessine les geofences sur la map
for (CircleOptions circle: drawGeofences()) {
map.addCircle(circle);
}*/

/*

}
/* @Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
if (hasFocus) {
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_FULLSCREEN
| View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);
}
}*/
/*
* Ce que fait l'infoWindow des markers
*/
@Override
public void onInfoWindowClick(Marker marker) {
POI point = new POIDAO(this).select(marker.getPosition());
Intent intent = new Intent(this, APOIActivity.class);
if (point!=null) {
intent.putExtra("idpoint", point.getId());
intent.putExtra("idparcours", idparcours);
}
startActivity(intent);
}
/*
* Bouton Back appuyer
*/
@Override
public void onBackPressed() {
super.onBackPressed();
Intent intent = getParentActivityIntent();

if (intent != null) {
intent.putExtra("idparcours", idparcours);
NavUtils.navigateUpTo(this,intent);
}
}
private void goHome(){
Intent intent = new Intent(this,SommaireActivity.class);
startActivity(intent);
}
/*
* Gerer les requetes de geofencing
*/
private GeofencingRequest getGeofencingRequest(){
GeofencingRequest.Builder builder = new GeofencingRequest.Builder();
builder.setInitialTrigger(GeofencingRequest.INITIAL_TRIGGER_ENTER);
builder.addGeofences(geofenceList);
return builder.build();
}
/*
* Récupération du PendingIntent Service (pour continuer à geofence hors de l'app)
*/
private PendingIntent getGeofencingPendingIntent(){
if (geofencePendingIntent != null){
return geofencePendingIntent;
}
Intent intent = new Intent(this, GeofenceTransitionsIntentService.class);
intent.putExtra("idparcours",idparcours);
geofencePendingIntent = PendingIntent.getService(this, 0, intent,
PendingIntent.FLAG_UPDATE_CURRENT);
return geofencePendingIntent;
}
/*
* Calcule des dessins de cercles des geofences
*/
private ArrayList<CircleOptions> drawGeofences() {
ArrayList<CircleOptions> circleOptionsArrayList = new ArrayList<>();
if (markerParcours != null) {
for (MarkerOptions m : markerParcours) {
CircleOptions circleOptions = new CircleOptions()
.center(m.getPosition())
.strokeColor(Color.BLACK)
.fillColor(Color.argb(100, 150, 150, 150))
.radius(GEOFENCE_RADIUS_IN_METERS);
circleOptionsArrayList.add(circleOptions);
}
}
return circleOptionsArrayList;
}
private String getNameParcours(int id){
switch (id){

case 1:
return getString(R.string.plibre);
case 2:
return getString(R.string.pflane);
case 3:
return getString(R.string.pculture);
default:
return "no name";
}
}
}
Equivalent Ionic
TypeScript
import { Component, OnInit, Input } from '@angular/core';
import { NavController, NavParams, Platform, ViewController } from 'ionic-angular';
import { SommairePage } from '../sommaire/sommaire';
//// Models des Services
import { ParcoursBdd } from './../../models/bdd/parcours.bdd.model';
import { PointsBdd } from './../../models/bdd/points.bdd.model';
// import { NomPointsBdd } from './../../models/bdd/nom.points.bdd.model'; // supprimé

//// Services
import { ParcoursBddServices } from './../../services/bdd/parcours.bdd.services';
import { PointsBddServices } from './../../services/bdd/points.bdd.services';
// import { NomPointsBddServices } from './../../services/bdd/nom.points.bd.services'; // supprimé
//// Page(s) Fille(s) (ça dépend de la compatibilité avec les liens)
// import { InfoPoiMapPage } from './../info-poi-map/info-poi-map'; // Page renvoyant à la
description des POI
import { SunBastionPage } from '../Description-Map/simple/sun-bastion/sun-bastion';
import { BlackFortPage } from './../Description-Map/double/black-fort/black-fort';
import { AnglicanChurchPage } from './../Description-Map/double/anglican-church/anglicanchurch';
import { BuddhistTempleSriPage } from './../Description-Map/double/buddhist-templesri/buddhist-temple-sri';
import { MeeranJummaMosquePage } from '../Description-Map/double/meeran-jummamosque/meeran-jumma-mosque';
import { MethodistChurchPage } from './../Description-Map/double/methodist-church/methodistchurch';
import { NationalMuseumPage } from './../Description-Map/double/national-museum/nationalmuseum';
import { OldBellTowerPage } from './../Description-Map/double/old-bell-tower/old-bell-tower';
import { OldDutchWarehousePage } from './../Description-Map/double/old-dutch-warehouse/olddutch-warehouse';
import { PointUtrechtBastionPage } from './../Description-Map/double/point-utrechtbastion/point-utrecht-bastion';

import { FlagrockBastionPage } from './../Description-Map/double/flagrock-bastion/flagrockbastion';
import { StarBastionPage } from '../Description-Map/simple/03-star-bastion/star-bastion';
import { TritonBastionPage } from '../Description-Map/simple/08-triton-bastion/triton-bastion';
import { AncientCemeteryPage } from '../Description-Map/simple/17-ancient-cemetery/ancientcemetery';
import { GalleFortOldEntrancePage } from '../Description-Map/simple/12-galle-fort-oldentrance/galle-fort-old-entrance';
import { NeptuneBastionPage } from './../Description-Map/simple/09-neptune-bastion/neptunebastion';
import { AuroraBastionPage } from './../Description-Map/simple/06-aurora-bastion/aurorabastion';
import { AkerslootBastionPage } from './../Description-Map/simple/05-akerslootbastion/akersloot-bastion';
import { MoonBastionPage } from './../Description-Map/simple/02-moon-bastion/moon-bastion';
/////// google map geofence ce qui permet à leurs fonctionnement
import { Geofence } from '@ionic-native/geofence/ngx';
import { Geolocation } from '@ionic-native/geolocation/ngx';
import { MapsAPILoader } from '@agm/core';
import { HttpClient } from '@angular/common/http';
//// Déclaration bibliothèque UUID et de ce qui permet d'obtenir des nombre aléatoire avec très
faible probabilité d'obtenir le même
import { V4 } from 'uuid';
// import { google } from '@agm/core/services/google-maps-types';
declare const google;
@Component({
selector: 'page-map-parcours',
templateUrl: 'map-parcours.html',
})
export class MapParcoursPage implements OnInit {
// déclarations des objets concernant les ngSwitchCase
langue: string;
langueLien: string;
codeTitre: string;
// déclarations des objets renvoyants les models
parcours: ParcoursBdd;
// déclaration des indexs
indexParc: number; // Pour choisir l'objet cible du Parcours
indexImg: number; // Pour choisir l'objet cible de l'image
indexPoint: number; // Pour choisir l'objet cible du point
//// Objets map positionnement default
// coordonnées par défaults
longitudeDefault: number;
latitudeDefault: number;

// coordonées de l'utilisateur
longitideUtilis: number;
latitudeUtilis: number;
// déclarations des listes d'objets renvoyants les models
pointsList: PointsBdd[];
testPointSunBastion: PointsBdd;
constructor(public navCtrl: NavController,
public navParams: NavParams,
public viewCtrl: ViewController,
public platform: Platform,
public parcoursBddServices: ParcoursBddServices, // Service contenant la Bdd concernants
les parcours
public pointsBddServices: PointsBddServices, // Service contenant la Bdd concernants les
points
private geofence: Geofence,
private geolocation: Geolocation,
private loader: MapsAPILoader,
private http: HttpClient,
){
// Initialisation du plugin avec détection de cordova
/*
if (this.platform.is('cordova')) {
this.platform.ready().then((_) => {
geofence.initialize().then((_) => {
console.log('le Plugin geofence est Prêt');
},
(err) => {
console.log('Initialisation : ', err);
});
})
}*/
}
@Input()
centre = {// création d'un model pour les coordonées
lat: this.latitudeDefault = 6.02725, // Un point environ au millieu du fort de Galle
lng: this.longitudeDefault = 80.217101 /* this.longitideUtilis */ ,
}
@Input()
raduisCenter = {
lat: this.longitudeDefault /* 6.02725 */, // Un point environ au millieu du fort de Galle
lng: this.longitudeDefault /* 80.217101 */,
}
//// Test effectué via doc Ionic \\\\
/// https://ionicframework.com/docs/native/geofence/
https://pusher.com/tutorials/geofencing-ionic \\\
private creerGeofenceTestPatate(saLatitude: number, saLongitude: number, sonTitre: string) {
// Option dérivant un géofence
let fence = {
id: V4(), // un identifiant unique

latitude: saLatitude,/* this.pointsBddServices.pointsBdd[0].latitude, */ // ici le centre du rayon
de geofence (latitude)
longitude: saLongitude,/* this.pointsBddServices.pointsBdd[0].longitude, */ // ici le centre du
rayon de geofence (longitude)
radius: 25, // rayon d'action du geofence en mètres ici 25 mètres (selon le code source
d'origine)
transitionType: 1, // valeur permettant de dire quand doit se déclencher le geofence (1: quand
on rentre ; 2: quand on sort, 3: les 2)
notification: { // réglages paramétrants les notifications
id: V4(), // ici l'id de la notification qui doit être unique
title: 'vous êtes prêt d\'un lieux', // Titre de la notification
text: sonTitre, // text de la notification
openAppOnClick: true // ouvrir l'application quand l'on a cliqué sur la notification
}
};
this.geofence.addOrUpdate(fence).then(
() => console.log('Le Geofence a été ajouté'),
(err) => console.log('l\'ajout du Geofence a râté')
);
this.geofence.onTransitionReceived().subscribe((res) => {
this.notification(this.centre);
});
}
/*
private creerGeofencePersonne(saLatitude: number, saLongitude: number) {
// Option dérivant un géofence
let fence = {
id: V4(), // un identifiant unique
latitude: saLatitude, // ici le centre du rayon de geofence (latitude)
longitude: saLongitude, // ici le centre du rayon de geofence (longitude)
radius: 5, // rayon d'action du geofence en mètres ici 5 mètres
color: '#488aff',
};
this.geofence.addOrUpdate(fence).then(
() => console.log('Le Geofence "personne" a été ajouté'),
(err) => console.log('l\'ajout du Geofence "personne" a râté')
);
}
*/
// Pour le titre, la langue & les Services
ngOnInit() {
/// instanciation des valeurs par défaults
this.latitudeDefault = 6.02725; // Un point environ au millieu du fort de Galle
this.longitudeDefault = 80.217101;

this.langue = this.platform.lang(); // obtenir la langue
this.codeTitre = this.navParams.get('codeTitreRecu'); // obtenir le code du Titre

console.log(this.codeTitre);
// Chargement de la position
this.voirPosition();
// Les Parcours
this.indexParc = this.navParams.get('indexParc');
this.parcours = this.parcoursBddServices.parcoursBdd[this.indexParc]; /* Rappel l'index
correspond à (id - 1) (dans le cas où les id sont dans l'ordre croissant) */
////////////////////////////////\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
this.testPointSunBastion = this.pointsBddServices.pointsBdd[0];
////////////////////////////////\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

this.pointsList = this.pointsBddServices.pointsBdd;
this.langueLien = this.langueLienMethod(); // enregistrement de la variable langue
// Pendant le load
this.loader.load().then(() => {
//this.reverseGeocode(this.centre);
this.pingLocation(this.centre);
});
// quand Cordova sera prêt
this.platform.ready().then(() => {
// implémentation des géofences
if (this.platform.is('cordova')) {
for (var listPoiInGeofence in this.pointsList) {
if (this.parcours.points.indexOf(this.pointsList[listPoiInGeofence].id)) {
this.creerGeofenceTestPatate(this.pointsList[listPoiInGeofence].latitude,
this.pointsList[listPoiInGeofence].longitude, this.pointsBddServices.pointsBdd[0].nom.fr);
}
}
this.creerGeofenceTestPatate(49.428478, 1.064872, 'collège fernand léger');
}
// création de ce qui peut permettre à voir notre position
const regarder = this.geolocation.watchPosition();
regarder.subscribe((position) => {
const positionEmpty = Object.keys(position).length < 1;
if (!positionEmpty) {
this.centre = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
// this.reverseGeocode(this.centre);
this.pingLocation(this.centre);
}
});
});
// this.centre.lat = 49.443232;
// this.centre.lng = 1.099971; // rouen hôtel de ville

// this.genererMarkerUtilisateur();
}
// fonction test
reverseGeocode(LatLng) {
const geocoder = new google.maps.Geocoder();
geocoder.geocode({ location: LatLng }, (results, status) => {
if (status === 'OK') {
if (results[0]) {
/// à voir selon notre contexte
}
}
});
}
// fonction test
pingLocation(location) {
this.http.post('http://localhost:4000/ping', location)
.subscribe((res) => {});
}
// fonction test
notification(location) {
this.http.post('http://localhost:4000/notify', location)
.subscribe((res) => {});
}
// fonction servant à obtenir la position (latitude + longitude) à laquelle l'utilisateur se trouve
obtenirPosition() {
this.geolocation.getCurrentPosition().then((resp) => {
this.latitudeDefault = resp.coords.latitude,
this.longitudeDefault = resp.coords.longitude
}).catch((error) => {
console.log('Erreur d\'obtenrion de localisation', error);
});
}

// fonction servant à obtenir la position (latitude + longitude) à laquelle l'utilisateur se trouve
genererMarkerUtilisateur() {
this.geolocation.getCurrentPosition().then((resp) => {
this.latitudeUtilis = resp.coords.latitude;
this.longitideUtilis = resp.coords.longitude;
}).catch((error) => {
console.log('Erreur d\'obtention de localisation', error);
});
}

voirPosition() {
let watch = this.geolocation.watchPosition();
watch.subscribe((donnee) => {

this.latitudeUtilis = donnee.coords.latitude,
this.longitideUtilis = donnee.coords.longitude
});
}
dismissModal() {
this.viewCtrl.dismiss();
}
// retourner au sommaire
onGoToSommaire(titre: string, codeTitre: string, indexPoint: number){
this.navCtrl.push(SommairePage, {titreRecu: titre, codeTitreRecu: codeTitre, indexPoint:
indexPoint});
}
// enregistre le code de la langue selon la langue de l'appareil
langueLienMethod() : string {
if(this.langue === 'fr'){
return 'fr';
} else if (this.langue === 'si'){
return 'si';
} else {
return 'en';
}
}
goToThisDescription(id: number, codeTitre: string) {
var index = (id - 1); // calcul de l'index (Attention c'est valable que si la Bdd est triée en
commençant par un id égal à 1 est exclusivement croissante et ne possède pas de trous entre 1 et
X)
if (id === 1) {
this.navCtrl.push(SunBastionPage, {indexPoint: index, codeTitreRecu: codeTitre});
} else if (id === 2) {
this.navCtrl.push(MoonBastionPage, {indexPoint: index, codeTitreRecu: codeTitre});
} else if (id === 3) {
this.navCtrl.push(StarBastionPage, {indexPoint: index, codeTitreRecu: codeTitre});
} else if (id === 4) {
this.navCtrl.push(BlackFortPage, {indexPoint: index, codeTitreRecu: codeTitre});
} else if (id === 5) {
this.navCtrl.push(AkerslootBastionPage, {indexPoint: index, codeTitreRecu: codeTitre});
} else if (id === 6) {
this.navCtrl.push(AuroraBastionPage, {indexPoint: index, codeTitreRecu: codeTitre});
} else if (id === 7) {
this.navCtrl.push(PointUtrechtBastionPage, {indexPoint: index, codeTitreRecu: codeTitre});
} else if (id === 8) {
this.navCtrl.push(TritonBastionPage, {indexPoint: index, codeTitreRecu: codeTitre});
} else if (id === 9) {
this.navCtrl.push(NeptuneBastionPage, {indexPoint: index, codeTitreRecu: codeTitre});
} else if (id === 10) {
this.navCtrl.push(FlagrockBastionPage, {indexPoint: index, codeTitreRecu: codeTitre});
} else if (id === 11) {
this.navCtrl.push(MeeranJummaMosquePage, {indexPoint: index, codeTitreRecu: codeTitre});

} else if (id === 12) {
this.navCtrl.push(GalleFortOldEntrancePage, {indexPoint: index, codeTitreRecu: codeTitre});
} else if (id === 13) {
this.navCtrl.push(OldDutchWarehousePage, {indexPoint: index, codeTitreRecu: codeTitre});
} else if (id === 14) {
this.navCtrl.push(OldBellTowerPage, {indexPoint: index, codeTitreRecu: codeTitre});
} else if (id === 15) {
this.navCtrl.push(AnglicanChurchPage, {indexPoint: index, codeTitreRecu: codeTitre});
} else if (id === 16) {
this.navCtrl.push(NationalMuseumPage, {indexPoint: index, codeTitreRecu: codeTitre});
} else if (id === 17) {
this.navCtrl.push(AncientCemeteryPage, {indexPoint: index, codeTitreRecu: codeTitre});
} else if (id === 18) {
this.navCtrl.push(BuddhistTempleSriPage, {indexPoint: index, codeTitreRecu: codeTitre});
} else {
this.navCtrl.push(MethodistChurchPage, {indexPoint: index, codeTitreRecu: codeTitre});
}
}
/// Fonction(s)-Méthode(s) test
testLangue() {
console.log(this.langue);
}
}
Html
<ion-header class="{{ codeTitre }}">
<ion-grid class="{{ codeTitre }}">
<ion-row class="rowStyle">
<ion-col class="colmaison">
<ion-icon name="home" class="maisoncolor" (click)="dismissModal() ;
onGoToSommaire()"></ion-icon>
</ion-col>
<ion-col class="colTitre">
<label class="textStyle2">
<div [ngSwitch]="codeTitre">
<div *ngSwitchCase="'p-cult'">
<div [ngSwitch]="langue">
<div *ngSwitchCase="'fr'">
<p>Parcours culturel</p>
</div>
<div *ngSwitchCase="'si'">
<p>සංස්කෘතික සංචාරය</p>
</div>
<div *ngSwitchDefault>
<p>Cultural Walk</p>
</div>

</div>
</div>
<div *ngSwitchCase="'p-deco'">
<div [ngSwitch]="langue">
<div *ngSwitchCase="'fr'">
<p>PARCOURS DÉCOUVERTE</p>
</div>
<div *ngSwitchCase="'si'">
<p>ගවේශනාත්මක සංචාරය</p>
</div>
<div *ngSwitchDefault>
<p>Leisure Walk</p>
</div>
</div>
</div>
<div *ngSwitchCase="'p-free'">
<div [ngSwitch]="langue">
<div *ngSwitchCase="'fr'">
<p>Parcours libre</p>
</div>
<div *ngSwitchCase="'si'">
<p>නිදහස් සංචාරය</p>
</div>
<div *ngSwitchDefault>
<p>Free Circuit</p>
</div>
</div>
</div>
</div>
</label>
</ion-col>
<ion-col class="colPosition">
<ion-icon (click)="obtenirPosition()" class="position" name="arrow-dropup-circle"></ionicon>
</ion-col>
</ion-row>
</ion-grid>

</ion-header>

<ion-content padding>
<div>
<agm-map [zoom]="17"
[minZoom]="15.75"
[maxZoom]="19"
[mapTypeId]="'hybrid'"
[clickableIcons]='true'
[zoomControl]='false'
[streetViewControl]='false'
[latitude]= 'centre.lat'
[longitude]= 'centre.lng'
> <!-[minZoom]="15.75" -->
<agm-circle [latitude]="raduisCenter.lat" [longitude]="raduisCenter.lng" [radius]="5"
[fillColor]="'#ADBC1B9'">
<!-- le raduis sera surement modifier -->
</agm-circle>
<li *ngFor='let point of pointsList; let i = index'>
<div *ngIf='parcours.points.indexOf(point.id) > -1'>
<div *ngIf='point.vue === true; else faux'>
<agm-marker
[latitude]='point.latitude'
[longitude]='point.longitude'
[iconUrl]="'assets/imgs-fixe/marqueurcarteoeil.png'"
class="iconPOI"
> <!-- Intégrer // [clickable]="onGoToDescriptionLieux()" \\ lorsque la page Map sera
oppérationnelle ou que j'aurais commencé à faire la page description des lieux -->
<agm-info-window
class="reg-agm-info"
#infoWindow>
<ion-grid>
<ion-row>
<ion-col class="colImgInfo">
<img src="assets/imgs-mobile/{{ point.id }}/mini.jpg" class="ImgInfo">
</ion-col>
<ion-col class="reg-col-stong-small">
<strong class="reg-strong">
<div [ngSwitch]="langue">
<div *ngSwitchCase="'fr'">
{{ point.nom.fr }}
</div>
<div *ngSwitchCase="'si'">
{{ point.nom.si }}

</div>
<div *ngSwitchDefault>
{{ point.nom.en }}
</div>
</div>
</strong>
<button (click)="goToThisDescription(this.point.id, this.codeTitre)" class="reg-strong">
<div [ngSwitch]="langue">
<div *ngSwitchCase="'fr'">
Cliquez pour en savoir plus
</div>
<div *ngSwitchCase="'si'">
වැඩිදුර විස්තර දැන ගැනීමට තට්ටු කරන්න
</div>
<div *ngSwitchDefault>
Click to learn more
</div>
</div>
</button>
</ion-col>
</ion-row>
</ion-grid>
</agm-info-window>
</agm-marker>
</div>
<ng-template #faux>
<agm-marker
[latitude]='point.latitude'
[longitude]='point.longitude'
[markerDraggable]=false
[iconUrl]="'assets/imgs-fixe/marqueurcartesimple.png'"
class="iconNormal">
<agm-info-window
[disableAutoPan]="true"
class="reg-agm-info"
>
<ion-grid>
<ion-row>
<ion-col class="colImgInfo">
<img src="assets/imgs-mobile/{{ point.id }}/mini.jpg" class="ImgInfo">
</ion-col>
<ion-col class="reg-col-stong-small">
<strong class="reg-strong">
<div [ngSwitch]="langue">

<div *ngSwitchCase="'fr'">
{{ point.nom.fr }}
</div>
<div *ngSwitchCase="'si'">
{{ point.nom.si }}
</div>
<div *ngSwitchDefault>
{{ point.nom.en }}
</div>
</div>
</strong>
<button (click)="goToThisDescription(point.id, this.codeTitre)" class="reg-strong">
<div [ngSwitch]="langue">
<div *ngSwitchCase="'fr'">
Cliquez pour en savoir plus
</div>
<div *ngSwitchCase="'si'">
වැඩිදුර විස්තර දැන ගැනීමට තට්ටු කරන්න
</div>
<div *ngSwitchDefault>
Click to learn more
</div>
</div>
</button>
</ion-col>
</ion-row>
</ion-grid>
</agm-info-window>
</agm-marker>
<agm-marker
[latitude]='49.428478'
[longitude]='1.064872'
[iconUrl]="'assets/imgs-fixe/marqueurcarteoeil.png'"
class="iconPOI"
>
<agm-info-window class="reg-agm-info"
#infoWindow >
<ion-grid>
<ion-row>
<ion-col>
<strong class="reg-strong">Test Collège</strong>
</ion-col>
</ion-row>
</ion-grid>

</agm-info-window>
</agm-marker>
</ng-template>
</div>
</li>
</agm-map>
</div>
</ion-content>
Scss
page-map-parcours {
ion-header {
height: 10vh;
}
/*
agm-map { //test ///obligatoire pour voir la map\\\
height: 440px;
}*/
.p-free{
background-color: color($colors, FreeCircuitColor);
}
.p-deco {
background-color: color($colors, DecouverteCircuitColor);
}
.p-cult {
background-color: color($colors, CulturelParcoursColor);
}
.WebViewConf{
width: 100%;
height: 50%;
border: 2px solid #ffffff;
padding: 1rem;
}
.ImageConf{
width: 100%;
height: 100%;
}
.gridMax{
grid: 100% ;
grid-row: auto;
}
.gridRow{
-ms-grid-row-align: stretch;
}
.no-padding {
padding: 0% !important;
}

.color {
background-color: color($colors, greenBritish)
}
.maisoncolor {
font-size: xx-large;
color: color($colors, black);
width: 15vh;
}
.textStyle1 {
// font-weight: bold;
color: color($colors, white);
text-align: center;
font-family: 'LinLibertine';
text-transform: uppercase;
}
.textStyle2 {
// font-weight: bold;
color: color($colors, white);
text-align: center;
font-family: 'Foglihten';
text-transform: uppercase;
font-weight: 900;
}
.colmaison{
width: 10vw;
}
.colTitre{
width: 80vw;
}
.colPosition {
width: 10vw;
}
.rowStyle {
width: 100%;
height: 100%;
}
.colTxtInfo {
width: 80%;
}
.iconNormal {
width: 5px;
height: 10px;
}
.iconPOI {
width: 5px;

height: 9px;
}
agm-map {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
height: 90vh;
}

.colImgInfo {
width: 10vh;
}
.ImgInfo {
width: 10vh;
}
.reg-strong {
font-size: small;
text-align: center;
}
.reg-small {
font-size: small;
text-align: center;
}
.reg-col-strong-small {
width: 100vh;
}
.reg-agm-info {
width: 75vh;
}
.position {
align-items: flex-start;
}
}


ELE_codes-page-Map.pdf - page 1/22
 
ELE_codes-page-Map.pdf - page 2/22
ELE_codes-page-Map.pdf - page 3/22
ELE_codes-page-Map.pdf - page 4/22
ELE_codes-page-Map.pdf - page 5/22
ELE_codes-page-Map.pdf - page 6/22
 




Télécharger le fichier (PDF)


ELE_codes-page-Map.pdf (PDF, 242 Ko)

Télécharger
Formats alternatifs: ZIP



Documents similaires


elecodes page map
elecodes page informations
elecodes page preparer
elecodes page visiter
eleextrait classe json java html xml codesource android
mainactivity

Sur le même sujet..