Live online remix of the maps at here.com

A remix could be many things but in this case the word refers to some modifications I made to the maps at here.com in realtime using the Node-Webkit framework. Like this:

Maps_before_after

What you see on the right is a screen-shot of the live and navigable application at here.com but interface elements have been removed and the whole maps has received a colored tint.

In other words it’s possible to modify and change the look and functionality of a live website without copying it to another server or hack the server on which the website resides (don’t do that, kids!).
I made the modifications using simple html and javascript which modifies the website when viewed in my own browser – or in this case a specialized application made using the Node-Webkit framework.

In this video I demonstrate how the modification works:

Background

As a part of my work with Obscura we do visuals for various events. For this one event it would be really appropriate to display some nice slow flyover video on the big screen of 3d maps like the ones you have on Apple maps or Google maps on iOS. I found the maps at here.com and pondered how to get them on the big screen without those navigation buttons while still being able to control camera movements.

Real time browser remix

Via javascript it’s pretty easy to modify the DOM of a web page – thus controlling how the page is displayed in your browser. and hiding an element or a section only requires one line of code. For instance you can navigate to here.com in the Chrome or Firefox browser, choose the 3D map display and bring up the Developer Tools console. There you enter this line:

window.document.getElementById("map-controls").style.display = "none";

And voila the navigation button are gone and same goes for the other UI overlays.
Changing the look of the map was easy with CSS filters that have become available in HTML5.

So using the developer tools I also figured out a bit of the code that lies below the surface on here.com and I found some methods that I could trigger and use to navigate the map even with no visible controls. Keyboard shortcuts are already implemented (arrows, shift, + and -) but I didn’t like the movements – I thought it was going to fast on a big screen.

Security Issues

Problem is I would have to put all this stuff in to the console every time I open the here.com website. And with an accidental reload of the page I would have to do it again.
So I thought about writing a document that opens here.com in a pop up window and then modifies it in the same way as we did above? Well this is called cross site scripting and there are many reasons why browser creators don’t like that.

Node-Webkit

However from other experiments I have become familiar with an application framework called Node-Webkit which provides a handy and quite easy way to create standalone applications using HTML and Javascript. And since node-webkit has a fully functional Chromium (open sourced Chrome) browser embedded I could continue my experiments in Node-webkit. And most importantly – without any security restrictions. Node-webkit allows you to dig into the DOM and javascript of any webpage you load!

Results

Here is the final Node-webkit application I made. To run it simply go to Node-webkit site and grab a binary for your platform then download my file and open it with node-webkit: Maps
My small app has plenty of bugs (I had one day before the event to figure it out) but feel free to have a look. Simply rename maps.nw to .zip and unpack it.

Final Notes

Before I end this let me show you how it looked at the event this modification was created for:

I am quite thrilled with the idea of remixing websites and as a visual performer I also find node-webkit brings a lot of potential for writing other tools that can be used for performance. With WebGL in mind this should open up a number of possibilities. And while VJing with a browser has some limitations because of the standard GUI of the browser I could easily see node-webkit applications being made for VJs or other visual artists.
So I will continue exploring this environment and would love to hear if others are doing something similar.

This entry was posted in Software. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • Categories

  • Videos

  • Facebook



  • About me

    Vibeke Bertelsen is a visual artist based in Copenhagen who specializes in motion graphics and video projections for live music and other events. Per 2010 I am a part of the group called Obscura working full time doing large scale visuals and video installations. Contact me on