Publication (avancée) de données spatiales dans Internet

Transcription

1 Publication (avancée) de données spatiales dans Internet GMT-4152 & GMT-6006 Capsule 2 Frameworks Javascript, jquery & MapQuery Thierry Badard & Frédéric Hubert Université Laval, Dép. des sciences géomatiques Québec, Canada {Thierry.Badard; Frederic.Hubert}@scg.ulaval.ca Semaine 13

2 .Contenu du cours. Notion de framework de développement et introduction à jquery Introduction Utilisation & Exemples Syntaxes Plugins Le complément géospatial MapQuery jquery et cartographie MapQuery

3 Notion de framework de développement et introduction à jquery

4 Introduction jquery jquery est une librairie JavaScript légère à charger et facile à utiliser. jquery a été conçue pour changer la manière d écrire du code JavaScript en proposant de nouvelles méthodes au-dessus de JavaScript, masquant ainsi de nombreuses lignes de codes et facilitant la réutilisation de code. jquery simplifie l usage de codes compliqués en JavaScript, comme les appels AJAX et la manipulation DOM (Document Object Model). jquery facilite la définition et la gestion des événements HTML- JavaScript, ainsi que la production d effets et d animations.

5 Source : Introduction jquery n est pas la seule librairie facilitant l usage de JavaScript

6 Introduction Source :

7 Introduction Avantages Cross-browser (Internet Explorer 6.0+, Firefox 10+, Safari 5.0+, Opera, Chrome) Support de CSS 3 Léger 32 KB pour la version de production 252 KB pour la version de développement Beaucoup de documentations sous différentes formes : Tutoriaux en ligne API & exemples Forum, communauté active,

8 Introduction Exemple 1 - WordPress Exemples de sites web utilisant jquery

9 Introduction Exemple 2 - Amazon

10 Introduction Exemple 3 - Dell

11 Introduction Exemple 4 - ESPN

12 Utilisation Importation de jquery dans une page HTML À partir du site web de jquery <script type="text/javascript" src=" min.js"></script> À partir de nos propres répertoires avec le téléchargement de la librairie <script type="text/javascript" src="jquery.js"></script> À partir d hébergement CDN Google ou Microsoft <script type="text/javascript" src="

13 Premier exemple Pour débuter un premier exemple très simple Exécuter une boîte de dialogue de type alerte au démarrage d une page. Pour remplacer: window.onload = function(){alert("welcome");} Source:

14 Source: Deuxième exemple Autre exemple très simple Masquer des textes inclus dans des paragraphes (<P>)

15 Principe et syntaxe de base 1. Sélection : Identifier plusieurs éléments dans un document HTML 2. Action : Faire quelque chose avec ces éléments trouvés. Source: ejohn.org

16 Syntaxe Sélections (1/2) Pour accéder à des éléments HTML via JavaScript, jquery propose d utiliser une seule et unique fonction JavaScript : $() (ou jquery()) Il est alors possible d utiliser différents types de paramètres pour $() : Par ID : $("#monid") Par type : $("p") Correspondant à la balise <p> Par CSS : $(".test")

17 Source: Syntaxe Sélections (2/2) Plusieurs petits exemples sur le site

18 Syntaxe Actions possibles Manipulation DOM Gestion des événements Effets et Animations Callback et chainage AJAX

19 Syntaxe Rappel DOM DOM (Document Object Model) Norme W3C (World Wide Web Consortium). Norme pour accéder aux contenus des documents HTML et XML Interface indépendante des langages de programmation et des plateformes (IE, Firefox, Chrome, Safari, ) Source :

20 Syntaxe Manipulation DOM Obtenir Obtenir du contenu : text(), html(), val(), attr() Source:

21 Syntaxe Manipulation DOM Modifier Modifier du contenu : text(), html(), val(), attr() Source:

22 Syntaxe Manipulation DOM Ajout et suppression Ajout d éléments : append(), prepend(), after(), before() Suppression d éléments : remove(), empty() Source:

23 Syntaxe Manipulation DOM Classes CSS Ajout et suppression de classes CSS : addclass(), removeclass(), toggleclass(), css() Source:

24 Syntaxe Manipulation DOM Dimensions Obtention d informations sur les dimensions d éléments width(), height(), innerwidth(), innerheight(), outerwidth(), outerheight() Source:

25 Syntaxe Événements (1/2) Gestion des événements sous DOM Les méthodes associées aux événements en DOM sont généralement disponibles en jquery Par exemple, masquer le paragraphe si on clique dessus : Sélection de <p> Usage de l événement clic $("p").click(function(){ $(this).hide(); }); Définition d une action via une déclaration de fonction JavaScript

26 Syntaxe Événements (2/2) On trouve aussi : $(document).ready() : utilisé pour s assurer que le document est totalement chargé dblclick(), mouseenter(), mouseleave(), mousedown(), mouseup() hover(), focus(), blur() Exemple $("#p1").hover(function(){ alert("you entered p1!"); }, function(){ alert("bye! You now leave p1!"); }); Source:

27 Syntaxe Effets et Animations On trouve aussi des méthodes liées à des effets ou animations : hide(), show(), toggle() fadein(), fadeout(), fadetoggle(), fadeto() slidedown(), slideup(), slidetoggle() animate() stop()

