Merge branch 'release/2.7.0'

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+github: gsarig

README.md

@@ -68,6 +68,9 @@ No.
 
 That's the point, actually. Just install the plugin and start adding maps. Keep in mind, though, that as stated on the [OpenStreetMap Tile Usage Policy](https://operations.osmfoundation.org/policies/tiles/), OSM’s own servers are run entirely on donated resources and they have strictly limited capacity. Using them on a site with low traffic will probably be fine. Nevertheless, you are advised to create an account to [MapBox](https://www.mapbox.com/) and get a free API Key.
 
+### How can I add a custom Mapbox style?
+You can find the style URL in the [Mapbox Studio](https://www.mapbox.com/studio/). There, use the "Share" button, and under "Developer resources", copy the "Style URL". It should look like that: `mapbox://styles/username/style-id`. You can declare a global style on the plugin's settings, to be used as a default for all the maps, or you can set a custom style for each map, by using the block's settings panel.
+
 ### How do I add a new location?
 
 To add a location, left-click on the map for a while, until you see the prompt saying "Release to drop a marker here". On browsers that support it, the cursor transforms from hand to crosshair, to make it even more apparent. As long as the prompt is visible, it means that releasing the click will drop the marker at that spot. That slight delay has been added to prevent you from accidentally adding markers all over the place with every click.

assets/ootb-openstreetmap.js

@@ -1,4 +1,5 @@
 // noinspection NpmUsedModulesInstalled,JSUnresolvedVariable
+import createMapboxStyleUrl from "./shared/createMapboxStyleUrl.js";
 
 (function () {
 	'use strict';
@@ -27,12 +28,29 @@
 		const escapedShapeStyle = osmap.getAttribute('data-shapestyle');
 		const shapeStyle = JSON.parse(decodeURIComponent(escapedShapeStyle));
 		const shapeText = osmap.getAttribute('data-shapetext');
+		const mapboxstyleAttr = osmap.getAttribute('data-mapboxstyle');
+		let mapboxstyle = '';
+		if (mapboxstyleAttr) {
+			mapboxstyle = mapboxstyleAttr;
+		} else {
+			const mapboxstyleGlobal = createMapboxStyleUrl(options.global_mapbox_style_url, options.api_mapbox);
+			if (mapboxstyleGlobal) {
+				mapboxstyle = encodeURIComponent(JSON.stringify(mapboxstyleGlobal));
+			}
+		}
 
 		let apiKey = '';
 		if ('mapbox' === provider) {
 			apiKey = options.api_mapbox;
 		}
 
+		let providerUrl = providers[provider].url;
+		if ('mapbox' === provider && mapboxstyle) {
+			providerUrl = JSON.parse(decodeURIComponent(mapboxstyle));
+		} else {
+			providerUrl += apiKey;
+		}
+
 		const mapOptions = {
 			minZoom: parseInt(minZoom),
 			maxZoom: parseInt(maxZoom),
@@ -61,7 +79,7 @@
 			map.scrollWheelZoom.disable();
 		}
 
-		L.tileLayer(providers[provider].url + apiKey, {
+		L.tileLayer(providerUrl, {
 			attribution: providers[provider].attribution
 		}).addTo(map);
 

assets/shared/createMapboxStyleUrl.js

@@ -0,0 +1,27 @@
+/**
+ * Converts Mapbox style URL into a format that Leaflet can use for requesting tiles.
+ * @param {string} styleUrl - The Mapbox style URL.
+ * @param {string} accessToken - The Mapbox access token.
+ * @returns {string} The Leaflet URL.
+ */
+export default function createMapboxStyleUrl(styleUrl, accessToken) {
+	if (!styleUrl || !accessToken ||
+		typeof styleUrl !== 'string' ||
+		typeof accessToken !== 'string' ||
+		!styleUrl.startsWith('mapbox://')) {
+		return '';
+	}
+	// Parse username and style ID from Mapbox URL
+	const mapboxUrlParts = styleUrl.split('/');
+	const username = mapboxUrlParts[3];
+	const styleId = mapboxUrlParts[4];
+
+	if (!username || !styleId ||
+		typeof username !== 'string' ||
+		typeof styleId !== 'string') {
+		return '';
+	}
+
+	// Build Leaflet URL
+	return `https://api.mapbox.com/styles/v1/${username}/${styleId}/tiles/{z}/{x}/{y}?access_token=${accessToken}`;
+}

build/block.json

@@ -86,6 +86,10 @@
       "type": "string",
       "default": "openstreetmap"
     },
+    "mapboxStyleUrl": {
+      "type": "string",
+      "default": ""
+    },
     "mapType": {
       "type": "string",
       "default": "marker"

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '9960ceea625e1d6537e9');
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'fe7eae26904549b607b0');

includes/classes/Assets.php

@@ -80,5 +80,17 @@ public function frontend_assets() {
 			),
 			'before'
 		);
+
+		add_filter( 'wp_script_attributes', [ $this, 'add_type_attribute' ], 10, 1 );
+
+	}
+
+	function add_type_attribute( $attributes ) {
+		// Only do this for a specific script.
+		if ( isset( $attributes[ 'id' ] ) && $attributes[ 'id' ] === 'ootb-openstreetmap-js' ) {
+			$attributes[ 'type' ] = 'module';
+		}
+
+		return $attributes;
 	}
 }

