Beating Google Maps' Geocoding Limits (sort of)

I've recently done some work to programmatically plot a number of markers on a Google Map based on normal street addresses.

Google Maps' Geocoding API does a great job of converting street addresses into Latitude and Longitude coordinates to enable you to plot the markers on the map.

The initial implementation of the map went well, plotting 2 or 3 markers without issue. Problems started surfacing however when we started putting 26 markers through the Geocoder at once - it bailed out after retrieving the coordinates of just 7 addresses. After a bit of research, it appears the Geocoder has some strict limits that don't like a lot of calls per second.

My initial code involved loading in all the required addresses into hidden <div>, which could be looped over using jQuery's .each method. The .html of each <div> could then be fed into the Geocoder to return the Latitudes and Longitudes.

With the addition of setTimeout against each call to the Geocoder API, we can reduce per-second requests and keep Google sweet!

$(".address").each(function () {


var address = $(this).children(".locationAddress").html();


setTimeout(function () {


geocoder1.geocode({ 'address': address }, function (results, status) {


if (i < $(".address").length) {
i++
}


if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: googleMap,
position: results[0].geometry.location
});


}
});
}, 1000*i);
});
 

For my implementation, the adding of the markers to the map visibly a marker per second didn't matter (in fact, it actually enhanced it!) - but you might want to set up some kind of "Please wait" message whilst waiting for the markers to be retrieved.

 

Filed under  //   Google Maps   Javascript   jQuery  

Comments [2]

Noteslate Case Study: How to kill a great idea

Ns-photo08
From the Noteslate website:

"NoteSlate is low cost tablet device with true one colour display, long life battery, handy usage and very simple and useful interface for pen and paper."

I, like many others, got a bit hot under the collar when Noteslate was first announced. A low cost, low power, e-ink device with the ability to ACTUALLY WRITE ON IT? Yes please!

Oh, but how they tease! Delayed till this date, no prototype till that date, still only in concept stage and so on and so forth.

Constant updates via Twitter and Facebook should be a great way to keep prospective customers informed and updated - but the social web is a two-way street.

When a product is promised and the promise is broken, each update is dissected, chewed up and spat back - a hundred fold.

Social media - great when you're on the ball, bites you in the ass when you drop it.

Filed under  //   Social Media  

Comments [0]

A rant about tech/new media recruiters

Recruitment-agencies-north-wales
I've registered with many IT and tech specific recruitment agencies over the years. Some have been small, local firms, others the big international players. I'm not on the market, but I still get a regular slew of potential new careers via email.

All have one thing in common - does this ring any bells with you?:

"The following vacancy may be suitable for you.  If it is not then please
accept our apologies and update us as soon as possible with your current skills."

"Apologies if this email has reached you in error - your details have been generated on the basis of a database skill search"

"Apologies if this email isn't relevant, but as you have been registered as potentially having the right skills for this vacancy I thought I'd drop you a line."

WTF? Did IQs just drop sharply while I was away? Now, I'm not, never have been and, for the forseeable, never will be a part of the recruitment industry, but to me this method of trying to find suitable candidates is dumb, lazy and above all irritatiing.

Is this the same across all sectors of recruitment?

Does this method of finding candidates actually work? Does the machine gun/shit against a wall tactic prevail over any form of un-automated, personal communication?

Filed under  //   IT   Recruitment   Social Media  

Comments [0]

jQuery Animation Queue Fix

I've recently found an interesting bug/nuance when using jQuery animations with Javascript timing (setTimer/setInterval) in Firefox/Chrome.

Basically Firefox and Chrome try to be clever and, instead of continuously playing a repeating animation (like our carousels) whilst the window is not active, it saves processor usage by "pausing" the animation in a queue. The only downside is that the queue is then dumped out in full when the window is active again, meaning it will cycle through the stored animation in matter of seconds, which doesn't look good.

There are a number of documented fixes, including the jQuery.queue() function and Mozilla's own window.mozRequestAnimationFrame(), but I didn't have any luck incorporating these into our existing code.

The fix I finally got to was using window.onblur and window.onfocus to find if the window containing the animation is active or not. The following code is something I've recently implemented:

window.onblur = function () { $('#div').stop(); clearTimeout(timer); console.log("blur"); };

window.onfocus = function () { clearTimeout(timer); startTimer(); console.log("focus"); };

This simply stops the animation and clears the timer if the window loses focus, then clears the timer and restarts the timer when it regains focus. Simple, ja?

Worth noting if you're putting in any timed Javascript animations.

Filed under  //   Chrome   Firefox   Javascript   jQuery  

Comments [1]

Thoughts on Reactive Web Design

Customer-sssssservice
For a while now people have been extolling the virues of Responsive Web Design (even though some people have argued it should be Adaptive Web Design), as a method of altering the way a web site or application is dynamically altered based on the medium that it is being viewed with. This, obviously, can only be A Good Thing™ for anything web - there are not only numerous screen reslotions to deal with nowadays, but countless different devices that all think they know how best to display your pride and joy.

