Migrer une application web depuis Bing Maps

Les applications web qui utilisent Bing Cartes utilisent souvent le kit SDK JavaScript Bing Cartes V8. Le Kit de développement logiciel (SDK) web Azure Maps est le kit de développement logiciel (SDK) Azure approprié vers lequel migrer. Le Kit de développement logiciel (SDK) web Azure Maps vous permet de personnaliser des cartes interactives avec du contenu et des images qui vous sont propres pour les afficher dans vos applications web ou mobiles. Ce contrôle utilise WebGL, ce qui vous permet d’afficher d’importants jeux de données avec des performances élevées. Développez avec le kit de développement logiciel (SDK) à l’aide de JavaScript ou de TypeScript. Cet article montre comment :

• Charger une carte
• Localiser une carte
• Ajouter des épingles, des polylignes et des polygones
• Afficher des informations dans une fenêtre contextuelle ou une zone d’informations
• Charger et afficher des données KML et GeoJSON
• Punaises de cluster
• Superposer une couche de mosaïques
• Afficher les données du trafic
• Ajouter une superposition de sol

Si vous développez à l’aide d’une infrastructure JavaScript, l’un des projets open source suivants peut être utile :

• ng-azure-maps : wrapper Angular 10 autour d’Azure Maps.
• AzureMapsControl.Components : composant Blazor Azure Maps.
• Composant React Azure Maps - un wrapper React pour le composant de contrôle Azure Maps.
• Vue Azure Maps : composant Azure Maps pour l’application Vue.

Prérequis

Si vous n’avez pas d’abonnement Azure, créez un compte gratuit avant de commencer.

• Un compte Azure Maps
• Clé d’abonnement

Prise en charge des fonctionnalités clés

Le tableau suivant liste les principales fonctionnalités de l’API du SDK JavaScript Bing Cartes v8 et la prise en charge d’une API similaire dans le SDK web Azure Maps.

Fonctionnalité Bing Cartes	Module Bing Maps	Prise en charge du kit de développement logiciel (SDK) Web Azure Maps
Punaises		✓
Clustering de punaises	Microsoft.Maps.Clustering	✓ Clustering pushpin
Polylignes et polygones		✓
Superposition de sol		✓
Cartes thermiques	Microsoft.Maps.HeatMap	✓ Ajouter une carte thermique
Couches de mosaïques		✓
Couche KML	Microsoft.Maps.GeoXml	✓ Module d’E/S spatiales
Couche de contour	Microsoft.Maps.Contour	✓ Exemples de code de couche contour
Couche de compartimentage des données	Microsoft.Maps.DataBinning	✓ Inclus dans le module open-source Azure Maps Gridded Data Source
Couche de mosaïque animée		✓ Inclus dans le module Azure Maps Animation open source
Outils de dessin	Microsoft.Maps.DrawingTools	✓ Ajouter des outils de dessin
Service de geocoder	Microsoft.Maps.Search	✓ API de recherche ou SDK REST
Service de directions	Microsoft.Maps.Directions	✓ API d’itinéraire
Service matrice de distance		✓ API Matrice de routage
Service de données spatiales	Microsoft.Maps.SpatialDataService	N/A
Imagerie aérienne/satellite		✓ Choisir un style de carte
Imagerie Vue aérienne		N/A
Images des rues		N/A
Prise en charge de GeoJSON	Microsoft.Maps.GeoJson	✓
Prise en charge de GeoXML	Microsoft.Maps.GeoXml	✓ Module d’E/S spatiales
Prise en charge de Well-Known Text	Microsoft.Maps.WellKnownText	✓ Module d’E/S spatiales
Indoor Maps	Microsoft.Maps.VenueMaps	✓ Créateur
Flux de trafic	Microsoft.Maps.Traffic	✓ Contrôle du trafic
Mathématiques spatiales	Microsoft.Maps.SpatialMath	✓ échantillons atlas.math ou turf js
Styles de carte personnalisés		Partial, Choisir un style de carte

Modules open source supplémentaires pour le Kit de développement logiciel (SDK) web Azure Maps, qui étendent encore plus ses fonctionnalités.

Différences notables dans les Kits de développement logiciel (SDK) Web

Voici quelques-unes des principales différences entre les SDK web Bing Maps et Azure Maps dont vous devez être conscient :

• En plus de fournir un point de terminaison hébergé pour accéder au kit de développement logiciel (SDK) Web d’Azure Maps, un package npm est disponible pour incorporer le kit de développement logiciel (SDK) Web dans les applications, si vous préférez. Pour plus d'informations, consultez Utiliser le contrôle de carte Azure Maps. Ce package inclut aussi des définitions de TypeScript.
• Bing Cartes fournit deux branches hébergées de son kit SDK : Release et Experimental. La branche Experimental peut recevoir plusieurs mises à jour par jour pendant le nouveau développement. Azure Maps héberge uniquement une branche Release ; toutefois, des fonctionnalités expérimentales sont créées en tant que modules personnalisés dans le projet d’exemples de code open source Azure Maps. Avant, Bing Cartes avait également une branche figée qui était mise à jour moins fréquemment, réduisant ainsi le risque de changements cassants dus à une mise en production. Dans Azure Maps, vous pouvez utiliser le module npm et pointer vers n’importe quelle version mineure précédente.

Conseil

Azure Maps publie des versions minifiées et déminifiées du kit SDK. Il vous suffit de supprimer .min des noms de fichiers. La version déminifiée est utile lors du débogage de problème, mais veillez à utiliser la version minifiée en production afin de tirer parti de la plus petite taille de fichier.

• Une fois qu’une instance de la classe Map est créée dans Azure Maps, votre code doit attendre que la carte ready ou que l'événement load se déclenche avant d’interagir avec la carte. Ces événements permettent de s’assurer que toutes les ressources de carte sont chargées et prêtes à être sollicitées.

• Les deux plateformes utilisent un système de mosaïque similaire pour les cartes de base, mais les mosaïques dans Bing Cartes sont de 256 pixels et celles d’Azure Maps de 512 pixels. Pour obtenir la même vue de la carte dans Azure Maps et Bing Cartes, soustrayez un niveau de zoom dans Azure Maps.

• Dans Bing Cartes, les coordonnées se présentent sous la forme latitude, longitude, tandis qu’Azure Maps utilise longitude, latitude. Ce format est conforme à la norme [x, y] qui est respectée par la plupart des plateformes GIS.

• Les formes du kit de développement logiciel (SDK) Web Azure Maps sont basées sur le schéma GeoJSON. Les classes d’assistance sont exposées par le biais de l’espace de noms atlas.data. Il existe également la classe atlas.Shape qui peut être utilisée pour encapsuler des objets GeoJSON et simplifier leur mise à jour et leur gestion, de manière pouvant être liée aux données.

• Les coordonnées dans Azure Maps sont définies comme des objets Position qui peuvent être spécifiés sous forme d’un simple tableau de nombres au format [longitude, latitude] ou new atlas.data.Position(longitude, latitude).

Conseil

La classe Position a une fonction d’assistance statique pour l’importation de coordonnées qui sont au format latitude, longitude. La fonction atlas.data.Position.fromLatLng peut souvent remplacer la fonction new Microsoft.Maps.Location dans le code Bing Cartes.

