{"id":3696,"date":"2016-08-11T17:09:33","date_gmt":"2016-08-11T17:09:33","guid":{"rendered":"http:\/\/www.ticeman.fr\/lecoutelas\/?p=3696"},"modified":"2018-07-24T21:00:52","modified_gmt":"2018-07-24T21:00:52","slug":"mapsvg-construisez-vos-cartes-interactives-directement-dans-wordpress","status":"publish","type":"post","link":"https:\/\/www.ticeman.fr\/lecoutelas\/?p=3696","title":{"rendered":"Mapsvg: construisez vos cartes interactives directement dans wordpress"},"content":{"rendered":"<p>WordPress par le biais de multiples extensions est en train de devenir un v\u00e9ritable outil d&#8217;\u00e9dition et de construction. On l&#8217;a vu avec <a href=\"http:\/\/www.ticeman.fr\/lecoutelas\/?p=2641\" target=\"_blank\" rel=\"noopener\">H5P<\/a>, cette extension qui permet de rendre votre wordpress vraiment interactif. Mapsvg confirme cette tendance. A savoir, ici, on ne teste que le version gratuite qui permet d\u00e9j\u00e0 quelques \u00e9l\u00e9ments. la version payante \u00e0 35 euros permet beaucoup plus notamment l&#8217;utilisation de javascript qui ajoute une grosse dose d&#8217;interactivit\u00e9.<\/p>\n<p>Le principe est tr\u00e8s simple, Map svg permet de construire des cartes interactives sans sortir de WordPress. il faut seulement une carte au format svg et ensuite param\u00e9trer quelques \u00e9l\u00e9ments dans votre blogs. le rendu de base \u00a0est celui ci. Vous pouvez tester en cliquant sur la Bretagne, la Normandie et les Hauts de France ainsi que la r\u00e9gion o\u00f9 se trouve le puy du fou.<\/p>\n<p>[mapsvg id=&#8221;3690&#8243; title=&#8221;nouvelles regions&#8221;]<\/p>\n<p>Pour obtenir cela, il suffit donc de s\u00e9lectionner une carte au fomat svg ou simplement de l&#8217;importer. pour l&#8217;import il faut que le dossier de stockage des cartes soit en chmod 777, ce qui est tr\u00e8s moyen. mais vous pouvez aussi d\u00e9poser vos cartes par FTP si vous le souhaitez et ensuite les s\u00e9lectionner dans le menu d\u00e9roulant. Cet accueil vous permet aussi de choisir vos anciennes cartes d\u00e9j\u00e0 r\u00e9alis\u00e9es.<\/p>\n<p><a  href=\"http:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2016\/08\/mapsvg-import.png\" data-rel=\"lightbox-gallery-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-3697\" src=\"http:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2016\/08\/mapsvg-import-300x169.png\" alt=\"mapsvg import\" width=\"300\" height=\"169\" srcset=\"https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2016\/08\/mapsvg-import-300x169.png 300w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2016\/08\/mapsvg-import-768x432.png 768w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2016\/08\/mapsvg-import-1024x576.png 1024w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2016\/08\/mapsvg-import.png 1920w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Ensuite, une fois la carte choisie, on passe au mode \u00e9dition. Il y a plus user friendly mais c&#8217;est relativement simple. pour chaque \u00e9l\u00e9ment que vous ajoutez, zones ou marqueurs, il suffit de renseigner les param\u00e8tres apparaissant au survol. Pour le test j&#8217;ai fait simple et saisi simplement du texte mais il est possible pour rendre les choses plus belles de saisir de l&#8217;html \u00a0pour changer l&#8217;apparence. Dans la version gratuite les zones ont toutes la m\u00eame couleur.<\/p>\n<p><a  href=\"http:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2016\/08\/mapsvgzone.png\" data-rel=\"lightbox-gallery-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-3698\" src=\"http:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2016\/08\/mapsvgzone-300x169.png\" alt=\"mapsvgzone\" width=\"300\" height=\"169\" srcset=\"https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2016\/08\/mapsvgzone-300x169.png 300w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2016\/08\/mapsvgzone-768x432.png 768w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2016\/08\/mapsvgzone-1024x576.png 1024w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2016\/08\/mapsvgzone.png 1920w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Il est possible de modifier les param\u00e8tres de chaque zone une \u00e0 une et certaines peuvent \u00eatre d\u00e9sactiv\u00e9s si vous souhaitez rendre seulement certains \u00e9l\u00e9ments cliquables. Par ce biais, il est possible de contourner quelques limitations de la version gratuite. Une fois votre carte enti\u00e8rement r\u00e9alis\u00e9e, elle reste stock\u00e9e dans le syst\u00e8me. Lorsque vous en avez besoin, il suffit dans la barre d&#8217;outil des articles d&#8217;ins\u00e9rer une carte avec le bouton correspondant.<\/p>\n<p><a  href=\"http:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2016\/08\/mapsvg-insert.png\" data-rel=\"lightbox-gallery-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-3699\" src=\"http:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2016\/08\/mapsvg-insert-300x169.png\" alt=\"mapsvg insert\" width=\"300\" height=\"169\" srcset=\"https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2016\/08\/mapsvg-insert-300x169.png 300w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2016\/08\/mapsvg-insert-768x432.png 768w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2016\/08\/mapsvg-insert-1024x576.png 1024w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2016\/08\/mapsvg-insert.png 1920w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Cela a pour effet de placer \u00e0 l&#8217;endroit d\u00e9sir\u00e9 un code. lors de la lecture de l&#8217;article il sera remplac\u00e9 par votre carte comme pr\u00e9c\u00e9demment dans ce m\u00eame billet. Un clic pour ins\u00e9rer et ensuite il suffit de chosir votre carte dans la liste apparaissant. il faut bien le dire, cette liste n&#8217;est pas claire puisque toutes les cartes apparaissent sur le m\u00eame ligne mais elles se distinguent au survol.<\/p>\n<p><a  href=\"http:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2016\/08\/mapsvg-xhoix.png\" data-rel=\"lightbox-gallery-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-3700\" src=\"http:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2016\/08\/mapsvg-xhoix-300x169.png\" alt=\"mapsvg xhoix\" width=\"300\" height=\"169\" srcset=\"https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2016\/08\/mapsvg-xhoix-300x169.png 300w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2016\/08\/mapsvg-xhoix-768x432.png 768w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2016\/08\/mapsvg-xhoix-1024x576.png 1024w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2016\/08\/mapsvg-xhoix.png 1920w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Un outil pratique et gratuit qui vous permettra d&#8217;apporter un peu d&#8217;interactivit\u00e9 avec des fen\u00eatres popup ou des liens directement dans vos cartes. Pour l&#8217;exemple ci-dessus, la r\u00e9alisation a pris moins d&#8217;une minute. La version payante apporte beaucoup d&#8217;\u00e9l\u00e9ments suppl\u00e9mentaires en terme d&#8217;activit\u00e9 ou de personnalisation. Toutes vos cartes au format svg peuvent \u00eatre utilis\u00e9es \u00e0 condition bien entendu que les zones soient bien identifi\u00e9es. A noter que lors de l&#8217;enregistrement il arrive que le syst\u00e8me bug et ne prenne pas en compte vos modification. J&#8217;ai pu constat\u00e9 que cela n&#8217;arrivait pas si vous quittiez la zone d&#8217;\u00e9dition en utilisant le menu principal MapSvg.<\/p>\n<p>Lien: <a href=\"https:\/\/codecanyon.net\/item\/mapsvg-responsive-vector-maps-floorplans-interactive-svg-images-plugin\/2547255\" target=\"_blank\" rel=\"noopener\">Mapsvg<\/a><\/p>\n<p>La version lite se retrouve simplement en cherchant Mapsvg dans les extensions de wordpress<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress par le biais de multiples extensions est en train de devenir un v\u00e9ritable outil d&#8217;\u00e9dition et de construction. On l&#8217;a vu avec&hellip;<a href=\"https:\/\/www.ticeman.fr\/lecoutelas\/?p=3696\" class=\"more-link\"><span class=\"more-button\">Continuez la lecture<span class=\"screen-reader-text\">Mapsvg: construisez vos cartes interactives directement dans wordpress<\/span><\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":3697,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,116,18],"tags":[],"class_list":["post-3696","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-images","category-rendre-des-images-interactives","category-sigcarto"],"_links":{"self":[{"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=\/wp\/v2\/posts\/3696"}],"collection":[{"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3696"}],"version-history":[{"count":3,"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=\/wp\/v2\/posts\/3696\/revisions"}],"predecessor-version":[{"id":7360,"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=\/wp\/v2\/posts\/3696\/revisions\/7360"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=\/wp\/v2\/media\/3697"}],"wp:attachment":[{"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3696"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3696"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}