[Jquery Google Map][Cloudant][PouchDb] MonEtablissement : Ajouter des markers en 15 minutes sur la map

monetablissement.jpg

map.jpg

Introduction


Maintenant qu’on a notre petite App, on veut afficher la carte des établissements, et le faire en 15 minutes maximum avec https://github.com/Tilotiti/jQuery-Google-Map

Comment faire ?


Le fichier que l’on avait récupéré sur le site Français gouvernemental comportait longitude et latitude, du coup, on fait une boucle FOR qui génère les markers pour chaque établissement. Autrement dit on parcoure la collection à la recherche des long et lat pour chacun de nos documents (qui sont des établissements).

BON A SAVOIR : Google ne limite pas les markers si on utilise long et lat, par contre si on spécifie des adresses alors on heurte la limitation , donc , les adresses sont à éviter si on a 300 markers par exemple !

Tester l’app avec la carte


http://nicolas.huleux.free.fr/pouchdb3/

Le Code


Le code Js :

/* Plugger pouchDb à Cloudant */
var db = new PouchDB('https://1c54473b-be6e-42d6-b914-d0ecae937981-bluemix:8eeedbe180c1ce90cdc3ae37b9e74af7368b21a37b531aae819929d3405c7d22@1c54473b-be6e-42d6-b914-d0ecae937981-bluemix.cloudant.com/etablissements');
$("#loader").hide();

function trouver() {
	$("#loader").show();
	var departement = $("#dep").val();
	var type_detablissement = $("#type_detablissement").val();
	if (departement.length < 3) {
		departementMin = parseInt(departement + '000');
		departementMax = parseInt(departement + '999');
	} else {
		departementMin = parseInt(departement + '00');
		departementMax = parseInt(departement + '99');
	}
	db.createIndex({
		index: {
			fields: ['cp']
		}
	});
	db.createIndex({
		index: {
			fields: ['type_detablissement']
		}
	});
	filtres = {};
	if (departement) {
		filtres.cp = {
			$gt: departementMin,
			$lt: departementMax
		};
	}
	if (type_detablissement) {
		filtres.type_detablissement = type_detablissement;
	}
	db.find({
		"selector": filtres,
		"sort": [{
			"cp": "asc"
		}]
	}).then(function(result) {
		// handle result
		console.log(result.docs);
		$("#liste").empty(); // On vide le précédent formulaire.
		// On crée un boutton pour chaque document
		for (x = 0; x < result.docs.length; x++) {
			var _id = result.docs[x]._id;
			$("#liste").append("<div><button onclick=' editer(\"" + _id + "\")' > Edition</button>  " + result.docs[x].cp + " " + result.docs[x].nom + "<br></div>");
		}
		$("#etabHeader").empty();
		$("#etabHeader").append(result.docs.length);
		$("#loader").hide();
		ajouterMarkers(result.docs);
	}).catch(function(err) {
		console.log(err);
	});
}

/* On ajoute les markers sur la carte */
function ajouterMarkers(docs) {
	$("#map").googleMap();
	for (x = 0; x < docs.length; x++) {
		$("#map").addMarker({
			coords: [docs[x].latitude_y, docs[x].longitude_x], // GPS coords
			title: docs[x].nom, // Title
			text: "<span  onclick=' editer(\"" + docs[x]._id + "\")' > Edition</span>"
		});
	}
}
// EDITER - UPDATE
function editer(id) {
	$("#loader").show();
	// On lit le document sur la base de données à partir de son ID, puis on crée le formulaire en conséquence.
	db.get(id).then(function(doc) {
		window.doc_origin = doc; // On copie le doc original en mémoire parce que on ne veut pas mettre tous les champs dans le forumalire html il y en a trop.
		creerFormulaire(doc);
		$("#loader").hide();
	});
}
// VALIDER UN UPDATE ET ENVOYER LE DOCUMENT SUR IBM CLOUDANT
function valider() {
	$("#loader").show();
	// On récupère les var dans les champs du formulaire
	var formulaire = $('form').serializeArray();
	// On convertit ça en objet JSON
	var etablissementObject = {};
	$.each(formulaire,
		function(i, v) {
			etablissementObject[v.name] = v.value;
		});
	etablissementObject.cp = Number(etablissementObject.cp)
	/* ON réinjecte les données qui ont été modifiées dans le document original. */
	definitiveEtablissement = Object.assign(window.doc_origin, etablissementObject);
	db.put(definitiveEtablissement).then(function(response) {
		// handle response
		alert('bien update');
		$("#loader").hide();
	}).catch(function(err) {
		console.log(err);
	});
}