includes/classes/Options.php

@@ -53,7 +53,7 @@ function settings_fields() {
 
 		add_settings_section(
 			'ootb_section_settings',
-			esc_html__( 'Map Provider API key', 'ootb-openstreetmap' ),
+			esc_html__( 'Map Providers', 'ootb-openstreetmap' ),
 			[ $this, 'section_settings_callback' ],
 			'ootb'
 		);
@@ -69,6 +69,26 @@ function settings_fields() {
 				'ootb_custom_data' => 'custom',
 			]
 		);
+		add_settings_field(
+			'global_mapbox_style_url',
+			esc_html__( 'MapBox style', 'ootb-openstreetmap' ),
+			[ $this, 'field_url' ],
+			'ootb',
+			'ootb_section_settings',
+			[
+				'label_for'        => 'global_mapbox_style_url',
+				'class'            => 'ootb_row',
+				'ootb_custom_data' => 'custom',
+				'description'      =>
+					sprintf(
+						wp_kses(
+							__( 'You can find the style URL in the <a href="%1$s" target="_blank">Mapbox Studio</a>. There, use the "Share" button, and under "Developer resources", copy the "Style URL". It should look like that: <code>mapbox://styles/username/style-id</code>.', 'ootb-openstreetmap' ),
+							[ 'a' => [ 'href' => [], 'target' => [] ] ]
+						),
+						esc_url( 'https://www.mapbox.com/studio/' )
+					),
+			]
+		);
 
 		add_settings_section(
 			'ootb_section_defaults',
@@ -269,6 +289,24 @@ function field_api_key_mapbox( array $args ) {
 		<?php
 	}
 
+	/**
+	 * A URL field.
+	 *
+	 * @param array $args THe settings args.
+	 *
+	 * @return void
+	 */
+	function field_url( array $args ) {
+		$option = Helper::get_option( 'all' );
+		?>
+		<input type="url" name="ootb_options[<?php echo esc_attr( $args[ 'label_for' ] ); ?>]"
+			   id="<?php echo esc_attr( $args[ 'label_for' ] ); ?>"
+			   value="<?php echo isset( $option[ $args[ 'label_for' ] ] ) ? esc_attr( $option[ $args[ 'label_for' ] ] ) : ''; ?>"
+			   size="60"/>
+		<p class="description"><?php echo $args[ 'description' ]; ?></p>
+		<?php
+	}
+
 	/**
 	 * The default coordinates.
 	 *

ootb-openstreetmap.php

@@ -5,7 +5,7 @@
  * Description:       A map block for the Gutenberg Editor using OpenStreetMaps and Leaflet that needs no API keys and works out of the box.
  * Requires at least: 5.8.6
  * Requires PHP:      7.4
- * Version:           2.6.0
+ * Version:           2.7.0
  * Author:            Giorgos Sarigiannidis
  * Author URI:        https://www.gsarigiannidis.gr
  * License:           GPL-2.0-or-later
@@ -21,7 +21,7 @@
 define( 'OOTB_PLUGIN_BASENAME', plugin_basename( __FILE__ ) );
 
 const OOTB_BLOCK_NAME     = 'ootb/openstreetmap';
-const OOTB_VERSION        = '2.6.0';
+const OOTB_VERSION        = '2.7.0';
 const OOTB_SCRIPT_VERSION = [
 	'leaflet'                  => '1.9.4',
 	'leaflet-gesture-handling' => '1.4.4',