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.

Présentation au sujet: "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."— Transcription de la présentation:

1 Cours 6 : Have fun Dominique Rossin

2 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

3 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="http://maps.google.com/maps/api/js?sensor=false&language=en"> src="http://maps.google.com/maps/api/js?sensor=false&language=en"> http://maps.google.com/maps/api/js?sensor=false&language=en Surlibrairie de google map http://gmap3.net/en/

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

5 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.

6 Ou suis-je (code javascript) ? navigator.geolocation.getCurrentPosition(onSuccess, onError, {maximumAge: 10000, timeout: 300000, 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

7 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: "http://maps.google.com/mapfiles/marker_green.png"} options:{icon: "http://maps.google.com/mapfiles/marker_green.png"} } ] } }); });

8 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

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

10 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");

11 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

12 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();

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

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