function creerFormulaire(mesDatas) {
	$("#detail").empty(); // On vide le précédent formulaire.
	// On crée le template formulaire avec  template en JS ES6, c'est très pratique .
	var str = `
				<form id="form" >
					<h3 style ="background:grey;color:white">❤ ${mesDatas.nom}</h3><br>
					<div class="form-group row">
					  <label for="example-text-input">Identifiant Cloudant</label>
					
						<input class="form-control" value="${mesDatas._id}"  name="_id" id="_id" readonly ></input>
					  
					  </div>
					</div>
					<div class="form-group row">
					  <label for="example-text-input">Révision Cloudant</label>
						<input class="form-control" value="${mesDatas._rev}"  name="_rev" id="_rev" readonly ></input>
					</div>
					<div class="form-group row">
					  <label for="example-text-input">code_uai</label>
						<input class="form-control" value="${mesDatas.code_uai}"  name="code_uai" id="code_uai"  ></input>
					</div>
					<div class="form-group row">
					  <label for="example-text-input">n_siret</label>
						<input class="form-control" value="${mesDatas.n_siret}"  name="n_siret" id="n_siret"  ></input>
					</div>
					<div class="form-group row">
					  <label for="example-text-input">type_detablissement</label>
						<input class="form-control" value="${mesDatas.type_detablissement}"  name="type_detablissement" id="type_detablissement"  ></input>
					</div>
					<div class="form-group row">
					  <label for="example-text-input">sigle</label>
						<input class="form-control" value="${mesDatas.sigle}"  name="sigle" id="sigle"  ></input>
					</div>
					<div class="form-group row">
					  <label for="example-text-input">statut</label>
						<input class="form-control" value="${mesDatas.statut}"  name="statut" id="statut"  ></input>
					</div>
					<div class="form-group row">
					  <label for="example-text-input">tutelle</label>
						<input class="form-control" value="${mesDatas.tutelle}"  name="tutelle" id="tutelle"  ></input>
					</div>
					<div class="form-group row">
					  <label for="example-text-input">universite</label>
						<input class="form-control" value="${mesDatas.universite}"  name="universite" id="universite"  ></input>
					</div>
					
					<div class="form-group row">
					  <label for="example-text-input">Nom</label>
					
						<input class="form-control" value="${mesDatas.nom}"  name="nom" id="nom"></input>
					  </div>
					
					<div class="form-group row">
					  <label for="example-text-input">Adresse</label>
					
						<input class="form-control" value="${mesDatas.adresse}"  name="adresse" id="adresse"></input>
					 
					</div>
					<div class="form-group row">
					  <label for="example-text-input">Cp</label>
					
						<input class="form-control" type = "number" value="${mesDatas.cp}"  name="cp" id="cp"></input>
					  
					</div>
					<div class="form-group row">
					  <label for="example-text-input">commune</label>
					
						<input class="form-control" value="${mesDatas.commune}"  name="commune" id="commune"></input>
					  
					</div>
				
					<div class="form-group row">
					  <label for="example-text-input">Téléphone</label>
					
						<input class="form-control" value="${mesDatas.telephone}"  name="telephone" id="telephone"></input>
					  
					</div>
					<div class="form-group row">
					  <label for="example-text-input">Type</label>
					
						<input class="form-control" value="${mesDatas.type_detablissement}"  name="type_detablissement" id="type_detablissement"></input>
					  
					</div>
					
				 </form>
			`;
	$("#detail").append(str);
}

// On instantie une premiere carte
$(function() {
	$("#map").googleMap({
		zoom: 10, // Initial zoom level (optional)
		coords: [48.895651, 2.290569], // Map center (optional)
		type: "ROADMAP" // Map type (optional)
	});
})
/* INFOS SUR LA BASE DE DONNEE FACULTATIVE */
db.info().then(function(info) {
	console.log(info);
})