This is all very well, but we're missing a vital point - altering the UI to make it look nice is one thing, but are we considering the "U", the User, enough?

I started my working career in a call centre. Answering phones, responding to customer queries, cross-selling services. Even though the types of call were not that intersting, each customer situation had it's own unique variances - complaints, sales enquiry, age of customer, accent - each variable called for subtle alterations from my side of operations to enable a successful outcome. By reacting to the customer I would be able provide a better level of customer service and, if dealing with them in the future, I would have a history of experience to call on that wouldd allow me to be more proactive to their needs.

This is a simple example of customer service, but it got me into thinking how we build things on the web.

Take an e-commerce application for example. A user browses your stock, they select items to add to their basket, they checkout, they leave. Or, they put things in the basket, but then they change their mind, then leave. Or you're just too expensive, and leave.

Okay, so many online shops or e-commerce packages have concepts like displaying related items of things you've viewed or recently purchased, but how about a system that is monitoring what the user has been looking at in their current browsing session, reviewing the navigation trail that they have taken since landing on the site, what options they have selected, their deliberations, and reacting on the fly to give them a more customised experience. How about the following examples:

  • A user hits a page 3 or 4 times, but leaves evertime by clicking the browser's back button. Why are they doing this? Is there an issue with site navigation? Can they find what they're looking for? Would it be beneficial to take them to a site search page, or even redirect them to a top-level page?
  • A page expires with pending changes waiting to be committed. Have they forgotten they have pending changes? Could you automatically commit them, with an option for them to easily back the changes out if required? Could you email them with the pending change details so they can re-enter them at a later date?
  • A user puts an item in the shopping cart, then leaves the site twice, returning both times from competitor sites viewing the same item. What are they comparing? Could you alter the price at all? Could you offer any other incentives on the fly to convince them to purchase through your site?

These are all hypothetical situations, and a system to offer the type of instant "reaction" is far from a defacto implementation in modern web applications, but if we could think in terms of not only how we portray the web to our users but also how we are perceiving their experience of our web applications in a very real-time sense, it would greatly improve our understanding of the "U" in User.

Filed under  //   Adaptive   Reactive   Responsive   Web Design  

Comments [1]

The creative ecosystem

Recycle-logo

I've recently been thinking about the business of creating digital media, be that coding up an app, styling a web page or touching up a photograph. Generally speaking (and without annoying any OSS advocates out there), the big players out there such as Apple, Microsoft and Adobe offer all the tools we need for creating works of art in one shape or form.

But what happens after that? After you've pushed your wonderful IDE or photo editing suite to all and sundry, you've got a product that, by itself, demands to be updated, fixed and maintained to ensure that it stays ahead of any other competing product out there that might start offering bigger and better features.

A method that can be seen prominently in the development arena is the creation of an "ecosystem". Rather than send out a product into the big bad world and hope for the best, the masters of these tools also provide an environment that creatives can return to, either to show off their new creation, get advice from others or learn from the curators.

Apple is a fine example of this: they provide the free IDE Xcode for developers to create beautiful applications for the Mac, iPhone and iPad; the developer has a rich document library to sift through for help and advice on developing for the platforms, from beginner to advanced topics; finally there's the ubiquitous App Store, a ready made market which developers can submit their application to for the whole world to download and adore.

Microsoft do the same - although corporate versions of Visual Studio cost silly amounts of Dollar, they provide a rich and varied set of tools for free, including Express versions of most of their commercial applications, and more recently venturing into PHP/Open source development stomping grounds with Web Matrix. Again, they provide an extensive library for developer bedtime reading, and now also have their own app market place specifically for the Windows Phone 7.

Google and Blackberry, whilst not having their own unique IDEs, provide plugins for the ever popular Eclipse platform, and both provide extensive documentation libraries as well as having specific market for developer's apps to be published to.

Imagine if they didn't do this. Imagine if Apple charged as much for Xcode as they do for Photoshop, didn't provide any developer help or documentation, and didn't have an app store. How popular would the iPhone be then? How many apps would be listed there?

By providing the tools, the information and the means to propagate creative's creations, Apple at al not only keep developers happy, they ensure that they don't wander away from the flock. Which is, of course, great business strategy.

So, do you want to emulate that? You might not be in the business to take on the likes of Microsoft or Adobe, nor may you be looking to create a brand new development language, complete with bespoke IDE. But from anything like simple application for a smartphone up to an enterprise level web application, there's Here's a few points that I think could be learned from the big boys:

Provide tools

It may seem like a loss at first, but by giving developers the tools to create things for your platform, for free, will pay dividends. It doesn't have to be a full blown IDE - providing any tool that makes the creative life cycle less of a headache will be cherished. If you're creating an application that's going to be sold through a market place, why not provide some cool auxiliary tools on your site?

Educate your users

