{"id":197,"date":"2014-12-31T12:50:27","date_gmt":"2014-12-31T11:50:27","guid":{"rendered":"http:\/\/lalloue.fr\/blog\/?p=197"},"modified":"2015-04-29T08:51:53","modified_gmt":"2015-04-29T07:51:53","slug":"openlayer-ou-leaflet","status":"publish","type":"post","link":"http:\/\/lalloue.fr\/blog\/openlayer-ou-leaflet\/","title":{"rendered":"OpenLayer ou Leaflet ?"},"content":{"rendered":"<p><a href=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2014\/12\/openlayerVSleaflet.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-200 size-full\" src=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2014\/12\/openlayerVSleaflet.png\" alt=\"openlayerVSleaflet\" width=\"700\" height=\"75\" srcset=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2014\/12\/openlayerVSleaflet.png 700w, http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2014\/12\/openlayerVSleaflet-300x32.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<p>Parmi les librairies de cartographie Javascript, 3 librairies\u00a0essaient de se tailler la part du lion :<\/p>\n<ul>\n<li>Google Map Javascript API<\/li>\n<li><strong><span style=\"color: #2db3e7;\">openLayers\u00a0<\/span><\/strong><span style=\"color: #2db3e7;\"><span style=\"color: #000000;\">2 (et depuis peu 3.0)<\/span><\/span><\/li>\n<li><strong><span style=\"color: #2db3e7;\">Leaflet<\/span><\/strong><\/li>\n<\/ul>\n<p>Tout le monde connait google map et son business bas\u00e9 sur la publicit\u00e9. Ce qui sous entend que Google peut d\u00e9cider d&#8217;un jour \u00e0 l&#8217;autre d&#8217;int\u00e9grer des pubs dans vos cartes, c&#8217;est pourquoi je ne traiterai pas de cette librairie ici.<\/p>\n<p>Par contre, OpenLayer et Leaflet sont toutes les deux Open sources donc aucun risque de les voir int\u00e9grer des publicit\u00e9s dans les cartes (du moins pas sans pr\u00e9venir).<br \/>\nJe vais donc essayer de d\u00e9partager ces 2 derni\u00e8res.<\/p>\n<p><!--more--><\/p>\n<h3>Points de comparaison :<\/h3>\n<p>Pour moi, les points principaux qui font qu&#8217;une librairie de cartographie est meilleure qu&#8217;une autre sont :<\/p>\n<ul>\n<li>Open Source<\/li>\n<li>Facile \u00e0 utiliser<\/li>\n<li>&#8220;Smoothy&#8221; ou sympathique visuellement.<\/li>\n<\/ul>\n<p>Et des librairies que l&#8217;on peut inclure dans ces 3 cat\u00e9gories il y en a un paquet (plus de 44 d&#8217;apr\u00e8s <a href=\"http:\/\/geotux.tuxfamily.org\/index.php\/es\/geo-blogs\/item\/291-comparacion-clientes-web-v6\">un article de 2012<\/a>\u00a0en espagnol). Mais je n&#8217;ai s\u00e9lectionn\u00e9 que ces 3 la car \u00e7a me semble les 3 les plus pertinentes\u00a0du moment.<\/p>\n<h3>OpenLayers<\/h3>\n<p>OpenLayers est la librairie qui poss\u00e8de <span style=\"color: #2db3e7;\">le plus d\u2019anciennet\u00e9<\/span> parmi les librairies <span style=\"color: #2db3e7;\">Open Source<\/span>, et par cons\u00e9quent c&#8217;est sans doute <span style=\"color: #2db3e7;\">la plus utilis\u00e9e<\/span>.<br \/>\nElle poss\u00e8de un <span style=\"color: #2db3e7;\">tr\u00e8s large choix de fonctionnalit\u00e9s<\/span> qui permettent de faire \u00e0 peu pr\u00e8s tout ce qu&#8217;il est possible d&#8217;imaginer aujourd&#8217;hui.<br \/>\nMais ces fonctionnalit\u00e9s ont un prix : <span style=\"color: #ff9a57;\">le poids de la librairie : 1 Mo\u00a0!<\/span> Ce qui n&#8217;est pas l&#8217;id\u00e9al pour une application mobile par exemple.<\/p>\n<p>Mais les d\u00e9veloppeurs d&#8217;OpenLayers, connaissant bien ce probl\u00e8me de poids, ont sortis une toute nouvelle version : <span style=\"color: #2db3e7;\">OpenLayers 3.0<\/span> qui propose beaucoup d&#8217;<span style=\"color: #2db3e7;\">am\u00e9liorations des performances<\/span> et une diminution de la quantit\u00e9 du code (113.000 lignes contre 126.000 dans la versions 2.0).<\/p>\n<p>Pour utiliser la librairie, il vous suffit d&#8217;inclure les lignes suivantes dans le header du html :<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;link rel=&quot;stylesheet&quot; href=&quot;http:\/\/ol3js.org\/en\/master\/css\/ol.css&quot; type=&quot;text\/css&quot;&gt;\r\n&lt;script src=&quot;http:\/\/ol3js.org\/en\/master\/build\/ol.js&quot; type=&quot;text\/javascript&quot;&gt;&lt;\/script&gt;\r\n<\/pre>\n<p>et les lignes suivantes dans le corps de votre page :<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;div id=&quot;mapOL3&quot; style=&quot;width: 100%, height: 400px&quot;&gt;&lt;\/div&gt;\r\n&lt;script&gt; new ol.Map({ layers: [ new ol.layer.Tile({source: new ol.source.OSM()}) ], view: new ol.View2D({ center: [0, 0], zoom: 2 }), target: 'mapOL3' }); &lt;\/script&gt;\r\n<\/pre>\n<p>Ce que je reproche personnellement \u00e0 OpenLayer, c&#8217;est, en plus de son poids, son utilisation qui n&#8217;est pas toujours \u00e9vidente et intuitive.<\/p>\n<p>Vous pouvez trouver des exemples de projets cr\u00e9\u00e9s avec OpenLayers 3.0 sur la page suivante :\u00a0<a href=\"http:\/\/openlayers.org\/en\/master\/examples\/\">http:\/\/openlayers.org\/en\/master\/examples\/<\/a><\/p>\n<h3>Leaflet<\/h3>\n<p>Leaflet est la jeune librairie (5 ans quand m\u00eame) qui fait parler d&#8217;elle de plus en plus dans le domaine de la cartographie.<\/p>\n<p>Elle pr\u00f4ne la <span style=\"color: #2db3e7;\">rapidit\u00e9 de mouvement<\/span> sur les cartes, <span style=\"color: #2db3e7;\">un poids plume (123 Ko )<\/span>, et une librairie relativement <span style=\"color: #2db3e7;\">intuitive<\/span>. Elle vous permet de cr\u00e9er une carte tr\u00e8s rapidement.<\/p>\n<p>Cela sous entend par contre qu&#8217;elle ne poss\u00e8de <span style=\"color: #ff9a57;\">pas toutes les fonctionnalit\u00e9s que propose OpenLayers<\/span>. Mais les fonctionnalit\u00e9s manquantes ne sont pas nombreuses et sont souvent des points qui sont utilis\u00e9s dans des cas tr\u00e8s pouss\u00e9s. De plus Leaflet s&#8217;enrichie tr\u00e8s r\u00e9guli\u00e8rement et propose un <span style=\"color: #2db3e7;\">grand nombre de plugins<\/span> (<a href=\"http:\/\/leafletjs.com\/plugins.html\">liste des plugins \u00e0 cette adresse<\/a>).<\/p>\n<p>Ce d\u00e9coupage par plugins est un gros plus de Leaflet. Cela permet d&#8217;avoir une librairie de base qui ne p\u00e8se pas lourd et qui s\u2019ex\u00e9cute rapidement. Puis en fonction des projets les d\u00e9veloppeurs peuvent ajouter les plugins qui les int\u00e9ressent (pour une application mobile ce n&#8217;est pas anodin !).<\/p>\n<p>Pour utiliser la librairie, il faut inclure les lignes suivantes dans le header html :<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;link rel=&quot;stylesheet&quot; href=&quot;http:\/\/cdn.leafletjs.com\/leaflet-0.7.2\/leaflet.css&quot; \/&gt;\r\n&lt;script src=&quot;http:\/\/cdn.leafletjs.com\/leaflet-0.7.2\/leaflet.js&quot;&gt;&lt;\/script&gt;\r\n<\/pre>\n<p>et les lignes suivantes dans le corps de votre page :<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;div id=&quot;map&quot; style=&quot;width: 600px; height: 400px&quot;&gt;&lt;\/div&gt;\r\n<\/pre>\n<p>Vous pouvez trouver une liste d&#8217;exemples et de tutoriels \u00e0 l&#8217;adresse suivante : <a href=\"http:\/\/leafletjs.com\/examples.html\">http:\/\/leafletjs.com\/examples.html<\/a><\/p>\n<h3>Conclusion<\/h3>\n<p><strong><span style=\"color: #2db3e7;\">OpenLayers<\/span><\/strong> est une librairie mature et poss\u00e8de une exp\u00e9rience reconnue ainsi qu&#8217;une large communaut\u00e9.<br \/>\nElle propose \u00e9galement une tonne de fonctionnalit\u00e9s en tout genre, et les mises \u00e0 jours sont plus r\u00e9guli\u00e8res que Leaflet (<a href=\"https:\/\/www.openhub.net\/p\/compare?project_0=OpenLayers&amp;project_1=Leaflet\">comparaison des commits<\/a>).<br \/>\nAvec la version 3.0, ses performances et sont poids ont \u00e9galement \u00e9t\u00e9 grandement am\u00e9lior\u00e9s, et les d\u00e9veloppeurs continuent dans ce sens.<br \/>\nSi vous souhaiter int\u00e9grer une carte avec des fonctionnalit\u00e9s un peu pouss\u00e9es, je conseille donc d&#8217;utiliser OpenLayers.<\/p>\n<p><strong><span style=\"color: #2db3e7;\">Leaflet<\/span><\/strong> est le petit nouveau et le plus &#8216;excitant&#8217; \u00e0 utiliser \u00a0pour ma part.<br \/>\nCette librairie est plus simple \u00e0 utiliser, flexible, et efficace !<br \/>\nElle permet de faire a peu pr\u00e8s tout ce que peut faire OpenLayers et est surtout beaucoup plus l\u00e9g\u00e8re et beaucoup adapt\u00e9e \u00e0 une utilisation mobile.<br \/>\nEt avec la liste des plugins mis \u00e0 disposition qui ne cesse de s&#8217;agrandir, vous trouverez forcement ce que vous voulez.<\/p>\n<p>Pour ma part, j&#8217;ai d\u00e9j\u00e0 eut l&#8217;occasion de tester les 2, et sur mes derniers projets je suis pass\u00e9 uniquement sur Leaflet\u00a0et je n&#8217;ai encore jamais \u00e9t\u00e9 bloqu\u00e9 par une fonctionnalit\u00e9 manquante.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Parmi les librairies de cartographie Javascript, 3 librairies\u00a0essaient de se tailler la part du lion : Google Map Javascript API openLayers\u00a02 (et depuis peu 3.0) Leaflet Tout le monde connait google map et son business bas\u00e9 sur la publicit\u00e9. Ce qui sous entend que Google peut d\u00e9cider d&#8217;un jour \u00e0 l&#8217;autre d&#8217;int\u00e9grer des pubs dans &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/lalloue.fr\/blog\/openlayer-ou-leaflet\/\" class=\"more-link\">Continuer la lecture <span class=\"screen-reader-text\"> \u00ab\u00a0OpenLayer ou Leaflet ?\u00a0\u00bb<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[9],"tags":[20,39,21,22],"_links":{"self":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/197"}],"collection":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/comments?post=197"}],"version-history":[{"count":5,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/197\/revisions"}],"predecessor-version":[{"id":326,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/197\/revisions\/326"}],"wp:attachment":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/media?parent=197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/categories?post=197"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/tags?post=197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}