Playing around with maps and streetview


In Sheets and Maps collaboration with cache - effex demo, I showed how you might use a loosely coupled app to enrich data in various platforms which used the Ephemeral Exchange store to collaborate. It's always fun to play with the Maps API, so for the next demo I wanted something that could do a little more, so I've extended it to be able to include streetview images. 

Code

Most of the demos and libraries mentioned in these pages are available in their own github repo, but for convenience there is a consolidated repo where I'll push all the associated code. If you'd like to contribute, please make a PR there.

Objective

So far the Maps app can enrich data by plotting on a map, geocoding and collecting supplemental information, and pass the results back and forwards to any platform that knows how to use Ephemeral Exchange. Here's the new features-
  • Enter streetview for the data points
  • Capture a selected view paying attention to zoom levels and camera angles
  • Be able to recreate that exact scenario at a later date
  • Generate a streetview Image API link so the view can be embedded in some other app than Maps
  • Continue to enable all the Mapping capabilities in the first iteration app
  • Share the data and results using Ephemeral Exchange with collaborating apps.

Streetview background

It's worth just going over what streetview is, and how it works before diving into the detail. A streetview is a representation of a location, made up of linked panoramas, where a panorama is multiple images taken from different angles so that a continuous view is able to be simulated. The anatomy of a panorama goes something like this.
  • It's tied to a location - so searching for an appropriate panorama starts with looking for a panorama encompassing or not too far from the location you want to look at in Streetview
  • It can be thought of as a miniature spherical world, made up of tiles than can be wrapped around this world to provide a view of a place from multiple angles.
  • As you move through streetview, you transition between multiple panoramas. In streetview mode, the little white arrow markers actually indicate that there are more streetview panoramas in that direction, adjacent to the one you are currently on.
  • The panorama 'point of view' is made up of a heading - the direction you are looking at the scene from, and a pitch - the up/down angle you are viewing at.
  • The zoom level (its different than the Map zoom levels), defines the 'field of view'. The closer (higher zoom) you are to a scene, the less of the image scope you see, but what you see is bigger (or zoomed). In Maps, the zoom level goes to 21. In Streetview it goes from 0-5, but in practice I've found that there is no imagery available for zoom levels higher than 3.1- so that's equivalent to a practical field of view from 180 (0) through to about 26 (3.1)
  • Each panorama has a unique id.

The Streetview image API

This displays an attempt at the static view of the panorama, ( it's not 100% accurate, nor as good quality), specified via a url with these parameters and caveats.
  • location (lat/lng) or specific panorama ID. My app deals in panoramas that have been interactively selected, so only deals in panorama ids
  • size - the image width and height to generate. If you change the aspect ratio compared to the streetview you are trying to recreate, you'll get a different view, so it's important to keep the aspect ratios constant. the maximum size is 640 x 640, which is likely to be a different perspective than your original screen.
  • fov - the field of view is roughly equivalent to the zoom in Streetview in Maps and can be calculated from it. There seems to be some confusion about how to do this calculation, and the method documented here, gives rather poorer results than the one I'll give in the later post about how to do this
  • heading and pitch are the same as for Maps streetview.

How to do things

These articles will go into some detail about some of the things I've come across while playing with streetview. 






For more like this, see Ephemeral Exchange Why not join our forum, follow the blog or follow me on twitter to ensure you get updates when they are available.