All the gear but no idea? Having your peeps kitted up ready to go is one thing, but where do they go from there? Give them ample documentation to get them up and running, as well as references and cheat sheets to refer to.

Promote contributors

Whether it's through a market place or a special mention on your product's site, special creators should get special attention. If someone using your system is making great things, make sure they know how happy you are they're doing it.

Stay fresh

Stagnation, in any area of creativity, is a nail in the coffin. Make sure that updates and fixes are released regularly, as well as keeping your docs up to date.

Comments [1]

Overriding jQuery Tools inline styles

Overlay

A problem that was presented to me today was how to override the jQuery Tools Overlay inline styling for the "left" property.

By default, "left" is included in the Overlay inline style no matter what - the default value centers it to the screen, although a numeric value can be assigned to it. Either way, "left" is present at all times, making it tricky to set your own value via CSS (in my case, setting a different "left" value for different clients accessing the same page containing the Overlay function).

The way around this (which should work for other jQuery plugins with default inline styles) is to explicity assign a value from a particular class, like this:

<style type="text/css">
  .some_class
  {
  left: 100px
  }
</style> 

<script type="text/javascript">
  $(document).ready(function() {
        $("#some_div").overlay({
            left: $(".some_class").css("left")
        });
    });
</script>

This way, the "left" property of Overlay can be set programatically by any number of different style sheets accessing the same Overlay function.

 

 

Filed under  //   CSS   jQuery  

Comments [0]

MacBike.org.uk is live!

Mm
After a long hard slog I'm pleased to say that myself, @seveneightnine, @netsmith, @maryharmon82 and the rest of the crew at Raising IT has got MacBike into the wild! It's been a rollercoaster, and there's still a way to go before it's "done done", but we're pretty darned pleased with oursleves.

Check it out, have a look at the current cyclists, give us some money, and sign up yourself!

Comments [0]

Santander and the web of FAIL

Banker-cat
For whatever reason - the Lord Almighty upstairs probably has an inkling - I bank with Alliance & Leicester, who are being "merged" with Santander.

Last week I noticed some strange activity on the access to my internet banking - random login attempts in the wee hours of the morining. I immediately logged in, checked the accounts to make sure nothing had been transferred, and changed my pins, passwords and anything else I could change, just to be on the safe side.

The next day, the account had been locked out due to a number of failed logins. Somehow someone, somewhere, had got hold of my details and had tried peppering my account with the now redundant login details.

Well done me I thought. All I have to do now is contact Santander, explain the situation and get my account unlocked.

Oh, the naivety of my youth!

Do you know what Santander said to me? They explained that their "system" had "detected" I have a virus on my computer, and to get my account unlocked I was required to install their recommended Trusteer Rapport software send them a SCREEN SHOT of my VIRUS SOFTWARE showing a clean scan.

..........

I'll give you a minute.

..........

Better? Yep, that's what they asked me to do. Rather than coming over as the "I work in IT blah blah" customer, I obliged, and sent them this:

Virus
3 hours later, and internet banking restored. Ridiculous? Yes. Unsafe? Of course. I would really like to know what web technology Santander are using that allows them to see if their customer computers have viruses on them, and indeed the software they use that proves an image that shows a clean virus scan hasn't been doctored in any way. They're web gods!

Anyway, what's done is done. I could have sent them this:

Virus2
or this:

Virus3
but I'm not that kind of person.

Comments [0]

Adaptive or Responsive Design?

Formel3_racing_car_amk
The term "Responsive Design" is being bandied around a fair bit at present - not least in respectable resources such as A List Apart and recent Twitter frenzy of Media Queries.

Having recently attended the New Adventures in Web Design Conference, some speakers touched on the subject of designing your content to fit a number of consumable mediums - that boiling down to view port size and mobile devices. This again was wrapped up in the term "Responsive Design". The term's origin was clarified both at the conference and from the A List Apart article:

"Recently, an emergent discipline called “responsive architecture” has begun asking how physical spaces can respond to the presence of people passing through them."

I don't feel the term "Responsive" is being used quite in the right context. For me, the above line does sum up how a website or application should behave if it is indeed "Responsive" - that is, to respond and alter it's behaviour based on the people that are interacting with it. To change it's overall design based on the constraints of the device it is being perceived  through is surely being "adaptive"?

To respond means to react to a certain action - you don't just "adapt" to a person poking you in the ribs, and you don't "respond" by merely bending your body around their poking finger (I certainly try not to anyway).

Likewise, a gas or liquid doesn't exactly "respond" to being put in a jar by taking up the free space, it "adapts" to the space it has been placed in.

Interestingly, at NACONF Dan Rubin's talk was based on thinking about the language we use when we're designing or developing - this is certainly one area I'm going to be keeping an eye on out of curiosity.

 

UPDATE:

Check out Harry Roberts' similar post for a far more eloquent summation on the responsive vs. adaptive story.

Filed under  //   Adaptive   Design   Development   Responsive   Web   naconf  

Comments [4]