{"id":3896,"date":"2013-07-18T16:56:14","date_gmt":"2013-07-18T14:56:14","guid":{"rendered":"http:\/\/flaven.fr\/?p=3896"},"modified":"2013-10-12T15:00:15","modified_gmt":"2013-10-12T13:00:15","slug":"mapbox-google-map-api-une-des-meilleurs-api-pour-la-geolocalisation-et-un-plugin-wordpress-dinsertion-de-cartes","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2013\/07\/mapbox-google-map-api-une-des-meilleurs-api-pour-la-geolocalisation-et-un-plugin-wordpress-dinsertion-de-cartes\/","title":{"rendered":"MapBox, Google Map, API &#8211; Une des meilleurs API pour la g\u00e9olocalisation et un plugin WordPress d&#8217;insertion de cartes"},"content":{"rendered":"\n<p><!--  MapBox, Google Map, API - Une des meilleurs API pour la g\u00e9olocalisation, plus un plugin WordPress d'insertion de cartes  --><br \/>\n\t<!--  MapBox, Google Map, API, g\u00e9olocalisation, UX, cartographie, customisation --><\/p>\n<p>\tMapBox, voila semble-t-il un tr\u00e8s s\u00e9rieux concurrent \u00e0 Google Map ? Qui pourrait imaginer aujourd&#8217;hui qu&#8217;une telle concurrence fusse possible ? Eh bien MapBox l&#8217;a fait ! Outre l&#8217;excellente API et de l&#8217;excellent \u00e9quipe qui est derri\u00e8re ce SaaS mis \u00e0 votre disposition, c&#8217;est que MapBox a privil\u00e9gi\u00e9 une chose qui est sans aucun doute une \u00e9l\u00e9ment d\u00e9terminant :  l&#8217;esth\u00e9tique et l&#8217;UX en clair l&#8217;output, ce qui fait qui rend possible son adoption par les hyst\u00e9riques de la g\u00e9olocalisation ou par les cabinets d&#8217;architecte f\u00e9rus de rendu de carte&#8230;<\/p>\n<h4>MapBox, boite de pandore de la g\u00e9olocalisation<\/h4>\n<p>\tPour les fans de storytelling, voici un aper\u00e7u de l&#8217;historique qui a men\u00e9 \u00e0 la cr\u00e9ation de cette magistrale API, d&#8217;ailleurs utilis\u00e9 par Le Monde. La promesse est simple et le service l&#8217;est aussi.<\/p>\n<blockquote><p>We started MapBox to make it easy for anyone to design and publish a beautiful custom map.<\/p><\/blockquote>\n<p>\t<i>Source : <a href=\"http:\/\/www.mapbox.com\/about\/\" target=\"_blank\">http:\/\/www.mapbox.com\/about\/<\/a><\/i><\/p>\n<h4>Un plugin d&#8217;affichage de carte<\/h4>\n<p>On a donc d\u00e9cid\u00e9 de mettre en ordre via un plugin nomm\u00e9 <code>he3_mapbox_plugin.php<\/code> destin\u00e9 \u00e0 WordPress pour permettre de contr\u00f4ler l&#8217;insertion de cartes au sein de pages ou d&#8217;articles.<\/p>\n<p><b>Il faut d&#8217;abord plac\u00e9 ces \u00e9l\u00e9ments dans &lt;head&gt;&#8230;&lt;\/head&gt; pour charger l&#8217;ensemble de la biblioth\u00e8que de l&#8217;api MapBox<\/b><\/p>\n<pre lang=\"html\" escaped=\"true\">\r\n\t\r\n\t\r\n\t  &lt;meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' \/&gt;\r\n\t  &lt;script src='http:\/\/api.tiles.mapbox.com\/mapbox.js\/v1.0.2\/mapbox.js'&gt;&lt;\/script&gt;\r\n\t  &lt;link href='http:\/\/api.tiles.mapbox.com\/mapbox.js\/v1.0.2\/mapbox.css' rel='stylesheet' \/&gt;\r\n\t  &lt;!--[if lte IE 8]&gt;\r\n\t    &lt;link href='http:\/\/api.tiles.mapbox.com\/mapbox.js\/v1.0.2\/mapbox.ie.css' rel='stylesheet' &gt;\r\n\t  &lt;![endif]--&gt;\r\n\r\n\t\r\n<\/pre>\n<blockquote><p><a href=\"http:\/\/social.hecube.net\/wp-content\/uploads\/2013\/07\/he3_mapbox_plugin.zip\" target=\"_blank\">Le plugin de <code>Shortcode<\/code> pour afficher des carte de mapbox (he3_mapbox_plugin.zip)<\/a><\/p><\/blockquote>\n<pre lang=\"html\">\r\n\t\r\n\tFULLCONTROL (Moscow)\r\n\t\t[mapbox map=\"examples.map-20v6611k\" width=\"600\" height=\"400\" zoomcontrol=\"1\" mapdragging=\"1\" maptouchzoom=\"1\" mapdoubleclickzoom=\"1\" mapscrollwheelzoom=\"1\" latitude=\"55.7512419\" longitude=\"37.6184217\" zoomlevel=\"12\"]\r\n\t\t<br\/><br\/>\r\n\r\n\t\tFULLCONTROL (Paris)\r\n\t\t[mapbox map=\"examples.map-zgrqqx0w\" width=\"300\" height=\"200\" zoomcontrol=\"0\" mapdragging=\"0\" maptouchzoom=\"0\" mapdoubleclickzoom=\"0\" mapscrollwheelzoom=\"0\" latitude=\"48.8566140\" longitude=\"2.3522219\" zoomlevel=\"6\"]\r\n\t\t<br\/><br\/>\r\n\t\t<br\/><br\/>\r\n\r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/07\/wp_mapbox_plugin_1.jpg\" alt=\"MapBox, Google Map, API - Une des meilleurs API pour la g\u00e9olocalisation, plus un plugin WordPress d'insertion de cartes\" width=\"500\" height=\"313\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/07\/wp_mapbox_plugin_2.jpg\" alt=\"MapBox, Google Map, API - Une des meilleurs API pour la g\u00e9olocalisation, plus un plugin WordPress d'insertion de cartes\" width=\"500\" height=\"313\" \/><\/p>\n<p><b>Le code source du plugin <code>he3_mapbox_plugin.php<\/code><\/b><\/p>\n<pre lang=\"php\" escaped=\"true\">\r\n\t\r\n\t&lt;?php\r\n\r\n\t\/*\r\n\tPlugin Name: he3_mapbox_plugin\r\n\tPlugin URI: http:\/\/hecube.net\r\n\tDescription: How to manage MapBox maps in WP\r\n\tVersion: 1.0\r\n\tAuthor: Hecube\r\n\tAuthor URI: http:\/\/hecube.net\r\n\t*\/\r\n\r\n\r\n\t\/*\r\n\tUSAGE \r\n\r\n\t----  NOTE ----\r\n\tReplace the example by your own map eg examples.map-20v6611k\r\n\t---- \/\/ NOTE ----\r\n\r\n\r\n\t---- SHORTCODES - Get map and set default options ----\r\n\tDEFAULT [mapbox]\t\r\n\tHALFCONTROL [mapbox map=\"examples.map-20v6611k\" zoomcontrol=\"0\"]\t\r\n\tFULLCONTROL [mapbox map=\"examples.map-20v6611k\" width=\"350\" height=\"200\" zoomcontrol=\"1\" mapdragging=\"1\" maptouchzoom=\"1\" mapdoubleclickzoom=\"1\" mapscrollwheelzoom=\"1\" latitude=\"48.8566140\" longitude=\"2.3522219\" zoomlevel=\"7\"]\r\n\t---- \/\/ SHORTCODES ----\r\n\t*\/\r\n\r\n\t\/\/ Register shortcodes [mapbox]\r\n\tadd_shortcode( 'mapbox', 'he3_mapbox_agter' );\r\n\r\n\r\n\r\n\t\/\/ Callback function for the [mapbox] shortcode\r\n\tfunction he3_mapbox_agter( $attr, $content ) {\r\n\r\n\t    $possible = array( 'map');\r\n\t    $map = he3_mapbox_find( $possible, $attr, 'examples.map-20v6611k' );\r\n\r\n\t\t$possible = array( 'zoomcontrol' );\r\n\t    $zoomcontrol = he3_mapbox_find ( $possible, $attr, '0' );\r\n\r\n\t        switch( $zoomcontrol ) {\r\n\t            case '1':\r\n\t                $zoomcontrol_cmd = 'true';\r\n\t                break;\r\n\t            default:\r\n\t                $zoomcontrol_cmd = 'false';\r\n\t             break;\r\n\t        }\/\/EOC\r\n\r\n\t\t\t\/* mapdragging_cmd *\/\r\n\t\t\t$possible = array( 'mapdragging' );\r\n\t\t    $mapdragging = he3_mapbox_find ( $possible, $attr, '0' );\r\n\r\n\t\t        switch( $mapdragging ) {\r\n\t\t            case '1':\r\n\t\t                $mapdragging_cmd = 'map.dragging.enable();';\r\n\t\t                break;\r\n\t\t            default:\r\n\t\t                $mapdragging_cmd = 'map.dragging.disable();';\r\n\t\t             break;\r\n\t\t        }\/\/EOC\r\n\r\n\t\t\t\t\/* maptouchzoom_cmd *\/\t\r\n\t\t\t\t$possible = array( 'maptouchzoom' );\r\n\t\t\t\t$maptouchzoom = he3_mapbox_find ( $possible, $attr, '0' );\r\n\r\n\t\t\t\tswitch( $maptouchzoom ) {\r\n\t            case '1':\r\n\t                $maptouchzoom_cmd = 'map.touchZoom.enable();';\r\n\t                break;\r\n\t            default:\r\n\t                $maptouchzoom_cmd = 'map.touchZoom.disable();';\r\n\t             break;\r\n\t        \t}\/\/EOC\r\n\r\n\t\t\t\/* mapdoubleclickzoom_cmd *\/\t\r\n\t\t\t$possible = array( 'mapdoubleclickzoom' );\r\n\t\t\t$mapdoubleclickzoom = he3_mapbox_find ( $possible, $attr, '0' );\r\n\r\n\t\t\t\t\t\tswitch( $mapdoubleclickzoom ) {\r\n\t\t\t\t\t            case '1':\r\n\t\t\t\t\t                $mapdoubleclickzoom_cmd = 'map.doubleClickZoom.enable();';\r\n\t\t\t\t\t                break;\r\n\t\t\t\t\t            default:\r\n\t\t\t\t\t                $mapdoubleclickzoom_cmd = 'map.doubleClickZoom.disable();';\r\n\t\t\t\t\t             break;\r\n\t\t\t\t\t\t\t\t}\/\/EOC\r\n\r\n\t\t\t\/* mapscrollwheelzoom_cmd *\/\t\r\n\t\t\t$possible = array( 'mapscrollwheelzoom' );\r\n\t\t\t$mapscrollwheelzoom = he3_mapbox_find ( $possible, $attr, '0' );\r\n\r\n\t\t\t\t\tswitch( $mapscrollwheelzoom ) {\r\n\t\t\t\t            case '1':\r\n\t\t\t\t                $mapscrollwheelzoom_cmd = 'map.scrollWheelZoom.enable();';\r\n\t\t\t\t                break;\r\n\t\t\t\t            default:\r\n\t\t\t\t                $mapscrollwheelzoom_cmd = 'map.scrollWheelZoom.disable();';\r\n\t\t\t\t             break;\r\n\t\t\t\t        }\/\/EOC\r\n\r\n\t\t\t\t\t\t\/* width_cmd *\/\t\r\n\t\t\t\t\t\t$possible = array( 'width' );\r\n\t\t\t\t\t\t$width = he3_mapbox_find ( $possible, $attr, '' );\r\n\r\n\t\t\t\t\t\t\t\tif ( $width!='') {\r\n\t\t\t\t\t\t\t                $width_cmd = ''.$width.'';\r\n\t\t\t\t\t\t\t   } else {\r\n\t\t\t\t\t\t\t                $width_cmd = '500';\r\n\t\t\t\t\t\t\t   }\/\/EOI\r\n\t\t\t\t\t\/* height_cmd *\/\t\r\n\t\t\t\t\t\t\t\t$possible = array( 'height' );\r\n\t\t\t\t\t\t\t\t$height = he3_mapbox_find ( $possible, $attr, '' );\r\n\r\n\t\t\t\t\tif ( $height!='') {\r\n\t\t\t\t             $height_cmd = ''.$height.'';\r\n\t   \t\t\t\t\t} else {\r\n\t\t\t\t                $height_cmd = '400';\r\n\t\t\t\t        }\/\/EOI\r\n\r\n\t\t\t\t\t\t\/* height_cmd *\/\t\r\n\t\t\t\t\t\t\t\t\t$possible = array( 'height' );\r\n\t\t\t\t\t\t\t\t\t$height = he3_mapbox_find ( $possible, $attr, '' );\r\n\r\n\t\t\t\t\t\tif ( $height!='') {\r\n\t\t\t\t\t             $height_cmd = ''.$height.'';\r\n\t\t   \t\t\t\t\t} else {\r\n\t\t\t\t\t                $height_cmd = '400';\r\n\t\t\t\t\t        }\/\/EOI\r\n\r\n\r\n\t\t\t\t\t\t\t\/* latitude_cmd *\/\t\r\n\t\t\t\t\t\t\t\t\t\t$possible = array( 'latitude' );\r\n\t\t\t\t\t\t\t\t\t\t$latitude = he3_mapbox_find ( $possible, $attr, '' );\r\n\r\n\t\t\t\t\t\t\tif ( $latitude!='') {\r\n\t\t\t\t\t\t             $latitude_cmd = ''.$latitude.'';\r\n\t\t\t   \t\t\t\t\t} else {\r\n\t\t\t\t\t\t\t\t\t\t\/* Paris latitude *\/\r\n\t\t\t\t\t\t                $latitude_cmd = '48.8566140';\r\n\t\t\t\t\t\t        }\/\/EOI\r\n\r\n\t\t\t\t\t\t\t\t\/* longitude_cmd *\/\t\r\n\t\t\t\t\t\t\t\t\t\t\t$possible = array( 'longitude' );\r\n\t\t\t\t\t\t\t\t\t\t\t$longitude = he3_mapbox_find ( $possible, $attr, '' );\r\n\r\n\t\t\t\t\t\t\t\tif ( $longitude!='') {\r\n\t\t\t\t\t\t\t             $longitude_cmd = ''.$longitude.'';\r\n\t\t\t\t   \t\t\t\t\t} else {\r\n\t\t\t\t\t\t\t\t\t\t\t\/* Paris longitude *\/\r\n\t\t\t\t\t\t\t                $longitude_cmd = '2.3522219';\r\n\t\t\t\t\t\t\t        }\/\/EOI\r\n\t\t\t\t\t\t\t\t\t\t\/* zoomlevel_cmd *\/\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t$possible = array( 'zoomlevel' );\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t$zoomlevel = he3_mapbox_find ( $possible, $attr, '' );\r\n\r\n\t\t\t\t\t\t\t\t\t\tif ( $zoomlevel!='') {\r\n\t\t\t\t\t\t\t\t\t             $zoomlevel_cmd = ''.$zoomlevel.'';\r\n\t\t\t\t\t\t   \t\t\t\t\t} else {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\/* zoom level by default *\/\r\n\t\t\t\t\t\t\t\t\t                $zoomlevel_cmd = '3';\r\n\t\t\t\t\t\t\t\t\t        }\/\/EOI\r\n\r\n\t\t\t\t\t\t\/* CSS id for the map based on the map name given by MapBox *\/\r\n\t\t\t\t\t\t$char   = '-';\r\n\t\t\t\t\t\t$length = strlen($map);\r\n\t\t\t\t\t\t$pos = strpos($map, $char);\r\n\t\t\t\t\t\t$map_id = substr($map, $pos, ($length-$pos));\r\n\r\n\t\t\t\t\t   \t$output_string =   '&lt;!-- mapbox --&gt;';\r\n\t\t\t\t\t\t$output_string .=   \"ttn\";\r\n\t\t\t\t\t   \t$output_string .=  '&lt;div id='map'.$map_id.'' style='width:'.$width_cmd.'px;height:'.$height_cmd.'px'&gt;&lt;\/div&gt;';\r\n\t\t\t\t\t    \/\/ $output_string .=  '&lt;div id='map-'.$map.''&gt;&lt;\/div&gt;';\r\n\t\t\t\t\t\t$output_string .=   \"ttn\";\r\n\t\t\t\t\t   \t$output_string .=  '&lt;script&gt;';\r\n\t\t\t\t\t\t$output_string .=   \"ttn\";\r\n\t\t\t\t\t   \t$output_string .=  'var map = L.mapbox.map('map'.$map_id.'', ''.$map.'', ';\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t$output_string .=   \"ttn\";\r\n\t\t\t\t\t   \t$output_string .=  '{';\r\n\t\t\t\t\t\t$output_string .=   \"ttn\";\t\t\t\t\r\n\t\t\t\t\t   \t$output_string .=  'zoomControl: '.$zoomcontrol_cmd.'';\r\n\t\t\t\t\t\t$output_string .=   \"ttn\";\r\n\t\t\t\t\t\t$output_string .=   '});';\r\n\t\t\t\t\t\t$output_string .=   \"ttn\";\r\n\t\t\t\t\t\t$output_string .=  '\/\/Latitude, Longitude, Zoom';\r\n\t\t\t\t\t\t$output_string .=   \"ttn\";\r\n\t\t\t\t\t\t$output_string .=  'map.setView(['.$latitude_cmd.', '.$longitude_cmd.'], '.$zoomlevel_cmd.');';\r\n\t\t\t\t\t\t$output_string .=   \"ttn\";\r\n\t\t\t\t\t\t$output_string .=  '\/\/ disable drag and zoom handlers';\r\n\t\t\t\t\t\t$output_string .=   \"ttn\";\r\n\t\t\t\t\t\t$output_string .=  ''.$mapdragging_cmd.'';\r\n\t\t\t\t\t\t$output_string .=   \"ttn\";\r\n\t\t\t\t\t\t$output_string .=  ''.$maptouchzoom_cmd.'';\r\n\t\t\t\t\t\t$output_string .=   \"ttn\";\r\n\t\t\t\t\t\t$output_string .=  ''.$mapdoubleclickzoom_cmd.'';\r\n\t\t\t\t\t\t$output_string .=   \"ttn\";\r\n\t\t\t\t\t\t$output_string .=  ''.$mapscrollwheelzoom_cmd.'';\r\n\t\t\t\t\t\t$output_string .=   \"ttn\";\r\n\t\t\t\t\t   \t$output_string .=  '&lt;\/script&gt;';\r\n\t\t\t\t\t\t$output_string .=   \"ttn\";\r\n\t\t\t\t\t   \t$output_string .=  '&lt;!-- \/\/ mapbox --&gt;';\r\n\t\t\t\t\t\t$output_string .=   \"ttn\";\r\n\r\n\t\t\/* RETURN THE RESULT *\/\r\n\t\t\tob_start();\r\n\t\t\treturn $output_string;\r\n\t\t\tob_end_clean();\t\r\n\t}\r\n\r\n\t\/\/ Helper function:\r\n\t\/\/ Search $find_keys in array $in_array, return $default if not found\r\n\tfunction he3_mapbox_find( $find_keys, $in_array, $default ) {\r\n\t    foreach( $find_keys as $key ) {\r\n\t        if( isset( $in_array[$key] ) )\r\n\t            return $in_array[$key];\r\n\t    }\r\n\t    return $default;\r\n\t}\r\n\r\n\t\/\/ Add a menu for our option page\r\n\tadd_action('admin_menu', 'he3_mapbox_myplugin_add_page');\r\n\tfunction he3_mapbox_myplugin_add_page() {\r\n\t\tadd_options_page( 'MapBox Help', 'MapBox Help', 'manage_options', 'he3_mapbox_myplugin', 'he3_mapbox_myplugin_option_page' );\r\n\t}\r\n\r\n\t\/\/ Draw the option page\r\n\tfunction he3_mapbox_myplugin_option_page() {\r\n\t\t?&gt;\r\n\t\t&lt;div class=\"wrap\"&gt;\r\n\t\t\t&lt;?php screen_icon(); ?&gt;\r\n\t\t\t&lt;h2&gt;MapBox ShortCodes&lt;\/h2&gt;\r\n\t\t\t&lt;form action=\"options.php\" method=\"post\"&gt;\r\n\t\t\t\t&lt;?php settings_fields('he3_mapbox_myplugin_options'); ?&gt;\r\n\t\t\t\t&lt;?php do_settings_sections('he3_mapbox_myplugin'); ?&gt;\r\n\t\t\t&lt;\/form&gt;\r\n\t\t&lt;\/div&gt;\r\n\t\t&lt;?php\r\n\t}\r\n\r\n\r\n\t\/\/ Register and define the settings\r\n\tadd_action('admin_init', 'he3_mapbox_myplugin_admin_init');\r\n\tfunction he3_mapbox_myplugin_admin_init(){\r\n\t\tregister_setting(\r\n\t\t\t'he3_mapbox_myplugin_options',\r\n\t\t\t'he3_mapbox_myplugin_options',\r\n\t\t\t'he3_mapbox_validate_options'\r\n\t\t);\r\n\t\tadd_settings_section(\r\n\t\t\t'he3_mapbox_myplugin_main',\r\n\t\t\t'MapBox Shortcodes',\r\n\t\t\t'he3_mapbox_myplugin_section_text',\r\n\t\t\t'he3_mapbox_myplugin'\r\n\t\t);\r\n\r\n\t}\r\n\t\/\/ Draw the section header\r\n\tfunction he3_mapbox_myplugin_section_text() {\r\n\t?&gt;\r\n\t&lt;?php\r\n\t\/* values  *\/\r\n\t$nb_rows_textarea = '3';\r\n\t$nb_cols_textarea = '30';\r\n\r\n\t?&gt;\r\n\r\n\r\n\r\n\t&lt;ol&gt;\r\n\r\n\t&lt;!-- SHORTCODES --&gt;\r\n\t&lt;li&gt;\r\n\r\n\t&lt;p&gt;&lt;strong&gt;How do I use the shortcodes?&lt;\/strong&gt;&lt;\/p&gt;\r\n\r\n\t&lt;table class=\"form-table\" border=\"0\"&gt;\r\n\t&lt;tr valign=\"top\"&gt;\r\n\t&lt;th scope=\"row\"&gt;&lt;strong&gt;SHORTCODE&lt;\/strong&gt;&lt;\/th&gt;\r\n\t&lt;th scope=\"row\"&gt;&lt;strong&gt;DESCRIPTION&lt;\/strong&gt;&lt;\/th&gt;\r\n\t&lt;\/tr&gt;\r\n\r\n\t&lt;!-- line --&gt;\r\n\t&lt;tr&gt;\r\n\t\t&lt;td valign=\"top\"&gt;&lt;textarea name=\"he3_mapbox_shortcodes\" rows=\"&lt;?php echo $nb_rows_textarea;?&gt;\" cols=\"&lt;?php echo $nb_cols_textarea;?&gt;\" id=\"he3_mapbox_shortcodes\" class=\"small-text code\"&gt;[mapbox]&lt;\/textarea&gt;&lt;\/td&gt;\r\n\t\t&lt;td valign=\"top\"&gt;Show the map by default&lt;\/td&gt;\r\n\r\n\t&lt;\/tr&gt;\r\n\t&lt;!-- \/\/ line --&gt;\r\n\r\n\t&lt;!-- line --&gt;\r\n\t&lt;tr&gt;\r\n\t\t&lt;td valign=\"top\"&gt;&lt;textarea name=\"he3_mapbox_shortcodes\" rows=\"&lt;?php echo $nb_rows_textarea;?&gt;\" cols=\"&lt;?php echo $nb_cols_textarea;?&gt;\" id=\"he3_mapbox_shortcodes\" class=\"small-text code\"&gt;[mapbox map=\"examples.map-20v6611k\" zoomcontrol=\"1\"]&lt;\/textarea&gt;&lt;\/td&gt;\r\n\t\t&lt;td valign=\"top\"&gt;Show a specific with controls&lt;\/td&gt;\r\n\r\n\t&lt;\/tr&gt;\r\n\t&lt;!-- \/\/ line --&gt;\r\n\r\n\t&lt;!-- line --&gt;\r\n\t&lt;tr&gt;\r\n\t\t&lt;td valign=\"top\"&gt;&lt;textarea name=\"he3_mapbox_shortcodes\" rows=\"&lt;?php echo $nb_rows_textarea;?&gt;\" cols=\"&lt;?php echo $nb_cols_textarea;?&gt;\" id=\"he3_mapbox_shortcodes\" class=\"small-text code\"&gt;[mapbox map=\"examples.map-20v6611k\" width=\"350\" height=\"200\" zoomcontrol=\"1\" mapdragging=\"1\" maptouchzoom=\"1\" mapdoubleclickzoom=\"1\" mapscrollwheelzoom=\"1\" latitude=\"48.8566140\" longitude=\"2.3522219\" zoomlevel=\"7\"]&lt;\/textarea&gt;&lt;\/td&gt;\r\n\t\t&lt;td valign=\"top\"&gt;Show a specific with all kind of controls + map size + center point + zoom level.&lt;\/td&gt;\r\n\r\n\t&lt;\/tr&gt;\r\n\t&lt;!-- \/\/ line --&gt;\r\n\r\n\t&lt;\/table&gt;\r\n\t&lt;\/li&gt;\r\n\r\n\t&lt;li&gt;\r\n\r\n\t\t&lt;p&gt;&lt;strong&gt;How do I know the values for the attributes of the shortcodes?&lt;\/strong&gt;&lt;\/p&gt;\r\n\r\n\r\n\r\n\t\t&lt;table class=\"form-table\" border=\"0\"&gt;\r\n\t\t&lt;tr valign=\"top\"&gt;\r\n\t\t&lt;th scope=\"row\"&gt;&lt;strong&gt;ATTRIBUTES&lt;\/strong&gt;&lt;\/th&gt;\r\n\t\t&lt;th scope=\"row\"&gt;&lt;strong&gt;VAUES&lt;\/strong&gt;&lt;\/th&gt;\r\n\t\t&lt;\/tr&gt;\r\n\r\n\t\t&lt;!-- Latitude, Longitude, Zoom --&gt;\r\n\t\t&lt;!-- line --&gt;\r\n\t\t&lt;tr&gt;\r\n\t\t\t&lt;td valign=\"top\"&gt;&lt;textarea name=\"he3_mapbox_shortcodes\" rows=\"&lt;?php echo $nb_rows_textarea;?&gt;\" cols=\"&lt;?php echo $nb_cols_textarea;?&gt;\" id=\"he3_mapbox_shortcodes\" class=\"small-text code\"&gt;[mapbox latitude=\"48.8566140\" longitude=\"2.3522219\" zoomlevel=\"7\"]&lt;\/textarea&gt;&lt;\/td&gt;\r\n\t\t\t&lt;td valign=\"top\"&gt;Define the latitude, the longitude of the central point and the zoom level of the map. By default, we have set the central point in Paris (48.8566140, 2.3522219) and the zoom level to 3.&lt;\/td&gt;\r\n\r\n\t\t&lt;\/tr&gt;\r\n\t\t&lt;!-- \/\/ line --&gt;\r\n\t\t&lt;!-- line --&gt;\r\n\t\t&lt;tr&gt;\r\n\t\t\t&lt;td valign=\"top\"&gt;&lt;textarea name=\"he3_mapbox_shortcodes\" rows=\"&lt;?php echo $nb_rows_textarea;?&gt;\" cols=\"&lt;?php echo $nb_cols_textarea;?&gt;\" id=\"he3_mapbox_shortcodes\" class=\"small-text code\"&gt;[mapbox width=\"300\" height=\"250\"]&lt;\/textarea&gt;&lt;\/td&gt;\r\n\t\t\t&lt;td valign=\"top\"&gt;Define the width and the height of the map&lt;\/td&gt;\r\n\r\n\t\t&lt;\/tr&gt;\r\n\t\t&lt;!-- \/\/ line --&gt;\r\n\r\n\t\t&lt;!-- line --&gt;\r\n\t\t&lt;tr&gt;\r\n\t\t\t&lt;td valign=\"top\"&gt;&lt;textarea name=\"he3_mapbox_shortcodes\" rows=\"&lt;?php echo $nb_rows_textarea;?&gt;\" cols=\"&lt;?php echo $nb_cols_textarea;?&gt;\" id=\"he3_mapbox_shortcodes\" class=\"small-text code\"&gt;[mapbox map=\"examples.map-20v6611k\"]&lt;\/textarea&gt;&lt;\/td&gt;\r\n\t\t\t&lt;td valign=\"top\"&gt;The value is by default examples.map-20v6611k&lt;\/td&gt;\r\n\r\n\t\t&lt;\/tr&gt;\r\n\t\t&lt;!-- \/\/ line --&gt;\r\n\r\n\t\t&lt;!-- line --&gt;\r\n\t\t&lt;tr&gt;\r\n\t\t\t&lt;td valign=\"top\"&gt;&lt;textarea name=\"he3_mapbox_shortcodes\" rows=\"&lt;?php echo $nb_rows_textarea;?&gt;\" cols=\"&lt;?php echo $nb_cols_textarea;?&gt;\" id=\"he3_mapbox_shortcodes\" class=\"small-text code\"&gt;[mapbox mmapzoomcontrol=\"0\"]&lt;\/textarea&gt;&lt;\/td&gt;\r\n\t\t\t&lt;td valign=\"top\"&gt;With 1, you enable, with 0 you disable the zoom control&lt;\/td&gt;\r\n\r\n\t\t&lt;\/tr&gt;\r\n\t\t&lt;!-- \/\/ line --&gt;\r\n\r\n\r\n\t\t&lt;!-- line --&gt;\r\n\t\t&lt;tr&gt;\r\n\t\t\t&lt;td valign=\"top\"&gt;&lt;textarea name=\"he3_mapbox_shortcodes\" rows=\"&lt;?php echo $nb_rows_textarea;?&gt;\" cols=\"&lt;?php echo $nb_cols_textarea;?&gt;\" id=\"he3_mapbox_shortcodes\" class=\"small-text code\"&gt;[mapbox mapdragging=\"0\"]&lt;\/textarea&gt;&lt;\/td&gt;\r\n\t\t\t&lt;td valign=\"top\"&gt;With 1, you enable, with 0 you disable the map dragging&lt;\/td&gt;\r\n\r\n\t\t&lt;\/tr&gt;\r\n\t\t&lt;!-- \/\/ line --&gt;\r\n\r\n\r\n\t\t&lt;!-- line --&gt;\r\n\t\t&lt;tr&gt;\r\n\t\t\t&lt;td valign=\"top\"&gt;&lt;textarea name=\"he3_mapbox_shortcodes\" rows=\"&lt;?php echo $nb_rows_textarea;?&gt;\" cols=\"&lt;?php echo $nb_cols_textarea;?&gt;\" id=\"he3_mapbox_shortcodes\" class=\"small-text code\"&gt;[mapbox maptouchzoom=\"0\"]&lt;\/textarea&gt;&lt;\/td&gt;\r\n\t\t\t&lt;td valign=\"top\"&gt;With 1, you enable, with 0 you disable the map touch zoom&lt;\/td&gt;\r\n\r\n\t\t&lt;\/tr&gt;\r\n\t\t&lt;!-- \/\/ line --&gt;\r\n\r\n\t\t&lt;!-- line --&gt;\r\n\t\t&lt;tr&gt;\r\n\t\t\t&lt;td valign=\"top\"&gt;&lt;textarea name=\"he3_mapbox_shortcodes\" rows=\"&lt;?php echo $nb_rows_textarea;?&gt;\" cols=\"&lt;?php echo $nb_cols_textarea;?&gt;\" id=\"he3_mapbox_shortcodes\" class=\"small-text code\"&gt;[mapbox mapdoubleclickzoom=\"0\"]&lt;\/textarea&gt;&lt;\/td&gt;\r\n\t\t\t&lt;td valign=\"top\"&gt;With 1, you enable, with 0 you disable the map double click zoom&lt;\/td&gt;\r\n\r\n\t\t&lt;\/tr&gt;\r\n\t\t&lt;!-- \/\/ line --&gt;\r\n\r\n\t\t&lt;!-- line --&gt;\r\n\t\t&lt;tr&gt;\r\n\t\t\t&lt;td valign=\"top\"&gt;&lt;textarea name=\"he3_mapbox_shortcodes\" rows=\"&lt;?php echo $nb_rows_textarea;?&gt;\" cols=\"&lt;?php echo $nb_cols_textarea;?&gt;\" id=\"he3_mapbox_shortcodes\" class=\"small-text code\"&gt;[mapbox mapscrollwheelzoom=\"0\"]&lt;\/textarea&gt;&lt;\/td&gt;\r\n\t\t\t&lt;td valign=\"top\"&gt;With 1, you enable, with 0 you disable the maps croll wheel zoom&lt;\/td&gt;\r\n\r\n\t\t&lt;\/tr&gt;\r\n\t\t&lt;!-- \/\/ line --&gt;\r\n\r\n\t\t&lt;\/table&gt;\r\n\r\n\t&lt;\/li&gt;\r\n\r\n\r\n\t&lt;?php\t\r\n\t}\/\/EOF\r\n\r\n\r\n\r\n\r\n\r\n\r\n\t\r\n<\/pre>\n<h2>En savoir plus<\/h2>\n<ul class=\"sf-list list-arrow_bw\">\n<li>Le site officiel de MapBox<br \/><a href=\"http:\/\/www.mapbox.com\/\" target=\"_blank\">http:\/\/www.mapbox.com\/<\/a><\/li>\n<li>Le projet OpenStreetMap<br \/><a href=\"http:\/\/www.openstreetmap.org\/\" target=\"_blank\">http:\/\/www.openstreetmap.org\/<\/a><\/li>\n<li>Using Leaflet plugins with MapBox.js: A Showcase<br \/><a href=\"http:\/\/www.mapbox.com\/blog\/leaflet-plugins-with-mapbox-js\/\" target=\"_blank\">http:\/\/www.mapbox.com\/blog\/leaflet-plugins-with-mapbox-js\/<\/a><\/li>\n<li>Les diff\u00e9rents plans payants de MapBox<br \/><a href=\"http:\/\/www.mapbox.com\/plans\/\" target=\"_blank\">http:\/\/www.mapbox.com\/plans\/<\/a><\/li>\n<li>Les diff\u00e9rents plans payants de MapBox<br \/><a href=\"http:\/\/www.mapbox.com\/plans\/\" target=\"_blank\">http:\/\/www.mapbox.com\/plans\/<\/a><\/li>\n<li>Draggable Marker Make a marker draggable<br \/><a href=\"http:\/\/www.mapbox.com\/mapbox.js\/example\/v1.0.0\/draggable-marker\/\" target=\"_blank\">http:\/\/www.mapbox.com\/mapbox.js\/example\/v1.0.0\/draggable-marker\/<\/a><\/li>\n<li>Lien sur le marqueur<br \/><a href=\"http:\/\/www.mapbox.com\/mapbox.js\/example\/v1.0.0\/markers-as-links\/\" target=\"_blank\">http:\/\/www.mapbox.com\/mapbox.js\/example\/v1.0.0\/markers-as-links\/<\/a><\/li>\n<li>Image dans le tooltip du marker<br \/><a href=\"http:\/\/www.mapbox.com\/mapbox.js\/example\/v1.0.0\/custom-marker-tooltip\/\" target=\"_blank\">http:\/\/www.mapbox.com\/mapbox.js\/example\/v1.0.0\/custom-marker-tooltip\/<\/a><\/li>\n<li>Google Maps, JavaScript, API \u2013 Notions de base de la Google Maps JavaScript API et une approche sur le datajournalisme<br \/><a href=\"http:\/\/social.hecube.net\/2012\/06\/google-maps-javascript-api-notions-de-base-de-la-google-maps-javascript-api-et-une-approche-sur-le-datajournalisme\/\" target=\"_blank\">http:\/\/social.hecube.net\/2012\/06\/google-maps-javascript-api-notions-de-base-de-la-google-maps-javascript-api-et-une-approche-sur-le-datajournalisme\/<\/a><\/li>\n<li>WordPress, Google Maps \u2013 joindre une carte Google Map \u00e0 un article ou une page sous WordPress<br \/><a href=\"http:\/\/social.hecube.net\/2009\/12\/wordpress-google-maps-joindre-une-carte-google-map-a-un-article-ou-une-page-sous-wordpress\/\" target=\"_blank\">http:\/\/social.hecube.net\/2009\/12\/wordpress-google-maps-joindre-une-carte-google-map-a-un-article-ou-une-page-sous-wordpress\/<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>MapBox, voila semble-t-il un tr\u00e8s s\u00e9rieux concurrent \u00e0 Google Map ? Qui pourrait imaginer aujourd&#8217;hui qu&#8217;une telle concurrence fusse possible ? Eh bien MapBox l&#8217;a&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2013\/07\/mapbox-google-map-api-une-des-meilleurs-api-pour-la-geolocalisation-et-un-plugin-wordpress-dinsertion-de-cartes\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">MapBox, Google Map, API &#8211; Une des meilleurs API pour la g\u00e9olocalisation et un plugin WordPress d&#8217;insertion de cartes<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":9360,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"MapBox et Google Maps API compar\u00e9es. Analyse des outils et r\u00e9sultats pour la g\u00e9olocalisation. Plugin WordPress pour cartes interactives.","bf_ai_og_title":"MapBox vs Google Maps API","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3439,3440,3454,3442,3444,3445,3447,3449,3450,3451,3435,3452],"tags":[2183,608,620,452,329,612,2192],"class_list":["post-3896","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-apis-integration","category-cloud-infrastructure","category-journalism-writing","category-mobile-devices","category-programming-databases","category-seo-web-marketing","category-technology-trends","category-tutorials-how-to","category-ux-product-design","category-web-design-front-end","category-web-development","category-wordpress-cms","tag-api","tag-cartographie","tag-customisation","tag-geolocalisation","tag-google-map","tag-mapbox","tag-ux-experience-utilisateur"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-10Q","jetpack_featured_media_url":"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/07\/wp_mapbox_plugin_b_bf.jpg","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/3896","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/comments?post=3896"}],"version-history":[{"count":4,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/3896\/revisions"}],"predecessor-version":[{"id":6707,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/3896\/revisions\/6707"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media\/9360"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=3896"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=3896"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=3896"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}