• Au lieu de spécifier des informations de style pour chaque forme ajoutée à la carte, Azure Maps sépare les styles des données. Les données sont stockées dans des sources de données et sont connectées aux couches de rendu que le code Azure Maps utilise pour afficher les données. Cette approche offre un gain de performances amélioré. De nombreux calques prennent en charge le style piloté par les données, en ajoutant une logique métier aux options de style de calque qui modifient la façon dont les formes individuelles sont rendues dans un calque en fonction de ses propriétés.
• Azure Maps fournit des fonctions mathématiques spatiales dans l’espace de noms atlas.math qui diffèrent des fonctions mathématiques spatiales de Bing Cartes. La principale différence réside dans le qu’Azure Maps ne fournit pas de fonctions intégrées pour les opérations binaires telles que union et intersection. Toutefois, Azure Maps est basé sur la norme GeoJSON ouverte et il existe des bibliothèques open source disponibles. Une option très populaire qui fonctionne bien avec Azure Maps et offre des fonctionnalités mathématiques spatiales est turf js.

Pour plus d’informations sur la terminologie relative à Azure Maps, consultez le glossaire Azure Maps.

Exemples côte à côte du kit de développement logiciel (SDK) Web

La liste suivante est une collection d’exemples de code pour chaque plateforme, qui couvre les cas d’usage courants pour vous aider à migrer votre application Web du kit SDK JavaScript Bing Cartes v8 vers le kit SDK Web Azure Maps. Des exemples de code liés aux applications Web sont fournis en JavaScript. Toutefois, Azure Maps fournit également des définitions TypeScript dans un module npm. Pour plus d’informations sur les définitions TypeScript, consultez la section Utiliser le contrôle de carte Azure Maps.

Rubriques

• Charger une carte
• Localisation de la carte
• Définition de la vue cartographique
• Ajout d’une punaise
• Ajout d’une punaise personnalisée
• Ajout d’une polyligne
• Ajout d’un polygone
• Afficher une zone d’informations
• Clustering de punaises
• Ajouter une carte thermique
• Superposer une couche de mosaïques
• Afficher les données du trafic
• Ajouter une superposition de sol
• Ajouter des données KML à la carte
• Ajouter des outils de dessin

Charger une carte

Le chargement d’un mappage dans les deux kits de développement logiciel (SDK) suit le même ensemble d’étapes ;

• Ajout d'une référence au Kit de développement logiciel (SDK) de la carte.
• Ajoutez une balise div au corps de la page, qui fait office d’espace réservé pour la carte.
• Créez une fonction JavaScript qui est appelée une fois la page chargée.
• Créez une instance de la classe de carte respective.

Différences clés

• Bing Cartes nécessite une clé de compte spécifiée dans la référence de script de l’API ou en tant qu’option de carte. Les informations d’authentification pour Azure Maps sont spécifiées en tant qu’options de la classe carte en tant qu’authentification par clé partagée ou Microsoft Entra ID.
• Bing Cartes utilise une fonction de rappel dans la référence du script de l'API, qui est utilisée pour appeler une fonction d'initialisation afin de charger la carte. Avec Azure Maps, l’événement OnLoad de la page doit être utilisé.
• Quand vous utilisez un ID pour référencer l’élément div dans lequel la carte est affichée, Bing Cartes utilise un sélecteur HTML (#myMap), tandis qu’Azure Maps utilise uniquement la valeur d’ID (myMap).
• Les coordonnées dans Azure Maps sont définies comme des objets Position qui peuvent être spécifiés sous forme d’un simple tableau de nombres au format [longitude, latitude].
• Le niveau de zoom dans Azure Maps est inférieur d’un niveau à celui de l’exemple Bing Cartes en raison de la différence de taille du système de mosaïques entre les plateformes.
• Par défaut, Azure Maps n’ajoute aucun contrôle de navigation au canevas de carte, comme des boutons de zoom et des boutons de style de carte. Il existe cependant des commandes pour ajouter un sélecteur de style de carte, des boutons de zoom, une boussole ou une commande de rotation et un réglage de vitesse.
• Un gestionnaire d’événements est ajouté dans Azure Maps pour surveiller l’événement ready de l’instance de la carte. Cette fonction se déclenche lorsque la carte termine le chargement du contexte WebGL et de toutes les ressources nécessaires. Vous pouvez ajouter n’importe quel code de chargement dans ce gestionnaire d’événements.

Les exemples suivants démontrent le chargement d'une carte basique centrée sur New York aux coordonnées (longitude : -73,985, latitude : 40,747) avec un niveau de zoom de 12 dans Bing Cartes.

Avant : Bing Cartes

Le code suivant est un exemple d’affichage d’une carte Bing centrée et zoomée sur un emplacement.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map;

        function initMap() {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: '<Your Bing Maps Key>',
                center: new Microsoft.Maps.Location(40.747, -73.985),
                zoom: 12
            });
        }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

L’exécution de ce code dans un navigateur affiche une carte ressemblant à l’image suivante :

Après : Azure Maps

Le code suivant montre comment charger une carte avec la même vue dans Azure Maps, ainsi qu’un contrôle de style cartographique et des boutons de zoom.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <script type='text/javascript'>
        var map;

        function initMap() {
            map = new atlas.Map('myMap', {
                center: [-73.985, 40.747],  //Format coordinates as longitude, latitude.
                zoom: 11,   //Subtract the zoom level by one.

                //Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {
                //Add zoom and map style controls to top right of map.
                map.controls.add([
                        new atlas.control.StyleControl(),
                        new atlas.control.ZoomControl()
                    ], {
                        position: 'top-right'
                });
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

L’exécution de ce code dans un navigateur affiche une carte ressemblant à l’image suivante :

Pour plus d’informations sur la configuration et l’utilisation du contrôle de carte Azure Maps dans une application web, consultez Utiliser le contrôle de carte Azure Maps.

Conseil

Azure Maps publie des versions minifiées et déminifiées du kit SDK. Supprimez .min des noms de fichiers. La version déminifiée est utile lors du débogage de problème, mais veillez à utiliser la version minifiée en production afin de tirer parti de la plus petite taille de fichier.

Plus de ressources

• Pour plus d’informations sur les contrôles de navigation Azure Maps pour la rotation et l’inclinaison d’une carte, consultez Ajouter des contrôles à une carte.

Localisation de la carte

Si votre audience est répartie dans plusieurs pays/régions ou parle différentes langues, la localisation est importante.

Avant : Bing Cartes

Pour localiser les cartes Bing, la langue et la région sont spécifiées à l’aide des paramètres setLang et UR ajoutés à la référence de balise <script> à l’API. Certaines fonctionnalités de Bing Cartes sont disponibles uniquement sur certains marchés ; le marché de l’utilisateur est spécifié à l’aide du paramètre setMkt.

<script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?callback=initMap&setLang={language-code}&setMkt={market}&UR={region-code}" async defer></script>

Voici un exemple Bing Cartes avec la langue définie sur fr-FR.

Après : Azure Maps

Azure Maps fournit uniquement des options pour définir la langue et la vue régionale de la carte. Aucun paramètre de marché n’est utilisé pour limiter les fonctionnalités. Il existe deux méthodes pour définir la langue et la vue régionale de la carte. La première option consiste à ajouter ces informations à l’espace de noms atlas global, de sorte que toutes les instances de contrôle de carte dans votre application ont ces paramètres par défaut. Le code suivant définit la langue en français (fr-FR) et le paramètre régional sur "Auto" :

atlas.setLanguage('fr-FR');
atlas.setView('auto');

La deuxième option consiste à transmettre ces informations dans les options de mappage lors du chargement de la carte, comme suit :

map = new atlas.Map('myMap', {
    language: 'fr-FR',
    view: 'auto',

    authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: '<Your Azure Maps Key>'
    }
});

Remarque

Azure Maps peut charger plusieurs instances de carte sur la même page avec des paramètres de langue et de région différents. Il est également possible de mettre à jour ces paramètres dans la carte après son chargement. Pour obtenir la liste des langues prises en charge dans Azure Maps, consultez Prise en charge de la localisation dans Azure Maps.

Voici un exemple d’Azure Maps avec la langue définie sur « fr » et la région de l’utilisateur définie sur fr-FR.

Paramétrage de la vue cartographique

Les cartes dynamiques dans Bing et Azure Maps peuvent être déplacées par programmation vers de nouvelles positions géographiques en appelant les fonctions appropriées dans JavaScript. L’exemple suivant montre une carte affichant une image aérienne satellite, centrée sur un emplacement avec des coordonnées (longitude : -111,0225, latitude : 35,0272) et dont le niveau de zoom est 15 dans Bing Cartes.

Remarque

Bing Maps utilise des tuiles de 256 pixels, tandis qu'Azure Maps utilise une tuile plus grande de 512 pixels. Cela réduit le nombre de requêtes réseau nécessaires à Azure Maps pour charger la même zone de carte que Bing Cartes. Toutefois, en raison de la façon dont les pyramides de mosaïques fonctionnent dans les contrôles de carte et de la plus grande taille des mosaïques dans Azure Maps, vous devez soustraire le niveau de zoom utilisé dans Bing Cartes d’une unité lors de l’utilisation d’Azure Maps pour obtenir cette même zone visualisable sous forme de carte dans Bing Cartes.

Avant : Bing Cartes

Le contrôle de carte Bing Cartes peut être déplacé par programmation à l’aide de la fonction setView, qui vous permet de spécifier le centre de la carte et un niveau de zoom.

map.setView({
    mapTypeId: Microsoft.Maps.MapTypeId.aerial,
    center: new Microsoft.Maps.Location(35.0272, -111.0225),
    zoom: 15
});

Après : Azure Maps

Dans Azure Maps, la position de la carte peut être modifiée par programmation à l’aide de la fonction setCamera de la carte, et le style de la carte peut être modifié à l’aide de la fonction setStyle. Les coordonnées dans Azure Maps sont au format « longitude, latitude » et la valeur de niveau de zoom est soustraite de 1.

map.setCamera({
    center: [-111.0225, 35.0272],
    zoom: 14
});

map.setStyle({
    style: 'satellite_road_labels'
});

Plus de ressources

• Choisir un style de carte
• Styles de carte pris en charge

Ajout d’une punaise

Dans Azure Maps, il existe plusieurs manières d’afficher des données de point sur la carte ;

• Marqueurs HTML : effectue le rendu des points à l’aide d’éléments DOM traditionnels. Les marqueurs HTML prennent en charge le glissement.
• Calque de symbole : effectue le rendu des points avec une icône et/ou un texte dans le contexte WebGL.
• Calque de bulles – rend les points sous forme de cercles sur la carte. Les rayons des cercles peuvent être mis à l’échelle en fonction des propriétés des données.

Les couches de symboles et de bulles sont rendues dans le contexte WebGL et peuvent afficher de grands ensembles de points sur la carte. Ces niveaux nécessitent que les données soient stockées dans une source de données. Les sources de données et les couches de rendu doivent être ajoutées à la carte après le déclenchement de l’événement ready. Les marqueurs HTML sont affichées sous forme d’éléments DOM dans la page et n’utilisent pas de source de données. Plus le nombre d’éléments DOM d’une page est élevé, plus la page devient lente. En cas de rendu de plus de quelques centaines de points sur une carte, essayez d’utiliser à la place l’un des calques de rendu.

Les exemples suivants montrent comment ajouter un marqueur à la carte (longitude : -0,2, latitude : 51,5) avec le nombre 10 superposé sous la forme d’une étiquette.

Avant : Bing Cartes

Avec Bing Cartes, les marqueurs sont ajoutés à la carte à l’aide de la classe Microsoft.Maps.Pushpin*. Les punaises sont ensuite ajoutées à la carte à l’aide de l’une des deux fonctions disponibles.

La première fonction consiste à créer une couche, à insérer la punaise, puis à ajouter la couche à la propriété layers de la carte.

var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(51.5, -0.2), {
    text: '10'
});

var layer = new Microsoft.Maps.Layer();
layer.add(pushpin);
map.layers.insert(layer);

La seconde consiste à l’ajouter à l’aide de la propriété entities de la carte. Cette fonction est marquée comme dépréciée dans la documentation de Bing Cartes V8, mais reste partiellement fonctionnelle pour les scénarios de base.

var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(51.5, -0.2), {
    text: '10'
});

map.entities.add(pushpin);

Après : Azure Maps à l’aide de marqueurs HTML

Dans Azure Maps, vous pouvez utiliser des marqueurs HTML pour afficher facilement un point sur la carte. Leur utilisation est recommandée pour les applications qui doivent simplement afficher quelques points sur la carte. Pour utiliser un marqueur HTML, créez une instance de la classe atlas.HtmlMarker, définissez les options de texte et de position, puis ajoutez le marqueur à la carte à l’aide de la fonction map.markers.add.

//Create a HTML marker and add it to the map.
map.markers.add(new atlas.HtmlMarker({
    text: '10',
    position: [-0.2, 51.5]
}));

Après : Azure Maps à l’aide d’une couche de symboles

Lorsque vous utilisez un calque de symbole, les données doivent être ajoutées à une source de données et à la source de données associée au calque. En outre, la source de données et la couche doivent être ajoutées à la carte après le déclenchement de l’événement ready. Pour afficher une valeur de texte unique au-dessus d’un symbole, les informations de texte doivent être stockées en tant que propriété du point de données et cette propriété référencée dans l’option textField du calque. Cela demande un peu plus de travail que l’utilisation des marqueurs HTML, mais offre des avantages en termes de performances.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <script type='text/javascript'>
        var map, datasource;

        function initMap() {
            map = new atlas.Map('myMap', {
                center: [-0.2, 51.5],
                zoom: 9,
                
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                //Create a data source and add it to the map.
                datasource = new atlas.source.DataSource();
                map.sources.add(datasource);

                //Create a point feature, add a property to store a label for it, and add it to the data source.
                datasource.add(new atlas.data.Feature(new atlas.data.Point([-0.2, 51.5]), {
                    label: '10'
                }));

                //Add a layer for rendering point data as symbols.
                map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
                    textOptions: {
                        //Use the label property to populate the text for the symbols.
                        textField: ['get', 'label'],
                        color: 'white',
                        offset: [0, -1]
                    }
                }));
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Plus de ressources

• Créer une source de données
• Ajouter une calque de symbole
• Ajouter un calque de bulles
• Données de point de cluster
• Ajouter des marqueurs HTML
• Utiliser des expressions de style basées sur les données
• Options de l’icône de calque de symbole
• Option de texte du calque de symbole
• Classe de marqueur HTML
• Options du marqueur HTML

Ajout d’une punaise personnalisée

Les images personnalisées peuvent être utilisées pour représenter des points sur une carte. L’image suivante est utilisée dans les exemples ci-dessous. Elle utilise une image personnalisée pour afficher un point sur la carte à la position (latitude : 51,5, longitude : -0,2) et décale la position du marqueur afin que le point de l’icône de la punaise s’aligne avec la position correcte sur la carte.

