Looseideas.co.uk - Ryan Mitchell

Using MarkerClusterer and MarkerWithLabel with Google Maps

2014-08-20T12:35:57+01:00

Both MarkerClusterer and MarkerWithLabel are great libraries, but they do have their quirks;

MarkerClusterer

What is a cluster marker?: MarkerClusterer doesn't use Google Markers or pin styles, it takes an image path and creates HTML on a layer. The resultant markup is given a class of 'cluster' that you can target in your CSS.
Do I have to pass set an image path for the marker?: Yes. You can amend that in the source code*, just check for the image path where the IMG tag is created and only add it if the path is defined.
How do I set the zoom level where clusters become active?: The minimum level at which clusters are visible is set through the maxZoom property. Note: This property also affects the click action of the clusters, if you click on a cluster pin and the zoom level exceeds the maxZoom, the zoom is reset. Again, you can amend this in the source code*, it's not configurable.
On a small screen clicking a cluster doesn't zoom in: When setting Google Maps to show a boundary it tries to maintain spacing between that boundary and the edge of the container. This can be a pain on small screens because we're short on screen space already, to work around this for the cluster markers we again need to go into the source code*, we need to store the maps current zoom level and then test it once the boundary has been set. If the zoom level has not been changed then increase the zoom level manually.
Clicking on a cluster of a single pin zooms in too far: The easiest way to avoid this is to set the maximum zoom level of the Google Map.
Can I set the line-height of a ClusterMarker?: Weirdly, no. The line-height is being used to vertically align the counter so is set to match the height. If you want to change that you have to got into the source. For the other options you can pass in inherit to override defaults.

*Amended source code (GitHub)

MarkerWithLabel

Can I set the pin background images / hover states though CSS?: Pin images can be null, this allows us to set the images through CSS and set hover states. When doing this you might want to set a background size property to enforce the pin sizes. Note: IE11 does not render SVG markers correctly.
Why do marker labels show through other markers?: The labels do not exist in the same layer as their Google Markers so do not obey the same z-index values as their partner. If you must enforce the z-index order then apply the pin styling to the marker label using background images.
Setting a markers z-index puts it under other markers: Markers have a zIndex already set, if you want to amend this position you probably should use the original z-index value as the start point using marker.getZIndex().
Why are the pins too big on iOS?: Pins size and scaledSize must be integers, strings will cause hard to debug issues with click regions.

Centering a boundary on a point

As mentioned markerClusterer uses boundaries to show the markers, we need a custom function to center a boundary. I've written a Gist to enable this, it's had limited testing as it didn't go into the production version but you can find it at: Center a boundary on a point.

Using jQuery.ajax rather than jQuery.load

2014-02-05T12:35:43+00:00

jQuery.load is an incredibly useful method, but if you want to do more with the returned source than put it into a div then you may want to use jQuery.ajax directly with your own callback.

The source code for the load method is a great starting point for writing your own callback, in particular how the 'done' callback selects the items to append;

jQuery("<div>").append( jQuery.parseHTML( responseText ) ).find( selector );

This is most likely what you're looking to amend by using your own callback. The parseHTML method creates an HTML fragment and then appends it to a div (this div is an orphan, it is never inserted into the DOM).

You may, for example want to run two selects;

tempDiv = jQuery("<div>").append(jQuery.parseHTML( responseText ));

someResult = tempDiv.find( selector1 );
someOtherResult = tempDiv.find( selector2 );

iOS 7 and 412 precondition failed

2014-01-16T11:35:02+00:00

With every release of iOS there tend to be some gremlins lurking in Safari, iOS 7 was no different.

When first testing the site I've been building in iOS 7 I was getting a failure when resubmitting an AJAX POST request, the response was 412 (Precondition Failed).

Eventually I found this issue explained related to a MooTools issue.

"Safari responds to etags properly and adds "If-None-Match" and "If-Modified-Since" headers to another request for the same file. This makes Apache respond with a 412 status (Precondition Failed) as it should do for "post" requests (according to RFC 2616)."

"Unfortunately Safari doesn't then deal with the 412 as it does with a 304 (Not Modified). It doesn't grab what it has in the cache and put it in the response, it gives you nothing."

The date on that blog post is 04/12/2009! There is no sign of this issue in iOS6 so maybe it's slipped through the iOS cracks and will be patched

The Fix? Switch to GET and Safari will deal with the request correctly.

Using Bing Maps with Require.js

2013-10-21T15:01:29+01:00

Recently I've been doing quite a lot of work with Bing Maps. Not every page on the site requires the map API so we've been attempting to use require.js, which we already have, to maintain that dependancy.

As usual it's more complicated than we'd hoped. Bing Maps provides a callback hook that we can use with the async plugin of require.js, however the callback fires before the maps are actually ready to use. The Microsoft object is defined but the Maps and Location objects are not. This led us to implement polling to check for these properties before resolving a deferred.

Why this is bad: The require module is now returning a promise rather than the maps declaration that you might expect to be returned. In practice this is manageable because by using the deferred our code can continue regardless of the Maps loaded state.

I've created a sample Gist of how this can work, although for production you may also want to handle the failure case and reject the deferred.

Gist: https://gist.github.com/ryanand26/7084108

An alternative to jQuery.load

2013-07-08T10:52:37+01:00

Note: Are you looking to use jquery.ajax rather than jquery.load? Click here. The post below talks about using an iFrame as an alternative to AJAX.

A very long time ago, 2010 maybe, I was asked to build a site with an "app like feel", which seemed to mean "we don't like page refreshes". At the time we used AJAX, we had control over the HTML generation so could strip everything but the HTML server-side. More recently however I was asked to do a similar thing, but without the ability to change the skeleton markup.

The primary issue with adding a full set of markup into an existing page is that the script tags will automatically be executed. The jQuery load method gets around this by removing the script tags from the HTML string, but everything else is added to the document. If you specify an ID then jQuery will add this HTML into the DOM and then select the element.

It's a very useful function but can we do the same thing with an iFrame, and are there any advantages in doing so?

How

We commonly use iFrames for showing content from another domain. This commonly limits the communication between the parent and child pages due to the cross-domain policies. However pages on the same domain don't have that limitation, we can access the content of the child frame directly from the parent page.


frame = document.getElementsByTagName('iframe');
innerDoc = frame.contentDocument || frame.contentWindow.document;
// example select in the child frame
elem = innerDoc.getElementById('anElementsId');

Why

But why might we want to use an iFrame rather than jQuery.load or a similar AJAX method? To my mind there are very few reasons to do this but biggest benefit is that you're able to to run more complex and multiple selects rather than being limited to the ID selector.

In this method the child frame will load fully, all scripts will execute. The analytics scripts will run and the page would be rendered fully. This makes it more expensive in bandwidth and memory so remove the iFrames when you're done (watch out for leaks) and this memory should be released...