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
.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
Notion de framework de développement et introduction à jquery
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. http://jquery.com/
Source : http://www.bonneville.nom.fr/ Introduction jquery n est pas la seule librairie facilitant l usage de JavaScript
Introduction Source : http://www.bonneville.nom.fr/
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,
Introduction Exemple 1 - WordPress Exemples de sites web utilisant jquery
Introduction Exemple 2 - Amazon
Introduction Exemple 3 - Dell
Introduction Exemple 4 - ESPN
Utilisation Importation de jquery dans une page HTML À partir du site web de jquery <script type="text/javascript" src="http://code.jquery.com/jquery- 1.10.2.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="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
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: http://www.w3schools.com/jquery
Source: http://www.w3schools.com/jquery Deuxième exemple Autre exemple très simple Masquer des textes inclus dans des paragraphes (<P>)
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
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")
Source: http://www.w3schools.com/jquery Syntaxe Sélections (2/2) Plusieurs petits exemples sur le site http://www.w3schools.com/jquery/jquery_selectors.asp
Syntaxe Actions possibles Manipulation DOM Gestion des événements Effets et Animations Callback et chainage AJAX
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 : http://www.w3schools.com/htmldom
Syntaxe Manipulation DOM Obtenir Obtenir du contenu : text(), html(), val(), attr() Source: http://www.w3schools.com/jquery
Syntaxe Manipulation DOM Modifier Modifier du contenu : text(), html(), val(), attr() Source: http://www.w3schools.com/jquery
Syntaxe Manipulation DOM Ajout et suppression Ajout d éléments : append(), prepend(), after(), before() Suppression d éléments : remove(), empty() Source: http://www.w3schools.com/jquery
Syntaxe Manipulation DOM Classes CSS Ajout et suppression de classes CSS : addclass(), removeclass(), toggleclass(), css() Source: http://www.w3schools.com/jquery
Syntaxe Manipulation DOM Dimensions Obtention d informations sur les dimensions d éléments width(), height(), innerwidth(), innerheight(), outerwidth(), outerheight() Source: http://www.w3schools.com/jquery
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
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: http://www.w3schools.com/jquery
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()
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: http://www.w3schools.com/jquery
Syntaxe AJAX Source : http://www.bonneville.nom.fr/
Syntaxe AJAX Méthodes Source: http://www.w3schools.com/jquery
Plugins Source : http://www.bonneville.nom.fr/
Plugins jquery UI (1/2) Source : http://www.bonneville.nom.fr/
Plugins jquery UI (2/2) Source : http://www.bonneville.nom.fr/
Plugins Exemple 1 Source : http://jqueryui.com/accordion/
Plugins Exemple 2 Source : http://www.minimit.com/works/minimit-gallery-plugin
Plugins Exemple 3 Source : http://wowslider.com/jquery-image-scroller-prime-time-linear-demo.html
Plugins Exemple 4 Source : http://codecanyon.net/item/magicalender/97898
Ressources Liens web http://jquery.com/ http://api.jquery.com/ http://jqueryui.com/ http://jquery.org/ http://www.w3schools.com/jquery http://fr.openclassrooms.com/informatique/cours/jqueryecrivez-moins-pour-faire-plus
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
Le complément géospatial MapQuery
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
jquery et cartographie Exemple 1 Plugin jquery pour google maps : CodeCanyon Travel Map Pro Source : http://codecanyon.net/item/travel-map-pro/full_screen_preview/234777?ref=lvraa
jquery et cartographie Exemple 2 Plugin jquery pour google maps : CodeCanyon POI AutoMap Source : http://codecanyon.net/item/point-of-interest-poi-auto-map/full_screen_preview/101599?ref=lvraa
jquery et cartographie Exemple 3 Plugin jquery pour google maps : Gmap3 Source : http://gmap3.net/
jquery et cartographie Exemple 4 Openlayers sur mobile Source : http://dev.openlayers.org/releases/openlayers-2.13.1/examples/mobile-jq.html#mappage
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 : http://workshops.boundlessgeo.com/openlayers-intro/integration/jqui-dialog.html
jquery et cartographie Exemple 6 Plugin SVG : JQVMAP (jquery Vector Maps) Source : http://jqvmap.com
jquery et cartographie Exemple 7 jvectormap Source : http://jvectormap.com/
Source : http://jquerygeo.com jquery et cartographie Exemple 8 Plugin geospatial : jquerygeo
MapQuery Introduction (1/2) MapQuery Plugin jquery Permet d ajouter des cartes dans les pages web OpenLayers + jquery + jqueryui Solution comparable à GeoExt (OpenLayers + ExtJS) http://www.geoext.org Propose des fonctionnalités d outil cartographique zoom, gestion de couches, Version 0.1 http://mapquery.org/
MapQuery Introduction (2/2)
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 : http://mapquery.org/
MapQuery Syntaxe Chargement Chargement d une couche de données : OU Source : http://geotribu.net/node/443
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 : http://geotribu.net/node/443
MapQuery Syntaxe Widgets (1/4) Widget gestionnaire de couches : mqlayermanager Source : http://geotribu.net/node/443
MapQuery Syntaxe Widgets (2/4) Widget gestionnaire de couches : mqlayermanager Source : http://geotribu.net/node/443
MapQuery Syntaxe Widgets (3/4) Widget mini-carte : mqoverviewmap Source : http://geotribu.net/node/443
Source : http://geotribu.net/node/443 MapQuery Syntaxe Widgets (4/4) Widget barre de zoom : mqzoomslider
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
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