yellow-pushpin.png

Avant : Bing Cartes

Dans Bing Cartes, un marqueur personnalisé est créé en passant une URL à une image dans les options icon d’une punaise. L’option anchor est utilisée pour aligner le point de l'icône de punaise avec la coordonnée sur la carte. Valeur d’ancrage dans Bing Cartes par rapport à l’angle supérieur gauche de l’image.

var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(51.5, -0.2), {
    icon: 'ylw-pushpin.png',
    anchor: new Microsoft.Maps.Point(5, 30)
});

var layer = new Microsoft.Maps.Layer();
layer.add(pushpin);
map.layers.insert(layer);

Après : Azure Maps à l’aide de marqueurs HTML

Pour personnaliser un marqueur HTML dans Azure Maps un string ou HTMLElement HTML peut être passé dans l’option htmlContent du marqueur. Dans Azure Maps, une option anchor est utilisée pour spécifier la position relative du marqueur par rapport à la coordonnée de position à l’aide d’un des neuf points de référence définis : « center », « top », « bottom », « left », « right », « top-left », « top-right », « bottom-left », « bottom-right ». Le contenu est ancré et centré en bas par défaut. Pour faciliter la migration du code à partir de Bing Cartes, définissez l’ancre sur « top-left », puis utilisez l’option offset avec le même décalage que celui utilisé dans Bing Cartes. Les décalages dans Azure Maps se déplacent dans la direction opposée de Bing Cartes. Par conséquent, multipliez-les par moins un.

Conseil

Ajoutez pointer-events:none en tant que style au contenu HTML pour désactiver le comportement de glissement par défaut dans MS Edge, qui affichera une icône indésirable.

map.markers.add(new atlas.HtmlMarker({
    htmlContent: '<img src="ylw-pushpin.png" style="pointer-events: none;" />',
    anchor: 'top-left',
    pixelOffset: [-5, -30],
    position: [-0.2, 51.5]
}));

Après : Azure Maps à l’aide d’une couche de symboles

Dans Azure Maps, les calques de symboles prennent également en charge les images personnalisées, mais l’image doit d’abord être chargée dans les ressources de carte et recevoir un ID unique. Le calque de symbole peut ensuite référencer cet ID. Le symbole peut être décalé pour s’aligner sur le point correct sur l’image à l’aide de l’icône offset option. Dans Azure Maps, une option anchor est utilisée pour spécifier la position relative du symbole par rapport à la coordonnée de position à l’aide d’un des neuf points de référence définis : « center », « top », « bottom », « left », « right », « top-left », « top-right », « bottom-left », « bottom-right ». Le contenu est ancré et défini sur « bottom » par défaut, ce qui correspond à la partie « en bas au centre » du contenu HTML. Pour faciliter la migration du code à partir de Bing Cartes, définissez l’ancre sur « top-left », puis utilisez l’option offset avec le même décalage que celui utilisé dans Bing Cartes. Les décalages dans Azure Maps se déplacent dans la direction opposée de Bing Cartes. Par conséquent, multipliez-les par moins un.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <script type='text/javascript'>
        var map, datasource;

        function initMap() {
            map = new atlas.Map('myMap', {
                center: [-0.2, 51.5],
                zoom: 9,
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                //Load the custom image icon into the map resources.
                map.imageSprite.add('my-yellow-pin', 'ylw-pushpin.png').then(function () {

                    //Create a data source and add it to the map.
                    datasource = new atlas.source.DataSource();
                    map.sources.add(datasource);

                    //Create a point and add it to the data source.
                    datasource.add(new atlas.data.Point([-0.2, 51.5]));

                    //Add a layer for rendering point data as symbols.
                    map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
                        iconOptions: {
                            //Set the image option to the id of the custom icon that was loaded into the map resources.
                            image: 'my-yellow-pin',
                            anchor: 'top-left',
                            offset: [-5, -30]
                        }
                    }));
                });
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Conseil

Pour créer un rendu personnalisé avancé des points, utilisez plusieurs calques de rendu ensemble. Par exemple, si vous souhaitez avoir plusieurs punaises qui ont la même icône sur des cercles de couleurs différentes, au lieu de créer un groupe d'images pour chaque couleur, superposez un calque de symboles au-dessus d'un calque de bulles et demandez-leur de référencer la même source de données. Cela sera beaucoup plus efficace que de créer un nouveau groupe d’images et de faire en sorte que la carte maintienne une série d’images différentes.

Plus de ressources

• Créer une source de données
• Ajouter une calque de symbole
• Ajouter des marqueurs HTML
• Utiliser des expressions de style basées sur les données
• Options de l’icône de calque de symbole
• Option de texte du calque de symbole
• Classe de marqueur HTML
• Options du marqueur HTML

Ajout d’une polyligne

Les polylignes sont utilisées pour représenter une ligne ou un tracé sur la carte. L’exemple suivant illustre la création d’une polyligne en pointillés sur la carte.

Avant : Bing Cartes

Dans Bing Cartes, la classe Polyline prend un tableau de positions et un ensemble d’options.

//Get the center of the map.
var center = map.getCenter();

//Create the polyline.
var polyline = new Microsoft.Maps.Polyline([
        center,
        new Microsoft.Maps.Location(center.latitude - 0.5, center.longitude - 1),
        new Microsoft.Maps.Location(center.latitude - 0.5, center.longitude + 1)
    ], {
        strokeColor: 'red',
        strokeThickness: 4,
        strokeDashArray: [3, 3]
    });

//Add the polyline to the map using a layer.
var layer = new Microsoft.Maps.Layer();
layer.add(polyline);
map.layers.insert(layer);

Après : Azure Maps

Dans Azure Maps, on désigne les polylignes par les termes géospatiaux plus courants d’objets LineString ou MultiLineString. Ces objets peuvent être ajoutés à une source de données et restitués à l’aide d’une couche de lignes. Les options de couleur du trait, de largeur et de motif de tiret sont quasiment identiques entre les plateformes.

//Get the center of the map.
var center = map.getCamera().center;

//Create a data source and add it to the map.
var datasource = new atlas.source.DataSource();
map.sources.add(datasource);

//Create a line and add it to the data source.
datasource.add(new atlas.data.LineString([
    center,
    [center[0] - 1, center[1] - 0.5],
    [center[0] + 1, center[1] - 0.5]
]));

//Add a layer for rendering line data.
map.layers.add(new atlas.layer.LineLayer(datasource, null, {
    strokeColor: 'red',
    strokeWidth: 4,
    strokeDashArray: [3, 3]
}));

Plus de ressources

• Ajouter des lignes à la carte
• Options de la couche de ligne
• Utiliser des expressions de style basées sur les données

Ajout d’un polygone

Les polygones sont utilisés pour représenter une zone sur la carte. Azure Maps et Bing Cartes offrent une prise en charge similaire des polygones. L’exemple suivant montre comment créer un polygone qui forme un triangle en fonction de la coordonnée centrale de la carte.

Avant : Bing Cartes

Dans Bing Cartes, la classe Polygon prend un tableau de coordonnées ou d’anneaux de coordonnées et un ensemble d’options.

//Get the center of the map.
var center = map.getCenter();