Le code HTML



<html >
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=8" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Exo cloudant</title>
		<!------------------------------------------------------------ CHARGEMENT DES LIBRAIRIES ------------------------------------------------>
		<link type="text/css" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
		<link type="text/css" rel="stylesheet" href="style.css" />
		<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
		<script src="//cdn.jsdelivr.net/npm/pouchdb@6.4.3/dist/pouchdb.min.js"></script>
		<script src="js/pouchdb.find.js"></script>
		<!-- CONNEXION A GOOGLE MAP  -->
		<!-- 		<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script> -->
		<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&key=AIzaSyApCxErFUFFHltBkAyd7CxXdFEyue3fAb0" type="text/javascript" ></script>
		<script src="js/jquery.googlemap.js"></script>
		<!------------------------------------------------------- FIN DE CHARGEMENT DES LIBRAIRIES ------------------------------------------------->
	</head>
	<!-- La page HTML générale -->
	<body style="background-color:tan" >
		<div id="app"  >
		<div class="row" style="margin-top:10px; " >
			<div class="card col-md-4"  id="div1">
				<div class="card-header">Filtres</div>
				<div class="card-body cardspe"   >
					<div >
						<div class="form-group">
							<label for="example-text-input">Type Etablissement</label>
							<select class="form-control" name="type_detablissement" id = "type_detablissement">
								<option value="">Tous</option>
								<option value="Collège">Collège</option>
								<option value="Lycée">Lycée</option>
								<option value="Centre national d'enseignement à distance">Centre national d'enseignement à distance</option>
								<option value="Centre de formation d'apprentis">Centre de formation d'apprentis</option>
								<option value="Maison familiale rurale">Maison familiale rurale</option>
							</select>
						</div>
						<div class="form-group">
							<label for="example-text-input">Département</label>
							<select class="form-control" name="dep" id = "dep">
								<option value="">Tous</option>
								<option value="00">(00) Hors France</option>
								<option value="01">(01) Ain </option>
								<option value="02">(02) Aisne </option>
								<option value="03">(03) Allier </option>
								<option value="04">(04) Alpes de Haute Provence </option>
								<option value="05">(05) Hautes Alpes </option>
								<option value="06">(06) Alpes Maritimes </option>
								<option value="07">(07) Ardèche </option>
								<option value="08">(08) Ardennes </option>
								<option value="09">(09) Ariège </option>
								<option value="10">(10) Aube </option>
								<option value="11">(11) Aude </option>
								<option value="12">(12) Aveyron </option>
								<option value="13">(13) Bouches du Rhône </option>
								<option value="14">(14) Calvados </option>
								<option value="15">(15) Cantal </option>
								<option value="16">(16) Charente </option>
								<option value="17">(17) Charente Maritime </option>
								<option value="18">(18) Cher </option>
								<option value="19">(19) Corrèze </option>
								<option value="2A">(2A) Corse du Sud </option>
								<option value="2B">(2B) Haute-Corse </option>
								<option value="21">(21) Côte d'Or </option>
								<option value="22">(22) Côtes d'Armor </option>
								<option value="23">(23) Creuse </option>
								<option value="24">(24) Dordogne </option>
								<option value="25">(25) Doubs </option
									>
								<option value="26">(26) Drôme </option>
								<option value="27">(27) Eure </option>
								<option value="28">(28) Eure et Loir </option>
								<option value="29">(29) Finistère </option>
								<option value="30">(30) Gard </option>
								<option value="31">(31) Haute Garonne </option>
								<option value="32">(32) Gers </option>
								<option value="33">(33) Gironde </option>
								<option value="34">(34) Hérault </option>
								<option value="35">(35) Ille et Vilaine </option>
								<option value="36">(36) Indre </option>
								<option value="37">(37) Indre et Loire </option>
								<option value="38">(38) Isère </option>
								<option value="39">(39) Jura </option>
								<option value="40">(40) Landes </option>
								<option value="41">(41) Loir et Cher </option>
								<option value="42">(42) Loire </option>
								<option value="43">(43) Haute Loire </option>
								<option value="44">(44) Loire Atlantique </option>
								<option value="45">(45) Loiret </option>
								<option value="46">(46) Lot </option>
								<option value="47">(47) Lot et Garonne </option>
								<option value="48">(48) Lozère </option>
								<option value="49">(49) Maine et Loire </option>
								<option value="50">(50) Manche </option>
								<option value="51">(51) Marne </option>
								<option value="52">(52) Haute Marne </option>
								<option value="53">(53) Mayenne </option>
								<option value="54">(54) Meurthe et Moselle </option>
								<option value="55">(55) Meuse </option>
								<option value="56">(56) Morbihan </option>
								<option value="57">(57) Moselle </option>
								<option value="58">(58) Nièvre </option>
								<option value="59">(59) Nord </option>
								<option value="60">(60) Oise </option>
								<option value="61">(61) Orne </option>
								<option value="62">(62) Pas de Calais </option>
								<option value="63">(63) Puy de Dôme </option>
								<option value="64">(64) Pyrénées Atlantiques </option>
								<option value="65">(65) Hautes Pyrénées </option>
								<option value="66">(66) Pyrénées Orientales </option>
								<option value="67">(67) Bas Rhin </option>
								<option value="68">(68) Haut Rhin </option>
								<option value="69">(69) Rhône </option>
								<option value="70">(70) Haute Saône </option>
								<option value="71">(71) Saône et Loire </option>
								<option value="72">(72) Sarthe </option>
								<option value="73">(73) Savoie </option>
								<option value="74">(74) Haute Savoie </option>
								<option value="75">(75) Paris </option>
								<option value="76">(76) Seine Maritime </option>
								<option value="77">(77) Seine et Marne </option>
								<option value="78">(78) Yvelines </option>
								<option value="79">(79) Deux Sèvres </option>
								<option value="80">(80) Somme </option>
								<option value="81">(81) Tarn </option>
								<option value="82">(82) Tarn et Garonne </option>
								<option value="83">(83) Var </option>
								<option value="84">(84) Vaucluse </option>
								<option value="85">(85) Vendée </option>
								<option value="86">(86) Vienne </option>
								<option value="87">(87) Haute Vienne </option>
								<option value="88">(88) Vosges </option>
								<option value="89">(89) Yonne </option>
								<option value="90">(90) Territoire de Belfort </option>
								<option value="91">(91) Essonne </option>
								<option value="92">(92) Hauts de Seine </option>
								<option value="93">(93) Seine Saint Denis </option>
								<option value="94">(94) Val de Marne </option>
								<option value="95">(95) Val d'Oise </option>
								<option value="971">(971) Guadeloupe </option>
								<option value="972">(972) Martinique </option>
								<option value="973">(973) Guyane </option>
								<option value="974">(974) Réunion </option>
								<option value="975">(975) Saint Pierre et Miquelon </option>
								<option value="976">(976) Mayotte </option>
							</select>
						</div>
					</div>
					<label for="example-text-input">Carte</label>
					<div id="map" style="width:100%; height:100%;"></div>
				</div>
				<div class="card-footer ">
					<button onclick="trouver()" class="btn float-right btn-primary"  >Rechercher</button>
					<span><img id="loader" src ="loading_s2.gif" style="width:50px;"></img></span> 
				</div>
			</div>
			<div class="card col-md-4 " >
				<div class="card-header" >Les établissements <span id='etabHeader'></span> </div>
				<div class="card-body cardspe" id="liste"  > Utilisez les filtres ...</div>
				<div class="card-footer ">
					<!-- <button  onclick="lireDix()"class="btn float-right btn-primary"  >10 de plus</button> -->
				</div>
			</div>
			<div class="card col-md-4"  id="div1">
				<div class="card-header">Détails</div>
				<div class="card-body cardspe" id="detail"  > Cliquez sur un établissement dans la liste</div>
				<div class="card-footer ">
					<button onclick="valider()" class="btn float-right btn-primary"  >Valider</button>
				</div>
			</div>
		</div>
	</body>
	<script src="app.js"></script>


Publicités