Suite

Afficher le lien dans une popup avec Leaflet ?

Afficher le lien dans une popup avec Leaflet ?


Je travaille avec la bibliothèque JavaScript Leaflet. Il devrait y avoir une option pour cliquer sur ma carte et afficher une fenêtre contextuelle. J'ai déjà un code pour ça :

var popup = L.popup(); function onMapClick(e) { popup .setLatLng(e.latlng) .setContent(e.latlng.toString() + "
Visitez Google") .openOn(map); } map.on('click', onMapClick);

Ce code fonctionne, mais ma question est la suivante : comment puis-je mettre un lien vers cette fenêtre contextuelle ? Par exemple, il devrait y avoir un lien appelé "Visitez Google". Lorsque vous cliquez sur ce lien, il devrait ouvrir www.google.com (surprendre). Je pense que cela devrait être dans le .setContent(e.latlng.toString()) tag, car je peux y ajouter un texte comme Visitez Google (comme vous pouvez le voir).

Des idées ?


Vous fournissez du html dans setContent()

var popup = L.popup(); function onMapClick(e) { popup .setLatLng(e.latlng) .setContent(e.latlng.toString() + 'Visitez Google"') .openOn(map); } map.on('click', onMapClick);

Leaflet est l'un des nombreux frameworks qui existent pour créer des cartes Web interactives. Je l'aime parce qu'il est gratuit et open source, qu'il est léger et flexible et qu'il peut être facilement combiné avec d'autres outils pour étendre ses capacités. Plus important encore, pour un atelier comme celui-ci, vous pouvez créer des cartes de dépliants sans vous inscrire à aucun type de compte, ce qui en fait un cadre idéal pour les nouveaux apprenants.

Leaflet est une bibliothèque JavaScript. JavaScript est un langage de programmation largement utilisé dans le développement Web moderne, généralement en combinaison avec HTML et CSS. HTML (ou Hyper Text Markup Language) fournit le sens et la structure de la page Web, CSS (Cascading Style Sheets) fournit le style et JavaScript fournit la fonctionnalité.

Nous allons travailler un peu avec les trois. L'écriture et l'édition de fichiers HTML, CSS et JS nécessitent un éditeur de texte. Je recommande Atom.io. Il est gratuit et disponible sur les systèmes d'exploitation Windows, Mac et Linux.


Créer une carte interactive avec Leaflet et OpenStreetMap

Je savais depuis un moment que la carte interactive du monde montrant certains de mes clients du logiciel d'analyse des traces de sang était plutôt lente. Je savais également que j'utilisais une version très obsolète de l'API de Google pour afficher les données. Hier, j'ai décidé d'y jeter un œil pour voir ce que je devais faire pour le réparer.

Mon premier arrêt a été la page Google sur le passage à la v3 de l'API. Apparemment, j'avais besoin d'obtenir une nouvelle clé API en m'inscrivant à quelque chose avec mon compte Google. Google a ajouté des limites d'utilisation et suit désormais absolument tout (oui, ils l'ont probablement déjà fait, mais maintenant c'est plus explicite). Je devais aussi me demander si je pouvais ou non utiliser les cartes sur un site commercial.

Je n'aime pas les obstacles et j'aime la simplicité, alors j'ai décidé de chercher des alternatives. Je me suis souvenu d'avoir regardé OpenStreetMap (OSM) il y a plusieurs années quand j'ai construit ma carte à l'origine et j'ai décidé qu'elle n'était pas assez bonne. J'ai décidé de vérifier à nouveau pour voir comment ils allaient. Mon comment les choses changent!

Parce que je suis un bon développeur paresseux (je veux dire par là que j'évite d'écrire des choses quand elles existent déjà, sont bien codées et maintenables), ma première pensée a été de prendre un plugin WordPress et de l'utiliser pour ma carte. J'ai essayé le plugin OSM – OpenStreetMap. Bien que cela fonctionnait en quelque sorte pour ce que j'essayais de faire, ce n'était pas aussi personnalisable que je le souhaiterais, cela semblait trop lourd pour une carte sur un site, et cela m'a lié à WordPress (ce que mon autre site n'a pas déplacé à encore).

Ma prochaine pensée était de rechercher une bibliothèque JavaScript avec une API agréable pour intégrer et gérer la plupart des tâches lourdes. En fouillant sur le site OSM, j'ai rencontré OpenLayers. Il avait l'air assez puissant et contient une tonne de choses dans son API. Je l'ai téléchargé (10M ?) et j'ai jeté un coup d'œil, mais je voulais vraiment quelque chose de plus simple. Puis j'ai trouvé Leaflet. Exactement ce dont j'avais besoin. Petite, simple, excellente documentation et quelques exemples vraiment simples.

Même si j'ai dû réviser certains concepts JavaScript, jQuery et JSON et mdashthings que j'utilise rarement, j'ai fini par rechercher des possibilités et remplacer ma carte Google par une version OpenStreetMap/Leaflet en quelques heures seulement. Il est désormais beaucoup plus rapide et plus simple à personnaliser.

Nouvelle carte OpenStreetMap/Dépliant

Dans cet article, je vais parcourir un exemple qui montre comment :

Par exemple, je vais créer une carte montrant les pays dans lesquels j'ai vécu ou voyagé pendant un mois ou plus. L'exemple se compose de trois fichiers et de deux images :

  • index.html – la page elle-même
  • maps/leaf-demo.js – JavaScript pour créer la carte et la remplir avec des marqueurs
  • maps/markers.json – une liste de marqueurs avec leur latitude et longitude et une URL à afficher
  • maps/images/pin24.png et pin48.png – la broche à afficher (une pour l'affichage normal, une pour la rétine)

(Les fichiers utilisés dans cet exemple sont disponibles sur GitHub. Notez que la version sur GitHub peut sembler différente de celle décrite ici car elle a été mise à jour pour utiliser des versions plus récentes des bibliothèques. Je recommande de l'utiliser au lieu de copier le code sur cette page.)


Implémentation de la solution SIG à l'aide d'une brochure

Un système d'information géographique (SIG) est conçu pour stocker, récupérer, gérer, afficher et analyser tous les types de données géographiques et spatiales liées aux positions à la surface de la terre.

Fonctionnalités du logiciel SIG

  • Cartes et couches - Il permet à l'utilisateur de créer une carte interactive en utilisant ses propres données.
  • Visualisation - Un utilisateur peut définir des paramètres de police/style/opacité pour les points, les lignes, les zones, les étiquettes, les légendes et les dessins. Les éléments de dessin sont personnalisables.
  • Géocodage - Les outils flexibles de mappage des broches prennent en charge le géocodage par adresse, code postal, ville et coordonnées.

Dépliant – Leaflet est la principale bibliothèque JavaScript open source pour les cartes interactives adaptées aux mobiles. Voici quelques démos Leaflet.js. Il possède presque toutes les fonctionnalités de carte en ligne dont vous pourriez avoir besoin.

  • Couches de tuiles
  • Surgir
  • Marqueurs
  • Couches vectorielles telles que polylignes, polygones, cercles ou rectangles

Utilisation du dépliant pour les solutions SIG avec google map

1. Téléchargez dépliant.css et dépliant.js.

2. Téléchargez la brochure-google.js.

3. Incluez le fichier dépliant.css puis dépliant.js dans la section d'en-tête du document.

4. Ajoutez la référence de l'API google map à la section d'en-tête du document.

5. Mettez un élément div à l'intérieur de la balise body pour afficher la carte.

6. Réglez la hauteur et la largeur de la division de la carte.

7. Créez un objet cartographique, dites-lui de vivre dans ‘map’ div et donnez les valeurs initiales de latitude, longitude et zoom.

8. Ajoutez un calque google et définissez l'option de calque.

9. Ajoutons maintenant un marqueur à la carte

10. Attachons maintenant quelques informations au marqueur.

11. Gestion des événements - Vous pouvez contrôler le flux d'informations sur la carte à l'aide d'événements. Ci-dessous quelques exemples

Exemple de code :

<title>Dépliant Web Map</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>

<!– définir les styles de largeur et de hauteur pour la carte –>
<style>
#carte <
largeur : 1020px
hauteur: 760px
>
</style>
<!–Inclure l'API google maps –>
<script src=”http://maps.google.com/maps/api/js?key=Votre clé API&sensor=false”></script>
<script src=”leaflet-google.js”></script>
</tête>

// crée un objet de carte, lui dit de vivre dans ‘map’ div et donne la latitude, la longitude et les valeurs de zoom initiales
var map = L.map(‘map’).setView([40.0654443, -75.679283], 20)
googlelayer = nouveau L.Google (‘HYBRID’)
map.addLayer(googlelayer)
// ajout d'un marqueur
var marker = L.marker([40.0654443, -75.679283]).addTo(map)
marker.bindPopup(“<b>Ignatiuz <br>Software</b>”).openPopup()

// Traiter l'événement de la carte
// cliquez sur l'événement.
map.on(‘click’, fonction (e) <
var popup = L.popup()
surgir
.setLatLng(e.latlng)
.setContent(“Vous avez cliqué sur la carte à ” + e.latlng.toString())
.openOn(carte)
>)
// événement zoomend.
map.on(‘zoomend’, fonction (e) <
alerte(“zoom fin “)
>)

Merci, tous les lecteurs vous verront dans le prochain blog. Jusque-là, continuez à lire.

Vous avez une question ou besoin de plus d'informations sur la brochure des solutions SIG ? Contactez-nous dès aujourd'hui au +1 -484-876-1867 ou envoyez-nous un message.


Ce guide étape par étape vous permettra de vous familiariser rapidement avec les bases de Leaflet, notamment la configuration d'une carte Leaflet, l'utilisation de marqueurs, de polylignes et de fenêtres contextuelles et la gestion des événements.

Préparation de votre page

Avant d'écrire du code pour la carte, vous devez effectuer les étapes de préparation suivantes sur votre page :

Incluez le fichier CSS Leaflet dans la section head de votre document :

Inclure le fichier JavaScript de la brochure après CSS de la brochure :

Mettez un élément div avec un certain identifiant où vous voulez que votre carte soit :

Assurez-vous que le conteneur de la carte a une hauteur définie, par exemple en la définissant en CSS :

Vous êtes maintenant prêt à initialiser la carte et à faire des choses avec.

Mise en place de la carte

Créons une carte du centre de Londres avec de jolies tuiles Mapbox Streets. Tout d'abord, nous allons initialiser la carte et définir sa vue sur nos coordonnées géographiques choisies et un niveau de zoom :

Par défaut (comme nous n'avons transmis aucune option lors de la création de l'instance de carte), toutes les interactions avec la souris et le toucher sur la carte sont activées, et elle dispose de commandes de zoom et d'attribution.

Notez que l'appel setView renvoie également l'objet map — la plupart des méthodes Leaflet agissent ainsi lorsqu'elles ne renvoient pas de valeur explicite, ce qui permet un chaînage pratique de méthodes de type jQuery.

Ensuite, nous ajouterons une couche de tuiles à ajouter à notre carte, dans ce cas, il s'agit d'une couche de tuiles Mapbox Streets. La création d'une couche de tuiles implique généralement de définir le modèle d'URL pour les images de tuiles, le texte d'attribution et le niveau de zoom maximal de la couche. Dans cet exemple, nous utiliserons les tuiles mapbox/streets-v11 de l'API Static Tiles de Mapbox (pour utiliser les tuiles de Mapbox, vous devez également demander un jeton d'accès). Étant donné que cette API renvoie des tuiles 512x512 par défaut (au lieu de 256x256), nous devrons également le spécifier explicitement et décaler notre zoom d'une valeur de -1.

Assurez-vous que tout le code est appelé après l'inclusion div et brochure.js. C'est tout ! Vous avez maintenant une carte Leaflet fonctionnelle.

Il convient de noter que Leaflet est indépendant du fournisseur, ce qui signifie qu'il n'impose pas un choix particulier de fournisseurs pour les tuiles. Vous pouvez essayer de remplacer mapbox/streets-v11 par mapbox/satellite-v9 et voir ce qui se passe. De plus, Leaflet ne contient même pas une seule ligne de code spécifique au fournisseur, vous êtes donc libre d'utiliser d'autres fournisseurs si vous en avez besoin (nous suggérons cependant Mapbox, il est magnifique).

Chaque fois que vous utilisez quelque chose basé sur OpenStreetMap, un attribution est obligatoire conformément à l'avis de droit d'auteur. La plupart des autres fournisseurs de tuiles (tels que Mapbox, Stamen ou Thunderforest) nécessitent également une attribution. Assurez-vous de donner du crédit là où le crédit est dû.

Marqueurs, cercles et polygones

Outre les couches de tuiles, vous pouvez facilement ajouter d'autres éléments à votre carte, notamment des marqueurs, des polylignes, des polygones, des cercles et des fenêtres contextuelles. Ajoutons un marqueur :

L'ajout d'un cercle est le même (sauf pour spécifier le rayon en mètres comme deuxième argument), mais vous permet de contrôler son apparence en passant des options comme dernier argument lors de la création de l'objet :

L'ajout d'un polygone est aussi simple :

Travailler avec des popups

Les popups sont généralement utilisés lorsque vous souhaitez attacher des informations à un objet particulier sur une carte. Leaflet a un raccourci très pratique pour cela :

Essayez de cliquer sur nos objets. La méthode bindPopup attache une fenêtre contextuelle avec le contenu HTML spécifié à votre marqueur afin que la fenêtre contextuelle apparaisse lorsque vous cliquez sur l'objet, et la méthode openPopup (pour les marqueurs uniquement) ouvre immédiatement la fenêtre contextuelle attachée.

Vous pouvez également utiliser des fenêtres contextuelles comme calques (lorsque vous avez besoin de quelque chose de plus que d'attacher une fenêtre contextuelle à un objet) :

Ici, nous utilisons openOn au lieu de addTo car il gère la fermeture automatique d'une fenêtre contextuelle précédemment ouverte lors de l'ouverture d'une nouvelle, ce qui est bon pour la convivialité.

Faire face aux événements

Chaque fois que quelque chose se passe dans Leaflet, par ex. l'utilisateur clique sur un marqueur ou le zoom de la carte change, l'objet correspondant envoie un événement auquel vous pouvez vous abonner avec une fonction. Il vous permet de réagir à l'interaction de l'utilisateur :

Chaque objet a son propre ensemble d'événements — voir la documentation pour plus de détails. Le premier argument de la fonction d'écoute est un objet événement — il contient des informations utiles sur l'événement qui s'est produit. Par exemple, l'objet d'événement de clic sur la carte (e dans l'exemple ci-dessus) a la propriété latlng qui est l'emplacement auquel le clic s'est produit.

Améliorons notre exemple en utilisant une fenêtre contextuelle au lieu d'une alerte :

Essayez de cliquer sur la carte et vous verrez les coordonnées dans une fenêtre contextuelle. Voir l'exemple complet &rarr

Maintenant, vous avez appris les bases de Leaflet et pouvez commencer à créer des applications cartographiques immédiatement ! N'oubliez pas de jeter un œil à la documentation détaillée ou à d'autres exemples.


Travailler avec le vecteur KML

KML (Keyhole Markup Language) est un format populaire pour les entités SIG vectorielles en raison de son association avec Google Earth et Google Maps. Le KML est simplement formaté en XML selon une spécification ouverte, précédemment maintenue par Google, mais désormais inscrite dans une norme OGC. Bien que KML puisse définir le placement des couches raster, nous nous concentrerons sur le KML vectoriel dans cette leçon.

La balise XML clé derrière KML est le repère. Cela définit une caractéristique géographique, un symbole et des informations supplémentaires qui peuvent apparaître dans une fenêtre contextuelle. Vous pouvez voir des repères si vous enregistrez l'exemple de fichier KML et l'ouvrez dans un éditeur de texte. Ce n'est pas le fichier le plus propre, mais il fera l'affaire pour voir un repère :

Ensuite, vous pouvez référencer le KML dans une couche, comme ceci :

Une chose à savoir est qu'Omnivore convertit le KML au format GeoJSON avant de l'afficher (voir la section suivante de la leçon pour plus d'informations sur GeoJSON). Ainsi, votre carte peut ne pas être en mesure d'afficher tous les styles définis à l'origine dans le KML. Si votre KML contient une sorte de symbole d'image personnalisé pour les points, vous devrez écrire du code Leaflet pour appliquer cette image aux marqueurs. Notez, cependant, que le code ci-dessus apporte la description KML et applique ce texte dans une fenêtre contextuelle. Ceci est accompli en utilisant la méthode bindPopup sur la couche.

Encore une fois, ne vous inquiétez pas de mémoriser toute la syntaxe. Dans la plupart des scénarios, vous devriez simplement pouvoir modifier l'exemple ci-dessus pour vous connecter à votre propre KML.


Fenêtres contextuelles de redimensionnement d'ArcGIS Online

Je me demandais si quelqu'un savait comment redimensionner les fenêtres contextuelles dans ArcGIS Online. Actuellement, la boîte contextuelle est de taille par défaut (petite) et mon texte est coupé dans la boîte contextuelle, ce qui semble mauvais et n'est pas très intuitif. Si quelqu'un pouvait m'indiquer la bonne direction pour redimensionner la boîte, ce serait génial.

Nan. Mais ils y réfléchissent :

Il me semble me souvenir d'avoir lu que la fenêtre contextuelle pouvait être ancrée sur un côté de l'écran, ce qui implique une plus grande taille.

Peut-être que c'était un script sur geonet où j'ai lu à ce sujet ?

Il existe un widget personnalisé que vous pouvez utiliser appelé "Pop Up Panel" que j'ai trouvé extrêmement utile, mais vous avez besoin de Web App Builder pour les développeurs pour pouvoir l'utiliser et d'un moyen d'héberger vos propres applications.

Bien qu'il n'y ait pas de moyen de redimensionner les fenêtres contextuelles sans widgets/applications de développement personnalisés, il existe un moyen de contourner ce problème. Vous pouvez insérer du code HTML dans les champs attributaires des cartes dans ArcGIS en ligne, et il s'affichera comme dans n'importe quelle page Web au lieu d'afficher le code/texte.

Avec Python, vous pouvez écrire un script simple pour ajouter un </ br> (saut de ligne) aux endroits appropriés dans votre texte pour l'empêcher de casser au milieu d'un mot. De plus, si vous essayez d'insérer un lien et que vous souhaitez afficher un lien hypertexte au lieu d'une longue URL sous forme de texte, vous pouvez utiliser quelque chose comme :


Affichage du lien dans une popup avec Leaflet ? - Systèmes d'information géographique

Aujourd'hui, je voudrais vous présenter le package de dépliants pour R. Ce package facilite l'intégration et le contrôle des cartes Leaflet dans R. En d'autres termes : vous pouvez créer de magnifiques cartes Leaflet avec vos données depuis R, sans aucune connaissance de JavaScript , HTML, CSS, etc… Cela semble incroyable, n'est-ce pas ? C'est comme ça que ça marche…
Commençons par préparer quelques données :

Le moyen le plus rapide d'accéder à des données arbitraires consiste à charger le package raster et à télécharger les limites administratives d'un pays de votre choix à l'aide de la fonction getData(). Notez que les frontières des pays ne contiennent aucune donnée supplémentaire (comme la population, le revenu, etc.). Puisque nous voulons plus tard visualiser certaines données sur notre carte à l'aide de couleurs et de fenêtres contextuelles, j'ai ajouté une nouvelle colonne au SpatialPolygonsDataFrame et l'ai remplie de données aléatoires à l'aide de la fonction rnorm.

Créer la carte

Le moyen le plus simple de créer une page HTML contenant une carte de dépliant consiste à utiliser RMarkdown. Pour cela, allez dans Nouveau fichier -> RMarkdown -> HTML. Voici à quoi ressemble le document RMarkdown final :

Comme vous pouvez le voir le code est court et assez intuitif :

brochure() initialise une nouvelle carte de brochure, des tuiles/fond de carte peuvent être ajoutés à l'aide des fonctions addTiles() ou addProviderTiles(). Dans mon exemple, j'ai inclus un fond de carte fourni par CartoDB appelé “Positron”. Une fois que vous avez défini la vue et le niveau de zoom à l'aide de la fonction setView(), vous pouvez superposer vos données avec la fonction addPolygons(). Et c'est tout ! Cliquez sur KnitHTML et visualisez le résultat final dans votre navigateur :

J'espère que vous avez apprécié cette introduction plutôt courte dans le très puissant dépliant pour R. Si vous êtes intéressé par des tutoriels plus détaillés ou des exemples de code, veuillez laisser un commentaire ci-dessous ou visitez cette brochure officielle pour R – Introduction.


Cartographie des sciences humaines: un guide sur les SIG et les outils de cartographie pour les bourses d'études en sciences humaines numériques

Cette ressource est destinée à aider les chercheurs en sciences humaines numériques qui souhaitent intégrer l'analyse géospatiale dans leurs efforts humanistes.

La cartographie et les systèmes d'information géographique (SIG) peuvent être des outils puissants pour soutenir ou augmenter la recherche en sciences humaines, mais tous les outils ne sont pas adaptés à chaque projet de sciences humaines numériques. Une archive communautaire interactive, par exemple, nécessite un outil qui donne la parole à plusieurs individus plutôt que de laisser sa paternité s'effacer au second plan, et dont les barrières techniques à la participation ne sont pas insurmontables. Les questions de paternité sont moins pressantes pour une carte des déplacements et des interactions des artistes dans le Paris fin-de-siècle, mais un tel projet s'épanouirait mieux s'il était construit sur un outil facilitant les animations en accéléré et les fenêtres pop-up interactives afficher les œuvres d'art en cours de production. Une carte représentant une correspondance personnelle peut ne nécessiter que des données ponctuelles, mais pour un examen des frontières politiques ou linguistiques changeantes, des données basées sur la couverture sont indispensables. Chaque projet de sciences humaines géospatiales définit l'« analyse géospatiale » un peu différemment et exige des capacités différentes de sa plate-forme technique. Il est essentiel de choisir le bon outil pour le travail, afin que votre projet puisse fonctionner avec la technologie au lieu de lutter contre elle.

le Tableau de référence fournit un aperçu des capacités de plusieurs principaux outils SIG et de cartographie, en tenant compte des besoins et des préoccupations particuliers de la recherche humaniste. le Guide de terrain détaillé (liens à droite) fournit une analyse approfondie de chaque outil, avec une évaluation de ses utilisations idéales dans les humanités numériques, ainsi qu'une évaluation réaliste de ses avantages et de ses coûts. Ensemble, ces deux ressources fournissent les informations nécessaires pour choisir le bon outil de cartographie/SIG pour votre projet d'humanités numériques.


Comment utiliser Google Maps dans Leaflet ?

Cet article aide l'utilisateur à afficher la carte sur la page à l'aide de Leaflet. En utilisant le dépliant, nous pouvons rendre la carte dans un élément HTML et nous pouvons définir le marqueur sur la carte. Leaflet fonctionne efficacement sur toutes les principales plates-formes de bureau et mobiles.

introduction

Le dépliant est une bibliothèque JavaScript open source pour les cartes Web intelligentes. Il est léger, basique et adaptable, et il s'agit très probablement de la bibliothèque de cartographie open source grand public à l'heure actuelle. Le dépliant est créé ou développé par Vladimir Agafonkin (actuellement de MapBox) et différents supporters.

Qu'est-ce que la brochure :

Cartes nettes avec zoom, couches de tuiles, WMS, marqueurs, fenêtres contextuelles, couches vectorielles (polylignes, polygones, cercles, etc.), superpositions d'images et GeoJSON et couches d'entités que vous fournissez. Il gère différentes tâches essentielles telles que la modification des données pour la couche cartographique et les connexions de la souris, et il est tout sauf difficile à étendre avec des plugins. Il fonctionnera également admirablement transversalement sur la plupart des types de gadgets. Voir Anatomie d'une carte Web pour un prologue des types de cartes Web les plus largement reconnus, ce pour quoi Leaflet est utile.
Fournissez toutes les informations pour vous! Le dépliant est un système d'affichage et d'interface avec les données cartographiques, cependant, il dépend de vous de fournir ces données, y compris un fond de carte. Le dépliant n'est pas un SIG, malgré le fait qu'il peut très bien être associé à des dispositifs comme CartoDB pour des capacités de type SIG. Au cas où vous auriez besoin d'ajouter une opportunité de forme, de communication, de changements et de projections cartographiques.

Avant de commencer !

Vous devriez avoir l'éditeur de texte comme Sublime Text ou Notepad++.

Faisons une carte !

La carte ci-dessus ne nécessite que quelques éléments :

La bibliothèque JavaScript Leaflet

<div> élément pour contenir la carte

Un style de hauteur spécifié pour la division de la carte.

Un court script pour créer la carte dans ce <div>

Téléchargement de la brochure

Vous pouvez télécharger la brochure sur

Que diriez-vous de nous concentrer sur le code dans cette balise <script> près de la fin.
Qu'avons-nous fait?

    • Création d'une variable de carte
      • Utilisation de L.map() pour instancier l'objet carte.
        • passer cet objet à l'id de la div, où nous avons besoin de la carte pour rendre
          • Utilisez la fonction setView() pour focaliser la carte initiale
          • Utilisez la fonction L.tileLayer() pour transmettre l'URL des images de tuiles de carte. pour créer une couche de base de tuiles de carte Par exemple, dans cet article, nous utilisons le fond de carte de Google. Cependant, il existe de nombreuses alternatives. // est un format que Leaflet utilise pour découvrir les tuiles au bon zoom, x et y facilite. (Voir Anatomie d'une carte Web). De même, nous avons indiqué un couple
            d'alternatives :

          Nous avons utilisé la méthode addTo () pour ajouter cette couche de tuiles à la carte, que nous venons de créer.

          Étapes pour utiliser le dépliant sur votre page :

          Incluez d'abord les fichiers css et js dans votre page

          Créer un élément div avec un identifiant

          Assurez-vous que le conteneur de la carte a une hauteur définie, par exemple.
          # maCarte

          Ajouter une section de script sur votre page

          Mise en place de la carte
          Initialisez d'abord la carte et définissez les coordonnées géographiques et un niveau de zoom faites ce code dans window.onload
          var mymap = L.map('map').setView([51.505, -0.09], 13)

          L.tileLayer('http://.google.com/vt/lyrs=m&x=&y=&z=', <
          maxZoom : 20,
          sous-domaines : ['mt0', 'mt1', 'mt2', 'mt3']
          >).addTo(mymap)

          définir un marqueur sur la carte :

          Pour définir le marqueur, nous allons transmettre les coordonnées géographiques à L.marker et l'ajouter à la carte

          var marker=L.marker([51.5, -0.09]).addTo(mymap)

          Définir une fenêtre contextuelle sur le marqueur :
          Pour définir la fenêtre contextuelle, nous transmettrons le message à bindPopup et ouvrirons la fenêtre contextuelle


          marker.bindPopup('Je suis un marqueur.')
          marqueur.openPopup()

          Définir un marqueur d'icône personnalisé :

          Faire l'icône


          var customicon = L.icon( <
          iconUrl : 'customicon.png', //fichier image
          iconSize : [38, 95], // taille de l'icône
          >)

          Ajouter cette icône sur la carte

          var marqueur= L.marqueur([51,5, -0,09], ).addTo(mymap)
          marker.bindPopup('Je suis un marqueur.')
          marqueur.openPopup()

          Nous pouvons également définir le marqueur comme contenu HTML plutôt que comme icône d'image. Pour cela, nous allons créer Div Icon puis l'ajouter à la carte


          var marqueurOptions = <
          icône : nouvelle L.DivIcon( <
          className : 'my-div-icon',
          html : '<b style >icon</b>'
          >)
          >

          J'ai utilisé du CSS en ligne, bien qu'un CSS externe puisse également être utilisé.

          Ajoutez maintenant la variable “markerOption” dans le marqueur

          var marker= L.marker([51.5, -0.09], markerOptions).addTo(mymap)

          marker.bindPopup(‘Je suis un marqueur.’)
          marqueur.openPopup()

          nous pouvons également définir le popup de marqueur comme contenu html plutôt que comme chaîne ou texte. Pour cela, ajoutez du html dans la fenêtre contextuelle et vous pouvez également définir la largeur et la hauteur de cette fenêtre contextuelle


          var marker= L.marker([51.5, -0.09]).addTo(mymap)
          marker.bindPopup("<div ><h2>Londres, Royaume-Uni<h/h2><h3>Mercredi,
          14h00</h3><h3>Généralement nuageux</h3></div>", <
          largeur max : 560
          >)
          marqueur.openPopup()

          À propos de l'auteur:
          Zeeshan Raza Khan travaille en tant que développeur de logiciels chez QSS Technosoft avec une expérience de 1,4 ans. Avoir les connaissances .Net, PHP, jQuery, JavaScript.