Merge branch 'release/2.2.0'

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' => '6d46a692118d073e9e1d');
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'b02df17e5e9500f32cdc');

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.1.0
+ * Version:           2.2.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.1.0';
+const OOTB_VERSION    = '2.2.0';
 const OOTB_PLUGIN_INC = OOTB_PLUGIN_PATH . 'includes/';
 
 // Require Composer autoloader if it exists.

package.json

@@ -15,7 +15,7 @@
 		"start": "wp-scripts start"
 	},
 	"devDependencies": {
-		"@wordpress/scripts": "^24.5.0"
+		"@wordpress/scripts": "^25.0.0"
 	},
 	"dependencies": {
 		"leaflet": "^1.9.3",

readme.txt

@@ -5,7 +5,7 @@ Tags: Map, OpenStreetMap, Leaflet, Google Maps, block
 Requires at least: 5.8.6
 Tested up to: 6.1
 Requires PHP: 7.4
-Stable tag: 2.1.0
+Stable tag: 2.2.0
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 
@@ -35,6 +35,8 @@ Instead of manually adding coordinates for each one of your markers, just click-
 * Enable or disable scroll wheel zoom.
 * Set a minimum and maximum limit that the user can zoom on the frontend. Setting the same value to both fields will lock the zoom at that level.
 * Support for other Layer Providers: MapBox (using your own API key) and Stamen.
+* Option to export locations in a JSON file
+* Option to import locations from a JSON file
 
 == Installation ==
 
@@ -75,8 +77,12 @@ Check under the "Map behavior" section, at the blocks' settings at the sidebar o
 8. Plugin settings page
 9. Adding a polygon
 10. Adding a polyline
+11. Export and import locations
 
 == Upgrade Notice ==
+= 2.2.0 =
+Version 2.2.0 adds support for import and export locations [read more](https://github.com/gsarig/ootb-openstreetmap/pull/14).
+
 = 2.1.0 =
 Version 2.1.0 introduces 2 new, powerful features: support for polygons, and polylines.
 
@@ -87,6 +93,10 @@ Version 2.0.0 is a major, almost full, refactoring, both for the build scripts a
 
 == Changelog ==
 
+= 2.2.0 =
+* [New] Adds option to export locations to a JSON file
+* [New] Adds option to import locations from a previously exported JSON file
+
 = 2.1.0 =
 * [New] Adds support for polygon shapes
 * [New] Adds support for polyline shapes

src/Controls/Controls.js

@@ -2,10 +2,11 @@
 
 import MainControls from './MainControls';
 import BehaviorControls from './BehaviorControls';
+import DataControls from "./DataControls";
 
 import {__} from '@wordpress/i18n';
-const {PanelBody} = wp.components;
-const {InspectorControls} = wp.blockEditor;
+import {PanelBody} from '@wordpress/components';
+import {InspectorControls} from '@wordpress/block-editor';
 
 export default function Controls({props}) {
 	return (
@@ -22,6 +23,12 @@ export default function Controls({props}) {
 			>
 				<BehaviorControls props={props}/>
 			</PanelBody>
+			<PanelBody
+				title={__('Map data', 'ootb-openstreetmap')}
+				initialOpen={false}
+			>
+				<DataControls props={props}/>
+			</PanelBody>
 		</InspectorControls>
 	);
 }

src/Controls/DataControls.js

@@ -0,0 +1,14 @@
+// noinspection NpmUsedModulesInstalled,JSUnresolvedVariable
+
+import {Fragment} from '@wordpress/element';
+import ExportControl from "./ExportControl";
+import ImportControl from "./ImportControl";
+
+export default function DataControls({props}) {
+	return (
+		<Fragment>
+			<ExportControl props={props}/>
+			<ImportControl props={props}/>
+		</Fragment>
+	);
+}

src/Controls/ExportControl.js

@@ -0,0 +1,35 @@
+// noinspection NpmUsedModulesInstalled,JSUnresolvedVariable
+
+import {__} from '@wordpress/i18n';
+import {BaseControl, Button} from '@wordpress/components';
+
+export default function ExportControl({props}) {
+	const {
+		attributes: {
+			markers,
+		},
+		clientId,
+	} = props;
+	const hasMarkers = markers && 0 < markers.length;
+	const formBlob = new Blob([JSON.stringify(markers)], {type: 'application/json'});
+	return (
+		<BaseControl
+			label={__('Export', 'ootb-openstreetmap')}
+			help={__('Download a JSON file with the locations of this map.', 'ootb-openstreetmap')}
+		>
+			<div>
+				<Button
+					icon="download"
+					iconPosition="left"
+					variant={hasMarkers ? 'primary' : 'secondary'}
+					href={window.URL.createObjectURL(formBlob)}
+					target="_blank"
+					download={'ootb_' + clientId}
+					disabled={!hasMarkers}
+					showTooltip={true}
+					text={__('Export locations', 'ootb-openstreetmap')}
+				/>
+			</div>
+		</BaseControl>
+	);
+}

src/Controls/ImportControl.js

@@ -0,0 +1,64 @@
+// noinspection NpmUsedModulesInstalled,JSUnresolvedVariable
+
+import {__} from '@wordpress/i18n';
+import validMarkers from "../Helpers/validMarkers";
+import {BaseControl, FormFileUpload} from '@wordpress/components';
+
+export default function ImportControl({props}) {
+	const {
+		attributes: {
+			markers,
+		},
+		setAttributes,
+	} = props;
+	const hasMarkers = markers && 0 < markers.length;
+
+	const importMarkers = (event) => {
+		const file = event.currentTarget.files[0];
+		if (!file || 0 === file.length) {
+			return;
+		}
+		const reader = new FileReader();
+		reader.readAsText(file, "UTF-8");
+		reader.onload = function (fileObj) {
+			const data = validMarkers(fileObj.target.result);
+			if (!data) {
+				return;
+			}
+			setAttributes({
+				markers: markers.concat(data),
+				shouldUpdateBounds: true,
+			});
+		}
+		//noinspection JSUnusedLocalSymbols
+		reader.onerror = function (fileObj) {
+			console.log(__('Error reading file', 'ootb-openstreetmap'));
+		}
+	};
+
+	return (
+		<BaseControl
+			label={__('Import', 'ootb-openstreetmap')}
+			help={__('Import locations from a previously exported JSON file.', 'ootb-openstreetmap')}
+		>
+			<FormFileUpload
+				icon="database-add"
+				iconPosition="left"
+				variant="primary"
+				isDestructive={hasMarkers}
+				label={
+					hasMarkers ?
+						__('This map already includes locations. Uploading new locations will merge them with the existing ones.', 'ootb-openstreetmap')
+						: null
+				}
+				text={__('Import locations', 'ootb-openstreetmap')}
+				accept="application/json"
+				onChange={
+					(event) => {
+						importMarkers(event)
+					}
+				}
+			/>
+		</BaseControl>
+	);
+}

src/Controls/MainControls.js

@@ -6,9 +6,8 @@ import TypeControl from "./TypeControl";
 import getIcon from '../Helpers/getIcon';
 import {__} from '@wordpress/i18n';
 import {Fragment} from '@wordpress/element';
-
-const {RangeControl, Button} = wp.components;
-const {MediaUpload, MediaUploadCheck} = wp.blockEditor;
+import {RangeControl, Button} from '@wordpress/components';
+import {MediaUpload, MediaUploadCheck} from '@wordpress/block-editor';
 
 export default function MainControls({props}) {
 	const {

src/Helpers/validMarkers.js

@@ -0,0 +1,29 @@
+import validateCoordinates from "./validateCoordinates";
+
+export default function validMarkers(data) {
+	try {
+		const jsonData = JSON.parse(data.toString());
+		if (jsonData && typeof jsonData === 'object') {
+			let clean = [];
+			for (const location of jsonData) {
+				// Skip if no lat or lng exist.
+				if (!location.lat || !location.lng) {
+					continue;
+				}
+				// Skip if either the latitude or the longitude is invalid.
+				if (!validateCoordinates(location.lat, location.lng)) {
+					continue;
+				}
+				// If no ID exists, create one.
+				location.id = location.id ?? Date.now();
+				// Make sure that we don't import unnecessary keys.
+				const {lat, lng, text, id} = location;
+				clean.push({lat, lng, text, id});
+			}
+			return clean;
+		}
+	} catch (e) {
+		return false;
+	}
+	return false;
+}

src/Helpers/validateCoordinates.js

@@ -0,0 +1,20 @@
+/**
+ * Perform basic validation on the coordinates.
+ * @param lat
+ * @param lng
+ * @returns {*}
+ */
+export default function validateCoordinates(lat = '', lng = '') {
+	if (!lat || !lng) {
+		return false;
+	}
+	return isValidLatitude(parseFloat(lat)) && isValidLongitude(parseFloat(lng));
+}
+
+export function isValidLatitude(lat) {
+	return isFinite(lat) && Math.abs(lat) <= 90;
+}
+
+export function isValidLongitude(lng) {
+	return isFinite(lng) && Math.abs(lng) <= 180;
+}