Facebook launches iPhone camera app

Facebook’s rocky initial public offering hasn’t stopped life at the world’s biggest online social network. On Thursday, the company unveiled a camera app for the iPhone.

The app can be downloaded from Apple’s App Store and works like most other camera applications for smart phones. To take a photo, you tap a camera icon in the upper left corner of your screen, aim and shoot. You can then add filters, crop or tilt your photo, and share it on Facebook.

The new app is similar to Instagram, the photo-sharing app Facebook is in the process of buying for $1 billion. The acquisition, however, has not yet been completed.

Facebook didn’t give details on when it might release a version of the app for phones that run on Google’s Android operating system.

Getting help

There’s lots more info at the Mapki

You can search the Google Group for similar problems

You can also ask for help there but if you do, please post a link to your page where you’re having problems, that will vastly increase your chances of getting useful assistance. Avoid posting large chunks of Javascript code to the group, links to web pages are much preferred, since we can immediately run our Javascript debugging tools on them.

Custom Maps

Browser Connection Limits

Inspiration

This page was inspired by the fact that Google seem to have imposed timeouts on the tile fetches. That’s fine for Google tiles that are provided by fast servers, but if you have a slow server, it looks like the API doesn’t always wait long enough before giving up and deciding that the fetch has failed.

I noticed that fetching an individual tile from a page that exhibits the problem wasn’t much any longer than fetching an individual Google tile. The significant difference was that the Google map types were fetching more tiles at once, so the total time taken to fetch all the tiles was significantly shorter. Google achieve this effect by using aliases to break the browser connection limits.

What are Browser Connection Limits?

Although browsers are capable of fetching many files simultaneously, only two files will be fetched simultaneously from the same domain. This limit made some sense back in the days when the majority of Internet users had slow dial-up connections, but it makes no sense with today’s high speed connections. For most pages, the continuing existence of these limits doesn’t slow the page loading down to make it worthwhile for the limits to be redesigned, but they do have a significant effect on map tile fetches.

So what can we do?

What Google do is have four different subdomains mt0.google.com, mt1.google.com, mt2.google.com, mt3.google.com, and share the tile fetching between them. The browser doesn’t know that these are all aliases for the same machine, and allows two simultaneous fetches to each subdomain. So eight tiles get fetched at the same time, instead of two.

Here’s an example where I spread the load across four subdomains of econym.org.uk.

The code looks like this

      CustomGetTileUrl=function(a,b){
        var subdomain=(a.x+a.y)%4;
        return "http://sub" +subdomain+ ".econym.org.uk/gmap/tiles/"+a.x+"_"+a.y+"_"+(17-b)+".jpg"
      }

The rest of the code is the same as that used in custommap1.htm.

I created “sub0.econym.org.uk” etc., as subdomanins that have the same destination (or “Document root”) as “econym.org.uk”, so there actually is only one set of tiles on the webserver, but the browser has no way of knowing that.

How much faster is it?

In those examples, you may not notice much speed difference visually, but when the pages are analysed with PageTest, the old one typically loads in 4.5 seconds and the new one in 3.4 seconds.

Even then, that doesn’t seem like a huge improvement, but if you compare the timings from the start of the first tile request to the completion of the last tile request, those times have gone down from 2.9 seconds to 1.4 seconds. If you have a slow server, the differences would be expected to be more significant.

The timings

I don’t know how long PageTest keeps the timing results, but for now you can see one set of results for the custommap1 at pagetest.patrickmeenan.com:8080/result/RC8/1/details/ and for custommap1p atpagetest.patrickmeenan.com:8080/result/RC7/1/details/

More advanced stuff

Arrows

It’s possible to put arrowheads onto polylines by using the Google direction marker triangle icons.

The direction markers have names like “dir_0.png”, “dir_3.png”, up to “dir_117.png”. The numbers indicate the direction in degrees. Only integers that are a multiple of 3 are supported. Only values below 120 degrees are supported, but since the marker has threefold symmetry, it looks the same if rotated back by 120 degrees.

Here’s an example

In the upper polyline of that example, I calculate the bearing between the last two points in the array that’s used to create the polyline, and place the arrowhead, pointing in that direction, over the last point of the polyline.

In the lower polyline of that example, I calulate the bearing between the previous point and the next point to determine a tangent direction.

More advanced stuff

Custom GEvent types

You don’t have to be limited to using the GEvent event types that Google supply.

If you want to pass information from one part of your own code to another you can use your own GEvents. You don’t have to do anything special to get this to happen, you just perform GEvent.addListener and GEvent.trigger using your custom event type, just as if it were one of the inbuilt event types.

Here’s an example that uses the new events “to” and “from” to handle the “get directions” options in an info window. By using events in this way, it’s not necessary to use the to_htmls[ ] and from_htmls[ ] arrays that were used in map 4, since we can now hold the information by function closure.

You can pass these custom events on any object, these can be API objects, HTML elements, data structures, or any type of Object().

   GEvent.addListener(map, "myevent", ...
   GEvent.addListener(document.getElementById("message"), "thisevent", ...
   var fred = new Object();
   GEvent.addListener(fred, "thatevent", ...

More advanced stuff

Dual Maps

It’s possible to have a pair of maps that track each other’s movements by using “move” or “moveend” listeners one each other and updating the position of the other map to match the one that moved. For example, a small zoomed-out map can be used as a dynamic thumbnail to help you see what the main map is zoomed in on.

The only problem is that updating the position of the second map cases “move” and “moveend” events, and we don’t want to attempt to process those events, otherwise the code goes into a loop and gets stuck.

All we need to do is to add a pair of extra variables that remember whether the maps are being moved by our own code, and only update the other map when this is not the case, i.e. when the map is being moved by the user.

In this example there’s a crosshair on the small map. This is just a marker which gets recentred every time either map moves.

Credit Thanks to Esa Ojala for posing the original question which led me to develop this technique.

The Basics

GgeoXml

The GGeoXml() feature creates an overlay from a KML file.

You use it like this:

   var kml = new GGeoXml("http://mydomain.com/myfile.kml");
   map.addOverlay(kml)

Here’s an example

Potential Pitfalls

1. The KML file must be accessible by the Google KML rendering server. It won’t work with KML files on your local computer. You don’t get any error messages if the KML file is inaccessible.
2. GGeoXml overlays don’t support .hide() and .show() methods. To hide them, use map.removeOverlay().
3. Calling map.removeOverlay() on a GGeoXml overlay recovers the memory used, and destroys the information. Once you use map.removeOverlay(xml), you have to re-create it before calling map.addOverlay(xml) again.