Ext.ux.touch. MapLoader : Dynamically load map points as you pan around a map

Overview

This plugin allows you to have your map dynamically load points of interest as the user pans around the map allowing you to minimize the amount of data you have to fetch from the server and minimize the number of markers on the map speeding up performance by only dealing with points that are within the map’s visible area.

The Plugin

The plugin monitors the user’s panning and zooming and triggers a load of the specified store or leaves you to implement your own loading functions by hooking into its ‘mapload’ event.

Configuration Options

Events

One event is added to the plugin’s parent Ext.Map object. The ‘mapload‘ event is fired when the user finishes a pan movement (including pauses in movement, not just when the touch is removed) or, if the loadInterval is set, at the defined intervals. The event passes 5 parameters to its handlers:

{
    northeast: {
        lat: xx,
        lng: yy
    },
    southwest: {
        lat: xx,
        lng: yy
    }
}

An Example

The plugin itself is very simple with the complexity coming in the implementation of the load and post-load logic (e.g. adding markers etc). I will describe an example using an AJAX request rather than defining a store.

Defining the plugin

{
    xtype: 'map',
    plugins: [new Ext.ux.touch.MapLoader({
        units: 'miles',
        bufferType: 'ratio',
        buffer: 0.25, // calculate 25% of the visible radius,
        loadInterval: 300 // do a load every 300 ms during panning
    })],
    centered: true,
    mapOptions: {
        center: new google.maps.LatLng(55.857809, -4.242511), // centre over Glasgow
        zoom: 15
    }
}

Elsewhere we hook into the Map’s new ‘mapload‘ event and fire an AJAX call to the server passing up all the event’s parameters. The server code (which we’ll look at in a second) responds with a list of lat/lng positions and then our JS adds these points to our map.

// code found within the mapload's event handler

Ext.Ajax.request({
    url: 'server/search.php',
    method: 'get',
    params: {
        centre: Ext.encode(centre),
        bounds: Ext.encode(bounds),
        boundingRadius: boundingRadius,
        bufferRadius: bufferRadius,
        zoom: zoom
    },
    success: function(response){
        var jsonResponse = Ext.decode(response.responseText);

        if (jsonResponse.result) {

            for (var i = 0; i < jsonResponse.result.length; i++) {

                var resultPos = jsonResponse.result[i];

                if (!this.markerExists(resultPos.lat, resultPos.lng)) { // custom method (see full example code) to ignore points we've already loaded

                    // cache the newest point so we don't add it in the future
                    this.markerCache.add({
                        lat: resultPos.lat,
                        lng: resultPos.lng
                    });

                    var pos = new google.maps.LatLng(resultPos.lat, resultPos.lng);

                    var marker = new google.maps.Marker({
                        map: this.map,
                        position: pos
                    });
                }
            }
        }
    },
    scope: this
});

The serverside code simply parses the parameters being passed up and inputs them into a SQL version of the Haversine Formula. It then returns the results as JSON to be consumed by our JS code.

// Get parameters from URL
$centre = json_decode(stripslashes($_GET["centre"]), true);
$bounds = json_decode(stripslashes($_GET["bounds"]), true);
$boundingRadius = $_GET["boundingRadius"];
$bufferRadius = $_GET["bufferRadius"];
$zoom = $_GET["zoom"];

// Opens a connection to a mySQL server

// Set the active mySQL database

// Search the rows in the markers table
$query = sprintf("SELECT lat, lng, ( 3959 * acos( cos( radians('%s') ) * cos( radians( lat ) ) * cos( radians( lng ) - radians('%s') ) + sin( radians('%s') ) * sin( radians( lat ) ) ) ) AS distance FROM markers2 HAVING distance < '%s' ORDER BY distance",
    mysql_real_escape_string($centre['lat']),
    mysql_real_escape_string($centre['lng']),
    mysql_real_escape_string($centre['lat']),
    mysql_real_escape_string($boundingRadius) + mysql_real_escape_string($bufferRadius)); // add boundingRadius and bufferRadius

$result = mysql_query($query);

if (!$result) {
    die("Invalid query: " . mysql_error());
}

$outputArray = array();

while($array = mysql_fetch_array($result)){
    $outputArray[] = $array;
}

echo json_encode(array("success" => true, "count" => count($outputArray), "result" => $outputArray));

To use the ‘store‘ config simply move the ‘success’ function defined above into the store’s load event handler and it will have the same effect.

And that’s us, you should see your points loading as you pan the map!
There are a couple points you must consider when using the plugin and when implementing your surounding code, these are:

• Duplicate points – it is highly possible (and likely!) that the same point will be included in multiple loads so you must take this into consideration when processing the loaded points to stop markers being added twice.
• Redundant markers – markers that are off screen are still there so you may want to implement some clean-up code to destroy these markers when not needed to speed up performance.

If you have any problems with using the plugin, have questions about how it works or have suggestions about ways we can make it better then please leave us a comment or drop us an email!