1import { requireNativeModule } from 'expo-modules-core'; 2import React from 'react'; 3import { Platform, findNodeHandle } from 'react-native'; 4import { NativeExpoAppleMapsView, NativeExpoAppleMapsModule, NativeExpoGoogleMapsView, NativeExpoGoogleMapsModule, } from './NativeExpoMapView'; 5import * as Utils from './Utils'; 6export { Marker } from './Marker'; 7export { Polygon } from './Polygon'; 8export { Polyline } from './Polyline'; 9export { Circle } from './Circle'; 10export { Cluster } from './Cluster'; 11export { KML } from './KML'; 12export { GeoJson } from './GeoJson'; 13export { Overlay } from './Overlay'; 14export { Heatmap } from './Heatmap'; 15export * from './Events'; 16const defaultNativeExpoMapViewProps = { 17 mapType: 'normal', 18 showZoomControls: true, 19 showCompass: true, 20 showMapToolbar: true, 21 showMyLocationButton: true, 22 showLevelPicker: true, 23 enableRotateGestures: false, 24 enableScrollGestures: true, 25 enableTiltGestures: false, 26 enableZoomGestures: true, 27 initialCameraPosition: { 28 target: { 29 latitude: 51.51, 30 longitude: 0.13, 31 }, 32 zoom: 4, 33 animate: true, 34 duration: 1000, 35 }, 36 enableTraffic: false, 37 enablePOISearching: false, 38 enablePOIs: false, 39 enablePOIFilter: [], 40 createPOISearchRequest: '', 41 clickablePOIs: true, 42}; 43/** 44 * Main map component of Expo Maps library. 45 * 46 * See {@link ExpoMapViewProps} to learn more about props. 47 */ 48export class ExpoMap extends React.Component { 49 state = { 50 markers: [], 51 polygons: [], 52 polylines: [], 53 circles: [], 54 clusters: [], 55 kmls: [], 56 geojsons: [], 57 overlays: [], 58 heatmaps: [], 59 }; 60 _ismounted = false; 61 mapView = React.createRef(); 62 getSearchCompletions(queryFragment) { 63 const nodeHandle = findNodeHandle(this.mapView.current); 64 let module; 65 if (Platform.OS === 'ios' && this.props.provider === 'apple') { 66 module = NativeExpoAppleMapsModule; 67 } 68 else { 69 module = NativeExpoGoogleMapsModule; 70 } 71 module 72 .getSearchCompletions(nodeHandle, queryFragment) 73 .then((response) => { 74 console.log(response); 75 }) 76 .catch((error) => { 77 console.log('Error with message: ' + error.message); 78 }); 79 } 80 async moveCamera(cameraMove) { 81 const nodeHandle = findNodeHandle(this.mapView.current); 82 let module; 83 if (Platform.OS === 'ios' && this.props.provider === 'apple') { 84 module = requireNativeModule('ExpoAppleMaps'); 85 } 86 else { 87 module = requireNativeModule('ExpoGoogleMaps'); 88 } 89 return module.moveCamera(nodeHandle, cameraMove); 90 } 91 componentDidMount() { 92 this.mapChildren(); 93 this._ismounted = true; 94 } 95 componentWillUnmount() { 96 this._ismounted = false; 97 } 98 componentDidUpdate(_, prevState) { 99 if (Object.is(this.state, prevState)) { 100 this.mapChildren(); 101 } 102 } 103 async mapChildren() { 104 const childrenArray = React.Children.map(this.props.children, async (child) => { 105 if (!Utils.isSimpleType(child)) { 106 if (Utils.isMarker(child)) { 107 return Utils.buildMarkerObject(child); 108 } 109 else if (Utils.isPolygon(child)) { 110 return Utils.buildPolygonObject(child); 111 } 112 else if (Utils.isPolyline(child)) { 113 return Utils.buildPolylineObject(child); 114 } 115 else if (Utils.isCircle(child)) { 116 return Utils.buildCircleObject(child); 117 } 118 else if (Utils.isKML(child)) { 119 return Utils.buildKMLObject(child); 120 } 121 else if (Utils.isGeoJson(child)) { 122 return Utils.buildGeoJsonObject(child); 123 } 124 else if (Utils.isCluster(child)) { 125 return Utils.buildClusterObject(child); 126 } 127 else if (Utils.isOverlay(child)) { 128 return Utils.buildOverlayObject(child); 129 } 130 else if (Utils.isHeatmap(child)) { 131 return Utils.buildHeatmapObject(child); 132 } 133 Utils.warnIfChildIsIncompatible(child); 134 return null; 135 } 136 Utils.warnIfChildIsIncompatible(child); 137 return null; 138 }); 139 if (childrenArray !== undefined) { 140 // TODO(@lukmccall): remove any cast 141 const propObjects = await Promise.all(childrenArray); 142 if (this._ismounted) { 143 this.setState({ 144 markers: propObjects.filter((elem) => elem?.type === 'marker'), 145 polygons: propObjects.filter((elem) => elem?.type === 'polygon'), 146 polylines: propObjects.filter((elem) => elem?.type === 'polyline'), 147 circles: propObjects.filter((elem) => elem?.type === 'circle'), 148 clusters: propObjects.filter((elem) => elem?.type === 'cluster'), 149 kmls: propObjects.filter((elem) => elem?.type === 'kml'), 150 geojsons: propObjects.filter((elem) => elem?.type === 'geojson'), 151 overlays: propObjects.filter((elem) => elem?.type === 'overlay'), 152 heatmaps: propObjects.filter((elem) => elem?.type === 'heatmap'), 153 }); 154 } 155 } 156 } 157 render() { 158 if (Platform.OS === 'ios' && this.props.provider === 'apple') { 159 if (parseInt(Platform.Version, 10) < 13 && this.state.geojsons.length > 0) { 160 console.warn("Versions of iOS < 13 doesn't support GeoJSON features for Apple Maps. Adding of GeoJSON for these versions will be omitted."); 161 } 162 if (parseInt(Platform.Version, 10) < 13) { 163 console.warn("Versions of iOS < 13 doesn't support Points Of Interest Filters and their display modifications for Apple Maps. Adding POI filters for these versions will be omitted."); 164 } 165 return (React.createElement(NativeExpoAppleMapsView, { ...defaultNativeExpoMapViewProps, ...this.props, markers: this.state.markers, polygons: this.state.polygons, polylines: this.state.polylines, circles: this.state.circles, clusters: this.state.clusters, kmls: this.state.kmls, geojsons: this.state.geojsons, ref: this.mapView })); 166 } 167 let googleMapsJsonStyleString = this.props.googleMapsJsonStyleString 168 ? this.props.googleMapsJsonStyleString 169 : ''; 170 if (this.props.enablePOIs === false) { 171 if (this.props.googleMapsJsonStyleString) { 172 console.warn("Expo Maps enablePOIs prop isn't effective when custom Google Maps map style is active. Please adjust your style manually to disable the POIs. https://developers.google.com/maps/documentation/ios-sdk/poi"); 173 } 174 else { 175 googleMapsJsonStyleString = JSON.stringify([ 176 { 177 featureType: 'poi', 178 stylers: [{ visibility: 'off' }], 179 }, 180 ]); 181 } 182 } 183 return (React.createElement(NativeExpoGoogleMapsView, { ...defaultNativeExpoMapViewProps, ...this.props, googleMapsJsonStyleString: googleMapsJsonStyleString, markers: this.state.markers, polygons: this.state.polygons, polylines: this.state.polylines, circles: this.state.circles, clusters: this.state.clusters, kmls: this.state.kmls, geojsons: this.state.geojsons, ref: this.mapView, overlays: this.state.overlays, heatmaps: this.state.heatmaps })); 184 } 185} 186//# sourceMappingURL=Map.js.map