here-com

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.

Share it:

Leave a Comment