LeafletJS - Marqueurs

Pour marquer un seul emplacement sur la carte, le dépliant fournit des marqueurs. Ces marqueurs utilisent un symbole standard et ces symboles peuvent être personnalisés. Dans ce chapitre, nous verrons comment ajouter des marqueurs et comment les personnaliser, les animer et les supprimer.

Ajout d'un marqueur simple

Pour ajouter un marqueur à une carte à l'aide de la bibliothèque JavaScript Leaflet, suivez les étapes ci-dessous -

Step 1 - Créer un Mapobjet en passant un élément < div > (chaîne ou objet) et des options de mappage (facultatif).

Step 2 - Créer un Layer objet en passant l'URL de la vignette souhaitée.

Step 3 - Ajoutez l'objet de couche à la carte à l'aide du addLayer() méthode de la Map classe.

Step 4 - Instancier le Marker classe en passant un latlng objet représentant la position à marquer, comme illustré ci-dessous.

// Creating a marker
var marker = new L.Marker([17.385044, 78.486671]);

Step 5 - Ajoutez l'objet marqueur créé dans les étapes précédentes à la carte à l'aide du addTo() méthode de la Marker classe.

// Adding marker to the map
marker.addTo(map);

Exemple

Le code suivant définit le marqueur sur la ville nommée Hyderabad (Inde).

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet sample</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>
   
   <body>
      <div id = "map" style = "width:900px; height:580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [17.385044, 78.486671],
            zoom: 10
         }
         // Creating a map object
         var map = new L.map('map', mapOptions);
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         
         // Adding layer to the map
         map.addLayer(layer);
         
         // Creating a marker
         var marker = L.marker([17.385044, 78.486671]);
         
         // Adding marker to the map
         marker.addTo(map);
      </script>
   </body>
   
</html>

Il génère la sortie suivante -

Lier les fenêtres contextuelles au marqueur

Pour lier un simple popup affichant un message à un marqueur, suivez les étapes ci-dessous -

Step 1 - Créer un Mapobjet en passant un élément < div > (chaîne ou objet) et des options de mappage (facultatif).

Step 2 - Créer un Layer objet en passant l'URL de la vignette souhaitée.

Step 3 - Ajoutez l'objet de couche à la carte à l'aide du addLayer() méthode de la Map classe.

Step 4 - Instancier le Marker classe en passant un latlng objet représentant la position à marquer.

Step 5 - Attachez une fenêtre contextuelle au marqueur en utilisant bindPopup() comme indiqué ci-dessous.

// Adding pop-up to the marker
marker.bindPopup('Hi Welcome to Tutorialspoint').openPopup();

Step 6 - Enfin, ajoutez le Marker objet créé lors des étapes précédentes sur la carte à l'aide de addTo() méthode de la Marker classe.

Exemple

Le code suivant place le marqueur sur la ville Hyderabad (Inde) et y ajoute une pop-up.

<!DOCTYPE html>
<html>
   <head>
      <title>Binding pop-Ups to marker</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>
   
   <body>
      <div id = "map" style = "width:900px; height:580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [17.385044, 78.486671],
            zoom: 15
         }
         var map = new L.map('map', mapOptions); // Creating a map object
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer);         // Adding layer to the map
         var marker = L.marker([17.438139, 78.395830]);    // Creating a Marker
         
         // Adding popup to the marker
         marker.bindPopup('This is Tutorialspoint').openPopup();
         marker.addTo(map); // Adding marker to the map
      </script>
   </body>
   
</html>

Il génère la sortie suivante

Options de marqueur

Lors de la création d'un marqueur, vous pouvez également passer un marker optionsvariable en plus de l'objet latlang. À l'aide de cette variable, vous pouvez définir des valeurs pour diverses options du marqueur telles que l'icône, glissé, clavier, titre, alt, zInsexOffset, opacité, riseOnHover, riseOffset, volet, glissé, etc.

Pour créer une carte à l'aide des options de carte, vous devez suivre les étapes ci-dessous -

Step 1 - Créer un Mapobjet en passant un élément < div > (chaîne ou objet) et des options de mappage (facultatif).

Step 2 - Créer un Layer objet en passant l'URL de la vignette souhaitée.

Step 3 - Ajoutez l'objet de couche à la carte à l'aide du addLayer() méthode de la Map classe.

Step 4 - Créez une variable pour markerOptions et spécifiez des valeurs pour les options requises.

Créer un markerOptions objet (il est créé comme un littéral) et définit des valeurs pour les options iconUrl et iconSize.

// Options for the marker
var markerOptions = {
   title: "MyLocation",
   clickable: true,
   draggable: true
}

