L'objectif de ce projet est de créer une carte sur laquelle on retrouvera tous les parkings publics de la ville de nantes avec le nombre de places disponibles. On essayera aussi de prendre en compte la position GPS pour afficher le parking le plus proche qui a encore des places disponibles.
Ce projet ce décline en plusieurs parties :
- Création de la structure du site (html et css)
- Création de la carte Open Street Map à l'aide du site libre http://umap.openstreetmap.fr/ et intégration dans notre site.
- Récupération des données libres de la ville de nantes qui contiennent les places de parkings disponibles sur le site https://data.nantesmetropole.fr/pages/home/ et intégration de ces données dans notre site.
Pour commencer, nous allons créer un site simple, contenant seulement deux blocks (navigation et carte) qui seront à l'intérieur du wrapper. Vous trouverez ci-dessous le code html et le code css. Ce dernier sera evidemment à placer dans un dossier "css" qui sera situé au même niveau que le fichier "index.html"
<!DOCTYPE!>
<html>
<head>
<html lang="fr">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Titre de mon site</title>
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<div class='wrapper'>
<div id='sidebar'>
<ul id='main-nav'>
<li><a href='http://lepoittevin.olivier.free.fr'>Site de Mr Le poittevin</a></li>
<li><a href='index.html'>Open Street Map</a></li>
<li><a href='#' >Liste des parkings Nantais</a>
<ul id = 'parking'>
<li>Bretagne</li>
<li>Piscine Léo Lagrange</li>
</ul>
</li>
</ul>
</div>
<div id='carte'>
</div>
</div>
</body>
</html>
Le code css est ci dessous.
/* Dans ce site, on va essayer de placer les éléments dans le flux, c'est à dire qu'il seront placés
les uns après les autres.*/
body{
/* L'image de fond sera dans le dossier img */
background: url(../img/fond_img.jpg) repeat center top transparent;
background-color: rgba(0,0,0,1); /*La couleur sera noire (0,0,0) et aura une opacité de 0.7 */
}
.wrapper{
/* Le wrapper n'aura pas de marge et occupera 100% de l'écran pour sa largeur */
display: inline-block;
margin: 0;
width: 100%;
}
#sidebar{
/* Sidebar sera positionné en ligne */
display:inline-block;
/* Définition dés marges, hauteur et largeur */
margin-top: 2%;
width: 25%;
}
#carte{
/* Sidebar sera positionné en ligne */
display:inline-block;
/* Définition dés marges, hauteur et largeur */
margin-top: 2%;
float: right ;
width: 70% ;
}
a { /* on donne une couleur à tous les liens du document */
color: #FF0000;
text-decoration: none;
text-align: left;
text-transform: uppercase; /* transforme le texte en majuscule */
}
#main-nav li {
padding: 10px 4px 6px 6px;
margin: 5px 0px;
background-image: linear-gradient(#fff,#aaa);
border-radius: 20px;
list-style: none; /*on enleve les icones de liste */
}
Dans un second temps, on va utiliser une carte déja créée ou, à défaut, créer notre propre carte. Plusieurs sites permettent de récupérer des cartes intéressantes. C'est le cas de Nantes Métropole sur son site https://data.nantesmetropole.fr/pages/home/ qui vous permettra récupérer une carte déjà créée via l'onglet "Données" et d'insérer le lien dans votre page html. Vous trouverez une liste importante de données à votre disposition. Ces données sont libres d'utilisations. C'est ce que l'on appelle Open Data
Pour cette méthode, le site de nantes métropole m'a créer la ligne de code ci-dessous grâce à l'onglet <integrer> que je peux rajouter maintenant à mon propre site entre la balises "<div id='carte'> et la balise </di> correspondante. Elle reprend la carte de Nantes avec les parkings publics et les informations sur ces derniers.
<iframe src="https://data.nantesmetropole.fr/explore/embed/dataset/244400404_parkings-publics-nantes/map/?disjunctive.libcategorie&disjunctive.libtype&disjunctive.acces_pmr&disjunctive.service_velo&disjunctive.stationnement_velo&disjunctive.stationnement_velo_securise&disjunctive.moyen_paiement&location=14,47.21365,-1.55341&basemap=jawg.streets&static=false&datasetcard=true&scrollWheelZoom=false" width="600" height="500" frameborder="0"></iframe>
Le résultat est le suivant :
En cliquant sur l'un des marqueurs, vous verrez les informations sur le site.
On peut aussi créer sa propre carte sur ce même site en récupérant les données de Nantes Métropole. Il faudra bien sûr créer votre compte pour insérer votre carte. Après avoir créer ma carte, Nantes Métropole me permet de l'utiliser via le lien :
<iframe frameborder="0" width="600" height="500" src="https://data.nantesmetropole.fr/map/parking_nantes/?headless=true&static=false&scrollWheelZoom=false"></iframe>
Le résultat est le suivant :
Dans ces deux dernier cas, la carte est hébergée sur le serveur de Nantes Métropole.
Le site https://umap.openstreetmap.fr/fr/ permet aussi de créer sa carte en important les données de nantes métropole. Il offre en outre baucoup de fonds de carte et l'on peut rajouter ses prpopres marqueurs. On pourra ensuite générer le code html de la carte, une URL compréssee ...
Pour notre objectif, cela est insuffisant, il nous faudra aussi coder la carte pour mettre en vert les parking ou il y a encore des places disponibles et en rouge ceux qui n'en n'ont plus. Le site de nantes ofrre les données des places disponibles mais ne fait pas le lien directement avec la position géographique de ces parkings. Puur cela, il nous faudra deux choses :
- Des Tuiles qui forment les bases de la carte sur lesquelles des couches sont ajoutées pour afficher des points, des reliefs, zones, popups, etc.
- Une bibliothèque javascript qui nous donnera accès à une multitude de fonction permettant d'exploiter ces tuiles.
Dans l'exemple suivant, nous allons utiliser la bibliothèque Leaflet dont vous trouverez un guide complet ici.
Pour cela, nous devons dans un premier temps créer un lien sur un fichier css qui sera base sur un serveur Leaflet puis cahrger les fonctions javascript Leaflet à l'aide des lignes suivante à intégrer entre les balises <head> et </head> du fichier html
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
On va ensuite créer notre propre fonction javascript dans le fichier "script.js" qui sera situé dans le dossier js comme dans les tutoriels sur le javascript. On appellera cette fonction carteParkingNantes()
Il restera à appeler cette fonction au bon endroit dans le fichier html. Ce qui donne :
<!DOCTYPE!>
<html>
<head>
<html lang="fr">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Titre de mon site</title>
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<div class='wrapper'>
<div id='sidebar'>
<ul id='main-nav'>
<li><a href='http://lepoittevin.olivier.free.fr'>Site de Mr Le poittevin</a></li>
<li><a href='index.html'>Open Street Map</a></li>
<li><a href='#' >Liste des parkings Nantais</a>
<ul id = 'parking'>
<li>Bretagne</li>
<li>Piscine Léo Lagrange</li>
</ul>
</li>
</ul>
</div>
<div id='carte'>
<script>carteParkingNantes()</script>
</div>
</div>
</body>
</html>
et le code ci-dessous pour le fichier script.js
function carteParkingNantes(){
//On positionne la carte en indiquant les coordonnées du centre de la carte et le zoom
//Latitude de Nantes : 47,218N, et longitude de nantes : -1,55362
//Le dernier paramètre est le zoom
var mymap = L.map('carte').setView([47.218, -1.55362], 13);
//On crée un couche reprenant les routes...
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'pk.eyJ1IjoibGVwb2l0dGV2aW4iLCJhIjoiY2ppajB0ZjAxMGlueTNycGk0ajBhd3NkYiJ9.Qy1OO4mD-nA8cGNXJRrn7g'
}).addTo(mymap);
}
Vous aurez besoin de vous créer un accessToken qui est gratuit sur le site https://www.mapbox.com/account/.
Vous avez ainsi votre carte comme dans la page web ci-dessous. On peut maintenant utiliser les fonctions javascript pour rajouter des marqueurs et des informations liées à chaque marqueur.
Vous pouvez essayer de modifier la longitude, la lattitude ou le zoom et voir le résultat. Vous pouvez aussi rajouter des polygones ou des cercles avec le code suivant.
//Ajout d'un marker sur la carte
var marker = L.marker([47.231, -1.52]).addTo(mymap);
marker.bindPopup("<b>Bonjour</b><br>C'est un marker").openPopup();
//Ajout d'un cercle sur la carte
var circle = L.circle([47.218, -1.54], { //centre du cercle (Latitude, longitude)
color: 'blue', //Couleur du bord
fillColor: '#04f', //Couleur du fond (0 rouge, 4 vert et 15 bleu)
fillOpacity: 0.4, //Opacité de 40%
radius: 500 //Rayon de 500
}).addTo(mymap);
//En cliquant sur le cercle, on aura l'affichage de "c'est un cercle"
circle.bindPopup("C'est un cercle");
//Ajout d'un polygone
var polygone = L.polygon([ //Coordonnées gps des sommets
[47.218, -1.56],
[47.199, -1.57],
[47.235, -1.58]], {
color: 'red', //Couleur du bord
fillColor: '#f40', //Couleur du fond (0 rouge, 4 vert et 15 bleu)
fillOpacity: 0.4 //Opacité de 40%
}).addTo(mymap);
//En cliquant sur le polygone, on aura l'affichage de "c'est un triangle"
polygone.bindPopup("C'est un triangle");
var popup = L.popup()
.setLatLng([47.223, -1.5555])
.setContent("Saint Stanislas")
.openOn(mymap);
}
Le résultat est le suivant :
On peut aussi rajouter des fonctions qui vont gérer des évènements, le code suivant est celle d'une fonction qui permet d'avoir la latitude et la longitude de n'importe quel point sur la carte.
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("Vous avez cliquez à la position : " + e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);
Vous pourrez trouver d'autres exemple sur https://leafletjs.com/examples.html.
Pour continuer notre projet, on va modifier la liste des paking dans la barre de menu et afficher le nombre de places encore disponibles. Pour cela, on va utiliser une fonction javascript lisParkingNantes(). On nverra plusieurs étapes pour cet ajout :
- Inséré une ligne de texte dans la liste "parking"
- Insérer plusieurs lignes via une boucle
- Récupérer les informations des places disponibles de la villes de Nantes et les insérer dans la liste.
On a déjà inséré du texte dans un élément html dans les tutoriels précédent. Le code suivant insère le mot nouveau parking dans la liste. Il faudra bien sur appeler cette fonction html après la création du block "parking".
function listeParkingNantes(){
var nouveauParking = document.createElement('li');
nouveauParking.innerHTML = "nouveau Parking";
document.getElementById('parking').appendChild(nouveauParking);
}
A vous d'essayer de rajouter plusieurs lignes via une boucle. Vous trouverez la correction complète en cliquant sur les liens suivants : scripts.js, index.html et styles.css
Le résultat est le suivant :
Pour continuer notre projet sur les places de parking disponibles, on pourrait rajouter manuellement les positions des parkings publics, ce qui serait long et laborieux. Pourquoi ne pas faire une fonction qui réutiliserait le fichier mis à disposition par nantes métropole. Fichier téléchargeable ici. Pour cela, on utilisera le fichier au format JSON (JavaScript Object Notation). Cette partie est donc sur la programmation orienté objet en javascript.
Donc, dans un premier temps, on doit recharger le fichier .Json, c'est ce que fait le code suivant :
mymap.on('click', onMapClick);