Plotting Overlays shows large map and no overlays

[csmu-cenr]

Suggest adding a zoom and adding a few dummy locations based on the lat and log in the simulator

[adamboduch]

Hi @csmu-cenr.

The overlays are there, they're just around me (Pickering, Ontario). In hindsight, this isn't ideal. I apologize.

[csmu-cenr]

The zooming issue relates to setting latitudeDelta and longitudeDelta correctly.

Here is a code extract that is setting the zoom correctly on my device and setting the position of a draggable marker where I am located. The rad2deg and deg2rad details can be found here https://stackoverflow.com/questions/30606827/set-the-bounds-of-a-mapview/39487945

const earthRadiusInKM = 6371 ;
const radiusInKM = 1 ;
const aspectRatio = 1 ;

rad2deg (angle) {
return angle * 57.29577951308232 // angle / Math.PI * 180
}

deg2rad (angle) {
return angle * 0.017453292519943295 // (angle / 180) * Math.PI;

componentWillMount() {

	
	const  setPosition = (pos) => {

    // We need the "latitude" and the "longitude"
    // in order to lookup the "address" from the
    // Google maps API.
    const {
      coords: {
        latitude,
        longitude,
      },
    } = pos;
		
		var radiusInRad = radiusInKM / earthRadiusInKM ;
		var longitudeDelta = this.rad2deg(radiusInRad / Math.cos(this.deg2rad(latitude)));
  	  	var latitudeDelta = aspectRatio * this.rad2deg(radiusInRad);
		
		var region = {
			latitude: latitude,
			longitude: longitude,
			latitudeDelta: latitudeDelta,
			longitudeDelta: longitudeDelta,
		}
		this.data = this.data.set('region',region) ;
		
		var marker = {
			latitude: latitude,
			longitude: longitude,
			title: 'Help.',
			description: 'The person.',
		}
		this.data = this.data.set('marker', marker) ;
		
    // Fetches data from the Google Maps API then sets
    // the "address" state based on the response.
    fetch(`${URL}${latitude},${longitude}`)
      .then(resp => resp.json(), e => console.error(e))
      .then(({
        results: [
          { formatted_address },
        ],
      }) => {
				
				this.setAddress( formatted_address ) ;
				this.startAlert() ;
      });
  } ;

navigator.geolocation.getCurrentPosition(setPosition) ;
	
}

}