Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Un titre</title>
- <meta charset="UTF-8">
- <!-- Téléchargement de la bibliothèque Leaflet.js -->
- <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
- <!-- Importation du plugin Leaflet.ajax-->
- <script src='plugins/leaflet.ajax.min.js'></script>
- <!-- Téléchargement des instructions CSS de Leaflet, qui serviront à styliser les éléments de l'interface de la carte -->
- <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
- <!-- Ajout d'information de style pour la page entière et le DIV ID='Carte'-->
- <style>
- html, body {height: 100%; margin: 0;}
- #Carte {width: 100%; height: 100%;}
- </style>
- </head>
- <body>
- <!-- Création d'un <div> qui contiendra notre carte-->
- <div id='Carte'></div>
- <!-- Début du script JavaScript-->
- <script>
- // Création d'une variable "maCarte" qui contiendra... ma carte.
- maCarte = L.map('Carte')
- // On donne une position lat lng et un niveau de zoom par défaut
- maCarte.setView([45.5,-73.5], 10)
- // On définit notre fond de carte qui téléchargera les tuiles avec l'API Mapbox, vous devez d'abord aller chercher "VOTRE_CLÉ" sur https://account.mapbox.com
- fondDeCarte = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/{z}/{x}/{y}?access_token=VOTRE_CLÉ')
- // J'attache ce fond de plan à ma carte
- fondDeCarte.addTo(maCarte)
- // Ajout de la référence pour les données
- maCarte.attributionControl.addAttribution('Fond de plan OSM & MapBox. Données © <a href="http://statisticscanada.ca/">Statistiques Canada</a>');
- // Utilisation du plugin Leaflet.ajax pour importer un fichier json externe de manière asynchrone
- couche = new L.GeoJSON.AJAX('data/Montreal_v0743.geojson', {
- weight: .5,
- opacity: .5,
- color: 'white',
- dashArray: '3',
- fillOpacity: 0.9,
- fillColor: 'grey'
- })
- couche.addTo(maCarte)
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement