Cours 6 : Have fun Dominique Rossin. Ou suis-je ? Idée : On affiche un div On crée une carte...

Cours 6 : Have funCours 6 : Have funDominique RossinDominique Rossin

Ou suis-je ?Ou suis-je ?

Idée : Idée :

On affiche un divOn affiche un div

On crée une carte centrée sur une latitude On crée une carte centrée sur une latitude et une longitude.et une longitude.

On définit un facteur de zoomOn définit un facteur de zoom

On afficheOn affiche

En pratiqueEn pratique

<div <div idid=="map""map" stylestyle=="width:300px; height:450px""width:300px; height:450px">>

On crée un On crée un divdiv

On affiche une carte dans On affiche une carte dans ce divce div

$(document).ready($(document).ready(functionfunction() {() { $($("#map""#map").gmap3();).gmap3();});});

Ne pas oublier d’inclure les Ne pas oublier d’inclure les librairieslibrairies

<script <script typetype=="text/javascript""text/javascript" srcsrc==""http://maps.google.com/maps/api/js?sensor=false&amp;language=enhttp://maps.google.com/maps/api/js?sensor=false&amp;language=en""></script>></script> <script <script typetype=="text/javascript""text/javascript" srcsrc=="cordova.js""cordova.js"></script>></script> <script <script typetype=="text/javascript""text/javascript" srcsrc=="js/jquery.js""js/jquery.js"></script>></script> <script <script typetype=="text/javascript""text/javascript" srcsrc=="js/gmap3.js""js/gmap3.js"></script>></script> Surlibrairie de Surlibrairie de

google mapgoogle maphttp://http://gmap3.net/en/gmap3.net/en/

Centrage sur la France (45,0)Centrage sur la France (45,0)

$($("#map""#map").gmap3({).gmap3({ map:{map:{ options:{options:{ center: [center: [4545, , 00],], zoom: zoom: 1212 }} }});}});

Ou suis-je ?Ou suis-je ?

Idée:Idée:

Utiliser le GPS pour se géolocaliserUtiliser le GPS pour se géolocaliser

Utiliser la latitude et la longitude donnée Utiliser la latitude et la longitude donnée par celui-ci pour afficher la carte centrée.par celui-ci pour afficher la carte centrée.

Ou suis-je (code javascript) ? Ou suis-je (code javascript) ?

navigator.geolocation.getCurrentPosition(onSuccess, onError,navigator.geolocation.getCurrentPosition(onSuccess, onError,{maximumAge: {maximumAge: 1000010000, timeout: , timeout: 300000300000, enableHighAccuracy: , enableHighAccuracy: truetrue}}););

En cas de En cas de succès de succès de

géolocalisationgéolocalisation

En cas d’échec En cas d’échec de de

géolocalisationgéolocalisation

functionfunction onSuccess(position) { onSuccess(position) { varvar latitude = position.coords.latitude; latitude = position.coords.latitude; varvar longitude = position.coords.longitude; longitude = position.coords.longitude; $($("#map""#map").gmap3({).gmap3({ map:{map:{ options:{options:{ center: [latitude, longitude],center: [latitude, longitude], zoom: zoom: 1212 }} }});}}); };};

Afficher la Afficher la cartecarte

On récupère les On récupère les coordonnéescoordonnées

Position du centrePosition du centre

Cartes : Las, je suis là …Cartes : Las, je suis là …

Afficher des marqueurs sur la carteAfficher des marqueurs sur la carte $($('#map''#map').gmap3({).gmap3({ marker:{marker:{ values:[values:[ {{ latLng:[latitude,longitude],latLng:[latitude,longitude], data: data: "Centre de la carte""Centre de la carte" },}, {{ latLng:[latitudelatLng:[latitude+.02+.02,longitude,longitude+.01+.01],], data: data: "Un peu décalé""Un peu décalé",, options:{icon: options:{icon: "http://maps.google.com/mapfiles/marker_green.png""http://maps.google.com/mapfiles/marker_green.png"}} }} ]] }} });});

Action si clicAction si clic $($('#map''#map').gmap3({).gmap3({ marker:{marker:{ values:[{values:[{ latLng:[latitude,longitude],latLng:[latitude,longitude], data: data: "Centre de la carte""Centre de la carte" }, …}, … ],], events: {events: { click: click: functionfunction(marker, event, context){(marker, event, context){ varvar map = $( map = $(thisthis).gmap3().gmap3("get""get"),), infowindow = $(infowindow = $(thisthis).gmap3({get:{name:).gmap3({get:{name:"infowindow""infowindow"}});}}); ifif (infowindow){ (infowindow){ infowindow.open(map, marker);infowindow.open(map, marker); infowindow.setContent(context.data);infowindow.setContent(context.data); } } elseelse { { $($(thisthis).gmap3({).gmap3({ infowindow:{infowindow:{ anchor:marker,anchor:marker, options:{content: context.data}options:{content: context.data} }} });}); }} }} }} }} });});

Création d’une fenêtreCréation d’une fenêtre

Affichage du dataAffichage du data

Du dessinDu dessin

On a une feuille de dessinOn a une feuille de dessin

On utilise des primitivesOn utilise des primitives

Attention cela est beaucoup trop lent pour faire des Attention cela est beaucoup trop lent pour faire des animationsanimations

Feuille de dessinFeuille de dessin

<canvas <canvas idid=="dessin""dessin" stylestyle=="width:200px; height: 200px; border: solid "width:200px; height: 200px; border: solid 1px red; background-color:white"1px red; background-color:white"></canvas>></canvas>

On récupère en javascript le contexte On récupère en javascript le contexte de dessinde dessin

varvar canvas = $( canvas = $("#dessin""#dessin")[)[00];]; varvar context = canvas.getContext( context = canvas.getContext("2d""2d"););

On fait des dessinsOn fait des dessinsvarvar canvas = $( canvas = $("#dessin""#dessin")[)[00];];varvar context = canvas.getContext( context = canvas.getContext("2d""2d"););

context.fillRect(context.fillRect(5050, , 2525, , 150150, , 100100););

contextcontext..fillRectfillRect((2525,,2525,,100100,,100100););contextcontext..clearRectclearRect((4545,,4545,,6060,,6060););contextcontext..strokeRectstrokeRect((5050,,5050,,5050,,5050););

Dessin d’un Dessin d’un rectanglerectangle

Dessin Dessin autresautres

Dessin d’un triangle ou d’une Dessin d’un triangle ou d’une forme géométriqueforme géométrique

contextcontext..beginPathbeginPath();();contextcontext..moveTomoveTo((7575,,5050););contextcontext..lineTolineTo((100100,,7575););contextcontext..lineTolineTo((100100,,2525););contextcontext..fillfill();();

Mais aussiMais aussi

Déplacement : moveToDéplacement : moveTo

Arc : arc(x,y, radius,startAngle,endAngle, antihoraire )Arc : arc(x,y, radius,startAngle,endAngle, antihoraire )

BézierBézier

……

PictionaryPictionary

Idée. On dessine avec le doigt.Idée. On dessine avec le doigt.

Comment ?Comment ?