« SliderBot » : différence entre les versions
Aller à la navigation
Aller à la recherche
Aucun résumé des modifications |
Aucun résumé des modifications |
||
| Ligne 10 : | Ligne 10 : | ||
Le tableaux va être utilisé pour afficher les villes qui ont été mentionné et les personnes respectives sur une carte. | Le tableaux va être utilisé pour afficher les villes qui ont été mentionné et les personnes respectives sur une carte. | ||
< | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" | ||
"http://www.w3.org/TR/html4/strict.dtd"> | |||
< | <html> | ||
<head> | |||
<meta charset="UTF-8"> | |||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |||
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |||
<title>Map Test</title> | |||
<style> | |||
#carte{ | |||
height:400px; | |||
width:100%; | |||
} | |||
</style> | |||
</head> | |||
<body> | |||
<h1>Carte Wikipast</h1> | <h1>Carte Wikipast</h1> | ||
<div id="carte"></div> | <div id="carte"></div> | ||
| Ligne 25 : | Ligne 38 : | ||
//Création de la carte | //Création de la carte | ||
var carte=new google.maps.Map(document.getElementById('carte'), options); | var carte=new google.maps.Map(document.getElementById('carte'), options); | ||
//Tableau de points de type : [nom,latitude,longitude,év.image] | //Tableau de points de type : [nom,latitude,longitude,év.image] | ||
var points=[ | var points=[ | ||
| Ligne 155 : | Ligne 169 : | ||
['John Fitzgerald Kennedy',50,15] | ['John Fitzgerald Kennedy',50,15] | ||
]; | ]; | ||
//Ce tableau contiendra tous les markers créés | //Ce tableau contiendra tous les markers créés | ||
markers=[]; | markers=[]; | ||
| Ligne 161 : | Ligne 176 : | ||
ajouterPoint(points[i]); | ajouterPoint(points[i]); | ||
} | } | ||
var image; | var image; | ||
function ajouterPoint(proprietes){ | function ajouterPoint(proprietes){ | ||
| Ligne 171 : | Ligne 187 : | ||
}; | }; | ||
} | } | ||
var point=new google.maps.Marker({ | var point=new google.maps.Marker({ | ||
position:{lat:proprietes[1], lng: proprietes[2]}, | position:{lat:proprietes[1], lng: proprietes[2]}, | ||
| Ligne 178 : | Ligne 195 : | ||
//icon:{path:google.maps.SymbolPath.CIRCLE, scale:10} | //icon:{path:google.maps.SymbolPath.CIRCLE, scale:10} | ||
}); | }); | ||
// if(proprietes[3]) | |||
// { | |||
// point.setIcon(proprietes[3]); | |||
// } | |||
var fenetreInfo=new google.maps.InfoWindow({ | var fenetreInfo=new google.maps.InfoWindow({ | ||
content:proprietes[0] | content:proprietes[0] | ||
| Ligne 186 : | Ligne 209 : | ||
markers.push(point); | markers.push(point); | ||
} | } | ||
var regroupement = new MarkerClusterer(carte, markers,{ | var regroupement = new MarkerClusterer(carte, markers,{ | ||
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' | imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' | ||
}); | }); | ||
} | } | ||
</script> | |||
</script> | </script> | ||
<script | <script | ||
| Ligne 197 : | Ligne 223 : | ||
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDUYredUZ1kaPBxNz0ToUQas1MwCF4-ER4&callback=initCarte"> | src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDUYredUZ1kaPBxNz0ToUQas1MwCF4-ER4&callback=initCarte"> | ||
</script> | </script> | ||
</ | </body> | ||
</html> | |||
Version du 24 avril 2018 à 13:00
Objectifs
- Crée une base de données en associant [Personne, Date, Lieu] via un scrapping de page.
- Crée un ensemble de cartes affichant les positions de toutes les personnes recensées pour chaque date (discretisation par année ?).
- Création d’un slider dynamique, où l’annee souhaitée est choisie, et affiche la carte correspondante (JavaScript ou HTML)
Description
Le bot extrait les données nécessaires de wikipast, en parcourant chaque page existante d'années à travers le temps. Les informations retenues sont d'abord les mentions de villes et deuxièmement les mentions de personnes dans l'année. Ce travail est fait par un code python, qui va sauvegarder l'information dans un tableaux. Le tableaux va être utilisé pour afficher les villes qui ont été mentionné et les personnes respectives sur une carte.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Map Test</title>
<style>
#carte{
height:400px;
width:100%;
}
</style>
</head> <body>
Carte Wikipast
<script>
function initCarte(){
//Options de la carte
var options={
zoom:4,
center:{lat:48.7,lng:18}
}
//Création de la carte
var carte=new google.maps.Map(document.getElementById('carte'), options);
//Tableau de points de type : [nom,latitude,longitude,év.image]
var points=[
['John Fitzgerald Kennedy',45,23, 'https://images.radio-canada.ca/w_635,h_357/v1/ici-info/16x9/midinfo-john-fitzgerald-kennedy-jfk-etats-unis-35e-president-americain.jpg'],
['John Fitzgerald Kennedy',44,22, 'https://images.radio-canada.ca/w_635,h_357/v1/ici-info/16x9/midinfo-john-fitzgerald-kennedy-jfk-etats-unis-35e-president-americain.jpg'],
['John Fitzgerald Kennedy',45,20, 'https://images.radio-canada.ca/w_635,h_357/v1/ici-info/16x9/midinfo-john-fitzgerald-kennedy-jfk-etats-unis-35e-president-americain.jpg'],
['John Fitzgerald Kennedy',55,10],
['John Fitzgerald Kennedy',53,12],
['John Fitzgerald Kennedy',54,11],
['John Fitzgerald Kennedy',52,11],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',55,12],
['John Fitzgerald Kennedy',48,10],
['John Fitzgerald Kennedy',49,13],
['John Fitzgerald Kennedy',49,13],
['John Fitzgerald Kennedy',49,13],
['John Fitzgerald Kennedy',49,13],
['John Fitzgerald Kennedy',49,13],
['John Fitzgerald Kennedy',49,13],
['John Fitzgerald Kennedy',49,13],
['John Fitzgerald Kennedy',49,13],
['John Fitzgerald Kennedy',49,13],
['John Fitzgerald Kennedy',49,13],
['John Fitzgerald Kennedy',50,15]
];
//Ce tableau contiendra tous les markers créés
markers=[];
//Ajouter les points
for(var i=0; i<points.length; i++){
ajouterPoint(points[i]);
}
var image;
function ajouterPoint(proprietes){
// Création d'un marker
if(proprietes[3])
{
image = {
url:proprietes[3],
scaledSize: new google.maps.Size(80,50)
};
}
var point=new google.maps.Marker({
position:{lat:proprietes[1], lng: proprietes[2]},
map:carte,
//title:proprietes[0],
icon:image
//icon:{path:google.maps.SymbolPath.CIRCLE, scale:10}
});
// if(proprietes[3]) // { // point.setIcon(proprietes[3]); // }
var fenetreInfo=new google.maps.InfoWindow({
content:proprietes[0]
});
point.addListener('click', function(){
fenetreInfo.open(carte,point);
});
markers.push(point);
}
var regroupement = new MarkerClusterer(carte, markers,{
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
} </script> </script> <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"> </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDUYredUZ1kaPBxNz0ToUQas1MwCF4-ER4&callback=initCarte"> </script>
</body> </html>