Aller au contenu principal

<mapml-viewer>

L’élément <mapml-viewer> est le principal élément à utiliser pour ajouter une carte Web dans une page. Voici comment l’utiliser pour créer une carte Web (très) simple :

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Carte Web simple [carte topographique]</title>
  <script type="module" src="web-map/mapml.js"></script>
  <style>
    html, body {
    height: 100%; /* Ces styles sont nécessaires si vous souhaitez utiliser une valeur de hauteur basée sur un pourcentage pour l’élément « mapml-viewer ». */
    }
  </style>
</head>
<body>
  <mapml-viewer projection="OSMTILE" zoom="0" lat="0.0" lon="0.0" controls>
    <map-layer label="OpenStreetMap" src="https://geogratis.gc.ca/mapml/en/osmtile/osm/" checked></map-layer>
  </mapml-viewer>
</body>
</html>

Notez que pour que l’exemple ci-dessus s’exécute correctement dans votre propre site, vous devez intégrer une copie du projet <mapml-viewer> dans le dossier de votre site. Dans cet exemple, les fichiers <mapml-viewer> sont copiés dans le dossier intitulé « web-map » du dossier racine du site. Le chemin d’accès vers ces fichiers depuis votre site dépendra de la façon dont vous structurez vos dossiers.

<mapml-viewer> est un "élément personnalisé autonome" en HTML. La présence d’un tiret (-) dans le nom de l’élément permet de distinguer un élément personnalisé autonome d’un élément HTML natif. Les éléments personnalisés autonomes sont pris en charge par tous les navigateurs récents, mais ils ne fonctionnent pas dans les anciens navigateurs (p. ex., Internet Explorer et anciennes versions d’Edge).

L’élément <mapml-viewer> contient plusieurs attributs permettant de déterminer la présentation et l’emplacement initial de la carte.

Attributs​

projection​

projection - attribut énuméré. Les valeurs sensibles à la casse sont les suivantes : "OSMTILE", "WGS84", "CBMTILE" et "APSTILE".
La projection par défaut est OSMTILE.

  • OSMTILE correspond à Web Mercator, un système de référence des coordonnées projetées largement utilisé, ce qui signifie que la plage de zoom de la « pyramide de pavés » va de 0 à 23 (pavé d’une taille minimale d’environ 2,4 m).

  • WGS84 représente le système de référence de coordonnées projetées « pseudo-plate carrée », où les unités des axes horizontal et vertical sont exprimées en degrés décimaux (et non en mètres). Dans le système WGS84, le niveau de zoom 0 contient deux pavés couvrant chacun un hémisphère de la Terre. Le système WGS84 compte 21 niveaux de zoom (de 0 à 20).

  • CBMTILE désigne le modèle de disposition en grille standard de fait de l’Infrastructure canadienne de données géospatiales (ICDG) définie par Ressources naturelles Canada; ce modèle est fondé sur la projection conique conforme de Lambert (EPSG:3978). Les niveaux de zoom sont fondés sur un dénominateur d’échelle cartographique numérique (p. ex., 10 000 correspond à une échelle cartographique de 1:10 000), selon une résolution en pixels sélectionnée. Par conséquent, les pavés de niveaux de zoom successifs ne s’imbriquent pas exactement (comme c’est le cas dans OSMTILE, WGS84 et APSTILE).

  • APSTILE est basé sur le système de projection stéréographique polaire de l’Alaska (EPSG:5936), et compte 20 niveaux de zoom (de 0 à 19).

  • D’autres projections sont possibles, au moyen d’API de projections personnalisées.

zoom​

zoom - entier non négatif. Cette valeur définit le niveau de zoom initial de la carte et est obligatoire. La valeur est mise à jour lorsque la carte cesse de se déplacer. Pour obtenir une vue du monde à petite échelle, utilisez une valeur faible. Utilisez des valeurs supérieures pour obtenir une vue à grande échelle (cartes de petites zones). La valeur maximale dépend de la projection en question et de la source des données. Bon nombre des sources de données cartographiques offrent des niveaux de zoom limités.

lat​