28 Syntaxe CallBack et Chainage Callback : Une fois qu une action est terminée, une autre (callback vers une autre fonction ou déclaration de la fonction en lieu et place du callback) s enchaine automatiquement ou après un certain délai. $(selector).hide(speed,callback); Chainage: Les actions s enchaînent les unes après les autres, car on reste sur l objet sélectionné au départ $("#p1").css("color","red").slideup(2000).slidedown(2000); Source:

29 Syntaxe AJAX Source :

30 Syntaxe AJAX Méthodes Source:

31 Plugins Source :

32 Plugins jquery UI (1/2) Source :

33 Plugins jquery UI (2/2) Source :

34 Plugins Exemple 1 Source :

35 Plugins Exemple 2 Source :

36 Plugins Exemple 3 Source :

37 Plugins Exemple 4 Source :

38 Ressources Liens web

39 Conclusion partie jquery On a vu dans cette première partie : La notion de framework de développement Ce qu est jquery Comment utiliser jquery Comment effectuer des sélections avec jquery Comment produire des actions comme la manipulation DOM, des effets, des animations de l AJAX Introduction aux plugins jquery, dont jquery UI

40 Le complément géospatial MapQuery

41 jquery et cartographie Il existe plusieurs solutions pour mixer la librairie jquery avec des données géospatiales, et ainsi faciliter la création d applications géospatiales en ligne riches, interactives et robustes. Exemples de solutions : Plugins pour google maps OpenLayers sur mobile OpenLayers + jquery UI Dialog Plugin en SVG : JQVMAP Plugin geospatial : jquerygeo

42 jquery et cartographie Exemple 1 Plugin jquery pour google maps : CodeCanyon Travel Map Pro Source :

43 jquery et cartographie Exemple 2 Plugin jquery pour google maps : CodeCanyon POI AutoMap Source :

44 jquery et cartographie Exemple 3 Plugin jquery pour google maps : Gmap3 Source :

45 jquery et cartographie Exemple 4 Openlayers sur mobile Source :

46 jquery et cartographie Exemple 5 OpenLayers + jquery UI Dialog var dialog; buildings.events.on({ featureselected: function(event) { var feature = event.feature; var area = feature.geometry.getarea(); var id = feature.attributes.key; var output = "Building: " + id + " Area: " + area.tofixed(2); dialog = $("<div title='feature Info'>" + output + "</div>").dialog(); }, featureunselected: function() { dialog.dialog("destroy").remove(); } }); Source :

47 jquery et cartographie Exemple 6 Plugin SVG : JQVMAP (jquery Vector Maps) Source :

48 jquery et cartographie Exemple 7 jvectormap Source :

49 Source : jquery et cartographie Exemple 8 Plugin geospatial : jquerygeo

50 MapQuery Introduction (1/2) MapQuery Plugin jquery Permet d ajouter des cartes dans les pages web OpenLayers + jquery + jqueryui Solution comparable à GeoExt (OpenLayers + ExtJS) Propose des fonctionnalités d outil cartographique zoom, gestion de couches, Version 0.1

51 MapQuery Introduction (2/2)

52 MapQuery Exemple $(document).ready(function() { var map = $('#map').mapquery({layers:[{type:'osm'}]}); //initialise mapquery with an OSM layer $('.zoom').mqzoombuttons({map:$('#map')}); map.data('mapquery').center({zoom:1,position:[0, 20]}); }); Chargement des données OpenStreetMap (OSM) Outils de zoom Carte centrée sur la position 0,20 Source :

53 MapQuery Syntaxe Chargement Chargement d une couche de données : OU Source :

54 MapQuery Syntaxe Couches de données Les couches de données disponibles Bing, Google, Vecteur, Json, OpenStreetMap (OSM), Web Map Service (WMS) Web Map Tile Service (WMTS). Source :

55 MapQuery Syntaxe Widgets (1/4) Widget gestionnaire de couches : mqlayermanager Source :

56 MapQuery Syntaxe Widgets (2/4) Widget gestionnaire de couches : mqlayermanager Source :

57 MapQuery Syntaxe Widgets (3/4) Widget mini-carte : mqoverviewmap Source :

58 Source : MapQuery Syntaxe Widgets (4/4) Widget barre de zoom : mqzoomslider

59 MapQuery Conclusion Dans cette deuxième partie, Différentes solutions existantes pour afficher des cartes sur le web en utilisant la librairie jquery ont été présentées. Ces solutions sont principalement des plugins jquery qui exploitent des bibliothèques cartographiques ou langages bien connus comme Google Maps, OpenLayers ou encore SVG Ensuite, une présentation de MapQuery a été effectuée. Des exemples ont été fournis en lien avec des widgets offerts par MapQuery. Attention, MapQuery n a que peu évolué ces derniers mois

60 Conclusion/Synthèse On a vu dans cette capsule : La notion de cadre (framework) de développement web La librairie jquery et ses différentes composantes Des exemples de solutions cartographiques intégrant jquery La solution MapQuery et quelques exemples d usage de Widgets mis à disposition par ce complément géospatial