stoolrossa/LeafletCouch.html

## LeafletCouch.html
<!DOCTYPE html><html lang="en">
<head>
<title>LeafletCouch</title>
<script type="text/javascript" src="javascripts/jquery-1.6.4.min.js">
</script><script type="text/javascript" src="javascripts/leaflet.js"></script>
<link rel="stylesheet" href="javascripts/leaflet.css">
</head>
<body>
<div id="mapContainer" style="width: 800px; height: 550px;"></div>
<script type="text/javascript">
var map;
var cadastralLayer;

// create the map
$(document).ready(function () {
    map = new L.Map('mapContainer');

    var url = 'http://{s}.tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{y}.png';
    var copyright = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade';
    var tileLayer = new L.TileLayer(url, {maxZoom: 20, attribution: copyright});
    var startPosition = new L.LatLng(-27.43247,153.065654);

    map.on('load', function(e) {
        requestUpdatedCadastre(e.target.getBounds());
    });

    map.setView(startPosition, 17).addLayer(tileLayer);

    map.on('moveend', function(e) {
        requestUpdatedCadastre(e.target.getBounds());
    });
});

// make a request to Couchbase to get the features in the current extent
function requestUpdatedCadastre(bounds) {
    $.ajax(
        {
            type: 'GET',
            url: 'http://127.0.0.1:5984/spatial/_design/main/_spatial/state_1_sp?bbox=' + bounds._southWest.lng + ',' + bounds._southWest.lat + ',' + bounds._northEast.lng + ',' + bounds._northEast.lat,
            dataType: 'jsonp',
            success: function (result) {
                parseResponseCadastre(result)
            },
            error: function (req, status, error) {
                alert('Unable to get cadastral data:' + error);
        }
    });
}

// parse the features retrieved from Couchbase
function parseResponseCadastre(data) {
    if (cadastralLayer != undefined)
    {
        map.removeLayer(cadastralLayer);
    }

    var count = data.rows.length;

    // add a property called "type" with a value of "Feature" to each feature
    for (var i = 0; i < count; i++) {
        data.rows[i]["type"] = "Feature";
    }

    // create the FeatureCollection
    var featureCollection = { type: "FeatureCollection", features: data.rows };

    cadastralLayer = createGeoJsonLayer();
    cadastralLayer.addGeoJSON(featureCollection);
    map.addLayer(cadastralLayer);
}

// create the layer with the desired symbology
function createGeoJsonLayer () {
    var layer = new L.GeoJSON();
    layer.on('featureparse', function(e) {
        e.layer.setStyle({ color:  '#003300', weight: 2, fill: true, fillColor: '#009933' });
    });
    return layer;
}

</script>
</body>
</html>
	<!DOCTYPE html><html lang="en">
	<head>
	<title>LeafletCouch</title>
	<script type="text/javascript" src="javascripts/jquery-1.6.4.min.js">
	</script><script type="text/javascript" src="javascripts/leaflet.js"></script>
	<link rel="stylesheet" href="javascripts/leaflet.css">
	</head>
	<body>
	<div id="mapContainer" style="width: 800px; height: 550px;"></div>
	<script type="text/javascript">
	var map;
	var cadastralLayer;

	// create the map
	$(document).ready(function () {
	map = new L.Map('mapContainer');

	var url = 'http://{s}.tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{y}.png';
	var copyright = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade';
	var tileLayer = new L.TileLayer(url, {maxZoom: 20, attribution: copyright});
	var startPosition = new L.LatLng(-27.43247,153.065654);

	map.on('load', function(e) {
	requestUpdatedCadastre(e.target.getBounds());
	});

	map.setView(startPosition, 17).addLayer(tileLayer);

	map.on('moveend', function(e) {
	requestUpdatedCadastre(e.target.getBounds());
	});
	});

	// make a request to Couchbase to get the features in the current extent
	function requestUpdatedCadastre(bounds) {
	$.ajax(
	{
	type: 'GET',
	url: 'http://127.0.0.1:5984/spatial/_design/main/_spatial/state_1_sp?bbox=' + bounds._southWest.lng + ',' + bounds._southWest.lat + ',' + bounds._northEast.lng + ',' + bounds._northEast.lat,
	dataType: 'jsonp',
	success: function (result) {
	parseResponseCadastre(result)
	},
	error: function (req, status, error) {
	alert('Unable to get cadastral data:' + error);
	}
	});
	}

	// parse the features retrieved from Couchbase
	function parseResponseCadastre(data) {
	if (cadastralLayer != undefined)
	{
	map.removeLayer(cadastralLayer);
	}

	var count = data.rows.length;

	// add a property called "type" with a value of "Feature" to each feature
	for (var i = 0; i < count; i++) {
	data.rows[i]["type"] = "Feature";
	}

	// create the FeatureCollection
	var featureCollection = { type: "FeatureCollection", features: data.rows };

	cadastralLayer = createGeoJsonLayer();
	cadastralLayer.addGeoJSON(featureCollection);
	map.addLayer(cadastralLayer);
	}

	// create the layer with the desired symbology
	function createGeoJsonLayer () {
	var layer = new L.GeoJSON();
	layer.on('featureparse', function(e) {
	e.layer.setStyle({ color: '#003300', weight: 2, fill: true, fillColor: '#009933' });
	});
	return layer;
	}

	</script>
	</body>
	</html>