Link to Project page (you’ll find the bookmarklet…there, mhehehe)


  •  – April 16th, 2015 ~ [0.4] BugFix: fixed double ampersand escaping, causing & to go back on &.
  •  – April 15th, 2015 ~ [0.3] BugFix, Refactoring: Inconsitency in Places and Collections data caused undefined attributes in js. Splitted download file function from data elaboration. Escaped characters in KML file.

TO UPDATE YOUR MOD: please drag again the bookmarklet from the project page.

Some days ago I went to Berlin to meet with one of my old LILiK friends, @ieghermaister. Since he is developing some part of the Here maps engine and one of its best feature is the ability to download maps completely offline, he suggested me to download it on my phone and save the Berlin map.  Once in Berlin, he wanted to suggests me some places and we struggled a bit finding a way to import or share favorites between users, or export them. We managed it by manually passing lists of urls in a shared document. Not smart at all.

Apart from this things, I really enjoyed the application, reminding me of the good old Ovi Maps symbian application, which rescued me from practically everywhere. So I decided to have a look at the web app code and see what was under the sheets.

Good News: AngularJs

Opening the inspector revealed a nice surprise. The guys at Here used AngularJs to develop the web interface, which gave me a good space of  maneuver . First thing to do was to understand how to inject my code inside the app.
A simple overloading of the methods did not actually work, because angular after being loaded parse the DOM, including <script> tags, and store them in cache.

What about injecting other <script> tags and bootstrap again angular? That seemed a nice way to proceed, but will angular like the new tags?  Simple answer,no. Caching is still in the middle of our process and will interfere with new code loading.

Let’s try to inject it in another way. What about the good old iFrames(arsh…)?
It could be possible to remove the content from the DOM, insert the HTML code with modified inside the iframe before angular bootstraps. That was a nice plan, except that iFrame .load()  method implementation is a little unpredictable and will not fire at the expected time. No luck for us.

So what’s the solution? Here it is. Remove everything form the DOM, request page with ajax, modify the received content with our features,  load it inside the DOM and bootstrap angular on the entire document. Easy peasy.

To start all this sequence I’ve decided to use the naive web object known with name of bookmaklet. To whom of you who don’t remember what these things are, basically it’s a bookmark with javascript inside the href (avoiding XSS problems!).
Hitting the button will load the main script from another source, an httpS one.

Let’s Code

Here is the bookmarklet source code:

The script I wanted to inject is on github, but since they’ll not let you use it as a resource, I hat to use this awesome project (give it a try, really).
Here is the injected code that will make the whole magic, with escaped strings removed because of web publishing, fully available with strings on github:


The (long) strings I’ve removed are the modified modules, controller and templates which will be inserted at the end of the retrieved html.
If you are curious about what’s inside, the beautified and unescaped version is available on github repo.

Backup Feature on Collection Tab

Backup Feature on Collection Tab

Basically, it introduces two new features:

Custom Names

Custom Names

  • show places custom name (when available) instead of regular name and enable a

backup feature that will download a KML file with all your favs organised by collection (ohh yeah).

It would have been very nice to have an import feature, but as we all know, time is a bitch. Code is released under MIT license, so if you want to implement it just fork the project on github and make  a pull request.

What’s really good about it? That it’s not actually a hack. It uses the same data the app is using, modifying it, and doing this it respects its behaviour. Simply, amazing.


Have fun modifying your angular apps!



No comments yet.

Leave a Reply

Basic HTML is allowed. Your email address will not be published.

Subscribe to this comment feed via RSS

By continuing to use the site, or scrolling, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.