Maps By Google and Apple (Cartes de Google et Apple)

Vue d'ensemble

• Choisissez votre fournisseur

• Zoomer et centrer la carte

• Styler la carte

  • Modifier la taille de la carte

  • Ajouter un espace

  • Ajouter un marqueur

  • Ajouter une polyligne

  • Ajouter un polygone

  • Supprimer les marqueurs

• Carte des événements

  • Sur la carte

  • Sur le changement de localisation de l'utilisateur

  • Appui sur la carte

  • Appui long sur la carte

  • Appui sur marker

Choisissez votre fournisseur

Pour iOS, vous avez la possibilité de choisir entre Apple Maps ou Google Maps. Sur Android, seul Google Maps est disponible. Google Maps offre davantage d'options de style personnalisé, allant de différents types de cartes à la coloration et à l'exposition ou la dissimulation de caractéristiques cartographiques.

Propriété	Description
Provider Advanced	Par défaut (google) ; Pour sélectionner Apple Maps pour iOS, laissez la propriété blank

Google Maps : Ajouter une clé API

Il est possible d'ajouter votre propre clé API Google Maps à votre projet d'application Thunkable.

Il vous suffit de cliquer sur le nom de votre projet pour ouvrir le menu Paramètres du projet, et de faire défiler la section Paramètres de Google Map vers le bas. Vous verrez l'option permettant d'entrer une clé API Google Maps pour Android et iOS.

Vous pouvez obtenir votre propre clé API Google Maps ici.

Zoomer et centrer la carte

Pour centrer automatiquement votre carte, vous pouvez coupler le composant Carte avec un capteur de localisation

Propriété	Description
Latitude	Par défaut (37.78) ; degrés au nord ou au sud de l'équateur, de -90 à 90. Les emplacements au nord de l'équateur sont positifs et ceux au sud sont négatifs. La latitude à l'équateur est de 0°.
Longitude	Défaut (-122.4) ; Degrés à l'est ou à l'ouest du méridien origine, de -180 à 180. Les emplacements à l'ouest du premier méridien sont négatifs et ceux à l'est sont positifs. La longitude au premier méridien est de 0°.
Zoom	Par défaut (0) ; la plage est de -15 à 10 où -15 est le plus grand zoom arrière
ShowUserLocation	Par défaut (true) ; si true, indique l'emplacement de l'utilisateur sous la forme d'un point bleu clignotant
ShowMyLocationButton (Google Maps uniquement)	Par défaut (true) ; Dans true, affiche le bouton "my location" qui se centre automatiquement sur la carte de l'emplacement de l'utilisateur

Styler la carte

Pour donner à la carte le style de l'image ci-dessus, réglez le fournisseur sur Google, affichez le trafic sur true, le type de carte sur standard et la chaîne de style de carte personnalisée sur :

[ {"elementType" : "géométrie", "styleurs" : [ { "color" : "#f5f5f5" } } } }, { "elementType" : "geometry.fill", "stylers" : [ { "color" : "#ffffff" } ] }, { "elementType" : "labels.icon", "stylers" : [ { "visibility" : "off" } ] } }, { "elementType" : "labels.text.fill", "stylers" : [ { "color" : "#000000" } ] }, { "featureType" : "administrative.land_parcel", "elementType" : "labels.text.fill", "stylers" : [ { "color" : "#bdbdbd" } ] }, { "featureType" : "poi", "elementType" : "geometry", "stylers" : [ { "color" : "#eeeeee" } } } }, { "featureType" : "poi", "elementType" : "labels.text.fill", "stylers" : [ { "color" : "#757575" } ] }, { "featureType" : "poi.park", "elementType" : "geometry", "stylers" : [ { "color" : "#e5e5e5" } ] }, { "featureType" : "poi.park", "elementType" : "labels.text.fill", "stylers" : [ { "color" : "#9e9e9e" } ] }, { "featureType" : "road", "elementType" : "geometry", "stylers" : [ {"color" : "#ffffff" } ] } }, {"featureType" : "road", "elementType" : "geometry.fill", "stylers" : [ { "color" : "#d8d8d8" } ] }, { "featureType" : "road.arterial", "elementType" : "labels.text.fill", "stylers" : [ { "color" : "#757575" } ] }, { "featureType" : "road.highway", "elementType" : "geometry", "stylers" : [ {"color" : "#dadada" } ] } }, {"featureType" : "road.highway", "elementType" : "labels.text.fill", "stylers" : [ { "color" : "#616161" } ] }, { "featureType" : "road.local", "elementType" : "labels.text.fill", "stylers" : [ { "color" : "#9e9e9e" } ] }, { "featureType" : "transit.line", "elementType" : "geometry", "stylers" : [ { "color" : "#e5e5e5" } ] }, { "featureType" : "transit.station", "elementType" : "geometry", "stylers" : [ { "color" : "#eeeeee" } ] }, { "featureType" : "water", "elementType" : "geometry", "stylers" : [ { "color" : "#e4e4e4" } ] }, { "featureType" : "water", "elementType" : "geometry.fill", "stylers" : [ { "color" : "#f3f3f3" } ] }, { "featureType" : "water", "elementType" : "labels.text.fill", "stylers" : [ { "color" : "#9e9e9e" } ] } } ]

Un certain nombre de propriétés Advanced sont disponibles pour vous aider à ajouter un style personnalisé à votre carte. Voici les plus populaires.

