Topheman Street View – an opened window to the world

How about browsing through the Google Street View panoramas, but not with your mouse or trackpad, not even with your fingers, but with your mobile device, moving it like a window to the world ?…

Try Topheman Street View

QR-Code to

Enter a location or let the site show you a random one and then, visit it like you were inside it, by moving your mobile up and down, left and right, turning around …

The idea

I got the idea of this project about 3 months ago, after attending to the HTML5 & CSS3 meetup at Criteo, where the Biborg agency showed their work on the Assassin’s Creed IV Black Flag (there was a little part where they used the HTML5 API compass to show and slide an image of a beach – sorry, couldn’t retrieve it). So I decided to take it to a whole other level : real panoramas and any panoramas ! And moreover, something modular and reusable by developers.

So, Topheman Street View is a demo of what you can do with the library I came up with :


I will make a full blog post about PanoramaSensorsViewer. For the moment you can checkout the API Doc and the examples I made on the github repository (it’s open-source, MIT Licensed, so go fork it).

In a few words, with PanoramaSensorsViewer :

  • you can display Google Street View panoramas (even inject your own custom panoramas since you have total access to the Google Maps API)
  • you don’t have to worry about the gyroscope+accelerometer events (deviceorientation) as well as the rotation/orientation of your device, PanoramaSensorsViewer does it for you

This works directly inside your browser (it’s only HTML5/JavaScript), so no need to install any webapp.


Topheman Street View is not here to replace in any way the user interface of Street View you have in Google Maps, it’s here to demonstrate the possibilities of PanoramaSensorsViewer. You can imagine many use cases, for example :

  • you buy a night in a hotel online, you can snap a QR-Code to visit your room
  • you buy a trek online, you can browse the panorama of each place you’ll stay at night

I had fun developing it and I’ll try to improve it. It works great on iOs devices, there are some issues on Android (unfortunatly, I can’t do much about it, however it may be fixed in future versions).


PS : You want to try the custom panorama part ?… Just follow this link and go inside the office … 😉

3 thoughts on “Topheman Street View – an opened window to the world

  1. I would like to develop an application using google street. I will upload images in my application. The users of my application will then be able to view the uploaded images like google street view. for example, we can see images in the link below,78.0421102,3a,75y,356h,90t/data=!3m8!1e1!3m6!1soMmPsq-Lu40AAAGuoZNrng!2e0!3e2!!7i13312!8i6656!6m1!1e1?hl=bn

    I saw your demo “custompanorama.html” on GitHub. But problem is there is no arrow icon.
    How can I develop the arrow icon in “custompanorama.html”.

    If you don’t mind My Skype Id is “kmmuradbd”.
    Can you please add me?

    How can i develop like this.?
    can you please help me?

  2. Hie Murad,

    Checkout the last example:

    * Sources:

    You’ll see that, in the success callback, this is the Google Street View Panorama (on which you’ll be able to add those arrows – which in fact are links between panoramas). Take a look at the API doc of PanoramaSensorsViewer.

    If you have some troubles at this step, I strongly advise you to repeat the examples provided by the google team here: to get a better understand of the way custom panoramas behave in Google Street View.

    Once you’ll be comfortable with that, you’ll be able to put it all back into PanoramaSensorsViewer (or not, I didn’t quite catch if you were to use the library at the end).

    I hope it will help you. I’m sorry, I don’t offer free consulting on this project, all the code remains free and open-source, you’re welcome to use it / share it / contribute.

Leave a Reply

Your email address will not be published. Required fields are marked *