Author: Manuel Lemos
Posted on: 2010-02-04
Package: Forms generation and validation
Categories: New features
Sometimes you need to display Google Maps with a large number of markers. However, adding too many markers makes the map page load too slow.
This article explains how you can use marker cluster feature of the forms map location plug-in to cluster large numbers of markers to make the page load much faster.
This article explains how you can use marker cluster feature of the forms map location plug-in to cluster large numbers of markers to make the page load much faster.
Contents
Introduction
Using the map location plug-in to display non-form maps
Showing many markers using marker clusters
Adding markers to clusters in practice
Conclusion
Introduction
As you may know, the forms map location plug-in uses the Google Maps API to display a map in a form that lets the users pick a location on the map. The selected location is denoted with a marker.The coordinates of the selected location are copied to form fields, so the server may receive and process the location coordinates when the form is submitted.
The map location plug-in also makes it easy to display additional markers to the map. Those markers appear in custom locations defined by the application script.
Using the map location plug-in to display non-form maps
This plug-in may also be used to display a simple map with custom markers without having to integrate it in a real form. Just create a form with a single input, which should be the the map input. Then define a read-only map with the markers you want to show.First, lets define the list of markers in an array. You may notice that the marker definitions have a parameters named Cluster. That is be explained in more detail ahead.
Now lets define the form object and add the map input.
$my_markers = array(
array(
'Latitude' => 37.78156937014928,
'Longitude' => -122.42340087890625,
'Information' => 'San Francisco',
'Link' => 'http://www.ci.sf.ca.us/',
'Target' => '_blank',
'Title' => 'Click here to go to the official '.
'San Francisco government site on a new window',
'Cluster' => 'common'
),
array(
'Latitude' => 38.58252615935333,
'Longitude' => -121.48818969726562,
'Information' => 'Sacramento',
'Cluster' => 'common'
),
array(
'Latitude' => 34.05265942137599,
'Longitude' => -118.2403564453125,
'Information' => 'Los Angeles',
'Link' => 'http://www.ci.la.ca.us/',
'Title' => 'Click here to go to the official '.
'Los Angeles government site on this window',
'Cluster' => 'common'
),
array(
'Latitude' => 32.71855479966606,
'Longitude' => -117.16232299804688,
'Information' => 'San Diego',
'Cluster' => 'common'
)
);
The Accessible and HideMarker parameters should be used to make the map be a read-only input, so the user cannot select a location as usual.
define('GOOGLE_MAPS_KEY', 'your Google Maps key');
$form = new form_class;
$form->AddInput(array(
'TYPE' => 'custom',
'CustomClass' => 'form_map_location_class',
'ID' => 'map',
'Key' => $key,
'Markers' => $my_markers,
The ZoomMarkers and BoundsOffset make the plug-in adjust the zoom level, so the specified markers appear all visible in the viewport.
'Accessible' => 0,
'HideMarker' => 1
The BoundsOffset parameter may be used to define the size of a margin around the area of the markers to which the zoom level will be adjusted. The unit of this margin size is degrees of latitude and longitude.
Now you just need to call the AddInputPart function to add the map to the form output and call the DisplayOutput to show the form in the HTML page.
'ZoomMarkers' => 1,
'BoundsOffset' => 1.0
));
Google Maps require that some Javascript be added to the page initialization. So, you also need to use the PageHead, PageLoad and PageUnload functions to make the class return the necessary HTML and Javascript that needs to be integrated in your page header.
$form->AddInputPart('map');
echo '<html><head>My map page</title>',
$form->PageHead(), '</head>';
echo '<body onload="',HtmlSpecialChars($form->PageLoad()),'"',
' onunload="', HtmlSpecialChars($form->PageUnload()), '">';
$form->DisplayOutput();
echo '</body><html>';
Showing many markers using marker clusters
When you need to display a map with many markers, the performance of the browser loading the map may degrade exponentially as the number of markers you want to display increases.When you want to display hundreds or thousands of markers, the browsers tend to become unbearably slow, even when you use the latest generation of fast browsers.
The solution for this performance problem is to resort to cluster marker manager. These are map artifacts that replace markers that are too close by a single cluster icon.
Marker managers are special classes of Javascript objects that implement the logic of displaying the markers. There are many marker managers that perform marker clustering available on the Web.
The form map location plug-in now supports clustering using the MarkerClusterer marker manager. It is an Open Source (Apache 2 license) marker manager Javascript class developed by
Adding markers to clusters in practice
To add certain markers to a cluster is very easy. The first thing you need to do is to define some details of the marker clusters you want to use in your maps.You can add more than one cluster to the same map, but usually it is not very useful because the icons of different clusters may overlap and the map may look confusing.
You need to add an entry to the map input definition named Clusters. This should be an associative array that defines the name and the details of each cluster.
In this example, a single cluster named common is defined. It specifies the details of the MarkerClusterer properties. The Manager property specifies the name of the MarkerClusterer Javascript class. The Path property specifies the path of the Javascript file that contains the definition of the MarkerClusterer class code.
The markerclusterer.js file is included in the regular distribution of the forms class.
Then you just need to add the Cluster property to the definition of each marker. In our example it should be set to the value 'common'.
'Clusters' => array(
'common' => array(
'Manager' => 'MarkerClusterer',
'Path' => 'markerclusterer.js'
)
)
$my_markers = array(
array(
'Latitude' => 37.78156937014928,
'Longitude' => -122.42340087890625,
'Information' => 'San Francisco',
'Link' => 'http://www.ci.sf.ca.us/',
'Target' => '_blank',
'Title' => 'Click here to go to the official '.
'San Francisco government site on a new window',
'Cluster' => 'common'
),
/* other marker definitions go here */
);
Conclusion
The map location plug-in class makes it much easier to display maps using Google maps with many markers.As you may have noticed, you do not have to write a single line of Javascript. The forms class and the map location plug-in do it all for you, just by writing a few lines of PHP code.
The code in the article is taken from the forms maps location example script test_map_location_input.php.
Feel free to post a comment here if you have questions or suggestions to improve further these forms package features.
You need to be a registered user or login to post a comment
1,305,826 PHP developers registered to the PHP Classes site.
Be One of Us!
Login Immediately with your account on:
 |  | ||
 |  | ||
 |  |
Comments:
No comments were submitted yet.