//Create the polygon.
var polygon = new Microsoft.Maps.Polygon([
        center,
        new Microsoft.Maps.Location(center.latitude - 0.5, center.longitude - 1),
        new Microsoft.Maps.Location(center.latitude - 0.5, center.longitude + 1),
        center
    ], {
        fillColor: 'rgba(0, 255, 0, 0.5)',
        strokeColor: 'red',
        strokeThickness: 2
    });

//Add the polygon to the map using a layer.
var layer = new Microsoft.Maps.Layer();
layer.add(polygon);
map.layers.insert(layer);

Après : Azure Maps

Dans Azure Maps, les objets Polygone et Multipolygone peuvent être ajoutés à une source de données et restitués sur la carte à l’aide de couches. La zone d’un polygone peut être affichée dans une couche de polygones. Le contour d’un polygone peut être affiché à l’aide d’un calque de lignes.

//Get the center of the map.
var center = map.getCamera().center;

//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);

//Create a polygon and add it to the data source.
datasource.add(new atlas.data.Polygon([
    center,
    [center[0] - 1, center[1] - 0.5],
    [center[0] + 1, center[1] - 0.5],
    center
]));

//Add a polygon layer for rendering the polygon area.
map.layers.add(new atlas.layer.PolygonLayer(datasource, null, {
    fillColor: 'rgba(0, 255, 0, 0.5)'
}));

//Add a line layer for rendering the polygon outline.
map.layers.add(new atlas.layer.LineLayer(datasource, null, {
    strokeColor: 'red',
    strokeWidth: 2
}));

Plus de ressources

• Ajouter un polygone à la carte
• Ajouter un cercle à la carte
• Options du calque de polygones
• Options de la couche de ligne
• Utiliser des expressions de style basées sur les données

Afficher une zone d’informations

Des informations supplémentaires pour une entité peuvent être affichées sur la carte en tant que classe Microsoft.Maps.Infobox dans Bing Cartes ; dans Azure Maps, cela se fait à l’aide de la classe atlas.Popup. L’exemple suivant ajoute une punaise/un marqueur à la carte qui, lorsqu’elle est sélectionnée, affiche une zone d’informations/fenêtre contextuelle.

Avant : Bing Cartes

Avec Bing Cartes, une zone d’informations est créée à l’aide du constructeur Microsoft.Maps.Infobox.

//Add a pushpin where we want to display an infobox.
var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(47.6, -122.33));

//Add the pushpin to the map using a layer.
var layer = new Microsoft.Maps.Layer();
layer.add(pushpin);
map.layers.insert(layer);

//Create an infobox and bind it to the map.
var infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(47.6, -122.33), {
    description: '<div style="padding:5px"><b>Hello World!</b></div>',
    visible: false
});
infobox.setMap(map);

//Add a click event to the pushpin to open the infobox.
Microsoft.Maps.Events.addHandler(pushpin, 'click', function () {
    infobox.setOptions({ visible: true });
});

Après : Azure Maps

Dans Azure Maps, une fenêtre contextuelle peut être utilisée pour afficher plus d’informations sur un emplacement. Un objet string ou HTMLElement HTML peut être passé dans l’option content de la fenêtre contextuelle. Les fenêtres contextuelles peuvent être affichées indépendamment de toute forme si vous le souhaitez. par conséquent, vous devez spécifier une valeur position. Pour afficher une fenêtre contextuelle, appelez la fonction open et transmettez la carte sur laquelle la fenêtre contextuelle doit être affichée.

//Add a marker to the map that to display a popup for.
var marker = new atlas.HtmlMarker({
    position: [-122.33, 47.6]
});

//Add the marker to the map.
map.markers.add(marker);

//Create a popup.
var popup = new atlas.Popup({
    content: '<div style="padding:10px"><b>Hello World!</b></div>',
    position: [-122.33, 47.6],
    pixelOffset: [0, -35]
});

//Add a click event to the marker to open the popup.
map.events.add('click', marker, function () {
    //Open the popup
    popup.open(map);
});

Remarque

Pour effectuer la même opération avec un calque de symboles, de bulles, de lignes ou de polygones, transmettez le calque au code d’événement de la carte plutôt qu’à un marqueur.

Plus de ressources

• Ajouter une fenêtre contextuelle
• Fenêtre contextuelle avec contenu multimédia
• Fenêtres contextuelles sur les formes
• Réutilisation d’une fenêtre contextuelle avec plusieurs épingles
• Classe de fenêtre contextuelle
• Options de la fenêtre contextuelle

Clustering de punaises

Lorsque vous examinez plusieurs points de données sur la carte, les points se chevauchent et la carte semble surchargée, ce qui nuit à la visibilité et à l’utilisation. Le clustering de données de points peut être utilisé pour améliorer l'expérience utilisateur et optimiser les performances. Le clustering de point de données est le processus permettant de combiner des données de point proches les unes des autres et de les représenter sur une carte en tant qu’un point de données en cluster unique. Lorsque l’utilisateur effectue un zoom avant sur la carte, les clusters se décomposent pour afficher les points de données individuels qui les composent.

L’exemple suivant charge un flux GeoJSON de données sur les tremblements de terre de la semaine écoulée et l’ajoute à la carte. Les clusters sont rendus sous forme de cercles mis à l’échelle et colorés en fonction du nombre de points qu’ils contiennent.

Remarque

Il existe plusieurs algorithmes différents utilisés pour le clustering de punaises. Bing Cartes utilise une fonction simple basée sur une grille, tandis qu’Azure Maps utilise une méthode de clustering basée sur des points plus avancée et visuellement plus attrayante.

Avant : Bing Cartes

Dans Bing Cartes, les données GeoJSON peuvent être chargées à l’aide du module GeoJSON. Les punaises sont regroupées en les chargeant dans le module de clustering et en utilisant la couche de clustering qu'il contient.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map;
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson';

        function initMap() {
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                credentials: '<Your Bing Maps Key>',
                center: new Microsoft.Maps.Location(20, -160),
                zoom: 2
            });

            //Load the GeoJSON and Clustering modules.
            Microsoft.Maps.loadModule(['Microsoft.Maps.GeoJson', 'Microsoft.Maps.Clustering'], function () {

                //Load the GeoJSON data from a URL.
                Microsoft.Maps.GeoJson.readFromUrl(earthquakeFeed, function (pins) {

                    //Create a ClusterLayer with options and add it to the map.
                    clusterLayer = new Microsoft.Maps.ClusterLayer(pins, {
                        clusteredPinCallback: createCustomClusteredPin,
                        gridSize: 100
                    });

                    map.layers.insert(clusterLayer);
                });
            });
        }

        //A function that defines how clustered pins are rendered.
        function createCustomClusteredPin(cluster) {
            //Get the number of pushpins in the cluster
            var clusterSize = cluster.containedPushpins.length;

            var radius = 20;    //Default radius to 20 pixels.
            var fillColor = 'lime'; 	//Default to lime green.

            if (clusterSize >= 750) {
                radius = 40;   //If point_count >= 750, radius is 40 pixels.
                fillColor = 'red';    //If the point_count >= 750, color is red.
            } else if (clusterSize >= 100) {
                radius = 30;    //If point_count >= 100, radius is 30 pixels.
                fillColor = 'yellow';    //If the point_count >= 100, color is yellow.
            }

            //Create an SVG string of a circle with the specified radius and color.
            var svg = ['<svg xmlns="http://www.w3.org/2000/svg" width="', (radius * 2), '" height="', (radius * 2), '">',
                '<circle cx="', radius, '" cy="', radius, '" r="', radius, '" fill="', fillColor, '"/>',
                '<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" style="font-size:12px;font-family:arial;fill:black;" >{text}</text>',
                '</svg>'];

            //Customize the clustered pushpin using the generated SVG and anchor on its center.
            cluster.setOptions({
                icon: svg.join(''),
                anchor: new Microsoft.Maps.Point(radius, radius),
                textOffset: new Microsoft.Maps.Point(0, radius - 8) //Subtract 8 to compensate for height of text.
            });
        }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Après : Azure Maps

