Add lots of markers from a file with a cluster control
From OS OpenData developer wiki
Contents |
Examples:
You need to create a comma separated file (csv) contain the eastings, northings and description. This is an example of Notepad being used to create the file:
Name your file "mymarkers" or whatever and change it in this line;
var markersFile = "mymarkers.txt";
OS OpenSpace Full code Example;
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=YOUR_API_KEY_HERE">
</script>
</head>
<body onload="init()">
<script type="text/javascript">
var osMap,markersFile,clusterControl;
function init()
{
// Creates the map
osMap = new OpenSpace.Map('map');
osMap.setCenter(new OpenSpace.MapPoint(452630.5,340628.5), 5);
var markersFile = "mymarkers.txt";
OpenLayers.loadURL(markersFile, null, this, parseFile, onFail);
}
function parseFile(result)
{
var text = result.responseText;
var lines = text.split('\n');
for (var i = 0; i < lines.length; i++)
{
var columns = lines[ i ].split(',');
if (columns.length == 3)
{
var x = parseFloat(columns[ 0 ]);
var y = parseFloat(columns[ 1 ]);
var pos = new OpenSpace.MapPoint(x, y);
var popupText = columns[ 2 ];
osMap.createMarker(pos, null, popupText);
//cluster control
clusterControl = new OpenSpace.Control.ClusterManager();
osMap.addControl(clusterControl);
clusterControl.activate();
}
}
}
function onFail(e)
{
alert("Cannot load markers file");
}
</script>
<div id="map" style="width: 600px; height: 400px; border: 1px solid black;"></div>
</body>
</html>
Please Note: There is a minor bug with regards to the marker clustering.
We have an issue with the clustering algorithm. If initial zoom level is set at a value of 3 or greater (3 – 11) then the clustering algorithm works fine.
osMap.setCenter(new OpenSpace.MapPoint (442900, 314600), 3);
If however you set the initial zoom level to 1 or 2 then the issue we have identified takes place.
In the case of this code if set at 2 then some of the points do not de-cluster until zoom 11, if it is set to 1 then all points do not de-cluster until level 11. Please ensure that if using the clustering algorithm you select the initial zoom to a value of 3 or greater.
OS OnDemand Full code Example;
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ondemandapi.ordnancesurvey.co.uk/osmapapi/openspace.js?key=YOUR_API_KEY_HERE">
</script>
</head>
<body onload="init()">
<script type="text/javascript">
var osMap,markersFile,clusterControl;
function init()
{
// Creates the map
osMap = new OpenSpace.Map('map');
osMap.setCenter(new OpenSpace.MapPoint(452630.5,340628.5), 5);
var markersFile = "mymarkers.txt";
OpenLayers.loadURL(markersFile, null, this, parseFile, onFail);
}
function parseFile(result)
{
var text = result.responseText;
var lines = text.split('\n');
for (var i = 0; i < lines.length; i++)
{
var columns = lines[ i ].split(',');
if (columns.length == 3)
{
var x = parseFloat(columns[ 0 ]);
var y = parseFloat(columns[ 1 ]);
var pos = new OpenSpace.MapPoint(x, y);
var popupText = columns[ 2 ];
osMap.createMarker(pos, null, popupText);
//cluster control
clusterControl = new OpenSpace.Control.ClusterManager();
osMap.addControl(clusterControl);
clusterControl.activate();
}
}
}
function onFail(e)
{
alert("Cannot load markers file");
}
</script>
<div id="map" style="width: 600px; height: 400px; border: 1px solid black;"></div>
</body>
</html>
Please Note: There is a minor bug with regards to the marker clustering.
We have an issue with the clustering algorithm. If initial zoom level is set at a value of 3 or greater (3 – 11) then the clustering algorithm works fine.
osMap.setCenter(new OpenSpace.MapPoint (442900, 314600), 3);
If however you set the initial zoom level to 1 or 2 then the issue we have identified takes place.
In the case of this code if set at 2 then some of the points do not de-cluster until zoom 11, if it is set to 1 then all points do not de-cluster until level 11. Please ensure that if using the clustering algorithm you select the initial zoom to a value of 3 or greater.
OS OpenSpace Pro Full code Example;
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://openspacepro.ordnancesurvey.co.uk/osmapapi/openspace.js?key=YOUR_API_KEY_HERE">
</script>
</head>
<body onload="init()">
<script type="text/javascript">
var osMap,markersFile,clusterControl;
function init()
{
// Creates the map
osMap = new OpenSpace.Map('map');
osMap.setCenter(new OpenSpace.MapPoint(452630.5,340628.5), 5);
var markersFile = "mymarkers.txt";
OpenLayers.loadURL(markersFile, null, this, parseFile, onFail);
}
function parseFile(result)
{
var text = result.responseText;
var lines = text.split('\n');
for (var i = 0; i < lines.length; i++)
{
var columns = lines[ i ].split(',');
if (columns.length == 3)
{
var x = parseFloat(columns[ 0 ]);
var y = parseFloat(columns[ 1 ]);
var pos = new OpenSpace.MapPoint(x, y);
var popupText = columns[ 2 ];
osMap.createMarker(pos, null, popupText);
//cluster control
clusterControl = new OpenSpace.Control.ClusterManager();
osMap.addControl(clusterControl);
clusterControl.activate();
}
}
}
function onFail(e)
{
alert("Cannot load markers file");
}
</script>
<div id="map" style="width: 600px; height: 400px; border: 1px solid black;"></div>
</body>
</html>
Please Note: There is a minor bug with regards to the marker clustering.
We have an issue with the clustering algorithm. If initial zoom level is set at a value of 3 or greater (3 – 11) then the clustering algorithm works fine.
osMap.setCenter(new OpenSpace.MapPoint (442900, 314600), 3);
If however you set the initial zoom level to 1 or 2 then the issue we have identified takes place.
In the case of this code if set at 2 then some of the points do not de-cluster until zoom 11, if it is set to 1 then all points do not de-cluster until level 11. Please ensure that if using the clustering algorithm you select the initial zoom to a value of 3 or greater.
