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.

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s