lat - nombre réel de la latitude. Cette valeur établit la latitude initiale du centre de la carte. La valeur est mise à jour lorsque la carte cesse de se déplacer. Sur Terre, les latitudes vont de -90.0 (Sud) à 90.0 (Nord). De nombreuses projections ne permettent pas d’afficher toutes les latitudes et la plupart permettent de contrôler ou de limiter la distorsion dans un certain nombre d’emplacements. En particulier, OSMTILE (Web Mercator) peut afficher seulement le contenu compris entre les latitudes -84 à 84.

lon​

lon - nombre réel de la longitude. Cette valeur établit la longitude initiale du centre de la carte. La valeur est mise à jour lorsque la carte cesse de se déplacer. Sur Terre, les longitudes vont de -180.0 (Ouest) à 180.0 (Est). Les mêmes commentaires formulés précédemment concernant la distorsion s’appliquent. Faites attention, le nom de cet attribut est « lon » et non « long »; votre carte ne fonctionnera pas correctement si vous utilisez « long ».

controls​

controls - attribut booléen. Permet d’activer (s’il est présent) ou de désactiver (s’il est omis) les commandes de la carte. Dans le langage HTML, les attributs booléens n’ont pas les valeurs « true » ou « false » comme tel. Ils ont la valeur implicite « true » si l’attribut existe, et la valeur implicite « false » si l’attribut n’existe pas. Les commandes par défaut peuvent ne pas être utiles pour votre carte, vous pouvez donc les désactiver et créer vos propres commandes.

controlslist​

controlslist - attribut énuméré. Les valeurs possibles sont les suivantes : "nofullscreen", "nolayer", "noreload", "noscale" et "nozoom". Il se peut qu’à l’occasion, vous ne souhaitiez pas que les utilisateurs aient accès à une commande en particulier. Vous pouvez alors réduire l’ensemble des commandes offertes automatiquement (si vous avez utilisé l’attribut booléen controls ).

height​

height - la hauteur de la carte, en pixels. Doit être un nombre entier sans unités.

width​

width - la largeur de la carte, en pixels. Doit être un nombre entier sans unités.

static​

static - un attribut "booléen". Il désactive l'interaction avec le clavier, ainsi que les fonctions de zoom et de déplacement de la carte lorsqu'il est présent. Lorsqu'il n'est pas présent ou qu'il est supprimé, ces fonctions sont à nouveau activées.

Spécifications​

Spécification
Élément MapML « map »
Élément HTML « map »

Exigences​

Signaler les problèmes liés à ces exigences sur GitHub

exigence amélioration peu pratique indécis en cours de discussion

Spéc.VisualiseurAPI
Rendu des couches de base (5.1)
Intégrer un visualiseur de cartes interactives, à l’aide du balisage HTML (5.1.1)
completcompletcomplet
Gérer une carte par défaut pour une région donnée (5.1.2)
Non prévuNon prévuNon prévu
Afficher une carte de base sans JavaScript (5.1.5)
completlimité
Afficher le contenu d’une carte dans la langue préférée de l’utilisateur (5.1.6)
completcomplet
Interpréter les lieux et les positions sur une carte (5.3)
Sélectionner la vue d’une carte à partir d’un point de latitude et de longitude (5.3.1)
completcompletcomplet
Afficher les pavés de carte définis dans divers systèmes de coordonnées courants (5.3.3)
completcompletcomplet
Reprojeter les données des pavés de carte dans une nouvelle projection ou dans la vue Globe (5.3.4)
en cours de discussionaucun
Sauvegarder l’emplacement ou l’exporter dans une autre application (5.3.5)
limitélimité
Navigation des utilisateurs (vue panoramique et zoom) (5.4)
Faire un zoom sur la carte indépendamment du reste de la page (5.4.1)
completcomplet
Afficher une vue panoramique de la carte (5.4.2)
completcomplet
Encapsuler ou dupliquer des pavés de données au moment d’afficher une vue panoramique du monde (5.4.4)
aucunlimité
Style personnalisé (5.5)
Appliquer un style personnalisé aux commandes d’une carte (5.5.2)
aucunaucun
Choisir d’afficher les commandes par défaut ou non (5.5.3)
completcomplet
Contrôler la vue de la carte affichée et répondre aux actions de l’utilisateur (6.2)
S’abonner aux avis concernant les événements liés à une carte (6.2.3)
en attentelimitécomplet
Déplacer la carte pour afficher un emplacement donné (6.2.5)
completcomplet