10h30/wp-strava
1
0
Fork 0
mirror of https://github.com/10h30/wp-strava.git synced 2026-07-11 18:56:18 +09:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #117 from cmanon/feature/26-alt-maps-leaflet

Browse Source 
Feature/26 alt maps leaflet
This commit is contained in:
Justin Foell
2021-12-30 14:18:04 -06:00
committed by GitHub
parent 6f5cd24ebc 9abd2e9ac2
commit 5bdd899e56
11 changed files with 357 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
readme.txt
+2 -1
View File
@@ -135,7 +135,8 @@ On the WP-Strava settings page you cannot currently remove and add another athle
== Changelog ==
= 2.11.0 =
Added additional block transformations for "Activity" (from: Paragraph, Classic Shortcode; to: Paragraph)
Add additional block transformations for "Activity" (from: Paragraph, Classic Shortcode; to: Paragraph)
Add Mapbox Static Map support https://github.com/cmanon/wp-strava/issues/26
= 2.10.1 =
src/WPStrava.php
+13
View File
@@ -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 <justin@foell.org>
* @since 2.11
*/
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.
*/
src/WPStrava/ActivityRenderer.php
+1 -1
View File
@@ -55,7 +55,7 @@ class WPStrava_ActivityRenderer {
$activity_output .= $activity->get_activity_link(
$activity_details->id,
WPStrava_StaticMap::get_image_tag( $activity_details, $map_height, $map_width, $atts['markers'], $activity_details->name ),
WPStrava_StaticMap::get_map()->get_image_tag( $activity_details, $map_height, $map_width, $atts['markers'], $activity_details->name ),
$activity_details->name
);
src/WPStrava/LatestMap.php
+1 -1
View File
@@ -54,7 +54,7 @@ class WPStrava_LatestMap {
// phpcs:disable WordPress.Security.EscapeOutput.OutputNotEscaped -- Image OK.
$strava_activity->get_activity_link(
$activity->id,
WPStrava_StaticMap::get_image_tag( $activity, null, null, false, $activity->name ),
WPStrava_StaticMap::get_map()->get_image_tag( $activity, null, null, false, $activity->name ),
$activity->name
);
// phpcs:enable WordPress.Security.EscapeOutput.OutputNotEscaped
src/WPStrava/RouteRenderer.php
+1 -1
View File
@@ -60,7 +60,7 @@ class WPStrava_RouteRenderer {
$route_output .= $route->get_route_link(
$route_details->id,
WPStrava_StaticMap::get_image_tag( $route_details, $map_height, $map_width, $atts['markers'], $route_details->name ),
WPStrava_StaticMap::get_map()->get_image_tag( $route_details, $map_height, $map_width, $atts['markers'], $route_details->name ),
$route_details->name
);
src/WPStrava/SegmentsRenderer.php
+1 -1
View File
@@ -63,7 +63,7 @@ class WPStrava_SegmentsRenderer {
$segments_output .= $segments->get_segments_link(
$segment_details->id,
WPStrava_StaticMap::get_image_tag( $segment_details, $map_height, $map_width, $atts['markers'], $segment_details->name ),
WPStrava_StaticMap::get_map()->get_image_tag( $segment_details, $map_height, $map_width, $atts['markers'], $segment_details->name ),
$segment_details->name
);
src/WPStrava/Settings.php
+105 -21
View File
@@ -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 <justin@foell.org>
* @since 1.1
* @since 2.11
*/
public function print_gmaps_instructions() {
$maps_url = 'https://developers.google.com/maps/documentation/static-maps/';
echo wp_kses_post(
sprintf(
__(
"<p>Steps:</p>
<ol>
<li>To use Google map images, you must create a Static Maps API Key. Create a free key by going here: <a href='%1\$s'>%2\$s</a> and clicking <strong>Get a Key</strong></li>
<li>Once you've created your Google Static Maps API Key, enter the key below.</li>
</ol>",
'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' : '';
?>
<select id="strava_map_type" name="strava_map_type">
<option value="gmaps" <?php selected( $this->map_type, 'gmaps' ); ?>><?php esc_html_e( 'Google Maps', 'wp-strava' ); ?></option>
<option value="mapbox" <?php selected( $this->map_type, 'mapbox' ); ?>><?php esc_html_e( 'Mapbox', 'wp-strava' ); ?></option>
</select>
<p class="description">
<br/>
<div class="strava-maps">
<div id="strava-maps-gmaps-instructions" class="<?php echo esc_attr( $gmaps_class ); ?>">
<?php
echo wp_kses_post(
sprintf(
__(
"<p>Steps:</p>
<ol>
<li>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: <a href='%1\$s'>%2\$s</a></li>
<li>Once you've created your Google Static Maps API Key, enter the key below.</li>
</ol>",
'wp-strava'
),
$gmaps_url,
$gmaps_url
)
);
?>
</div>
<div id="strava-maps-mapbox-instructions" class="<?php echo esc_attr( $mapbox_class ); ?>">
<?php
echo wp_kses_post(
sprintf(
__(
"<p>Steps:</p>
<ol>
<li>To use Mapbox map images, create a free Mapbox account here: <a href='%1\$s'>%2\$s</a></li>
<li>All Mapbox accounts are issued a default public access token, enter the token below.</li>
</ol>",
'wp-strava'
),
$mapbox_url,
$mapbox_url
)
);
?>
</div>
</div>
</p>
<?php
}
/**
* Sanitize map type select input.
*
* @param string $map_type
* @return string
* @author Justin Foell <justin@foell.org>
* @since 2.11
*/
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 <justin@foell.org>
* @since 2.11
*/
public function print_mapbox_token_input() {
?>
<input type="text" id="strava_mapbox_token" name="strava_mapbox_token" value="<?php echo esc_attr( $this->mapbox_token ); ?>" />
<?php
}
/**
* Sanitize Mapbox token input.
*
* @param string $token
* @return string
* @author Justin Foell <justin@foell.org>
* @since 2.11
*/
public function sanitize_mapbox_token( $token ) {
return $token;
}
/**
* Print System of Measure option.
*
src/WPStrava/StaticGMap.php
+54
View File
@@ -0,0 +1,54 @@
<?php
class WPStrava_StaticGMap extends WPStrava_StaticMap {
/**
* Get an image tag to a static google 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 = '' ) {
$key = WPStrava::get_instance()->settings->gmaps_key;
// Short circuit if missing key or activity object doesn't have the data we need.
if ( empty( $key ) || empty( $activity->map ) ) {
return '';
}
if ( ! $height || ! $width ) {
$height = 320;
$width = 480;
}
$url = "https://maps.googleapis.com/maps/api/staticmap?maptype=terrain&size={$width}x{$height}&scale=2&sensor=false&key={$key}&path=color:0xFF0000BF|weight:2|enc:";
$url_len = strlen( $url );
$polyline = '';
if ( ! empty( $activity->map->polyline ) && ( $url_len + strlen( $activity->map->polyline ) < self::$max_chars ) ) {
$polyline = $activity->map->polyline;
} elseif ( ! empty( $activity->map->summary_polyline ) ) {
$polyline = $activity->map->summary_polyline;
} elseif ( ! empty( $activity->map->polyline ) ) {
// Need to reduce the polyline b/c it's too big and no summary was provided.
$polyline = $this->reduce_polyline( $url_len, $activity->map->polyline );
}
$url .= $polyline;
if ( $markers ) {
$points = $this->decode_start_finish( $polyline );
$markers = '&markers=color:green|' . $points['start'][0] . ',' . $points['start'][1] .
'&markers=color:red|' . $points['finish'][0] . ',' . $points['finish'][1];
$url .= $markers;
}
$title_attr = $title ? " title='" . esc_attr( $title ) . "'" : '';
return "<img class='wp-strava-img' src='{$url}'{$title_attr} />";
}
}
src/WPStrava/StaticMap.php
+35 -51
View File
@@ -1,16 +1,12 @@
<?php
class WPStrava_StaticMap {
abstract class WPStrava_StaticMap {
private static $max_chars = 1865;
protected static $max_chars = 1865;
/**
* Get an image tag to a static google map. Will render with
* detailed polyline if not greater than 1865 chars, otherwise
* rendering will use summary polyline.
* Get an image tag to a static map.
*
* @static
* @access public
* @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.
@@ -18,51 +14,27 @@ class WPStrava_StaticMap {
* @param string $title Title attribute to accompany image (default empty).
* @return string HTML img tag with static map image.
*/
public static function get_image_tag( $activity, $height = 320, $width = 480, $markers = false, $title = '' ) {
$key = WPStrava::get_instance()->settings->gmaps_key;
abstract public function get_image_tag( $activity, $height = 320, $width = 480, $markers = false, $title = '' );
// Short circuit if missing key or activity object doesn't have the data we need.
if ( empty( $key ) || empty( $activity->map ) ) {
return '';
/**
* Factory method to get the correct StaticMap class based on options setting.
*
* @return WPStrava_StaticMap Instance of StaticMap
* @author Justin Foell <justin@foell.org>
* @since 2.11
*/
public static function get_map() {
if ( 'mapbox' === WPStrava::get_instance()->settings->map_type ) {
return new WPStrava_StaticMapbox();
}
if ( ! $height || ! $width ) {
$height = 320;
$width = 480;
}
$url = "https://maps.googleapis.com/maps/api/staticmap?maptype=terrain&size={$width}x{$height}&scale=2&sensor=false&key={$key}&path=color:0xFF0000BF|weight:2|enc:";
$url_len = strlen( $url );
$polyline = '';
if ( ! empty( $activity->map->polyline ) && ( $url_len + strlen( $activity->map->polyline ) < self::$max_chars ) ) {
$polyline = $activity->map->polyline;
} elseif ( ! empty( $activity->map->summary_polyline ) ) {
$polyline = $activity->map->summary_polyline;
} elseif ( ! empty( $activity->map->polyline ) ) {
// Need to reduce the polyline b/c it's too big and no summary was provided.
$polyline = self::reduce_polyline( $url_len, $activity->map->polyline );
}
$url .= $polyline;
if ( $markers ) {
$points = self::decode_start_finish( $polyline );
$markers = '&markers=color:green|' . $points['start'][0] . ',' . $points['start'][1] .
'&markers=color:red|' . $points['finish'][0] . ',' . $points['finish'][1];
$url .= $markers;
}
$title_attr = $title ? " title='" . esc_attr( $title ) . "'" : '';
return "<img class='wp-strava-img' src='{$url}'{$title_attr} />";
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.
@@ -76,7 +48,7 @@ class WPStrava_StaticMap {
* }
* }
*/
private static function decode_start_finish( $enc ) {
protected function decode_start_finish( $enc ) {
require_once WPSTRAVA_PLUGIN_DIR . 'src/Polyline.php';
$points = Polyline::decode( $enc );
$points = Polyline::pair( $points );
@@ -91,13 +63,13 @@ class WPStrava_StaticMap {
* From a (large) encoded polyline, reduce the number of points
* until it is small enough for a GET URL.
*
* @param int $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 <justin@foell.org>
* @since 2.10.0
* @since 2.10
*/
private static function reduce_polyline( $url_len, $enc ) {
protected function reduce_polyline( $base_url_len, $enc ) {
require_once WPSTRAVA_PLUGIN_DIR . 'src/Polyline.php';
$points = Polyline::decode( $enc );
$points = Polyline::pair( $points );
@@ -109,11 +81,23 @@ class WPStrava_StaticMap {
$points = Polyline::flatten( $points );
$polyline = Polyline::encode( $points );
if ( $url_len + strlen( $polyline ) >= self::$max_chars ) {
if ( $base_url_len + $this->polyline_length( $polyline ) >= self::$max_chars ) {
// Reduce again.
$polyline = self::reduce_polyline( $url_len, $polyline );
$polyline = $this->reduce_polyline( $base_url_len, $polyline );
}
return $polyline;
}
/**
* Get the length of a polyline.
*
* @param mixed $polyline Polyline string.
* @return int Polyline string length.
* @author Justin Foell <justin@foell.org>
* @since 2.11
*/
protected function polyline_length( $polyline ) {
return strlen( $polyline );
}
}
src/WPStrava/StaticMapbox.php
+94
View File
@@ -0,0 +1,94 @@
<?php
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 = '';
if ( ! empty( $activity->map->polyline ) ) {
$polyline = $activity->map->polyline;
} elseif ( ! empty( $activity->map->summary_polyline ) ) {
$polyline = $activity->map->summary_polyline;
}
if ( empty( $polyline ) ) {
// No polyline provided.
return '';
}
if ( ! $height || ! $width ) {
$height = 320;
$width = 480;
}
$url = $this->build_url( $polyline, $height, $width, $markers );
$url_len = strlen( $url );
if ( $url_len > self::$max_chars ) {
// Need to reduce the polyline b/c it's too big.
$polyline = $this->reduce_polyline( $url_len - $this->polyline_length( $polyline ), $polyline );
$url = $this->build_url( $polyline, $height, $width, $markers );
}
$title_attr = $title ? " title='" . esc_attr( $title ) . "'" : '';
return "<img class='wp-strava-img' src='{$url}'{$title_attr} />";
}
/**
* 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 <justin@foell.org>
* @since 2.11
*/
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 = WPStrava::get_instance()->settings->mapbox_token;
$path = array();
if ( $markers ) {
$points = $this->decode_start_finish( $polyline );
$path[] = "pin-s+008000({$points['start'][0]},{$points['start'][1]})";
$path[] = "pin-s+ff0000({$points['finish'][0]},{$points['finish'][1]})";
}
// 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}?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 <justin@foell.org>
* @since 2.11
*/
protected function polyline_length( $polyline ) {
return strlen( rawurlencode( $polyline ) );
}
}
src/admin-settings.js
+50
View File
@@ -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';
}
}