add a setting option to set the map height

stevennoad · Jul 10, 2024 · 715b568 · 715b568
1 parent 3f2f7b5
commit 715b568
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -19,27 +19,27 @@ The Apple Maps Plugin allows you to easily integrate Apple Maps into your WordPr
 ### Manual Installation
 
 1. **Download the Plugin:**
-   - Download the plugin zip file from the [GitHub repository](https://github.com/stevennoad/apple-maps-plugin).
-   - Rename the zip file to `apple-maps`.
+  - Download the plugin zip file from the [GitHub repository](https://github.com/stevennoad/apple-maps-plugin).
+  - Rename the zip file to `apple-maps`.
 
 2. **Upload the Plugin:**
-   - Navigate to `Plugins > Add New` in your WordPress admin dashboard.
-   - Click on the `Upload Plugin` button.
-   - Choose the downloaded zip file and click `Install Now`.
+  - Navigate to `Plugins > Add New` in your WordPress admin dashboard.
+  - Click on the `Upload Plugin` button.
+  - Choose the downloaded zip file and click `Install Now`.
 
 3. **Activate the Plugin:**
-   - After the plugin is installed, click on `Activate Plugin`.
+  - After the plugin is installed, click on `Activate Plugin`.
 
 ## Configuration
 
 ### API Key
 
 1. **Get Your MapKit JS Token:**
-   - Obtain your Apple MapKit JS token from the Apple Developer portal.
+  - Obtain your Apple MapKit JS token from the Apple Developer portal.
 
 2. **Enter the Token in Plugin Settings:**
-   - Navigate to `Settings > Apple Map` in your WordPress admin dashboard.
-   - Enter your MapKit JS token in the designated field.
+  - Navigate to `Settings > Apple Map` in your WordPress admin dashboard.
+  - Enter your MapKit JS token in the designated field.
 
 ### Shortcode Usage
 
@@ -113,27 +113,28 @@ You can customise the map further by including a `settings` object within your s
 
 ```html
 "settings": {
-	 "colorScheme": "light",
-	 "cameraDistance": 1000,
-	 "isZoomEnabled": true,
-	 "isScrollEnabled": true,
-	 "isRotationEnabled": true,
-	 "style": "compact_callout",
-	 "center": {
-		 "latitude": 37.3318,
-		 "longitude": -122.0312
-	 },
-	 "cameraZoomRange": {
-			"min": 5000,
-			"max": 10000
-		},
-	 "cameraBoundary": {
-		 "latitude": 37.3349,
-		 "longitude": -122.0090,
-		 "spanLatitude": 0.05,
-		 "spanLongitude": 0.05
-	 }
- }
+	"mapHeight": 500,
+	"colorScheme": "light",
+	"cameraDistance": 1000,
+	"isZoomEnabled": true,
+	"isScrollEnabled": true,
+	"isRotationEnabled": true,
+	"style": "compact_callout",
+	"center": {
+		"latitude": 37.3318,
+		"longitude": -122.0312
+	},
+	"cameraZoomRange": {
+		"min": 5000,
+		"max": 10000
+	},
+	"cameraBoundary": {
+		"latitude": 37.3349,
+		"longitude": -122.0090,
+		"spanLatitude": 0.05,
+		"spanLongitude": 0.05
+	}
+}
 ```
 
 #### Full example of multiple locations with custom setting
@@ -159,11 +160,11 @@ You can customise the map further by including a `settings` object within your s
     }
   ],
   "settings": {
-     "colorScheme": "dark",
-     "isZoomEnabled": true,
-     "isScrollEnabled": true,
-     "isRotationEnabled": true
-   }
+    "colorScheme": "dark",
+    "isZoomEnabled": true,
+    "isScrollEnabled": true,
+  	"isRotationEnabled": true
+  }
 }
 [/apple_map]
 ```
diff --git a/apple-maps.php b/apple-maps.php
@@ -3,7 +3,7 @@
 Plugin Name: Apple Maps
 Plugin URI:  https://github.com/stevennoad/apple-maps-plugin
 Description: A plugin to add Apple Maps with multiple locations.
-Version:     2.1.1
+Version:     2.1.2
 Author:      Steve Noad
 License:     MIT
 Text Domain: apple-maps

diff --git a/assets/js/places.js b/assets/js/places.js
@@ -108,6 +108,8 @@ document.addEventListener('DOMContentLoaded', () => {
 					if (settings.cameraDistance !== undefined) {
 						map.cameraDistance = settings.cameraDistance;
 					}
+
+					mapContainer.style.height = `${settings.mapHeight || 500}px`;
 				}
 			});
 		});

diff --git a/assets/js/standard.js b/assets/js/standard.js
@@ -80,6 +80,18 @@ document.addEventListener('DOMContentLoaded', () => {
 		map.showItems(annotations);
 		console.log('Annotations added to map for element ID: ' + mapElementId);
 
+		if (settings.mapHeight) {
+			const mapContainer = document.getElementById(mapElementId);
+			if (mapContainer) {
+				mapContainer.style.height = `${settings.mapHeight}px`;
+			}
+		} else {
+			const mapContainer = document.getElementById(mapElementId);
+			if (mapContainer) {
+				mapContainer.style.height = `500px`;
+			}
+		}
+
 		if (settings.cameraBoundary?.latitude !== undefined && settings.cameraBoundary?.longitude !== undefined && settings.cameraBoundary?.spanLatitude !== undefined && settings.cameraBoundary?.spanLongitude !== undefined) {
 			const cameraBoundary = new mapkit.CoordinateRegion(
 				new mapkit.Coordinate(settings.cameraBoundary.latitude, settings.cameraBoundary.longitude),