le chargement progressif des images est une bonne pratique utilisé dans la création des applications.Son but est remplacer l’image à charger par un effet qui permettra de faire comprendre à l’utilisateur qu’une image est en cours de chargement.

Google map offres la possibilité de modifier les styles bases que vous offres son API. Ceci dans le but de rendre notre application plus captivante et originale. Dans cet article nous allons nous appuyer sur notre tutoriel de création d’une application mobile de géolocalisation avec ionic 4 pour vous apprendre à designer une carte map.

#1 – Création d’un style de mise en forme

La création de notre structure de données de mise en forme de notre carte google map est assez simple, il surfit que nous sachons exactement ceux à quoi cela nous servira. Cette structure de donnée est structure sous cette forme ci dessous :

 [
                {
                    elementType: 'geometry',
                    stylers: [
                        {
                            color: '#242f3e'
                        }
                    ]
                },
                {
                    elementType: 'labels.text.fill',
                    stylers: [
                        {
                            color: '#746855'
                        }
                    ]
                },
                {
                    elementType: 'labels.text.stroke',
                    stylers: [
                        {
                            color: '#242f3e'
                        }
                    ]
                },
                {
                    featureType: 'administrative.locality',
                    elementType: 'labels.text.fill',
                    stylers: [
                        {
                            color: '#d59563'
                        }
                    ]
                },
                {
                    featureType: 'poi',
                    elementType: 'labels.text.fill',
                    stylers: [
                        {
                            color: '#d59563'
                        }
                    ]
                },
                {
                    featureType: 'poi.park',
                    elementType: 'geometry',
                    stylers: [
                        {
                            color: '#263c3f'
                        }
                    ]
                },
                {
                    featureType: 'poi.park',
                    elementType: 'labels.text.fill',
                    stylers: [
                        {
                            color: '#6b9a76'
                        }
                    ]
                },
                {
                    featureType: 'road',
                    elementType: 'geometry',
                    stylers: [
                        {
                            color: '#38414e'
                        }
                    ]
                },
                {
                    featureType: 'road',
                    elementType: 'geometry.stroke',
                    stylers: [
                        {
                            color: '#212a37'
                        }
                    ]
                },
                {
                    featureType: 'road',
                    elementType: 'labels.text.fill',
                    stylers: [
                        {
                            color: '#9ca5b3'
                        }
                    ]
                },
                {
                    featureType: 'road.highway',
                    elementType: 'geometry',
                    stylers: [
                        {
                            color: '#746855'
                        }
                    ]
                },
                {
                    featureType: 'road.highway',
                    elementType: 'geometry.stroke',
                    stylers: [
                        {
                            color: '#1f2835'
                        }
                    ]
                },
                {
                    featureType: 'road.highway',
                    elementType: 'labels.text.fill',
                    stylers: [
                        {
                            color: '#f3d19c'
                        }
                    ]
                },
                {
                    featureType: 'transit',
                    elementType: 'geometry',
                    stylers: [
                        {
                            color: '#2f3948'
                        }
                    ]
                },
                {
                    featureType: 'transit.station',
                    elementType: 'labels.text.fill',
                    stylers: [
                        {
                            color: '#d59563'
                        }
                    ]
                },
                {
                    featureType: 'water',
                    elementType: 'geometry',
                    stylers: [
                        {
                            color: '#17263c'
                        }
                    ]
                },
                {
                    featureType: 'water',
                    elementType: 'labels.text.fill',
                    stylers: [
                        {
                            color: '#515c6d'
                        }
                    ]
                },
                {
                    featureType: 'water',
                    elementType: 'labels.text.stroke',
                    stylers: [
                        {
                            color: '#17263c'
                        }
                    ]
                }
            ] 

• l’attribut featureType nous permet de spécifier le type de zone sur laquelle nous voulons appliquer notre les mise en forme;
• Puis l’attribut elementType qui permet de spécifier le type d’élément que nous souhaitons mettre designer;
• Enfin l’attribut stylers qui nous permet de définir les attributs de mise en forme qui seront applique sur l’élément spécifié. Dans cet attribut, nous avons des sous attributs comme color: 'nom-de-la-coleur', visibility:'visible' , Weight :5 etc.

Il existe deux façons d’appliquer les mises en forme sur une carte google map parmi ces façons, nous avons :