Dans Azure Maps, les données sont ajoutées et gérées par une source de données. Les calques se connectent aux sources de données et affichent les données qu’elles contiennent. La classe DataSource dans Azure Maps fournit plusieurs options de clustering.

• cluster : Demande à la source de données de regrouper les données en points.
• clusterRadius : Rayon en pixels pour regrouper les points.
• clusterMaxZoom : niveau de zoom maximal où le clustering se produit. Tout autre zoom fait apparaître tous les points sous forme de symboles.
• clusterProperties : Définit des propriétés personnalisées qui sont calculées à l’aide d’expressions sur tous les points de chaque cluster et ajoutées aux propriétés de chaque point de cluster.

Lorsque le clustering est activé, la source de données envoie des points de données regroupés et non regroupés aux couches pour le rendu. La source de données est en charge de la mise en cluster de centaines de milliers de points de données. Un point de données en cluster possède les propriétés suivantes :

Nom de la propriété	Catégorie	Descriptif
cluster	booléen	Indique si la fonctionnalité représente un cluster.
cluster_id	chaîne	ID unique pour le cluster qui peut être utilisé avec les fonctions DataSource, getClusterExpansionZoom et getClusterChildren des classes getClusterLeaves.
point_count	nombre	Le nombre de points que contient le cluster.
point_count_abbreviated	chaîne	Une chaîne qui abrège la valeur de point_count si elle est trop longue. (par exemple, 4 000 devient 4K)

La classe DataSource possède la fonction d’assistance suivante pour accéder à des informations supplémentaires sur un cluster à l’aide de cluster_id.

Fonction	Type de retour	Descriptif
getClusterChildren(clusterId: number)	Promise<Feature<Geometry, any> | Shape>	Récupère les enfants du cluster donné sur le niveau de zoom suivant. Ces enfants peuvent être une combinaison de formes et de sous-clusters. Les sous-clusters sont des fonctionnalités dont les propriétés correspondent à celles des clusters.
getClusterExpansionZoom(clusterId: number)	Promise<number>	Calcule un niveau de zoom à partir duquel le cluster commence à se développer ou à se décomposer.
getClusterLeaves(clusterId: number, limit: number, offset: number)	Promise<Feature<Geometry, any> | Shape>	Récupère tous les points dans un cluster. Définissez le paramètre limit de manière à retourner un sous-ensemble des points, et utilisez offset pour parcourir les points.

Quand vous représentez des données en cluster sur une carte, il est souvent plus facile d'utiliser deux ou plusieurs calques. L’exemple suivant utilise trois calques, un calque de bulles pour dessiner des cercles de couleur mis à l’échelle en fonction de la taille des clusters, un calque de symboles pour afficher la taille de cluster en tant que texte et un deuxième calque de symboles pour le rendu des points non cluster. Pour plus d’informations sur le rendu des données en cluster dans Azure Maps, consultez Clustering de données de point dans le kit SDK web.

Les données GeoJSON peuvent être importées directement dans Azure Maps à l’aide de la fonction importDataFromUrl sur la classe DataSource.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <script type='text/javascript'>
        var map, datasource;
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson';

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-160, 20],
                zoom: 1,

                //Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                //Create a data source and add it to the map.
                datasource = new atlas.source.DataSource(null, {
                    //Tell the data source to cluster point data.
                    cluster: true
                });
                map.sources.add(datasource);

                //Create layers for rendering clusters, their counts and unclustered points and add the layers to the map.
                map.layers.add([
                    //Create a bubble layer for rendering clustered data points.
                    new atlas.layer.BubbleLayer(datasource, null, {
                        //Scale the size of the clustered bubble based on the number of points in the cluster.
                        radius: [
                            'step',
                            ['get', 'point_count'],
                            20,         //Default of 20 pixel radius.
                            100, 30,    //If point_count >= 100, radius is 30 pixels.
                            750, 40     //If point_count >= 750, radius is 40 pixels.
                        ],

                        //Change the color of the cluster based on the value on the point_cluster property of the cluster.
                        color: [
                            'step',
                            ['get', 'point_count'],
                            'lime',            //Default to lime green. 
                            100, 'yellow',     //If the point_count >= 100, color is yellow.
                            750, 'red'         //If the point_count >= 750, color is red.
                        ],
                        strokeWidth: 0,
                        filter: ['has', 'point_count'] //Only rendered data points that have a point_count property, which clusters do.
                    }),

                    //Create a symbol layer to render the count of locations in a cluster.
                    new atlas.layer.SymbolLayer(datasource, null, {
                        iconOptions: {
                            image: 'none' //Hide the icon image.
                        },
                        textOptions: {
                            textField: ['get', 'point_count_abbreviated'],
                            offset: [0, 0.4]
                        }
                    }),

                    //Create a layer to render the individual locations.
                    new atlas.layer.SymbolLayer(datasource, null, {
                        filter: ['!', ['has', 'point_count']] //Filter out clustered points from this layer.
                    })
                ]);

                //Retrieve a GeoJSON data set and add it to the data source. 
                datasource.importDataFromUrl(earthquakeFeed);
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Plus de ressources

• Ajouter une calque de symbole
• Ajouter un calque de bulles
• Données de point de cluster
• Utiliser des expressions de style basées sur les données

Ajouter une carte thermique

Les cartes thermiques, également appelées « cartes de densité de points », sont un type de visualisation de données utilisé pour représenter la densité de données à l’aide d’une palette de couleurs. Souvent utilisées pour afficher les « points chauds » des données sur une carte, elles sont idéales pour restituer de grands jeux de données de points.

L’exemple suivant charge un flux GeoJSON de tous les tremblements de terre détectés par l’Institut d’études géologiques des États-Unis (USGS) au cours du mois précédent, rendu sous forme d’une carte thermique.

Avant : Bing Cartes

Dans Bing Cartes, pour créer une carte thermique, chargez le module de carte thermique. De même, le module GeoJSON est chargé pour ajouter la prise en charge des données GeoJSON.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map;
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson';

        function initMap() {
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                credentials: '<Your Bing Maps Key>',
                center: new Microsoft.Maps.Location(20, -160),
                zoom: 2,
                mapTypeId: Microsoft.Maps.MapTypeId.aerial
            });

            //Load the GeoJSON and HeatMap modules.
            Microsoft.Maps.loadModule(['Microsoft.Maps.GeoJson', 'Microsoft.Maps.HeatMap'], function () {

                //Load the GeoJSON data from a URL.
                Microsoft.Maps.GeoJson.readFromUrl(earthquakeFeed, function (shapes) {

                    //Create a heat map and add it to the map.
                    var heatMap = new Microsoft.Maps.HeatMapLayer(shapes, {
                        opacity: 0.65,
                        radius: 10
                    });
                    map.layers.insert(heatMap);
                });
            });
        }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Après : Azure Maps

