Cette semaine encore, nous allons encore voir la cr\u00e9ation\nd\u2019une carte interactive avec la librairie Leaflet.<\/p>\n\n\n\n
La carte pr\u00e9sent\u00e9e aujourd\u2019hui utilise les groupes de calques,\nainsi que le contr\u00f4le de calques, afin de r\u00e9aliser une carte historique de la\nligne 2 du tramway d\u2019\u00cele-de-France.<\/p>\n\n\n\n
Afin d\u2019expliquer le d\u00e9coupage des donn\u00e9es et les diff\u00e9rents\ncalques, un bref historique de la ligne doit \u00eatre fait.<\/p>\n\n\n\n
Jusqu\u2019en 1993, une partie des voies emprunt\u00e9es par la ligne\nactuelle \u00e9tait exploit\u00e9e par la SNCF (le tramway actuel est exploit\u00e9 par la\nRATP) sous le nom de \u00ab Ligne de Puteaux \u00e0 Issy-Plaine \u00bb.<\/p>\n\n\n\n
En 1997, entre en service le T2, qui empreinte le m\u00eame\nparcours, plus une extension au nord. Toutes les stations de l\u2019ancienne ligne\nsous r\u00e9utilis\u00e9es, certaines changeant de nom, et 4 nouvelles sont cr\u00e9\u00e9es.<\/p>\n\n\n\n
En 2006, une section du parcours est d\u00e9vi\u00e9e.<\/p>\n\n\n\n
En 2009, la ligne est prolong\u00e9e une premi\u00e8re fois au sud,\navec l\u2019ajout de 4 nouvelles stations.<\/p>\n\n\n\n
En 2012, la ligne est prolong\u00e9e une deuxi\u00e8me fois vers le\nnord, rajoutant 7 nouvelles stations.<\/p>\n\n\n\n\n\n\n\n
Les trac\u00e9s<\/a> et les coordonn\u00e9es des stations<\/a> proviennent du site d\u2019Open data d\u2019\u00cele-de-France Mobilit\u00e9s<\/a>. Pour le trac\u00e9 de la voie avant la d\u00e9viation de 2006, je l\u2019ai \u00e9dit\u00e9 moi-m\u00eame, \u00e0 l\u2019aide du site geojson.io<\/a>.<\/p>\n\n\n\n Pour \u00e9viter la r\u00e9p\u00e9tition des trac\u00e9s, je les ai s\u00e9par\u00e9s en 5\nfichiers GeoJSON distincts :<\/p>\n\n\n\n Concernant les stations, comme il y a eu r\u00e9utilisation des\nanciennes stations avec certaines changeant de nom, celle-ci ont \u00e9t\u00e9 r\u00e9p\u00e9t\u00e9es. \u00c0\nla fin on se retrouve avec 4 diff\u00e9rents fichiers GeoJSON :<\/p>\n\n\n\n Le niveau de zoom et le centre de cette carte ont \u00e9t\u00e9\nd\u00e9termin\u00e9s afin de montrer l\u2019ensemble du parcours initial de la ligne.<\/p>\n\n\n\n On initialise donc la map :<\/p>\n\n\n Pour cette carte j\u2019ai d\u00e9cid\u00e9 d\u2019utiliser le fond de carte Wikimedia,\nque l\u2019on rajoute comme suit :<\/p>\n\n\n Comme pour la carte pr\u00e9sent\u00e9e pr\u00e9c\u00e9demment (carte des rues\nsans m\u00e9gots) les donn\u00e9es seront charg\u00e9es en utilisant le plugin Leaflet AJAX.<\/p>\n\n\n\n Pour chaque \u00e9tape de la vie de la ligne (voir les dates\ndonn\u00e9es dans la partie d\u2019historique) il y aura deux calques : un pour la\nligne et un pour les stations.<\/p>\n\n\n\n La fonction de style des lignes, appel\u00e9e par l\u2019option \u00ab style \u00bb\ndu calque, est la suivante :<\/p>\n\n\n Pour les stations, la fonction de style, appel\u00e9e par l\u2019option\n\u00ab pointToLayer \u00bb, est comme suit :<\/p>\n\n\n Les calques se cr\u00e9ent alors avec le code suivant :<\/p>\n\n\n Aux calques de stations, on rajoute \u00e9galement un tooltip,\nqui affichera le nom de la station, qui est stock\u00e9 dans la propri\u00e9t\u00e9 \u00ab name \u00bb\nde la feature<\/em>, avec la m\u00e9thode \u00ab bindTooltip \u00bb :<\/p>\n\n\n Pour les stages de la vie de la ligne n\u00e9cessitant l\u2019utilisation du contenu de plusieurs fichiers GeoJSON, on utilise la technique de prendre des p\u2019tits bouts d\u2019trucs pour les assembler ensemble (\ud83c\udfb6<\/a>).<\/p>\n\n\n\n Cela se fait en utilisant la m\u00e9thode \u00ab addUrl \u00bb\ndes calques cr\u00e9\u00e9s :<\/p>\n\n\n Un groupe de calques se d\u00e9clare simplement en pr\u00e9cisant dans\nun array les calques \u00e0 utiliser :<\/p>\n\n\n L\u2019ordre dans l\u2019array correspond \u00e0 l\u2019ordre dans lequel les\ncalques seront rendus, donc les calques les plus \u00ab bas \u00bb sur l\u2019axe Z doivent\n\u00eatre indiqu\u00e9s en premier.<\/p>\n\n\n\n On rajoute ensuite le groupe correspondant au trac\u00e9 de la ligne Puteaux \u2013 Issy-Plaine \u00e0 la carte :<\/p>\n\n\n La fonction de cr\u00e9ation du contr\u00f4le prend 3 objets en entr\u00e9e :<\/p>\n\n\n\n Dans notre cas, les deux premiers objets sont vides, et le troisi\u00e8me ne contient qu\u2019un seul r\u00e9glage, indiquant que le contr\u00f4le doit toujours \u00eatre affich\u00e9 \u00ab d\u00e9pli\u00e9 \u00bb :<\/p>\n\n\n Une fois le contr\u00f4le cr\u00e9\u00e9 et rajout\u00e9 \u00e0 la carte, on lui ajoute les diff\u00e9rents groupes de calques, en pr\u00e9cisant pour chacun le texte \u00e0 utiliser dans le contr\u00f4le :<\/p>\n\n\n Et voil\u00e0, maintenant vous avez une carte historique, avec\ndes tooltips !<\/p>\n\n\n\n Comme d\u2019habitude, la version finale de cette carte est disponible sur mon site<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Cette semaine encore, nous allons encore voir la cr\u00e9ation d\u2019une carte interactive avec la librairie Leaflet. La carte pr\u00e9sent\u00e9e aujourd\u2019hui utilise les groupes de calques, ainsi que le contr\u00f4le de calques, afin de r\u00e9aliser une carte historique de la ligne … Continuer la lecture Mise en place de la carte de base<\/h1>\n\n\n\n
\nvar center = [48.847886021323966, 2.258634567260742];\nvar zoom = 12;\n\nvar map = L.map('map',{\n\tcenter: center,\n\tzoom: zoom\n});\n<\/pre><\/div>\n\n\n\nL.tileLayer('https:\/\/maps.wikimedia.org\/osm-intl\/{z}\/{x}\/{y}{r}.png', {\n\tattribution: '<a href="https:\/\/wikimediafoundation.org\/wiki\/Maps_Terms_of_Use">Wikimedia maps<\/a> | Map data \u00a9 <a href="http:\/\/openstreetmap.org\/copyright">OpenStreetMap contributors<\/a>',\n\tminZoom: 1,\n\tmaxZoom: 19\n}).addTo(map);\n<\/pre><\/div>\n\n\n\n\n\n\nAjout des donn\u00e9es GeoJSON<\/h1>\n\n\n\n
\nfunction styleLine() {\n\treturn {color: '#a0006e'};\n}\n<\/pre><\/div>\n\n\n\nfunction styleStops(latlng) {\n\treturn L.circleMarker(latlng,{\n\t\tfillOpacity: 1,\n\t\tfillColor: '#fff',\n\t\tcolor: '#000',\n\t\tweight: 2,\n\t\tradius: 6\n\t});\n}\n<\/pre><\/div>\n\n\n\n\/\/ Calque de la ligne originelle\nvar line_pip = new L.GeoJSON.AJAX('trace-puteaux_issy-plaine.geojson', {\n\tstyle: function(feature) {\n\t\treturn styleLine();\n\t}\n});\n\n\/\/ Calque des arr\u00eats originels\nvar stops_pip = new L.GeoJSON.AJAX('gares-puteaux_issy-plaine.geojson', {\n\tpointToLayer: function(feat, latlng) {\n\t\treturn styleStops(latlng);\n\t}\n});\n<\/pre><\/div>\n\n\n\nvar stops_pip = new L.GeoJSON.AJAX('gares-puteaux_issy-plaine.geojson', {\n\tpointToLayer: function(feat, latlng) {\n\t\treturn styleStops(latlng);\n\t}\n}).bindTooltip(function(layer) {\n\treturn layer.feature.properties.name\n});\n<\/pre><\/div>\n\n\n\nvar line_init = new L.GeoJSON.AJAX('trace-puteaux_issy-plaine.geojson', {\n\tstyle: function(feature) {\n\t\treturn styleLine();\n\t}\n});\n\nline_init.addUrl('trace-nord_init.geojson');\n<\/pre><\/div>\n\n\nCr\u00e9ation des groupes de calques<\/h1>\n\n\n\n
\nvar pip = L.layerGroup([line_pip, stops_pip]);\n<\/pre><\/div>\n\n\n
\npip.addTo(map);\n<\/pre><\/div>\n\n\n
Cr\u00e9ation du contr\u00f4le des calques<\/h1>\n\n\n\n
\nvar control = L.control.layers({},{},{collapsed:false}).addTo(map);\n<\/pre><\/div>\n\n\n\ncontrol.addBaseLayer(pip, 'Puteaux \u2013 Issy-Plaine');\ncontrol.addBaseLayer(init, 'Initial');\ncontrol.addBaseLayer(dev_2006, '2006');\ncontrol.addBaseLayer(extension_1, 'Premi\u00e8re extension');\ncontrol.addBaseLayer(extension_2, 'Deuxi\u00e8me extension');\n<\/pre><\/div>\n\n\n
\n\n\n\n