MapBox, Google Map, API – Une des meilleurs API pour la géolocalisation et un plugin WordPress d’insertion de cartes

by Posted on


MapBox, voila semble-t-il un très sérieux concurrent à Google Map ? Qui pourrait imaginer aujourd’hui qu’une telle concurrence fusse possible ? Eh bien MapBox l’a fait ! Outre l’excellente API et de l’excellent équipe qui est derrière ce SaaS mis à votre disposition, c’est que MapBox a privilégié une chose qui est sans aucun doute une élément déterminant : l’esthétique et l’UX en clair l’output, ce qui fait qui rend possible son adoption par les hystériques de la géolocalisation ou par les cabinets d’architecte férus de rendu de carte…

MapBox, boite de pandore de la géolocalisation

Pour les fans de storytelling, voici un aperçu de l’historique qui a mené à la création de cette magistrale API, d’ailleurs utilisé par Le Monde. La promesse est simple et le service l’est aussi.

We started MapBox to make it easy for anyone to design and publish a beautiful custom map.

Source : http://www.mapbox.com/about/

Un plugin d’affichage de carte

On a donc décidé de mettre en ordre via un plugin nommé he3_mapbox_plugin.php destiné à WordPress pour permettre de contrôler l’insertion de cartes au sein de pages ou d’articles.

Il faut d’abord placé ces éléments dans <head>…</head> pour charger l’ensemble de la bibliothèque de l’api MapBox

 
 
	  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
	  <script src='http://api.tiles.mapbox.com/mapbox.js/v1.0.2/mapbox.js'></script>
	  <link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.2/mapbox.css' rel='stylesheet' />
	  <!--[if lte IE 8]>
	    <link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.2/mapbox.ie.css' rel='stylesheet' >
	  <![endif]-->