Dans Azure Maps, chargez les données GeoJSON dans une source de données et connectez la source de données à une couche de carte thermique. Les données GeoJSON peuvent être importées directement dans Azure Maps à l’aide de la fonction importDataFromUrl sur la classe DataSource.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <script type='text/javascript'>
        var map;
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson';

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-160, 20],
                zoom: 1,
                style: 'satellite_road_labels',

                //Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                //Create a data source and add it to the map.
                datasource = new atlas.source.DataSource();
                map.sources.add(datasource);

                //Load the earthquake data.
                datasource.importDataFromUrl(earthquakeFeed);

                //Create a layer to render the data points as a heat map.
                map.layers.add(new atlas.layer.HeatMapLayer(datasource, null, {
                    opacity: 0.65,
                    radius: 10
                }));
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Plus de ressources

• Ajouter une couche de carte thermique
• Classe de couche de carte thermique
• Options de la couche de carte thermique
• Utiliser des expressions de style basées sur les données

Superposer une couche de mosaïques

Les couches de mosaïques vous permettent de superposer des images de grande taille qui ont été divisées en images en mosaïque plus petites qui s’alignent sur le système de mosaïque de cartes. Il s’agit d’un moyen courant de superposer des images de grande taille ou des jeux de données volumineux.

L’exemple suivant superpose une couche de mosaïques radar météo issue de l’Iowa Environmental Mesonet de l’Iowa State University qui utilise un schéma de nommage de mosaïque de zoom X, Y.

Avant : Bing Cartes

Dans Bing Cartes, les couches de mosaïques peuvent être créées à l’aide de la classe Microsoft.Maps.TileLayer.

var weatherTileLayer = new Microsoft.Maps.TileLayer({
    mercator: new Microsoft.Maps.TileSource({
        uriConstructor: 'https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/{zoom}/{x}/{y}.png'
    })
});
map.layers.insert(weatherTileLayer);

Après : Azure Maps

Dans Azure Maps, une couche de mosaïques peut être ajoutée à la carte à peu près de la même façon que n’importe quelle autre couche. URL mise en forme qui a des espaces réservés de zoom x, y ; {x}, {y}, {z} sont utilisés respectivement pour indiquer à la couche où accéder aux mosaïques. Les couches de tuiles Azure Maps prennent également en charge les balises de substitution {quadkey}, {bbox-epsg-3857} et {subdomain}.

Conseil

Dans Azure Maps, les couches peuvent être rendues sous d’autres couches, y compris les couches de la carte de base. Il est souvent souhaitable de restituer des couches de mosaïques sous les étiquettes de carte afin qu’elles soient faciles à lire. La fonction map.layers.add accepte un deuxième paramètre qui est l’ID d’une deuxième couche sous laquelle insérer la nouvelle couche. Pour insérer une couche de mosaïques sous les étiquettes de carte, vous pouvez utiliser le code suivant :

map.layers.add(myTileLayer, "labels");

//Create a tile layer and add it to the map below the label layer.
map.layers.add(new atlas.layer.TileLayer({
    tileUrl: 'https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/{z}/{x}/{y}.png',
    opacity: 0.8,
    tileSize: 256
}), 'labels');

Conseil

Les demandes de mosaïque peuvent être capturées à l’aide de l’option transformRequest de la carte. Cela vous permettra de modifier ou d’ajouter des en-têtes à la demande, si vous le souhaitez.

Plus de ressources

• Ajouter des couches de vignettes
• Classe de couche de mosaïque
• Options de la couche de mosaïques

Afficher les données du trafic

Les données de trafic peuvent être superposées à la fois à Bing et à Azure Maps.

Avant : Bing Cartes

Dans Bing Cartes, les données de trafic peuvent être superposées à la carte à l’aide du module de trafic.

Microsoft.Maps.loadModule('Microsoft.Maps.Traffic', function () {
    var manager = new Microsoft.Maps.Traffic.TrafficManager(map);
    manager.show();
});

Après : Azure Maps

Azure Maps offre plusieurs options différentes pour l’affichage du trafic. Les incidents de trafic, tels que les fermetures de route et les accidents, peuvent être affichés sous forme d’icônes sur la carte. Des routes codées en couleurs représentant le flux de trafic peuvent être superposées sur la carte ; les couleurs peuvent être modifiées par rapport à la limite de vitesse indiquée, d’un retard prévu normal ou d’un retard absolu. Les données d’incident dans Azure Maps sont mises à jour toutes les minutes et les données de transit toutes les deux minutes.

map.setTraffic({
    incidents: true,
    flow: 'relative'
});

Si vous sélectionnez l’une des icônes de trafic dans Azure Maps, des informations supplémentaires s’affichent dans une fenêtre contextuelle.

Plus de ressources

• Afficher le trafic sur la carte
• Options de superposition du trafic
• Gestion du trafic

Ajouter une superposition de sol

Bing et Azure Maps prennent tous deux en charge la superposition d’images géoréférencées sur la carte, qu’ils déplacent et mettent à l’échelle lorsque vous effectuez un panoramique et un zoom sur la carte. Dans Bing Cartes, ces superpositions sont appelées « superpositions au sol » ; dans Azure Maps, elles sont appelées « calques d’images ». Les calques d’images sont très pratiques pour créer des plans d’étage et superposer d’anciennes cartes ou images d’un drone.

Avant : Bing Cartes

Pour créer une superposition au sol dans Bing Cartes, vous devez spécifier l’URL de l’image de superposition et un cadre englobant qui lie l’image à la carte. Cet exemple superpose une image de carte de Newark New Jersey en 1922 sur la carte.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map;

        function initMap() {
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                credentials: '<Your Bing Maps Key>',
                center: new Microsoft.Maps.Location(40.740, -74.18),
                zoom: 12
            });

            var overlay = new Microsoft.Maps.GroundOverlay({
                //Create a LocationRect from the edges of the bounding box; north, west, south, east.
                bounds: Microsoft.Maps.LocationRect.fromEdges(40.773941, -74.22655, 40.712216, -74.12544),
                imageUrl: 'newark_nj_1922.jpg'
            });
            map.layers.insert(overlay);
        }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

L’exécution de ce code dans un navigateur affiche une carte ressemblant à l’image suivante :

Après : Azure Maps

Dans Azure Maps, les images géoréférencées peuvent être superposées à l’aide de la classe atlas.layer.ImageLayer. Cette classe requiert une URL vers une image et un ensemble de coordonnées pour les quatre coins de l’image. L’image doit être hébergée soit sur le même domaine, soit avec CORs activé.

Conseil

Si vous avez uniquement des informations relatives au nord, au sud, à l’est, à l’ouest et à la rotation, et non les coordonnées de chaque angle de l’image, vous pouvez utiliser la fonction statique atlas.layer.ImageLayer.getCoordinatesFromEdges.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <script type='text/javascript'>
        var map;

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-74.18, 40.740],
                zoom: 12,

                //Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                //Create an image layer and add it to the map.
                map.layers.add(new atlas.layer.ImageLayer({
                    url: 'newark_nj_1922.jpg',
                    coordinates: [
                        [-74.22655, 40.773941], //Top Left Corner
                        [-74.12544, 40.773941], //Top Right Corner
                        [-74.12544, 40.712216], //Bottom Right Corner
                        [-74.22655, 40.712216]  //Bottom Left Corner
                    ]
                }));
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Plus de ressources

• Superposer une image
• Classe de couche image

Ajouter des données KML à la carte

Les cartes Azure et Bing peuvent importer et restituer des données KML, KMZ, GeoRSS, GeoJSON et Well-Known Text (WKT) sur la carte. Azure Maps prend également en charge les fichiers GPX, GML, les fichiers CSV de données spatiales, et les services WMS (Web-Mapping Service), WMTS (Web-Mapping Tile Service) et WFS (Web Feature Service).