1- Première méthode

La première façons d’intégrer les mises en forme sur notre carte google map consiste tout simplement à ajouter l’attribut styles:

            this.map = new google.maps.Map(document.getElementById('map-tracking'), {
                zoom: 16,
                center: latLngMe,
                styles: [
                    {
                        elementType: 'geometry',
                        stylers: [
                            {
                                color: '#242f3e'
                            }
                        ]
                    },
                    {
                        elementType: 'labels.text.fill',
                        stylers: [
                            {
                                color: '#746855'
                            }
                        ]
                    },
                    {
                        elementType: 'labels.text.stroke',
                        stylers: [
                            {
                                color: '#242f3e'
                            }
                        ]
                    },
                    {
                        featureType: 'administrative.locality',
                        elementType: 'labels.text.fill',
                        stylers: [
                            {
                                color: '#d59563'
                            }
                        ]
                    },
                    {
                        featureType: 'poi',
                        elementType: 'labels.text.fill',
                        stylers: [
                            {
                                color: '#d59563'
                            }
                        ]
                    },
                    {
                        featureType: 'poi.park',
                        elementType: 'geometry',
                        stylers: [
                            {
                                color: '#263c3f'
                            }
                        ]
                    },
                    {
                        featureType: 'poi.park',
                        elementType: 'labels.text.fill',
                        stylers: [
                            {
                                color: '#6b9a76'
                            }
                        ]
                    },
                    {
                        featureType: 'road',
                        elementType: 'geometry',
                        stylers: [
                            {
                                color: '#38414e'
                            }
                        ]
                    },
                    {
                        featureType: 'road',
                        elementType: 'geometry.stroke',
                        stylers: [
                            {
                                color: '#212a37'
                            }
                        ]
                    },
                    {
                        featureType: 'road',
                        elementType: 'labels.text.fill',
                        stylers: [
                            {
                                color: '#9ca5b3'
                            }
                        ]
                    },
                    {
                        featureType: 'road.highway',
                        elementType: 'geometry',
                        stylers: [
                            {
                                color: '#746855'
                            }
                        ]
                    },
                    {
                        featureType: 'road.highway',
                        elementType: 'geometry.stroke',
                        stylers: [
                            {
                                color: '#1f2835'
                            }
                        ]
                    },
                    {
                        featureType: 'road.highway',
                        elementType: 'labels.text.fill',
                        stylers: [
                            {
                                color: '#f3d19c'
                            }
                        ]
                    },
                    {
                        featureType: 'transit',
                        elementType: 'geometry',
                        stylers: [
                            {
                                color: '#2f3948'
                            }
                        ]
                    },
                    {
                        featureType: 'transit.station',
                        elementType: 'labels.text.fill',
                        stylers: [
                            {
                                color: '#d59563'
                            }
                        ]
                    },
                    {
                        featureType: 'water',
                        elementType: 'geometry',
                        stylers: [
                            {
                                color: '#17263c'
                            }
                        ]
                    },
                    {
                        featureType: 'water',
                        elementType: 'labels.text.fill',
                        stylers: [
                            {
                                color: '#515c6d'
                            }
                        ]
                    },
                    {
                        featureType: 'water',
                        elementType: 'labels.text.stroke',
                        stylers: [
                            {
                                color: '#17263c'
                            }
                        ]
                    }
                ]
            });

Cette méthode se fait directement avec la déclaration de notre google map.

2- Deuxième méthode

