diff --git a/src/WPStrava.php b/src/WPStrava.php index 27ce19d..5abe531 100644 --- a/src/WPStrava.php +++ b/src/WPStrava.php @@ -95,6 +95,7 @@ class WPStrava { if ( is_admin() ) { $this->settings->hook(); + add_action( 'admin_enqueue_scripts', array( $this, 'register_admin_scripts' ) ); } else { // Front-end. add_action( 'init', array( $this, 'register_shortcodes' ) ); add_action( 'wp_enqueue_scripts', array( $this, 'register_scripts' ) ); @@ -188,6 +189,18 @@ class WPStrava { return $this->segments; } + /** + * Register/enqueue admin javascript. + * + * @author Justin Foell + * @since next + */ + public function register_admin_scripts() { + if ( $this->settings->is_settings_page() ) { + wp_enqueue_script( 'strava-admin-settings', WPSTRAVA_PLUGIN_URL . 'src/admin-settings.js', array(), WPSTRAVA_PLUGIN_VERSION, true ); + } + } + /** * Register the wp-strava stylesheet. */ diff --git a/src/WPStrava/Settings.php b/src/WPStrava/Settings.php index aaa50b2..40ba711 100644 --- a/src/WPStrava/Settings.php +++ b/src/WPStrava/Settings.php @@ -80,9 +80,16 @@ class WPStrava_Settings { } // Google Maps API. + add_settings_section( 'strava_maps', __( 'Maps', 'wp-strava' ), null, 'wp-strava' ); + + register_setting( $this->option_page, 'strava_map_type', array( $this, 'sanitize_map_type' ) ); + add_settings_field( 'strava_map_type', __( 'Map Type', 'wp-strava' ), array( $this, 'print_map_type_input' ), 'wp-strava', 'strava_maps' ); + register_setting( $this->option_page, 'strava_gmaps_key', array( $this, 'sanitize_gmaps_key' ) ); - add_settings_section( 'strava_gmaps', __( 'Google Maps', 'wp-strava' ), array( $this, 'print_gmaps_instructions' ), 'wp-strava' ); - add_settings_field( 'strava_gmaps_key', __( 'Static Maps Key', 'wp-strava' ), array( $this, 'print_gmaps_key_input' ), 'wp-strava', 'strava_gmaps' ); + add_settings_field( 'strava_gmaps_key', __( 'Google Static Maps API Key', 'wp-strava' ), array( $this, 'print_gmaps_key_input' ), 'wp-strava', 'strava_maps' ); + + register_setting( $this->option_page, 'strava_mapbox_token', array( $this, 'sanitize_mapbox_token' ) ); + add_settings_field( 'strava_mapbox_token', __( 'Mapbox Public Token', 'wp-strava' ), array( $this, 'print_mapbox_token_input' ), 'wp-strava', 'strava_maps' ); // System of Measurement. register_setting( $this->option_page, 'strava_som', array( $this, 'sanitize_som' ) ); @@ -160,27 +167,80 @@ class WPStrava_Settings { } /** - * Print the google maps instructions. + * Print the map type selection. * * @author Justin Foell - * @since 1.1 + * @since next */ - public function print_gmaps_instructions() { - $maps_url = 'https://developers.google.com/maps/documentation/static-maps/'; - echo wp_kses_post( - sprintf( - __( - "

Steps:

-
    -
  1. To use Google map images, you must create a Static Maps API Key. Create a free key by going here: %2\$s and clicking Get a Key
    2. -
  2. Once you've created your Google Static Maps API Key, enter the key below.
    3. -
", - 'wp-strava' - ), - $maps_url, - $maps_url - ) - ); + public function print_map_type_input() { + $gmaps_url = 'https://developers.google.com/maps/documentation/static-maps/'; + $mapbox_url = 'https://www.mapbox.com/static-maps'; + $selected = 'mapbox' === $this->map_type ? 'mapbox' : 'gmaps'; + $gmaps_class = 'gmaps' !== $selected ? 'hidden' : ''; + $mapbox_class = 'mapbox' !== $selected ? 'hidden' : ''; + + ?> + +

+
+

+
+ Steps:

+
    +
  1. To use Google map images, you must create a Static Maps API Key. Google now requires billing information for overages, but effectively gives you 100k map loads for free each month. Create your Google Static Maps API key by going here: %2\$s
    2. +
  2. Once you've created your Google Static Maps API Key, enter the key below.
    3. +
", + 'wp-strava' + ), + $gmaps_url, + $gmaps_url + ) + ); + ?> +
+
+ Steps:

+
    +
  1. To use Mapbox map images, create a free Mapbox account here: %2\$s
    2. +
  2. All Mapbox accounts are issued a default public access token, enter the token below.
    3. +
", + 'wp-strava' + ), + $mapbox_url, + $mapbox_url + ) + ); + ?> +
+
+

+ + * @since next + */ + public function sanitize_map_type_input( $map_type ) { + if ( in_array( $map_type, array( 'gmaps', 'mapbox' ), true ) ) { + return $map_type; + } + return ''; } /** @@ -389,7 +449,7 @@ class WPStrava_Settings { $infos = $this->info; foreach ( $infos as $id => $info ) { - if ( ! in_array( $id, $ids ) ) { + if ( ! in_array( $id, $ids ) ) { // phpcs:ignore WordPress.PHP.StrictInArray.MissingTrueStrict -- loose OK. $update = true; unset( $infos[ $id ] ); } @@ -425,6 +485,30 @@ class WPStrava_Settings { return $key; } + /** + * Print the Mapbox token input. + * + * @author Justin Foell + * @since next + */ + public function print_mapbox_token_input() { + ?> + + + * @since next + */ + public function sanitize_mapbox_token( $token ) { + return $token; + } + /** * Print System of Measure option. * diff --git a/src/WPStrava/StaticGMap.php b/src/WPStrava/StaticGMap.php index de5cedf..b7f99b8 100644 --- a/src/WPStrava/StaticGMap.php +++ b/src/WPStrava/StaticGMap.php @@ -1,14 +1,12 @@ * @since NEXT */ - public static function get_map( $type = 'google' ) { - /* - if ( 'google' === $type ) { - return new WPStrava_StaticGMap(); + public static function get_map() { + if ( 'mapbox' === WPStrava::get_instance()->settings->map_type ) { + return new WPStrava_StaticMapbox(); } - */ - // Default to refresh. - return new WPStrava_StaticMapbox(); + return new WPStrava_StaticGMap(); } /** * From an encoded polyline, get the start and finish points for * the purposes of displaying start and finish markers. * - * @static * @see https://developers.google.com/maps/documentation/utilities/polylinealgorithm - * @access private * @param string $enc Encoded polyline. * @return array { * Indexes of start & finish containing lat/lon for each. @@ -74,11 +63,11 @@ abstract class WPStrava_StaticMap { * From a (large) encoded polyline, reduce the number of points * until it is small enough for a GET URL. * - * @param int $base_url_len Length of map URL. - * @param string $enc Encoded polyline. - * @return string Smaller encoded polyline. + * @param int $base_url_len Length of map URL. + * @param string $enc Encoded polyline. + * @return string Smaller encoded polyline. * @author Justin Foell - * @since 2.10.0 + * @since 2.10 */ protected function reduce_polyline( $base_url_len, $enc ) { require_once WPSTRAVA_PLUGIN_DIR . 'src/Polyline.php'; @@ -100,6 +89,14 @@ abstract class WPStrava_StaticMap { return $polyline; } + /** + * Get the length of a polyline. + * + * @param mixed $polyline Polyline string. + * @return int Polyline string length. + * @author Justin Foell + * @since next + */ protected function polyline_length( $polyline ) { return strlen( $polyline ); } diff --git a/src/WPStrava/StaticMapbox.php b/src/WPStrava/StaticMapbox.php index 40a4854..8711a4a 100644 --- a/src/WPStrava/StaticMapbox.php +++ b/src/WPStrava/StaticMapbox.php @@ -2,6 +2,18 @@ class WPStrava_StaticMapbox extends WPStrava_StaticMap { + /** + * Get an image tag to a static mapbox map. Will render with + * detailed polyline if not greater than 1865 chars, otherwise + * rendering will use summary polyline. + * + * @param object $activity Activity object to get image tag for. + * @param int $height Height of map in pixels. + * @param int $width Width of map in pixels. + * @param bool $markers Display start and finish markers. + * @param string $title Title attribute to accompany image (default empty). + * @return string HTML img tag with static map image. + */ public function get_image_tag( $activity, $height = 320, $width = 480, $markers = false, $title = '' ) { $polyline = ''; @@ -17,6 +29,11 @@ class WPStrava_StaticMapbox extends WPStrava_StaticMap { return ''; } + if ( ! $height || ! $width ) { + $height = 320; + $width = 480; + } + $url = $this->build_url( $polyline, $height, $width, $markers ); $url_len = strlen( $url ); @@ -30,11 +47,22 @@ class WPStrava_StaticMapbox extends WPStrava_StaticMap { return ""; } + /** + * Build a Mapbox Static Map URL. + * + * @param string $polyline Polyline string to overlay. + * @param int $height Height of map in pixels. + * @param int $width Width of map in pixels. + * @param bool $markers Display start and finish markers. + * @return string Image URL. + * @author Justin Foell + * @since next + */ private function build_url( $polyline, $height = 320, $width = 480, $markers = false ) { $url = 'https://api.mapbox.com/styles/v1/mapbox/outdoors-v11/static/'; $size = "auto/{$width}x{$height}@2x"; - $token = 'access_token=pk.eyJ1IjoianJmb2VsbCIsImEiOiJ4NkNwU2RjIn0.MHjY7k0Okawa3bdV9HtSXg'; + $token = WPStrava::get_instance()->settings->mapbox_token; $path = array(); @@ -47,11 +75,19 @@ class WPStrava_StaticMapbox extends WPStrava_StaticMap { // polyline must be URL encoded https://stackoverflow.com/a/65523379/2146022 $url_polyline = rawurlencode( $polyline ); $path[] = "path-2+ff0000({$url_polyline})"; - $url .= implode( ',', $path ) . "/{$size}?{$token}"; + $url .= implode( ',', $path ) . "/{$size}?access_token={$token}"; return $url; } + /** + * Get the length of a polyline after encoding. + * + * @param mixed $polyline Polyline string. + * @return int Encoded polyline string length. + * @author Justin Foell + * @since next + */ protected function polyline_length( $polyline ) { return strlen( rawurlencode( $polyline ) ); } diff --git a/src/admin-settings.js b/src/admin-settings.js new file mode 100644 index 0000000..abea924 --- /dev/null +++ b/src/admin-settings.js @@ -0,0 +1,50 @@ +window.addEventListener( 'load', function() { + strava_toggle_map_type(); // Initial load toggle. + document.getElementById( 'strava_map_type' ).addEventListener( 'input', function( e ) { + if ( 'SELECT' === e.target.tagName ) { + strava_toggle_map_type(); // On change toggle. + } + }, false ); +} ); + +/** + * Toggle Mapbox / GMaps fields & instructions. + */ +function strava_toggle_map_type() { + var select = document.getElementById( 'strava_map_type' ), + map_type = select.options[select.selectedIndex].value + mapbox_id = 'strava_mapbox_token', + gmaps_id = 'strava_gmaps_key', + mapbox_ins = 'strava-maps-mapbox-instructions', + gmaps_ins = 'strava-maps-gmaps-instructions'; + + // Toggle Instructions. + var mapbox_text = document.getElementById( mapbox_ins ); + if ( 'mapbox' === map_type ) { + if ( mapbox_text.classList.contains( 'hidden' ) ) { + mapbox_text.classList.remove( 'hidden' ); + } + } else { + mapbox_text.classList.add( 'hidden' ); + } + + var gmaps_text = document.getElementById( gmaps_ins ); + if ( 'mapbox' !== map_type ) { + if ( gmaps_text.classList.contains( 'hidden' ) ) { + gmaps_text.classList.remove( 'hidden' ); + } + } else { + gmaps_text.classList.add( 'hidden' ); + } + + // Toggle Inputs. + var mapbox_row = document.getElementById( mapbox_id ).closest( 'tr' ); + if ( mapbox_row ) { + mapbox_row.style.display = ( 'mapbox' === map_type ) ? '' : 'none'; + } + + var gmaps_row = document.getElementById( gmaps_id ).closest( 'tr' ); + if ( gmaps_row ) { + gmaps_row.style.display = ( 'mapbox' !== map_type ) ? '' : 'none'; + } +}