Avant : Bing Cartes

L’exécution de ce code dans un navigateur affiche une carte ressemblant à l’image suivante :

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map;

        function initMap() {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: '<Your Bing Maps Key>',
                center: new Microsoft.Maps.Location(41.875825, -87.627515),
                zoom: 10
            });
                
            Microsoft.Maps.loadModule('Microsoft.Maps.GeoXml', function () {
                var callback = function (dataset) {
                    if (dataset.shapes) {
                        var l = new Microsoft.Maps.Layer();
                        l.add(dataset.shapes);
                        map.layers.insert(l);
                    }
                    if (dataset.layers) {
                        for (var i = 0, len = dataset.layers.length; i < len; i++) {
                            map.layers.insert(dataset.layers[i]);
                        }
                    }
                };
                Microsoft.Maps.GeoXml.readFromUrl('myKMLFile.kml', { error: function (msg) { alert(msg); } }, callback);
            });                
        }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Après : Azure Maps

Dans Azure Maps, GeoJSON est le format de données principal utilisé dans le Kit de développement logiciel (SDK) Web, plus de formats de données spatiales peuvent être facilement intégrés à l’aide du module d’E/S spatial. Ce module présente des fonctions de lecture et d’écriture de données spatiales, et inclut un calque de données simple restituant facilement les données à partir de l’un de ces formats de données spatiales. Pour lire les données d’un fichier de données spatiales, transmettez une URL ou des données brutes sous la forme d’une chaîne ou d’un objet blob dans la fonction atlas.io.read. Ceci retourne toutes les données analysées du fichier, qui peuvent ensuite être ajoutées à la carte. Le format KML est un peu plus complexe que la plupart des autres formats de données spatiales. En effet, il inclut beaucoup plus d’informations de style. La classe SpatialDataLayer prend en charge le rendu de la plupart de ces styles. Cependant, les images d’icônes doivent être chargées dans la carte avant les données de caractéristiques, et les superpositions au sol doivent être ajoutées séparément à la carte sous forme de couches. Quand vous chargez des données par le biais d’une URL, elles doivent être hébergées sur un point de terminaison CORS, ou un service proxy doit être transmis comme option dans la fonction read.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <!-- Add reference to the Azure Maps Spatial IO module. -->
    <script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>

    <script type='text/javascript'>
        var map, datasource, layer;

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                view: 'Auto',

                //Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {
            
                //Create a data source and add it to the map.
                datasource = new atlas.source.DataSource();
                map.sources.add(datasource);

                //Add a simple data layer for rendering the data.
                layer = new atlas.layer.SimpleDataLayer(datasource);
                map.layers.add(layer);

                //Read a KML file from a URL or pass in a raw KML string.
                atlas.io.read('myKMLFile.kml').then(async r => {
                    if (r) {

                        //Check to see if there are any icons in the data set that need to be loaded into the map resources.
                        if (r.icons) {
                            //For each icon image, create a promise to add it to the map, then run the promises in parallel.
                            var imagePromises = [];

                            //The keys are the names of each icon image.
                            var keys = Object.keys(r.icons);

                            if (keys.length !== 0) {
                                keys.forEach(function (key) {
                                    imagePromises.push(map.imageSprite.add(key, r.icons[key]));
                                });

                                await Promise.all(imagePromises);
                            }
                        }

                        //Load all features.
                        if (r.features && r.features.length > 0) {
                            datasource.add(r.features);
                        }

                        //Load all ground overlays.
                        if (r.groundOverlays && r.groundOverlays.length > 0) {
                            map.layers.add(r.groundOverlays);
                        }

                        //If bounding box information is known for data, set the map view to it.
                        if (r.bbox) {
                            map.setCamera({ bounds: r.bbox, padding: 50 });
                        }
                    }
                });
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Plus de ressources

• Fonction atlas.io.read
• SimpleDataLayer
• SimpleDataLayerOptions

Ajouter des outils de dessin

Bing et Azure Maps proposent tous deux un module permettant à l’utilisateur de dessiner et de modifier des formes sur la carte à l’aide de la souris ou d’autres périphériques d’entrée. Tous deux prennent en charge le dessin de punaise, de ligne et de polygones. Azure Maps fournit également des options pour dessiner des cercles et des rectangles.

Avant : Bing Cartes

Dans Bing Cartes, le module DrawingTools est chargé à l’aide de la fonction Microsoft.Maps.loadModule. Une fois le chargement effectué, une instance de la classe DrawingTools peut être créée et la fonction showDrawingManager est appelée afin d’ajouter une barre d’outils à la carte.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
    var map, drawingManager;

    function initMap() {
        map = new Microsoft.Maps.Map('#myMap', {
            credentials: '<Your Bing Maps Key>'
        });

        //Load the DrawingTools module
        Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function () {
            //Create an instance of the DrawingTools class and bind it to the map.
            var tools = new Microsoft.Maps.DrawingTools(map);

            //Show the drawing toolbar and enable editing on the map.
            tools.showDrawingManager(function (manager) {
                //Store a reference to the drawing manager as it will be useful later.
                drawingManager = manager;
            });
        });
    }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Après : Azure Maps

Dans Azure Maps, le module d’outils de dessin doit être chargé en chargeant le code JavaScript, et les fichiers CSS doivent être référencés dans l’application. Une fois la carte chargée, une instance de la classe DrawingManager peut être créée et une instance DrawingToolbar peut être jointe.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <!-- Add references to the Azure Maps Map Drawing Tools JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/drawing/0/atlas-drawing.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/drawing/0/atlas-drawing.min.js"></script>
    
    <script type='text/javascript'>
        var map, drawingManager;

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                view: 'Auto',

                //Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.                
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                //Create an instance of the drawing manager and display the drawing toolbar.
                drawingManager = new atlas.drawing.DrawingManager(map, {
                    toolbar: new atlas.control.DrawingToolbar({ position: 'top-left' })
                });
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>

Conseil

Dans les couches Azure Maps, les outils de dessin offrent aux utilisateurs plusieurs moyens de dessiner des formes. Par exemple, lorsqu’il dessine un polygone, l’utilisateur peut cliquer pour ajouter chaque point, ou maintenir le bouton gauche de la souris enfoncé et faire glisser la souris pour dessiner un tracé. Cela peut être modifié à l’aide de l’option interactionType de DrawingManager.

Plus de ressources

• Utiliser le module Outils de dessin
• Exemples de code du module d’outils de dessin

Ressources supplémentaires

Jetez un coup d’œil aux modules du kit SDK web Azure Maps open source. Ces modules fournissent davantage de fonctionnalités et sont entièrement personnalisables.

Passez en revue les exemples de code relatifs à la migration d’autres fonctionnalités Bing Cartes :

Visualisations de données

Couche de contour

Services

Rechercher des points d’intérêt

Obtenir des informations à partir d’une coordonnée (géocode inversé)

Afficher des directions de A à B

Rechercher Autosuggest avec l’interface utilisateur jQuery

En savoir plus sur le SDK web Azure Maps.

Comment utiliser le contrôle de carte

Comment utiliser le module Outils de dessin

Exemples de code

Documentation de référence sur l’API de service du kit SDK web Azure Maps

Étapes suivantes

Découvrez la migration entre Bing Cartes et Azure Maps.

Migrer un service web