Le plugin de Shortcode pour afficher des carte de mapbox (he3_mapbox_plugin.zip)

 
	FULLCONTROL (Moscow)
		[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"]
		<br/><br/>
 
		FULLCONTROL (Paris)
		[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"]
		<br/><br/>
		<br/><br/>

MapBox, Google Map, API - Une des meilleurs API pour la géolocalisation, plus un plugin WordPress d'insertion de cartes

MapBox, Google Map, API - Une des meilleurs API pour la géolocalisation, plus un plugin WordPress d'insertion de cartes

Le code source du plugin he3_mapbox_plugin.php

 
	<?php
 
	/*
	Plugin Name: he3_mapbox_plugin
	Plugin URI: http://hecube.net
	Description: How to manage MapBox maps in WP
	Version: 1.0
	Author: Hecube
	Author URI: http://hecube.net
	*/
 
 
	/*
	USAGE 
 
	----  NOTE ----
	Replace the example by your own map eg examples.map-20v6611k
	---- // NOTE ----
 
 
	---- SHORTCODES - Get map and set default options ----
	DEFAULT [mapbox]	
	HALFCONTROL [mapbox map="examples.map-20v6611k" zoomcontrol="0"]	
	FULLCONTROL [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"]
	---- // SHORTCODES ----
	*/
 
	// Register shortcodes [mapbox]
	add_shortcode( 'mapbox', 'he3_mapbox_agter' );
 
 
 
	// Callback function for the [mapbox] shortcode
	function he3_mapbox_agter( $attr, $content ) {
 
	    $possible = array( 'map');
	    $map = he3_mapbox_find( $possible, $attr, 'examples.map-20v6611k' );
 
		$possible = array( 'zoomcontrol' );
	    $zoomcontrol = he3_mapbox_find ( $possible, $attr, '0' );
 
	        switch( $zoomcontrol ) {
	            case '1':
	                $zoomcontrol_cmd = 'true';
	                break;
	            default:
	                $zoomcontrol_cmd = 'false';
	             break;
	        }//EOC
 
			/* mapdragging_cmd */
			$possible = array( 'mapdragging' );
		    $mapdragging = he3_mapbox_find ( $possible, $attr, '0' );
 
		        switch( $mapdragging ) {
		            case '1':
		                $mapdragging_cmd = 'map.dragging.enable();';
		                break;
		            default:
		                $mapdragging_cmd = 'map.dragging.disable();';
		             break;
		        }//EOC
 
				/* maptouchzoom_cmd */	
				$possible = array( 'maptouchzoom' );
				$maptouchzoom = he3_mapbox_find ( $possible, $attr, '0' );
 
				switch( $maptouchzoom ) {
	            case '1':
	                $maptouchzoom_cmd = 'map.touchZoom.enable();';
	                break;
	            default:
	                $maptouchzoom_cmd = 'map.touchZoom.disable();';
	             break;
	        	}//EOC
 
			/* mapdoubleclickzoom_cmd */	
			$possible = array( 'mapdoubleclickzoom' );
			$mapdoubleclickzoom = he3_mapbox_find ( $possible, $attr, '0' );
 
						switch( $mapdoubleclickzoom ) {
					            case '1':
					                $mapdoubleclickzoom_cmd = 'map.doubleClickZoom.enable();';
					                break;
					            default:
					                $mapdoubleclickzoom_cmd = 'map.doubleClickZoom.disable();';
					             break;
								}//EOC
 
			/* mapscrollwheelzoom_cmd */	
			$possible = array( 'mapscrollwheelzoom' );
			$mapscrollwheelzoom = he3_mapbox_find ( $possible, $attr, '0' );
 
					switch( $mapscrollwheelzoom ) {
				            case '1':
				                $mapscrollwheelzoom_cmd = 'map.scrollWheelZoom.enable();';
				                break;
				            default:
				                $mapscrollwheelzoom_cmd = 'map.scrollWheelZoom.disable();';
				             break;
				        }//EOC
 
						/* width_cmd */	
						$possible = array( 'width' );
						$width = he3_mapbox_find ( $possible, $attr, '' );
 
								if ( $width!='') {
							                $width_cmd = ''.$width.'';
							   } else {
							                $width_cmd = '500';
							   }//EOI
					/* height_cmd */	
								$possible = array( 'height' );
								$height = he3_mapbox_find ( $possible, $attr, '' );
 
					if ( $height!='') {
				             $height_cmd = ''.$height.'';
	   					} else {
				                $height_cmd = '400';
				        }//EOI
 
						/* height_cmd */	
									$possible = array( 'height' );
									$height = he3_mapbox_find ( $possible, $attr, '' );
 
						if ( $height!='') {
					             $height_cmd = ''.$height.'';
		   					} else {
					                $height_cmd = '400';
					        }//EOI
 
 
							/* latitude_cmd */	
										$possible = array( 'latitude' );
										$latitude = he3_mapbox_find ( $possible, $attr, '' );
 
							if ( $latitude!='') {
						             $latitude_cmd = ''.$latitude.'';
			   					} else {
										/* Paris latitude */
						                $latitude_cmd = '48.8566140';
						        }//EOI
 
								/* longitude_cmd */	
											$possible = array( 'longitude' );
											$longitude = he3_mapbox_find ( $possible, $attr, '' );
 
								if ( $longitude!='') {
							             $longitude_cmd = ''.$longitude.'';
				   					} else {
											/* Paris longitude */
							                $longitude_cmd = '2.3522219';
							        }//EOI
										/* zoomlevel_cmd */	
													$possible = array( 'zoomlevel' );
													$zoomlevel = he3_mapbox_find ( $possible, $attr, '' );
 
										if ( $zoomlevel!='') {
									             $zoomlevel_cmd = ''.$zoomlevel.'';
						   					} else {
													/* zoom level by default */
									                $zoomlevel_cmd = '3';
									        }//EOI
 
						/* CSS id for the map based on the map name given by MapBox */
						$char   = '-';
						$length = strlen($map);
						$pos = strpos($map, $char);
						$map_id = substr($map, $pos, ($length-$pos));
 
					   	$output_string =   '<!-- mapbox -->';
						$output_string .=   "ttn";
					   	$output_string .=  '<div id='map'.$map_id.'' style='width:'.$width_cmd.'px;height:'.$height_cmd.'px'></div>';
					    // $output_string .=  '<div id='map-'.$map.''></div>';
						$output_string .=   "ttn";
					   	$output_string .=  '<script>';
						$output_string .=   "ttn";
					   	$output_string .=  'var map = L.mapbox.map('map'.$map_id.'', ''.$map.'', ';									
						$output_string .=   "ttn";
					   	$output_string .=  '{';
						$output_string .=   "ttn";				
					   	$output_string .=  'zoomControl: '.$zoomcontrol_cmd.'';
						$output_string .=   "ttn";
						$output_string .=   '});';
						$output_string .=   "ttn";
						$output_string .=  '//Latitude, Longitude, Zoom';
						$output_string .=   "ttn";
						$output_string .=  'map.setView(['.$latitude_cmd.', '.$longitude_cmd.'], '.$zoomlevel_cmd.');';
						$output_string .=   "ttn";
						$output_string .=  '// disable drag and zoom handlers';
						$output_string .=   "ttn";
						$output_string .=  ''.$mapdragging_cmd.'';
						$output_string .=   "ttn";
						$output_string .=  ''.$maptouchzoom_cmd.'';
						$output_string .=   "ttn";
						$output_string .=  ''.$mapdoubleclickzoom_cmd.'';
						$output_string .=   "ttn";
						$output_string .=  ''.$mapscrollwheelzoom_cmd.'';
						$output_string .=   "ttn";
					   	$output_string .=  '</script>';
						$output_string .=   "ttn";
					   	$output_string .=  '<!-- // mapbox -->';
						$output_string .=   "ttn";
 
		/* RETURN THE RESULT */
			ob_start();
			return $output_string;
			ob_end_clean();	
	}
 
	// Helper function:
	// Search $find_keys in array $in_array, return $default if not found
	function he3_mapbox_find( $find_keys, $in_array, $default ) {
	    foreach( $find_keys as $key ) {
	        if( isset( $in_array[$key] ) )
	            return $in_array[$key];
	    }
	    return $default;
	}
 
	// Add a menu for our option page
	add_action('admin_menu', 'he3_mapbox_myplugin_add_page');
	function he3_mapbox_myplugin_add_page() {
		add_options_page( 'MapBox Help', 'MapBox Help', 'manage_options', 'he3_mapbox_myplugin', 'he3_mapbox_myplugin_option_page' );
	}
 
	// Draw the option page
	function he3_mapbox_myplugin_option_page() {
		?>
		<div class="wrap">
			<?php screen_icon(); ?>
			<h2>MapBox ShortCodes</h2>
			<form action="options.php" method="post">
				<?php settings_fields('he3_mapbox_myplugin_options'); ?>
				<?php do_settings_sections('he3_mapbox_myplugin'); ?>
			</form>
		</div>
		<?php
	}
 
 
	// Register and define the settings
	add_action('admin_init', 'he3_mapbox_myplugin_admin_init');
	function he3_mapbox_myplugin_admin_init(){
		register_setting(
			'he3_mapbox_myplugin_options',
			'he3_mapbox_myplugin_options',
			'he3_mapbox_validate_options'
		);
		add_settings_section(
			'he3_mapbox_myplugin_main',
			'MapBox Shortcodes',
			'he3_mapbox_myplugin_section_text',
			'he3_mapbox_myplugin'
		);
 
	}
	// Draw the section header
	function he3_mapbox_myplugin_section_text() {
	?>
	<?php
	/* values  */
	$nb_rows_textarea = '3';
	$nb_cols_textarea = '30';
 
	?>
 
 
 
	<ol>
 
	<!-- SHORTCODES -->
	<li>
 
	<p><strong>How do I use the shortcodes?</strong></p>
 
	<table class="form-table" border="0">
	<tr valign="top">
	<th scope="row"><strong>SHORTCODE</strong></th>
	<th scope="row"><strong>DESCRIPTION</strong></th>
	</tr>
 
	<!-- line -->
	<tr>
		<td valign="top"><textarea name="he3_mapbox_shortcodes" rows="<?php echo $nb_rows_textarea;?>" cols="<?php echo $nb_cols_textarea;?>" id="he3_mapbox_shortcodes" class="small-text code">[mapbox]</textarea></td>
		<td valign="top">Show the map by default</td>
 
	</tr>
	<!-- // line -->
 
	<!-- line -->
	<tr>
		<td valign="top"><textarea name="he3_mapbox_shortcodes" rows="<?php echo $nb_rows_textarea;?>" cols="<?php echo $nb_cols_textarea;?>" id="he3_mapbox_shortcodes" class="small-text code">[mapbox map="examples.map-20v6611k" zoomcontrol="1"]</textarea></td>
		<td valign="top">Show a specific with controls</td>
 
	</tr>
	<!-- // line -->
 
	<!-- line -->
	<tr>
		<td valign="top"><textarea name="he3_mapbox_shortcodes" rows="<?php echo $nb_rows_textarea;?>" cols="<?php echo $nb_cols_textarea;?>" id="he3_mapbox_shortcodes" class="small-text code">[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"]</textarea></td>
		<td valign="top">Show a specific with all kind of controls + map size + center point + zoom level.</td>
 
	</tr>
	<!-- // line -->
 
	</table>
	</li>
 
	<li>
 
		<p><strong>How do I know the values for the attributes of the shortcodes?</strong></p>
 
 
 
		<table class="form-table" border="0">
		<tr valign="top">
		<th scope="row"><strong>ATTRIBUTES</strong></th>
		<th scope="row"><strong>VAUES</strong></th>
		</tr>
 
		<!-- Latitude, Longitude, Zoom -->
		<!-- line -->
		<tr>
			<td valign="top"><textarea name="he3_mapbox_shortcodes" rows="<?php echo $nb_rows_textarea;?>" cols="<?php echo $nb_cols_textarea;?>" id="he3_mapbox_shortcodes" class="small-text code">[mapbox latitude="48.8566140" longitude="2.3522219" zoomlevel="7"]</textarea></td>
			<td valign="top">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.</td>
 
		</tr>
		<!-- // line -->
		<!-- line -->
		<tr>
			<td valign="top"><textarea name="he3_mapbox_shortcodes" rows="<?php echo $nb_rows_textarea;?>" cols="<?php echo $nb_cols_textarea;?>" id="he3_mapbox_shortcodes" class="small-text code">[mapbox width="300" height="250"]</textarea></td>
			<td valign="top">Define the width and the height of the map</td>
 
		</tr>
		<!-- // line -->
 
		<!-- line -->
		<tr>
			<td valign="top"><textarea name="he3_mapbox_shortcodes" rows="<?php echo $nb_rows_textarea;?>" cols="<?php echo $nb_cols_textarea;?>" id="he3_mapbox_shortcodes" class="small-text code">[mapbox map="examples.map-20v6611k"]</textarea></td>
			<td valign="top">The value is by default examples.map-20v6611k</td>
 
		</tr>
		<!-- // line -->
 
		<!-- line -->
		<tr>
			<td valign="top"><textarea name="he3_mapbox_shortcodes" rows="<?php echo $nb_rows_textarea;?>" cols="<?php echo $nb_cols_textarea;?>" id="he3_mapbox_shortcodes" class="small-text code">[mapbox mmapzoomcontrol="0"]</textarea></td>
			<td valign="top">With 1, you enable, with 0 you disable the zoom control</td>
 
		</tr>
		<!-- // line -->
 
 
		<!-- line -->
		<tr>
			<td valign="top"><textarea name="he3_mapbox_shortcodes" rows="<?php echo $nb_rows_textarea;?>" cols="<?php echo $nb_cols_textarea;?>" id="he3_mapbox_shortcodes" class="small-text code">[mapbox mapdragging="0"]</textarea></td>
			<td valign="top">With 1, you enable, with 0 you disable the map dragging</td>
 
		</tr>
		<!-- // line -->
 
 
		<!-- line -->
		<tr>
			<td valign="top"><textarea name="he3_mapbox_shortcodes" rows="<?php echo $nb_rows_textarea;?>" cols="<?php echo $nb_cols_textarea;?>" id="he3_mapbox_shortcodes" class="small-text code">[mapbox maptouchzoom="0"]</textarea></td>
			<td valign="top">With 1, you enable, with 0 you disable the map touch zoom</td>
 
		</tr>
		<!-- // line -->
 
		<!-- line -->
		<tr>
			<td valign="top"><textarea name="he3_mapbox_shortcodes" rows="<?php echo $nb_rows_textarea;?>" cols="<?php echo $nb_cols_textarea;?>" id="he3_mapbox_shortcodes" class="small-text code">[mapbox mapdoubleclickzoom="0"]</textarea></td>
			<td valign="top">With 1, you enable, with 0 you disable the map double click zoom</td>
 
		</tr>
		<!-- // line -->
 
		<!-- line -->
		<tr>
			<td valign="top"><textarea name="he3_mapbox_shortcodes" rows="<?php echo $nb_rows_textarea;?>" cols="<?php echo $nb_cols_textarea;?>" id="he3_mapbox_shortcodes" class="small-text code">[mapbox mapscrollwheelzoom="0"]</textarea></td>
			<td valign="top">With 1, you enable, with 0 you disable the maps croll wheel zoom</td>
 
		</tr>
		<!-- // line -->
 
		</table>
 
	</li>
 
 
	<?php	
	}//EOF

En savoir plus

Published by Bruno Flaven

Bruno Flaven has been a Project Manager in a wide variety of Internet business applications both in Mobile and in Desktop for 20 years now. You can find more information about his professional life on his personal website (www.flaven.fr) or his linkedin profile: https://fr.linkedin.com/in/brunoflaven. He is currently working In France Media Monde (FMM) mostly on mobile applications (iOS and Android). He is currently P.O for a Backoffice project made with Symfony. He also made few trainings to facilitate the handling of the tools that he helps to make.

Related Posts