Propriété	Description
MapType Advanced	Par défaut (standard) ; le standard est le style de carte classique ;satellite n'affiche que l'imagerie satellite ; hybrid montre les routes et les caractéristiques superposées sur l'imagerie satellite ; terrain montre le terrain physique superposé sur une carte classique (Google Maps uniquement)
Custom Map Style String (Google Maps uniquement) Advanced	Accepte une chaîne JSON importée de l'assistant de style de l'API Google Maps. Le type de carte doit être défini comme standard et le "provider" doit être défini comme google.
ShowTraffic Advanced	Par défaut (false) ; si true, affiche la superposition du trafic en temps réel sur la carte

Modifier la taille de la carte

Plus d'informations sur le dimensionnement de votre application

Propriété	Description
Height(Hauteur)	Par défaut (Fill Container) ; quatre options : 1)Fit contents auto-ajustement à la taille du contenu ou 2) Fill containerauto-ajustement au conteneur 3) Relative Size en pourcentage de l'écran, 4) Absolute Size en pixels
Width (Largeur)	Par défaut (Ajuster le conteneur) ; quatre options : 1) Ajuster le contenu qui s'adapte automatiquement à la taille du contenu ou 2) Remplir le conteneur qui s'adapte automatiquement à la taille du conteneur 3) Taille relative en pourcentage de l'écran, 4) Taille absolue en pixels

Ajouter un espace

Pour plus d'informations sur l'ajout d'espacement dans votre application, veuillez consulter notre introduction ici

Pour trouver les propriétés d'espacement, vous devez sélectionner l'onglet Advanced

Propriété	Description
Margin Advanced	Par défaut (none) ; la marge est l'espace à l'extérieur de la bordure d'un composant ; Vous pouvez définir un espace en haut, en bas, à droite ou à gauche du composant dans les deux pixels ou en pourcentage de l'écran
Padding advanced	Par défaut (none) ; le remplissage est l'espace entre le contenu et la bordure d'un élément ; Vous pouvez définir l'espace en haut, en bas, à droite ou à gauche de l'élément en pixels ou en pourcentage de l'écran

Ajouter un marqueur

Les options de style pour les marqueurs sont actuellement limitées. Nous travaillons à ajouter la possibilité de changer les couleurs ainsi que d'ajouter des icônes personnalisées.

Le marqueur cartographique par défaut est rouge sur Google et Apple Maps

Vous pouvez ajouter un marqueur standard par défaut à votre carte avec les blocs ci-dessous. Le composant Carte ne fournit pas encore ses propres latitude et longitude, nous recommandons donc actuellement d'utiliser le composant Capteur de localisation

Ajouter une polyligne

Voici la carte satellite disponible sur Google Maps sur Android et iOS

Pour ajouter une polyligne, vous pouvez utiliser les blocs ci-dessous où les coordinates doivent figurer dans une liste d'objets la latitude et la longitude, le stroke Width est un nombre entier et le stroke Color est au format hexadécimal

Ajouter un polygone

Voici la carte satellite disponible sur Apple Maps, disponible pour iOS

Pour ajouter un polygone, vous pouvez utiliser les blocs ci-dessous où les coordonnées doivent figurer dans une liste d'objets la latitude et la longitude, le stroke Width est un entier, le stroke Color est au format hexadécimal et le fill Color est au format hexadécimal.

Supprimer les marqueurs, les polylignes et les polygones

Vous pouvez utiliser le bloc deleteAllMarkers pour supprimer tous les marqueurs de votre application.

Vous pouvez utiliser le bloc deleteAllPolylines pour supprimer toutes les polylignes de votre application.

Vous pouvez utiliser le bloc deleteAllPolygons pour supprimer tous les polygones de votre application.

Carte des événements

La carte présente plusieurs événements. Vous pouvez déclencher des actions lorsque ces événements se produisent.

Sur la carte

Cet événement se produit lorsque la carte a été chargée dans votre application. C'est un bon moment pour ajouter à votre application les marqueurs, polylignes ou polygones que vous souhaitez que l'utilisateur voit dès l'ouverture de votre application.

Exemple d'utilisation du bloc On Map Ready

Sur le changement de localisation de l'utilisateur

Cet événement se produit lorsque l'utilisateur change de lieu. Il renvoie l'objet de coordonnées. Vous pouvez utiliser des blocs d'objets pour obtenir les propriétés de l'objet de coordonnées.

L'objet de coordonnées a les propriétés suivantes :

target: ID numérique de l'application coordinate:{ latitude: latitude du point sélectionné longitude: longitude du point sélectionné } position:{ x: x-position du point sélectionné sur le composant Map on the Map component y: y-position du point sélectionné sur le composant Map }

Exemple d'utilisation du bloc de changement de localisation de l'utilisateur

Appuyer sur la carte

Cet événement se produit lorsque l'utilisateur tape sur la carte.

Nom de la sortie	Valeur de sortie
Latitude	Latitude du poste choisi
Longitude	Longitude de la position sélectionnée
position X	X Coordonnée de la position sélectionnée sur la carte
position Y	Y Coordonnée de la position sélectionnée sur la carte

Appuie long

Cet événement se produit lorsque l'utilisateur appuie sur la carte pendant une longue période.

Nom de la sortie	Valeur de sortie
Latitude	Latitude du poste choisi
Longitude	Longitude de la position sélectionnée
position X	X Coordonnée de la position sélectionnée sur la carte
position Y	Y Coordonnée de la position sélectionnée sur la carte

Appuies sur un marqueur

Cet événement se produit lorsque l'utilisateur clique sur un marqueur qui se trouve sur la carte.

Le bloc "OnMarkerPress" renvoie un objet événementiel. Il s'agit d'un objet qui peut être utilisé avec les blocs d'objets. Le bloc événement a les propriétés suivantes :

latitude : renvoie la latitude du marqueur sélectionné

longitude : renvoie la longitude du marqueur sélectionné

Exemple d'utilisation du bloc "On Marker Press