<\/p>\n\n\n\n
Cette carte interactive des rues sans m\u00e9gots de Paris<\/a> a \u00e9t\u00e9 r\u00e9alis\u00e9e suite \u00e0 la suite de la consultation de la page d\u2019actualit\u00e9s de la ville de Paris concernant cette action de propret\u00e9, qui ne contenait qu\u2019une image pour pr\u00e9senter la cartographie des diff\u00e9rentes rues concern\u00e9es par cette op\u00e9ration.<\/p>\n\n\n\n La liste des rues ou sections de rues proviennent de la page d\u2019actualit\u00e9s<\/a>.<\/p>\n\n\n\n Le trac\u00e9 des rues provient de Paris Data<\/a>, le site d\u2019open data de la Ville de Paris.<\/p>\n\n\n\n Je suis parti des donn\u00e9es en CSV, pour en extraire plus facilement les rues participantes. Pour les rues concern\u00e9es seulement en partie j\u2019ai ensuite supprim\u00e9 manuellement les sections inutiles, en passant par geojson.io<\/a> pour m\u2019assurer que je ne supprimais pas des parties couvertes par l\u2019op\u00e9ration.<\/p>\n\n\n\n Chaque feature<\/em> de\nrue a au moins une propri\u00e9t\u00e9 \u00ab name \u00bb. Pour les rues ne participant\nque sur une section je rajoute une propri\u00e9t\u00e9 \u00ab between \u00bb pour\nindiquer cette section.<\/p>\n\n\n\n Ces donn\u00e9es ont ensuite \u00e9t\u00e9 rassembl\u00e9es dans une FeatureCollection<\/em> de LineString<\/em>s dans un fichier GeoJSON.<\/p>\n\n\n\n\n\n\n\n Pour cette carte, j\u2019ai utilis\u00e9 le fond de carte World Light Gray Base<\/a> disponible sur ArcGIS Online, via le plugin Esri Leaflet<\/a>.<\/p>\n\n\n\n L\u2019initialisation de la carte se fait \u00e0 la m\u00eame position et au m\u00eame niveau de zoom que pr\u00e9c\u00e9demment.<\/p>\n\n\n Cette carte contient \u00e9galement un encart.<\/p>\n\n\n Cette fois-ci, les donn\u00e9es seront charg\u00e9es directement depuis un fichier GeoJSON et non plus depuis un objet GeoJSON dans un fichier JavaScript. Ce chargement se fait en utilisant le plugin Leaflet AJAX<\/a>.<\/p>\n\n\n La fonction appel\u00e9e par \u00ab onEachFeature \u00bb attache \u00e0 nos trac\u00e9s 3 \u00e9v\u00e9nements : \u00ab mouseover \u00bb, \u00ab mouseout \u00bb et \u00ab click \u00bb.<\/p>\n\n\n Les deux premiers \u00e9v\u00e9nements se comportent de la m\u00eame\nmani\u00e8re : ils permettent la mise \u00e0 jour de l\u2019encart et le surlignage de la\nfeature<\/em> survol\u00e9e.<\/p>\n\n\n Le dernier \u00e9v\u00e9nement permet de zoomer sur la rue cliqu\u00e9e.<\/p>\n\n\n Et voil\u00e0 ! Notre carte est pr\u00eate.<\/p>\n\n\n\n Le plus long dans cette histoire a \u00e9t\u00e9 d\u2019isoler les trac\u00e9s\ndes rues et sections de rues participant \u00e0 l\u2019op\u00e9ration.<\/p>\n\n\n\n Alors Paris.fr, pourquoi n\u2019avoir pas pris le temps de le\nfaire ?<\/p>\n","protected":false},"excerpt":{"rendered":" Cette carte interactive des rues sans m\u00e9gots de Paris a \u00e9t\u00e9 r\u00e9alis\u00e9e suite \u00e0 la suite de la consultation de la page d\u2019actualit\u00e9s de la ville de Paris concernant cette action de propret\u00e9, qui ne contenait qu\u2019une image pour pr\u00e9senter … Continuer la lecture Sources des donn\u00e9es<\/h1>\n\n\n\n
Code de la carte<\/h1>\n\n\n\n
\nvar center = [48.8502, 2.3488];\nvar zoom = 12;\n\nvar map = L.map('map',{\n\tcenter: center,\n\tzoom: zoom\n});\n\nL.esri.basemapLayer('Gray').addTo(map);\n<\/pre><\/div>\n\n\n\nvar info = L.control();\n\ninfo.onAdd = function (map) {\n\tthis._div = L.DomUtil.create('div', 'info');\n\tthis.update();\n\treturn this._div;\n};\n\ninfo.update = function (props) {\n\tif(props) {\n\t var infoTxt = '<p>' + props.name;\n\t if(props.between) infoTxt += ', ' + props.between; \/\/ si on est sur une section de rue\n\t infoTxt += '<\/p>';\n\t this._div.innerHTML = infoTxt;\n\t} else {\n\t\tthis._div.innerHTML = '<p>Survoler un \u00e9l\u00e9ment<\/p>';\n\t}\n};\n\ninfo.addTo(map);\n<\/pre><\/div>\n\n\n\nvar rues = new L.GeoJSON.AJAX('\/assets\/files\/js\/rues_sans_megots.geojson',{\n\tonEachFeature: onEachStreet,\n\tstyle: function(feature) {\n\t\treturn {color: '#f7364b'};\n\t}\n}).addTo(map);\n<\/pre><\/div>\n\n\n\nfunction onEachStreet(feature, layer) {\n\tlayer.on({\n\t\tmouseover: updateInfo,\n\t\tmouseout: resetInfo,\n\t\tclick: zoomToStreet\n\t});\n}\n<\/pre><\/div>\n\n\n\nfunction updateInfo(e) {\n\tvar layer = e.target;\n\tlayer.setStyle({weight: 5});\n\tinfo.update(layer.feature.properties);\n}\n\nfunction resetInfo(e) {\n\trues.resetStyle(e.target);\n\tinfo.update();\n}\n<\/pre><\/div>\n\n\n\nfunction zoomToStreet(e) {\n\tmap.fitBounds(e.target.getBounds());\n}\n<\/pre><\/div>\n\n\n
\n\n\n\n