Dans ce tuto, on va voir comment rapidement créer une carte à l’aide de Leaflet et de donnes GeoJSON.
Vous pourrez retrouver un autre exemple plus complexe, avec l’utilisation des plugin markerCluster.js et awesomeMarker.js ici.
Préparation des données GeoJSON
Les données GeoJson sont un format de donnée conçu pour représenter des entités géographiques simples , basé sur la notation d’objet JavaScript (JSON). La syntaxe est simple à comprendre, on peut d’ailleurs se baser sur l’exemple fourni sur Wikipedia.
Il peut contenir différents « types », mais le plus courant sont les collections de données ou listes d’entités, les « FeatureCollection« . A l’intérieur de celles-ci, on retrouve des « properties« , à l’intérieur desquelles on peut mettre tout ce qu’on veut, et enfin des types de géométrie suivants: Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon et GeometryCollection
Un fichier GeoJSON à part ou à l’intérieur du fichier js
La syntaxe est un peu différente si l’on utilise des données GeoJSON dans un fichier à part ou si on intègre directement toutes ces données dans un fichier js;
Dans un fichier GeoJSON
Dans un fichier GeoJSON à part, on ouvre l’accolade directement et on insère toutes ses données. Voici un exemple :
{
"type": "FeatureCollection", "features": [
{ "type": "Feature", "properties": { "Examen": "CCL 18", "Prelevement": "2 tubes EDTA 4,5 ml (bouchon violet)", "Laboratoire": "Service d'Hématologie Biologique / Secteur de cultures", "Chu": "CHU Estaing", "Adresse": "1 place Raymond et Lucie Aubrac", "Cp": "63003 Clermont Ferrand Cedex 1", "Professeur": "Pr Berger Marc", "Tel": "Tel : 04 73 75 03 68", "Fax": "Fax : 04 73 75 06 83", "Mail": "mberger@chu-clermontferrand.fr", "Url": "http://www.cetl.net", "Mode": "Tube", "CssName":"ccl18", "AutresExamens": "Autres examens pratiqués dans cet hôpital", "Gaucher5":"Glucocérébrosidase" }, "geometry": { "type": "Point", "coordinates": [3.108547, 45.7848475] } }, //ici je mets autant de features que souhaité, et on referme le crochet et l'acolade ] }
Vous voyez ici qu’on peut vraiment mettre ce qu’on veut comme: l’adresse, le code postal, la ville le nom etc.. le tout est de respecter la syntaxe : « clé » : « valeur ». Vous pouvez facilement vérifier la validité de votre fichier en allant sur cette adresse.
Ensuite à l’intérieur de son fichier, on peut l’appeler de la manière suivante :
var promise = $.getJSON("examen.json"); promise.then(function(data) {
});
Vous pouvez construire tout un fichier GeoJSON à partir de cet outil en ligne. Cliquez sur la carte pour créer vos marqueurs et il va vous créer automatiquement les « features » au format GeoJSON.
Dans un fichier js
Si on veut tout avoir à dispo dans son fichier js, c’est à peu près la même chose, sauf qu’on va tout insérer dans une variable :
var site = { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "Ville": "Algérie", "Url": "https://www.sanofi.dz/", }, "geometry": { "type": "Point", "coordinates": [1.659626,28.033886] } }, //Ici la suite de tous vos feature ] }
var geojsonFeature = { "type": "Feature", "properties": { "name": "Coors Field", "amenity": "Baseball Stadium", "popupContent": "This is where the Rockies play!" }, "geometry": { "type": "Point", "coordinates": [-104.99404, 39.75621] } };
Notre exemple de carte personnalisée
On va donc partir d’un exemple simple, comprenant une ville et un url dans les properties, des « points » et leurs « coordonnées » dans les données geometry. L’exemple de la doc est assez clair, je le remets ici :
var map = L.map('map') //création de la carte .addLayer(cartoDb) .setView([46.85, 2.3518], 6); // LIGNE 14 var geojsonMarkerOptions = { //définition des marqueurs "cercle" radius: 8, fillColor: "#525ca3", color: "#fff", weight: 1, opacity: 1, fillOpacity: 0.8, iconSize: 0,
};
L.geoJSON(site, { // appel de nos données GeoJSON pointToLayer: function (feature, latlng) { //création du maruqueur var marker = L.circleMarker(latlng, geojsonMarkerOptions); return marker; }, onEachFeature: onEachFeature // ici, l'appel de notre fonction onEachFeature
}).addTo(map); // on ajoute le tout à la carte
function onEachFeature(feature, layer) {
if (feature.properties && feature.properties.Url) { // ici je crée une fonction pour rendre les maruqueur directement cliquables plutot que d'ouvrir une popup layer.on('click',function(){ var url= feature.properties.Url; // feature.properties.Url va chercher l'url dans mes features window.open(url, '_blank'); // le window.location = feature.properties.Url ouvrirait l'url dans la même fenêtre. ici j'utilise donc window.open pour l'ouvrir dans une nouvelle fenêtre }) } if( feature.properties && feature.properties.Ville){ //enfin, ici ma fonction pour montrer le nom de la ville dans une popup qui s'ouvre au hover layer.bindPopup(feature.properties.Ville); layer.on('mouseover', function (e) { this.openPopup(); }); layer.on('mouseout', function (e) { this.closePopup(); }); } } });
C’est donc un exemple simple, largement inspiré de la doc officielle. Le style des popup est modifié avec le css suivant :
.leaflet-popup-content-wrapper,.leaflet-popup-content { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; } .leaflet-popup-close-button { display: none; } .leaflet-popup {left: -100px !important;border:2px solid #525ca3} /* I moved the "tip" to the right location, but don't succeed in making it visible. */ .leaflet-popup-tip-container { top: 0px !important; overflow: auto important!; } .leaflet-popup-tip { box-shadow: none !important; background-clip: none !important; } .leaflet-popup:before { content: ""; position: absolute; border: 13px solid transparent; border-right-color: white; right: 0px; bottom:0px;
}
Le rendu final
Et voici le rendu de ma carte sur CodePen. Ouvrez l’éditeur en grand pour voir le rendu.