Step 5 - Instancier le Marker classe en passant un latlng objet représentant la position à marquer et l'objet d'options, créé à l'étape précédente.

// Creating a marker
var marker = L.marker([17.385044, 78.486671], markerOptions);

Step 6 - Enfin, ajoutez le Marker objet créé lors des étapes précédentes sur la carte à l'aide de addTo() méthode de la Marker classe.

Exemple

Le code suivant fixe le marqueur sur la ville Hyderabad (Inde). Ce marqueur est cliquable, déplaçable avec le titreMyLocation.

<html>
   <head>
      <title>Marker Options Example</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>
   
   <body>
      <div id = "map" style = "width:900px; height:580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [17.385044, 78.486671],
            zoom: 10
         }
         // Creating a map object
         var map = new L.map('map', mapOptions);
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
        
         // Adding layer to the map
         map.addLayer(layer);
         
         // Creating a Marker
         var markerOptions = {
            title: "MyLocation",
            clickable: true,
            draggable: true
         }
         // Creating a marker
         var marker = L.marker([17.385044, 78.486671], markerOptions);
         
         // Adding marker to the map
         marker.addTo(map);
      </script>
   </body>
   
</html>

Il génère la sortie suivante

Icônes personnalisées de marqueur

Au lieu de l'icône par défaut fournie par la bibliothèque de dépliants, vous pouvez également ajouter votre propre icône. Vous pouvez utiliser les étapes suivantes pour ajouter une icône personnalisée à la carte au lieu de l'icône par défaut.

Step 1 - Créer un Mapobjet en passant un élément < div > (chaîne ou objet) et des options de mappage (facultatif).

Step 2 - Créer un Layer objet en passant l'URL de la vignette souhaitée.

Step 3 - Ajoutez l'objet de couche à la carte à l'aide du addLayer() méthode de la Map classe.

Step 4 - Créez une variable pour markerOptions et spécifiez des valeurs pour les options requises -

  • iconUrl - En tant que valeur de cette option, vous devez passer un String objet spécifiant le chemin de l'image que vous souhaitez utiliser comme icône.

  • iconSize - En utilisant cette option, vous pouvez spécifier la taille de l'icône.

Note - En plus de ces derniers, vous pouvez également définir des valeurs pour d'autres options telles que iconSize, shadowSize, iconAnchor, shadowAnchor et popupAnchor.

Créez une icône personnalisée en utilisant L.icon() en passant la variable d'options ci-dessus comme indiqué ci-dessous.

// Icon options
var iconOptions = {
   iconUrl: 'logo.png',
   iconSize: [50, 50]
}

// Creating a custom icon
var customIcon = L.icon(iconOptions);

Step 5- Créez une variable pour markerOptions et spécifiez des valeurs pour les options requises. En plus de ceux-ci, spécifiez l'icône en transmettant la variable d'icône créée à l'étape précédente en tant que valeur.

// Options for the marker
var markerOptions = {
   title: "MyLocation",
   clickable: true,
   draggable: true,
   icon: customIcon
}

Step 6 - Instancier le Marker classe en passant un latlng objet représentant la position à marquer et l'objet d'options créé à l'étape précédente.

// Creating a marker
var marker = L.marker([17.438139, 78.395830], markerOptions);

Step 7 - Enfin, ajoutez le Marker objet créé lors des étapes précédentes sur la carte à l'aide de addTo() méthode de la Marker classe.

Exemple

Le code suivant définit le marqueur sur l'emplacement de Tutorialspoint. Ici, nous utilisons le logo de Tutorialspoint au lieu du marqueur par défaut.

<!DOCTYPE html>
<html>
   <head>
      <title>Marker Custom Icons Example</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>
   
   <body>
      <div id = "map" style = "width:900px; height:580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [17.438139, 78.395830],
            zoom: 10
         }
         // Creating a map object
         var map = new L.map('map', mapOptions);
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

         // Adding layer to the map
         map.addLayer(layer);
         
         // Icon options
         var iconOptions = {
            iconUrl: 'logo.png',
            iconSize: [50, 50]
         }
         // Creating a custom icon
         var customIcon = L.icon(iconOptions);
         
         // Creating Marker Options
         var markerOptions = {
            title: "MyLocation",
            clickable: true,
            draggable: true,
            icon: customIcon
         }
         // Creating a Marker
         var marker = L.marker([17.438139, 78.395830], markerOptions);
         
         // Adding popup to the marker
         marker.bindPopup('Hi welcome to Tutorialspoint').openPopup();
         
         // Adding marker to the map
         marker.addTo(map);
      </script>
   </body>
   
</html>

Il génère la sortie suivante

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved