Bon, je suppose que vous commencez à avoir l’habitude que je vous présente la manière de créer une carte interactive à l’aide des deux librairies majeures OpenLayers et Leaflet.
Après avoir rapidement créé la carte des rues et sections de rue concernées par l’opération « Des rues sans mégots » avec Leaflet, j’ai bien entendu créé une version avec OpenLayers de cette carte.
Sources des données
Pour cette carte j’utilise le même fichier GeoJSON que pour la carte avec Leaflet :
- La liste des rues ou sections de rue provient de la page d’actualités de Paris.fr
- Le tracé des rues a été extrait des données disponibles sur Paris Data.
Initialisation de la carte
Comme pour la carte du métro, la div principale est incluse dans la même div que celle de l’encart :
<div id="map-wrap">
<div id="map"></div>
<div id="info"></div>
</div>
Ensuite on initialise l’encart :
var info = document.getElementById('info');
info.innerHTML = '<p>Survoler un élément</p>';
Puis on initialise la carte :
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}',
attributions: 'Tiles © <a href="https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer">ArcGIS</a>'
})
})
],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([2.3488, 48.8502]),
zoom: 12,
maxZoom: 16
})
});
Et enfin on rajoute les rues :
var streets = new ol.layer.Vector({
source: new ol.source.Vector({
url: '/assets/files/js/rues_sans_megots.geojson',
format: new ol.format.GeoJSON()
}),
style: function(feature) {
return styleStreet();
}
});
La fonction appelée dans la fonction de style de la couche des rues est la suivante (le paramètre d’entrée servira pour le surlignage au survol) :
function styleStreet(selected = false) {
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#f7364b',
width: selected ? 5 : 3
})
});
}