diff --git a/examples/subscribing-example-app/public/Google/GoogleMapsMarker.js b/examples/subscribing-example-app/public/Google/GoogleMapsMarker.js index 8de4d89..df242ca 100644 --- a/examples/subscribing-example-app/public/Google/GoogleMapsMarker.js +++ b/examples/subscribing-example-app/public/Google/GoogleMapsMarker.js @@ -6,7 +6,7 @@ export class GoogleMapsMarker { this.current = markerCoordinate; this.lastCompassDirection = "N"; this.marker = new google.maps.Marker({ icon: "/driverN.png", map: map }); - this.rawMarker = new google.maps.Marker({ icon: "/driverN.png", map: map, opacity: 0.3, visible: false }); + this.rawMarker = new google.maps.Marker({ icon: "/driverN.png", map: map, opacity: 0.3, visible: false }); this.accuracyCircle = new google.maps.Circle({ strokeColor: "#FF0000", strokeOpacity: 0.8, diff --git a/examples/subscribing-example-app/public/RiderConnection.js b/examples/subscribing-example-app/public/RiderConnection.js index b05574f..02a08d6 100644 --- a/examples/subscribing-example-app/public/RiderConnection.js +++ b/examples/subscribing-example-app/public/RiderConnection.js @@ -38,40 +38,46 @@ export class RiderConnection { this.subscriber = new Subscriber({ ablyOptions: { authUrl: '/api/createTokenRequest' }, - onLocationUpdate: (message) => { - this.processMessage(message); - }, - onRawLocationUpdate: (message) => { - this.processMessage(message, true); - }, - onStatusUpdate: (status) => { - this.statusUpdateCallback(status); - }, - resolution: this.hiRes ? lowResolution : highResolution, - onLocationUpdateIntervalUpdate: (desiredInterval) => { - this.locationUpdateInterval = desiredInterval - }, }); + createMapSpecificZoomListener((zoom) => { this.zoomLevel = zoom; if (zoom > zoomThreshold && !this.hiRes) { this.hiRes = true; - this.subscriber.sendChangeRequest(highResolution); + this.asset?.sendChangeRequest?.(highResolution); this.rider?.showAccuracyCircle(); } else if (zoom <= zoomThreshold && this.hiRes) { this.rider?.hideAccuracyCircle(); this.hiRes = false; - this.subscriber.sendChangeRequest(lowResolution); + this.asset?.sendChangeRequest?.(lowResolution); } }); } async connect(channelId) { - if (this.subscriber.assetConnection) { - await this.subscriber.stop(); + if (this.asset) { + await this.asset.stop(); } - this.subscriber.start(channelId || 'ivan'); + this.asset = this.subscriber.get(channelId || 'ivan', this.hiRes ? lowResolution : highResolution); + + this.asset.addLocationListener((message) => { + this.processMessage(message); + }); + + this.asset.addRawLocationListener((message) => { + this.processMessage(message, true); + }); + + this.asset.addStatusListener((status) => { + this.statusUpdateCallback(status); + }); + + this.asset.addLocationUpdateIntervalListener((desiredInterval) => { + this.locationUpdateInterval = desiredInterval + }); + + await this.asset.start(channelId || 'ivan'); } setRenderSkippedLocations(state) {