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>
- <!-- 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" />
- <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,0], 2)
- // On définit notre fond de carte qui téléchargera les tuiles avec l'API OSM
- fondDeCarte = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png')
- // J'attache ce fond de plan à ma carte
- fondDeCarte.addTo(maCarte)
- // Je mets des données spatiales dans un objet JS
- polygones = {
- "type": "FeatureCollection",
- "features": [
- {
- "type": "Feature",
- "properties": {
- "cat": "A"
- },
- "geometry": {
- "type": "Polygon",
- "coordinates": [
- [
- [
- 36.5625,
- 64.47279382008166
- ],
- [
- 38.67187499999999,
- 36.5978891330702
- ],
- [
- 80.5078125,
- 56.36525013685606
- ],
- [
- 36.5625,
- 64.47279382008166
- ]
- ]
- ]
- }
- },
- {
- "type": "Feature",
- "properties": {
- "cat": "B"
- },
- "geometry": {
- "type": "Polygon",
- "coordinates": [
- [
- [
- -41.484375,
- 38.272688535980976
- ],
- [
- -45.3515625,
- 19.642587534013032
- ],
- [
- -8.7890625,
- 33.43144133557529
- ],
- [
- -26.3671875,
- 56.17002298293205
- ],
- [
- -41.484375,
- 38.272688535980976
- ]
- ]
- ]
- }
- },
- {
- "type": "Feature",
- "properties": {
- "cat": "C"
- },
- "geometry": {
- "type": "Polygon",
- "coordinates": [
- [
- [
- -92.8125,
- 56.17002298293205
- ],
- [
- -104.4140625,
- 52.482780222078226
- ],
- [
- -99.84374999999999,
- 45.583289756006316
- ],
- [
- -91.40625,
- 47.517200697839414
- ],
- [
- -92.8125,
- 43.068887774169625
- ],
- [
- -103.0078125,
- 39.36827914916011
- ],
- [
- -93.515625,
- 32.54681317351517
- ],
- [
- -81.9140625,
- 47.754097979680026
- ],
- [
- -92.8125,
- 56.17002298293205
- ]
- ]
- ]
- }
- }
- ]
- }
- // J'ajoute les données GeoJSON à la carte
- couche = L.geoJSON(polygones, {
- style: {
- "color": '#D32D22',
- "fillColor": '#D32D22',
- "weight": 2,
- "fillOpacity": 0.5,
- "dashArray": 3
- }
- })
- couche.addTo(maCarte)
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement