Tuilage des données OSM avec Leaflet

Carte d’occupation du sol (Landuse d’OSM)

osm landuse diouck

Principe du tuilage:

Le tuilage est le re-découpage d’un raster en petite images à des échelles prédéfinies pour être utilisé par des outils web.

Le tuilage va donc découper le raster sur plusieurs échelles (pyramidage) en autant de petites images (tuilage), dont le nom du dossier et celui de l’images sont les coordonnées x et y dans le système de projection mercator.

diouck pyramides

1/- Données: Pays de la Loire à télécharger depuis ce lien

2/- Analyse thématique uniquement sur la donnée « landuse »  avec Qgis et génération d’un fichier  au format png que vous pouvez télécharger  là :  OSM Landuse.

3/- Création de mosaïques d’images tuilées avec gdal2tiles.

Comme les autres outils de GDAL , il est assez facile à utiliser. Ci-dessous est un exemple de commande pour créer des tuiles de notre image.

gdal2tiles.py -z -v 7-13 "OSM Landuse.png" "OSM Landuse"

Pour faire simple nous allons créer une pyramide avec les niveaux de zoom allant de 7 à 13 dans le dossier OSM Landuse. La derniere version de gdal vous crée automatiquement un dossier pour chaque niveau de zoom.

4/- Intégration des tuile dans une application.

Je ne vais pas rentrer dans les détails de créations de cartes mais juste juste vous monter comment intégrer notre pyramide tuilée dans une application. Vous avez simplement à rajouter cette ligne:

var mytile =L.tileLayer(‘landuse/{z}/{x}/{y}.png’,{tms: ‘true’}).addTo(map);

La carte est accessible depuis ce lien

Accessibilité des équipements & loisirs à Paris

Un site informatif responsive design conçu avec les données de l’Open data de la ville de Paris. Vous y trouverez uniquement les équipements gérés par la Ville de Paris pour lesquels la Ville a la responsabilité de la mise en accessibilité, par exemple uniquement les crèches municipales et non les crèches associatives, ou uniquement les lycées professionnels, gérés par la Ville, et non les lycées d’enseignement général, gérés par la Région.

Dans un premier temps, seuls sont traités dans cette carte les handicaps moteurs, auditifs et visuels, le handicap mental fera l’objet d’un recensement ultérieur. De même les services travaillent à l’accessibilité de la carte elle-même.

Sont définis comme accessibles les établissements où vous pouvez bénéficier du service proposé par l’établissement ou l’équipement, même si l’accès à la totalité des locaux n’est pas toujours possible.

Niveaux d’accessibilités

Non accessible
L accueil du public est accessible pour tous
Tous les services au public sont accessibles pour tous
Tous les locaux ouverts au public sont accessibles pour tous
Niveau 3 ERP + tous les locaux de travail sont accessibles pour le personnel
Donnée non renseignée

Accessibilité des équipement de Paris »:
http://www.diouck.esy.es/accessibilite/accessibilite.html

accessibilite

accessibilité

 

Responsive design mobile

Responsive design mobile

Coupe du monde 2014: Selection de l’équipe de France

Bonjour tout le monde

Me voici de nouveau pour vous présenter une façon très simple de d’exploiter les données de la coupe du monde.

Pour se mettre au diapason, je décide de créer une application sur la sélection de l’équipe de France 2014 en fonction de leur ville de naissance.

L’application est disponible ici

Coupe du monde selection de l'equipe de france 2014

La source des données de la liste des joueurs très provient de Wikipédia puis géolocalisation des villes en produisant un KML avec google map.

La seconde étape une jointure attributaire entre mon fichier Xsl et le KML dans QGIS et le tours est joué.

 

Quelques CSS plus tard et hop j’ai une carte

 

coupe du monde

Donc rien de plus simple à première vue! La sélection de l’équipe de France en fonction de leur lieu de naissance.

 

Intéressant mais on aimerai bien créer des cluster pour éviter d’avoir les jours serrer contre eux comme devant coup franc!

Pour ce faire,rien de plus simple

On appelle la données geojson puis on le clusterise
var points_rand = L.geoJson(points,{onEachFeature:onEachFeature}/*, {
onEachFeature: function (feature, layer) //functionality on click on feature
{
layer.bindPopup(« hi! I am one of thousands »); //just to show something in the popup. could be part of the geojson as well!
}
}*/);

markers.addLayer(points_rand); // add it to the cluster group
map.addLayer(markers); // add it to the map
map.fitBounds(markers.getBounds()); //set view on the cluster extend

var MarkerCluster = new L.MarkerClusterGroup({
spiderfyOnMaxZoom: true,
showCoverageOnHover: false,
zoomToBoundsOnClick: true,
disableClusteringAtZoom: 16
});
map.addLayer(MarkerCluster);
Quelques codes plus tard !

selection équipe de france

Maintenant pour styliser les cluster par des photos on crée des styles pour chaque joueur

du genre

var cabella = L.icon({
iconUrl: ‘joueurs/cabella.jpg’,
iconSize: [32, 37],
iconAnchor: [16, 37],
popupAnchor: [0, -37]
});

Et enfin on fait le lien avec la donnée . Exemple si l’identifiant cabaye =1 alors on lui attribut le style cabaye qui correspond à sa photo

var markers = L.markerClusterGroup();
var points_rand = L.geoJson(points,{
pointToLayer: function (feature, latlng) {
switch (feature.properties.id) {
case ‘1’: return L.marker(latlng, {icon: cabaye});
case ‘2’: return L.marker(latlng, {icon: ruffier});
}
},onEachFeature:onEachFeature});

markers.addLayer(points_rand); // add it to the cluster group
map.addLayer(markers);        // add it to the map
//map.fitBounds(markers.getBounds()); //set view on the cluster extend

var MarkerCluster = new L.MarkerClusterGroup({
spiderfyOnMaxZoom: false,
showCoverageOnHover: false,
zoomToBoundsOnClick: false,
disableClusteringAtZoom: 16
});
map.addLayer(MarkerCluster);

map world fifa cup brasil franceEt enfin ca serait encore plus sympas de rajouter la phtoto des joueur et un controle pour récupérer le popup dans un css à gauche.

Leaflet: Rennes Metropole

Services tuilés Aigle avec les données de RennesMetropole : TMS & PVCI

Rennes Metropole : TMS &PVCI avec Leaflet

Rennes Metropole : TMS &PVCI avec Leaflet

Code source:

 

var geoRennesMetropolePlanOptions = { minZoom: 0, 
					maxZoom: res.length - 1, 
					//detectRetina: true, 
					continuousWorld: true, // if not set to true, will only load positive tiles 
					//tms: true, 
				attribution: 'Orthophotographie 2011 :  Référentiel voies et adresses : Rennes Métropole'
			  };	
				var geoRennesMetropolePlan = new L.TileLayer('http://geo.rennesmetropole.fr/tms/4564/PVCI/{z}/{x}/{y}.png', geoRennesMetropolePlanOptions);
					// alter getTileUrl because Y axis is inverted (TMS profile is locale)
					geoRennesMetropolePlan.getTileUrl = function (tilePoint, zoom) {
					console.log(tilePoint);
				var toRet;
					toRet = L.Util.template(this._url, L.Util.extend({
					"z":this._getZoomForUrl(),
					 x:tilePoint.x,
					 y:-tilePoint.y - 1
					}, this._urlParams));
					return toRet;
				}
				map.addLayer(geoRennesMetropolePlan);

				//var geoRennesMetropoleOrthoAttribution = 'Orthophotographie 2011 : E-mégalis et Collectivités Territoriales bretonnes, Référentiel voies et adresses : Rennes Métropole';
				var geoRennesMetropoleOrthoOptions = { minZoom: 0, 
					maxZoom: res.length - 1, 
					//detectRetina: true, 
					continuousWorld: true, // if not set to true, will only load positive tiles 
					//tms: true, 
				attribution: 'Orthophotographie 2011 :Référentiel voies et adresses : Rennes Métropole'
			  };
				var geoRennesMetropoleOrtho = new L.TileLayer('http://www.geo.rennesmetropole.fr/tms/4563/ORTHO2011/{z}/{x}/{y}.png', geoRennesMetropoleOrthoOptions);
					// alter getTileUrl because Y axis is inverted (TMS profile is locale)
					geoRennesMetropoleOrtho.getTileUrl = function (tilePoint, zoom) {
					console.log(tilePoint);
				var toRet;
					toRet = L.Util.template(this._url, L.Util.extend({
					"z":this._getZoomForUrl(),
					 x:tilePoint.x,
					 y:-tilePoint.y - 1
					}, this._urlParams));
					return toRet;
				}