Dans cette seconde méthode, nous déclarons notre mise en forme que nous applique à notre carte google map

 const styledMapType = new google.maps.StyledMapType(
            [
                {
                    elementType: 'geometry',
                    stylers: [
                        {
                            color: '#242f3e'
                        }
                    ]
                },
                {
                    elementType: 'labels.text.fill',
                    stylers: [
                        {
                            color: '#746855'
                        }
                    ]
                },
                {
                    elementType: 'labels.text.stroke',
                    stylers: [
                        {
                            color: '#242f3e'
                        }
                    ]
                },
                {
                    featureType: 'administrative.locality',
                    elementType: 'labels.text.fill',
                    stylers: [
                        {
                            color: '#d59563'
                        }
                    ]
                },
                {
                    featureType: 'poi',
                    elementType: 'labels.text.fill',
                    stylers: [
                        {
                            color: '#d59563'
                        }
                    ]
                },
                {
                    featureType: 'poi.park',
                    elementType: 'geometry',
                    stylers: [
                        {
                            color: '#263c3f'
                        }
                    ]
                },
                {
                    featureType: 'poi.park',
                    elementType: 'labels.text.fill',
                    stylers: [
                        {
                            color: '#6b9a76'
                        }
                    ]
                },
                {
                    featureType: 'road',
                    elementType: 'geometry',
                    stylers: [
                        {
                            color: '#38414e'
                        }
                    ]
                },
                {
                    featureType: 'road',
                    elementType: 'geometry.stroke',
                    stylers: [
                        {
                            color: '#212a37'
                        }
                    ]
                },
                {
                    featureType: 'road',
                    elementType: 'labels.text.fill',
                    stylers: [
                        {
                            color: '#9ca5b3'
                        }
                    ]
                },
                {
                    featureType: 'road.highway',
                    elementType: 'geometry',
                    stylers: [
                        {
                            color: '#746855'
                        }
                    ]
                },
                {
                    featureType: 'road.highway',
                    elementType: 'geometry.stroke',
                    stylers: [
                        {
                            color: '#1f2835'
                        }
                    ]
                },
                {
                    featureType: 'road.highway',
                    elementType: 'labels.text.fill',
                    stylers: [
                        {
                            color: '#f3d19c'
                        }
                    ]
                },
                {
                    featureType: 'transit',
                    elementType: 'geometry',
                    stylers: [
                        {
                            color: '#2f3948'
                        }
                    ]
                },
                {
                    featureType: 'transit.station',
                    elementType: 'labels.text.fill',
                    stylers: [
                        {
                            color: '#d59563'
                        }
                    ]
                },
                {
                    featureType: 'water',
                    elementType: 'geometry',
                    stylers: [
                        {
                            color: '#17263c'
                        }
                    ]
                },
                {
                    featureType: 'water',
                    elementType: 'labels.text.fill',
                    stylers: [
                        {
                            color: '#515c6d'
                        }
                    ]
                },
                {
                    featureType: 'water',
                    elementType: 'labels.text.stroke',
                    stylers: [
                        {
                            color: '#17263c'
                        }
                    ]
                }
            ],
            {name: 'Styled Map'});
        this.geolocation.getCurrentPosition().then((resp) => {
            this.lat = resp.coords.latitude;
            this.lng = resp.coords.longitude;
            const latLngMe = new google.maps.LatLng(this.lat, this.lng);
            this.showMe(latLngMe);
            this.map = new google.maps.Map(document.getElementById('map-tracking'), {
                zoom: 16,
                center: latLngMe,
                styles: [
                    {
                        elementType: 'geometry',
                        stylers: [
                            {
                                color: '#242f3e'
                            }
                        ]
                    },
                    {
                        elementType: 'labels.text.fill',
                        stylers: [
                            {
                                color: '#746855'
                            }
                        ]
                    },
                    {
                        elementType: 'labels.text.stroke',
                        stylers: [
                            {
                                color: '#242f3e'
                            }
                        ]
                    },
                    {
                        featureType: 'administrative.locality',
                        elementType: 'labels.text.fill',
                        stylers: [
                            {
                                color: '#d59563'
                            }
                        ]
                    },
                    {
                        featureType: 'poi',
                        elementType: 'labels.text.fill',
                        stylers: [
                            {
                                color: '#d59563'
                            }
                        ]
                    },
                    {
                        featureType: 'poi.park',
                        elementType: 'geometry',
                        stylers: [
                            {
                                color: '#263c3f'
                            }
                        ]
                    },
                    {
                        featureType: 'poi.park',
                        elementType: 'labels.text.fill',
                        stylers: [
                            {
                                color: '#6b9a76'
                            }
                        ]
                    },
                    {
                        featureType: 'road',
                        elementType: 'geometry',
                        stylers: [
                            {
                                color: '#38414e'
                            }
                        ]
                    },
                    {
                        featureType: 'road',
                        elementType: 'geometry.stroke',
                        stylers: [
                            {
                                color: '#212a37'
                            }
                        ]
                    },
                    {
                        featureType: 'road',
                        elementType: 'labels.text.fill',
                        stylers: [
                            {
                                color: '#9ca5b3'
                            }
                        ]
                    },
                    {
                        featureType: 'road.highway',
                        elementType: 'geometry',
                        stylers: [
                            {
                                color: '#746855'
                            }
                        ]
                    },
                    {
                        featureType: 'road.highway',
                        elementType: 'geometry.stroke',
                        stylers: [
                            {
                                color: '#1f2835'
                            }
                        ]
                    },
                    {
                        featureType: 'road.highway',
                        elementType: 'labels.text.fill',
                        stylers: [
                            {
                                color: '#f3d19c'
                            }
                        ]
                    },
                    {
                        featureType: 'transit',
                        elementType: 'geometry',
                        stylers: [
                            {
                                color: '#2f3948'
                            }
                        ]
                    },
                    {
                        featureType: 'transit.station',
                        elementType: 'labels.text.fill',
                        stylers: [
                            {
                                color: '#d59563'
                            }
                        ]
                    },
                    {
                        featureType: 'water',
                        elementType: 'geometry',
                        stylers: [
                            {
                                color: '#17263c'
                            }
                        ]
                    },
                    {
                        featureType: 'water',
                        elementType: 'labels.text.fill',
                        stylers: [
                            {
                                color: '#515c6d'
                            }
                        ]
                    },
                    {
                        featureType: 'water',
                        elementType: 'labels.text.stroke',
                        stylers: [
                            {
                                color: '#17263c'
                            }
                        ]
                    }
                ]
            });
            // Associate the styled map with the MapTypeId and set it to display.
            this.map.mapTypes.set('styled_map', styledMapType);
            this.map.setMapTypeId('styled_map');

La déclaration new google.maps.StyledMapType nous permet de créer une instance de mise en forme, elle prend en paramètre un tableau les différentes déclarations de mise en forme. Dans celle-ci nous allons nous intéressé à l’attribut this.map.mapTypes.set('styled_map', styledMapType); qui nous permettra de associer notre style à notre carte map.

#2 – Génération d’un style de mise en forme

La plateforme mapstyle with google nous offre la possibilité de générer les paramètres de mise en forme de notre carte google map et de gagner énormément en temps.

#3 – Masquer les signatures de google map sur votre map

Afin de rendre encore plus original votre carte google map, nous vous recommandons l’utilisation des déclarations css ci-dessous dans le fichier global.scss de notre application ionic

a[href^="http://maps.google.com/maps"] {
  display: none !important
}

a[href^="https://maps.google.com/maps"] {
  display: none !important
}

.gmnoprint a, .gmnoprint span, .gm-style-cc {
  display: none;
}

.gmnoprint,.gmnoprint div {
  background: none !important;
}

En définitive, il était question pour nous de vous montrer comment ajouter les mises en forme à vos cartes google map. Contrairement à l’article sur la création d’une application de traking ou nous avons créé une carte map avec les mises en forme standards. Cependant nous verrons dans le prochains article comment tracer des itinéraires sur google map. Toutefois si vous avez des questions bien vouloir leur mentionner en commentaire merci.

De nos jours, avec la forte croissance de la technologie et la présence des radios GPS sur les équipements smart, d’où la forte conversion vers les applications mobile utilisant un système de géolocalisation. Nous verrons dans cet article comment créer une application mobile de géolocalisation avec ionic 4.

Lorsque vous crée une application sur Ionic 4, elle a uniquement les polices standard qu’un navigateur peut interpréter. Cependant, nous avons la possibilité d’ajouter les police d’écritures qui vous convient.

La partie 2 de cet article est consacré à la création de l’application mobile sur ionic 4 qui aura pour but d’effectuer les différents opérations de crud vers notre base de donnée ceci en utilisant l’api “Mon API” que nous avons précédemment crée .

Sauvegarder les données de votre application mobile sur ionic 4 vers un server distant reste un exercice très apprécier pas les créateur d’application mobile d’ou la création de cette article qui vous permettra

Le local storage est une librairie utilisé sur les applications Angular pour permettre a ceux-ci de stocker des informations sur le client terminal ou navigateur qui leur exécute.

Ionic est un Framework de création d’application hybride multiplateformes (Android, IOS, Windows etc.), elle se base sur développement Angular pour la création de ces composants.