Si on vous parle de solution pour int\u00e9grer une carte sur\nvotre site, la premi\u00e8re qui vous vient \u00e0 l\u2019esprit est surement Google Maps.\nMais il existe plusieurs solutions open-source et gratuites.<\/p>\n\n\n\n
Je vous ai d\u00e9j\u00e0 parl\u00e9 d\u2019OpenLayers<\/a>, avec laquelle j\u2019ai d\u00e9j\u00e0 refait une carte r\u00e9alis\u00e9e pr\u00e9c\u00e9demment avec jQuery<\/a>.<\/p>\n\n\n\n Mais OpenLayers n\u2019est pas la librairie open-source la plus utilis\u00e9e. La premi\u00e8re place revient \u00e0 Leaflet<\/a> (voir sources en fin d\u2019article).<\/p>\n\n\n\n Pour m\u2019exercer, j\u2019ai d\u00e9cider de cr\u00e9er une carte interactive\ndu m\u00e9tro de Paris avec Leaflet.<\/p>\n\n\n\n Pour des questions de lisibilit\u00e9 des diff\u00e9rentes lignes de m\u00e9tro, j\u2019ai choisi d\u2019utiliser le fond de carte Stamen Toner Lite<\/a>.<\/p>\n\n\n\n Pour le trac\u00e9 des lignes<\/a>, j\u2019ai utilis\u00e9 des donn\u00e9es fournies par le STIF sur opendata.stif.info.<\/p>\n\n\n\n Les codes couleur<\/a> des diff\u00e9rentes lignes proviennent de la RATP sur data.ratp.fr.<\/p>\n\n\n\n Les coordonn\u00e9es des stations<\/a> proviennent elles aussi du STIF, et de Wikip\u00e9dia pour les stations fant\u00f4mes<\/a>.<\/p>\n\n\n\n Le logo utilis\u00e9 comme marqueur de position d\u2019une station\nprovient du site de la RATP.<\/p>\n\n\n\n\n\n\n\n Les donn\u00e9es ci-dessus vont \u00eatre rassembl\u00e9es dans deux FeatureCollection<\/em> GeoJSON (une pour le trac\u00e9 des lignes et une pour la position des stations), qui pour des questions de praticit\u00e9 seront stock\u00e9s dans des fichiers s\u00e9par\u00e9s.<\/p>\n\n\n\n Chaque ligne est repr\u00e9sent\u00e9e par une feature<\/em> avec une geometry<\/em>\nde type MultiLineString<\/em>. Chacune de\nces features<\/em> poss\u00e8de deux\npropri\u00e9t\u00e9 : \u00ab line \u00bb, qui contient le num\u00e9ro de ligne, et\n\u00ab color \u00bb, qui contient le code hexa de la couleur de la ligne.<\/p>\n\n\n\n Chaque station est repr\u00e9sent\u00e9e par une feature<\/em> avec une geometry<\/em>\nde type Point<\/em>. Les propri\u00e9t\u00e9s de\nchacune de ces features<\/em> sont\n\u00ab name \u00bb (nom de la station) et \u00ab about \u00bb (lignes\ndesservant la station).<\/p>\n\n\n\n\n\n\n\n Dans tous les exemples suivants, la carte sera affich\u00e9e dans une div avec l\u2019ID \u00ab map \u00bb, de dimensions de 500 pixels de large sur 375 pixels de haut.<\/p>\n\n\n\n La carte est initialis\u00e9e sur le point z\u00e9ro des routes de France, avec un niveau de zoom \u00e0 12. Ces deux r\u00e9glages sont stock\u00e9s dans deux variables : <\/p>\n\n\n Ensuite, on initialise la map :<\/p>\n\n\n L\u2019\u00e9tape suivante consiste \u00e0 ajouter le fond de carte :<\/p>\n\n\n Maintenant, il ne nous reste plus qu’\u00e0 ajouter nos objets GeoJSON :<\/p>\n\n\n Nous obtenons alors la carte ci-dessous :<\/p>\n\n\n\n\u00c9l\u00e9ments utilis\u00e9s dans la carte<\/h2>\n\n\n\n
Mise forme des donn\u00e9es<\/h2>\n\n\n\n
Trac\u00e9 des lignes<\/h3>\n\n\n\n
Coordonn\u00e9es des stations<\/h3>\n\n\n\n
Mise en place de la carte de base<\/h2>\n\n\n\n
\nvar center = [48.8502, 2.3488];\nvar zoom = 12;\n<\/pre><\/div>\n\n\n
\nvar map = L.map('map',{\n center: center,\n zoom: zoom\n});\n<\/pre><\/div>\n\n\n\nL.tileLayer('https:\/\/stamen-tiles-{s}.a.ssl.fastly.net\/toner-lite\/{z}\/{x}\/{y}{r}.{ext}', {\n attribution: 'Map tiles by <a href="http:\/\/stamen.com">Stamen Design<\/a>, <a href="http:\/\/creativecommons.org\/licenses\/by\/3.0">CC BY 3.0<\/a> \u2014 Map data \u00a9 <a href="https:\/\/www.openstreetmap.org\/copyright">OpenStreetMap<\/a> contributors',\n subdomains: 'abcd',\n minZoom: 0,\n maxZoom: 20,\n ext: 'png'\n}).addTo(map);\n<\/pre><\/div>\n\n\n\nL.geoJson(metro_lines).addTo(map);\n\nL.geoJson(metro_stations).addTo(map);\n<\/pre><\/div>\n\n\n