Friday, November 29, 2013

Our Biggest Release Yet, Mobile and API.

We are super excited (and a little relieved) to finally have our new version of Scribble Maps out. There is a lot to talk about. We have rolled out a new basic editor as well as a full API.

From Flash To HTML5/Javascript

While many of our users may not understand the change in technology, the implications of this are very large. Moving from flash to HTML5/Javascript was not something that was particularly easy and especially because we want to keep the experience as similar as possible to what made the original Scribble Maps so popular.

We wanted to make the experience of the new version consistent enough that people wouldn't even know we essentially rebuilt everything from the ground up. Things as simple as custom cursors were a challenge because we wanted to maintain cross browser comparability. So the new version works all the way back to IE7.

After Google announced that they would no longer support the flash version of their Maps API we decided on a couple of core things we wanted to since we needed to do a complete rebuild.


  1. We wanted the web application to work both in a desktop and mobile environment.
  2. We wanted to build our own rendering engine so that if we had to, we could switch to different API providers.
  3. We did not want to violate the Terms of Service of any mapping API provider
  4. We wanted the rebuild to be API-centric so that developers could utilize our map authoring tools in their application

Scribble Maps on Mobile

One of the biggest requests we got was the ability to use Scribble Maps in a mobile environment and particularly on tablets. Since we utilized javascript, the application would run on tablet devices.

However, having a mapping application run is different then it being usable. In the desktop version of Scribble Maps for instance you have roll overs, tablets do not have roll overs.
What this lead to was us modifying the user experience based on if you were on a touch device. This happens automatically without the need to modify any kind of code.

Scribble Maps API

There are about half a dozen really popular mapping APIs in existence so we wanted to focus on specifically editing and interactivity, leaving the other visualization and tile rendering to the other APIs.. When deciding how we wanted to structure the API we decided that one of the best styles for Javascript programming out there was JQuery.  So it is possible to create overlays and interactivity in one line.

ScribbleMap.draw.line([[lat, lng], [lat2, lng2]], { lineColor: "#0000FF" }).click(function() { alert("I have been clicked") });


Drawing in Scribble Maps works just like canvas so you can specify a style ahead of time and draw multiple lines which all adopt that style. This not only applies to shapes, it applies to things like Markers as well. So it is possible to do things like

The relationship a user has with the map is defined through tools and by changing the tools you change how the user interfaces with the map.


Dynamic Image API

One of the primary things Scribble Maps is used for is generating images. This posed not only a huge problem for us but also a new opportunity as we moved away from flash. With other map APIs there is the capability to create a "static image". The problem with these static image APIs is they almost all have restrictions on how much data can be on the rendered image.

With Scribble Maps, on the other hand, there is no restriction. Once a map is saved an image can be requested of that map regardless of how much data is on it. Additionally when a map is saved the image is invalidated and the next time it is requested gets rendered again. This effectively allows you to create image links that update as you change the map.
Below is an example of one such image.



New Widget

Also with 2.0 we have introduced a widget that has more UI controls. This is our first version and we will be improving it over the next several weeks.
 

Links

Scribble Maps API
Scribble Maps API group

14 comments:

  1. I recommend a best site writing web content this site prove helpful when you check out this site.

    ReplyDelete