Cours 6 : Have fun Dominique Rossin

Ou suis-je ? Idée : On affiche un div On crée une carte centrée sur une latitude et une longitude. On définit un facteur de zoom On affiche

En pratique On crée un div On affiche une carte dans ce div $(document).ready(function() { $(document).ready(function() { $("#map").gmap3(); $("#map").gmap3();}); Ne pas oublier dinclure les librairies <script type="text/javascript" <script type="text/javascript" src=" src=" Surlibrairie de google map

Centrage sur la France (45,0) $("#map").gmap3({ map:{ map:{ options:{ options:{ center: [45, 0], center: [45, 0], zoom: 12 zoom: 12 } }}); }});

Ou suis-je ? Idée: Utiliser le GPS pour se géolocaliser Utiliser la latitude et la longitude donnée par celui-ci pour afficher la carte centrée.

Ou suis-je (code javascript) ? navigator.geolocation.getCurrentPosition(onSuccess, onError, {maximumAge: 10000, timeout: , enableHighAccuracy: true} ); En cas de succès de géolocalisation En cas déchec de géolocalisation function onSuccess(position) { function onSuccess(position) { var latitude = position.coords.latitude; var latitude = position.coords.latitude; var longitude = position.coords.longitude; var longitude = position.coords.longitude; $("#map").gmap3({ $("#map").gmap3({ map:{ map:{ options:{ options:{ center: [latitude, longitude], center: [latitude, longitude], zoom: 12 zoom: 12 } }}); }}); }; }; Afficher la carte On récupère les coordonnées Position du centre

Cartes : Las, je suis là … Afficher des marqueurs sur la carte $('#map').gmap3({ $('#map').gmap3({ marker:{ marker:{ values:[ values:[ { latLng:[latitude,longitude], latLng:[latitude,longitude], data: "Centre de la carte" data: "Centre de la carte" }, }, { latLng:[latitude+.02,longitude+.01], latLng:[latitude+.02,longitude+.01], data: "Un peu décalé", data: "Un peu décalé", options:{icon: " options:{icon: " } ] } }); });

Action si clic $('#map').gmap3({ $('#map').gmap3({ marker:{ marker:{ values:[{ values:[{ latLng:[latitude,longitude], latLng:[latitude,longitude], data: "Centre de la carte" data: "Centre de la carte" }, … }, … ], ], events: { events: { click: function(marker, event, context){ click: function(marker, event, context){ var map = $(this).gmap3("get"), var map = $(this).gmap3("get"), infowindow = $(this).gmap3({get:{name:"infowindow"}}); infowindow = $(this).gmap3({get:{name:"infowindow"}}); if (infowindow){ if (infowindow){ infowindow.open(map, marker); infowindow.open(map, marker); infowindow.setContent(context.data); infowindow.setContent(context.data); } else { } else { $(this).gmap3({ $(this).gmap3({ infowindow:{ infowindow:{ anchor:marker, anchor:marker, options:{content: context.data} options:{content: context.data} } }); }); } } } } Création dune fenêtre Affichage du data

Du dessin On a une feuille de dessin On utilise des primitives Attention cela est beaucoup trop lent pour faire des animations

Feuille de dessin On récupère en javascript le contexte de dessin var canvas = $("#dessin")[0]; var canvas = $("#dessin")[0]; var context = canvas.getContext("2d"); var context = canvas.getContext("2d");

On fait des dessins var canvas = $("#dessin")[0]; var context = canvas.getContext("2d"); context.fillRect(50, 25, 150, 100); context.fillRect(25,25,100,100); context.clearRect(45,45,60,60); context.strokeRect(50,50,50,50); Dessin dun rectangle Dessin autres

Dessin dun triangle ou dune forme géométrique context.beginPath(); context.moveTo(75,50); context.lineTo(100,75); context.lineTo(100,25); context.fill();

Mais aussi Déplacement : moveTo Arc : arc(x,y, radius,startAngle,endAngle, antihoraire ) Bézier…

Pictionary Idée. On dessine avec le doigt. Comment ?