-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
v2.1.1: adds support for cameraZoomRange and cameraBoundary
- Loading branch information
1 parent
4e6423f
commit 3f2f7b5
Showing
4 changed files
with
280 additions
and
250 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,106 +1,115 @@ | ||
| document.addEventListener('DOMContentLoaded', () => { | ||
| const mapContainers = document.querySelectorAll('.apple-map-container'); | ||
|
|
||
| if (mapContainers.length > 0) { | ||
| mapkit.init({ | ||
| authorizationCallback: function(done) { | ||
| done(appleMapsSettings.token); | ||
| } | ||
| }); | ||
|
|
||
| // Create a single map instance | ||
| const mapContainer = mapContainers[0]; | ||
|
|
||
| // Extract and parse locations data | ||
| const locationsData = mapContainer.dataset.landmarks; | ||
| let locations = []; | ||
| try { | ||
| locations = JSON.parse(locationsData).locations; | ||
| } catch (error) { | ||
| console.error('Error parsing locations data:', error); | ||
| return; | ||
| } | ||
|
|
||
| // Settings for the map | ||
| const settings = appleMapsSettings.settings; | ||
|
|
||
| const getColorScheme = colorScheme => { | ||
| switch (colorScheme) { | ||
| case 'light': | ||
| return mapkit.Map.ColorSchemes.Light; | ||
| case 'dark': | ||
| return mapkit.Map.ColorSchemes.Dark; | ||
| case 'hybrid': | ||
| return mapkit.Map.ColorSchemes.Hybrid; | ||
| default: | ||
| return mapkit.Map.ColorSchemes.Light; | ||
| } | ||
| }; | ||
|
|
||
| const mapOptions = { | ||
| colorScheme: getColorScheme(settings.colorScheme), | ||
| isZoomEnabled: settings.isZoomEnabled ?? true, | ||
| isScrollEnabled: settings.isScrollEnabled ?? true, | ||
| isRotationEnabled: settings.isRotationEnabled ?? true, | ||
| }; | ||
|
|
||
| const map = new mapkit.Map(mapContainer, mapOptions); | ||
|
|
||
| const annotations = []; | ||
| let pendingLookups = locations.length; | ||
|
|
||
| locations.forEach(location => { | ||
| const id = location.placeId; | ||
| const glyphText = appleMapsSettings.glyph || ''; | ||
|
|
||
| const lookup = new mapkit.PlaceLookup(); | ||
| lookup.getPlace(id, (error, place) => { | ||
| pendingLookups--; | ||
|
|
||
| if (error) { | ||
| console.error('Error looking up place:', error); | ||
| } else { | ||
| const annotation = new mapkit.PlaceAnnotation(place); | ||
| annotation.glyphText = glyphText; | ||
| map.addAnnotation(annotation); | ||
| annotations.push(annotation); | ||
|
|
||
| const getPlaceDetailsStyle = style => { | ||
| const mapContainers = document.querySelectorAll('.apple-map-container'); | ||
|
|
||
| if (mapContainers.length > 0) { | ||
| mapkit.init({ | ||
| authorizationCallback: function(done) { | ||
| done(appleMapsSettings.token); | ||
| } | ||
| }); | ||
|
|
||
| // Create a single map instance | ||
| const mapContainer = mapContainers[0]; | ||
|
|
||
| // Extract and parse locations data | ||
| const locationsData = mapContainer.dataset.landmarks; | ||
| let locations = []; | ||
| try { | ||
| locations = JSON.parse(locationsData).locations; | ||
| } catch (error) { | ||
| console.error('Error parsing locations data:', error); | ||
| return; | ||
| } | ||
|
|
||
| // Settings for the map | ||
| const settings = appleMapsSettings.settings; | ||
|
|
||
| const getColorScheme = (colorScheme) => { | ||
| switch (colorScheme) { | ||
| case 'light': | ||
| return mapkit.Map.ColorSchemes.Light; | ||
| case 'dark': | ||
| return mapkit.Map.ColorSchemes.Dark; | ||
| case 'hybrid': | ||
| return mapkit.Map.ColorSchemes.Hybrid; | ||
| default: | ||
| return mapkit.Map.ColorSchemes.Light; | ||
| } | ||
| }; | ||
|
|
||
| const mapOptions = { | ||
| colorScheme: getColorScheme(settings.colorScheme), | ||
| isZoomEnabled: settings.isZoomEnabled ?? true, | ||
| isScrollEnabled: settings.isScrollEnabled ?? true, | ||
| isRotationEnabled: settings.isRotationEnabled ?? true, | ||
| cameraZoomRange: new mapkit.CameraZoomRange(settings.cameraZoomRange?.min, settings.cameraZoomRange?.max) | ||
| }; | ||
|
|
||
| const map = new mapkit.Map(mapContainer, mapOptions); | ||
|
|
||
| const annotations = []; | ||
| let pendingLookups = locations.length; | ||
|
|
||
| locations.forEach((location) => { | ||
| const id = location.placeId; | ||
| const glyphText = appleMapsSettings.glyph || ''; | ||
|
|
||
| const lookup = new mapkit.PlaceLookup(); | ||
| lookup.getPlace(id, (error, place) => { | ||
| pendingLookups--; | ||
|
|
||
| if (error) { | ||
| console.error('Error looking up place:', error); | ||
| } else { | ||
| const annotation = new mapkit.PlaceAnnotation(place); | ||
| annotation.glyphText = glyphText; | ||
| map.addAnnotation(annotation); | ||
| annotations.push(annotation); | ||
|
|
||
| const getPlaceDetailsStyle = (style) => { | ||
| switch (style) { | ||
| case 'automatic': | ||
| return mapkit.PlaceSelectionAccessory.Styles.Automatic | ||
| return mapkit.PlaceSelectionAccessory.Styles.Automatic; | ||
| case 'callout': | ||
| return mapkit.PlaceSelectionAccessory.Styles.Callout | ||
| return mapkit.PlaceSelectionAccessory.Styles.Callout; | ||
| case 'full_callout': | ||
| return mapkit.PlaceSelectionAccessory.Styles.FullCallout | ||
| return mapkit.PlaceSelectionAccessory.Styles.FullCallout; | ||
| case 'compact_callout': | ||
| return mapkit.PlaceSelectionAccessory.Styles.CompactCallout | ||
| return mapkit.PlaceSelectionAccessory.Styles.CompactCallout; | ||
| case 'open_in_maps': | ||
| return mapkit.PlaceSelectionAccessory.Styles.OpenInMaps | ||
| return mapkit.PlaceSelectionAccessory.Styles.OpenInMaps; | ||
| default: | ||
| return mapkit.PlaceSelectionAccessory.Styles.Automatic | ||
| return mapkit.PlaceSelectionAccessory.Styles.Automatic; | ||
| } | ||
| }; | ||
|
|
||
| const accessory = new mapkit.PlaceSelectionAccessory({ | ||
| const accessory = new mapkit.PlaceSelectionAccessory({ | ||
| style: getPlaceDetailsStyle(settings.style), | ||
| }); | ||
| annotation.selectionAccessory = accessory; | ||
| } | ||
|
|
||
| if (pendingLookups === 0) { | ||
| map.showItems(annotations); | ||
|
|
||
| if (settings.center?.latitude !== undefined && settings.center?.longitude !== undefined) { | ||
| map.center = new mapkit.Coordinate(settings.center.latitude, settings.center.longitude); | ||
| } | ||
|
|
||
| // Set camera distance if provided in settings | ||
| if (settings.cameraDistance !== undefined) { | ||
| map.cameraDistance = settings.cameraDistance; | ||
| } | ||
| } | ||
| }); | ||
| }); | ||
| } | ||
| annotation.selectionAccessory = accessory; | ||
| } | ||
|
|
||
| if (pendingLookups === 0) { | ||
| map.showItems(annotations); | ||
|
|
||
| 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), | ||
| new mapkit.CoordinateSpan(settings.cameraBoundary.spanLatitude, settings.cameraBoundary.spanLongitude) | ||
| ); | ||
|
|
||
| map.cameraBoundary = cameraBoundary.toMapRect(); | ||
| } | ||
|
|
||
| if (settings.center?.latitude !== undefined && settings.center?.longitude !== undefined) { | ||
| map.center = new mapkit.Coordinate(settings.center.latitude, settings.center.longitude); | ||
| } | ||
|
|
||
| if (settings.cameraDistance !== undefined) { | ||
| map.cameraDistance = settings.cameraDistance; | ||
| } | ||
| } | ||
| }); | ||
| }); | ||
| } | ||
| }); |
Oops, something went wrong.