lxbarth/geojson-tiles.js

## geojson-tiles.js
// Load tiled GeoJSON and merge into single geojson hash.
// Requires jQuery for jsonp.
L.TileLayer.GeoJSON = L.TileLayer.extend({
    _geojson: {"type":"FeatureCollection","features":[]},
    _requests: [],
    geojson: function() {
        if (this._geojson.features.length) return this._geojson;
        for (k in this._tiles) {
            var t = this._tiles[k];
            if (t.geojson && t.geojson.features) {
                this._geojson.features =
                    this._geojson.features.concat(t.geojson.features);
            }
        }
        return this._geojson;
    },
    _addTile: function(tilePoint, container) {
        var tile = { geojson: null };
        this._tiles[tilePoint.x + ':' + tilePoint.y] = tile;
        this._loadTile(tile, tilePoint);
    },
    _loadTile: function (tile, tilePoint) {
        var layer = this;
        this._requests.push($.ajax({
            url: this.getTileUrl(tilePoint),
            dataType: 'json',
            success: function(geojson) {
                tile.geojson = geojson;
                layer._geojson.features = [];
                layer._tileLoaded();
            },
            error: function() {
                layer._tileLoaded();
            }
        }));
    },
    _resetCallback: function() {
        this._geojson.features = [];
        L.TileLayer.prototype._resetCallback.apply(this, arguments);
        for (i in this._requests) {
            this._requests[i].abort();
        }
        this._requests = [];
    },
    _update: function() {
        if (this._map._panTransition && this._map._panTransition._inProgress) { return; }
        L.TileLayer.prototype._update.apply(this, arguments);
    }
});

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>Leaflet GeoJSON tile layer example</title>

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.ie.css" />
    <![endif]-->
    <script src="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="geojson-tiles.js"></script>

    <style type="text/css">
    html, body, map {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    .geojson-dialog-hover {
        background: #EEE;
        border: 1px solid #DDD;
        border-radius: 5px;
        color: #333;
        font-family: sans-serif;
        font-size: small;
        margin: 0;
        padding: 3px;
    }
    .geojson-dialog-hover p {
        margin: 0 0 5px 0;
        padding: 0;
    }
    .geojson-feature-property-name {
        font-weight: bold;
        margin-right: 5px;
    }
    </style>
</head>

<body>
    <div id="map" style="width: 100%; height: 100%; border: 1px solid #ccc"></div>

    <script type="text/javascript">

    var map = new L.Map('map'),
        cloudmadeUrl = 'http://{s}.tile.cloudmade.com/1a1b06b230af4efdbb989ea99e9841af/997/256/{z}/{x}/{y}.png',
        cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade';

    map.setView(new L.LatLng(38.617, -100.261), 5);

    var baseLayer = new L.TileLayer(cloudmadeUrl, { attribution: cloudmadeAttribution});
    map.addLayer(baseLayer);

    var geojsonURL = 'http://polymaps.appspot.com/county/{z}/{x}/{y}.json';
    var geojsonLayer = window.g = new L.GeoJSON(null, {
        /* style of GeoJSON feature */
        style: {
            "color": "#1B1",
            "fillColor": "#1B1",
            "weight": 0.7,
            "opacity": 0.3,
            "fillOpacity": 0.1
        },
        /* style of GeoJSON feature when hovered */
        hoverStyle: {
            "fillOpacity": 0.4
        },
        hoverOffset: new L.Point(30,-16),
        onEachFeature: function (feature, layer) {
            layer.on('mouseover', function() {
                layer.setStyle({"fillOpacity": 0.4});
            });
            layer.on('mouseout', function() {
                layer.setStyle({"fillOpacity": 0.1});
            });
        }
    });
    map.addLayer(geojsonLayer);

    // Add GeoJSON loader layer.
    var geojson = new L.TileLayer.GeoJSON(geojsonURL);
    geojson.on('load', function() {
        geojsonLayer.clearLayers().addData(geojson.geojson());
    });
    map.addLayer(geojson);
    </script>
</body>
</html>
	// Load tiled GeoJSON and merge into single geojson hash.
	// Requires jQuery for jsonp.
	L.TileLayer.GeoJSON = L.TileLayer.extend({
	_geojson: {"type":"FeatureCollection","features":[]},
	_requests: [],
	geojson: function() {
	if (this._geojson.features.length) return this._geojson;
	for (k in this._tiles) {
	var t = this._tiles[k];
	if (t.geojson && t.geojson.features) {
	this._geojson.features =
	this._geojson.features.concat(t.geojson.features);
	}
	}
	return this._geojson;
	},
	_addTile: function(tilePoint, container) {
	var tile = { geojson: null };
	this._tiles[tilePoint.x + ':' + tilePoint.y] = tile;
	this._loadTile(tile, tilePoint);
	},
	_loadTile: function (tile, tilePoint) {
	var layer = this;
	this._requests.push($.ajax({
	url: this.getTileUrl(tilePoint),
	dataType: 'json',
	success: function(geojson) {
	tile.geojson = geojson;
	layer._geojson.features = [];
	layer._tileLoaded();
	},
	error: function() {
	layer._tileLoaded();
	}
	}));
	},
	_resetCallback: function() {
	this._geojson.features = [];
	L.TileLayer.prototype._resetCallback.apply(this, arguments);
	for (i in this._requests) {
	this._requests[i].abort();
	}
	this._requests = [];
	},
	_update: function() {
	if (this._map._panTransition && this._map._panTransition._inProgress) { return; }
	L.TileLayer.prototype._update.apply(this, arguments);
	}
	});
	<!DOCTYPE html>
	<html>
	<head>
	<title>Leaflet GeoJSON tile layer example</title>

	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css" />
	<!--[if lte IE 8]>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.ie.css" />
	<![endif]-->
	<script src="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="geojson-tiles.js"></script>

	<style type="text/css">
	html, body, map {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	}
	.geojson-dialog-hover {
	background: #EEE;
	border: 1px solid #DDD;
	border-radius: 5px;
	color: #333;
	font-family: sans-serif;
	font-size: small;
	margin: 0;
	padding: 3px;
	}
	.geojson-dialog-hover p {
	margin: 0 0 5px 0;
	padding: 0;
	}
	.geojson-feature-property-name {
	font-weight: bold;
	margin-right: 5px;
	}
	</style>
	</head>

	<body>
	<div id="map" style="width: 100%; height: 100%; border: 1px solid #ccc"></div>

	<script type="text/javascript">

	var map = new L.Map('map'),
	cloudmadeUrl = 'http://{s}.tile.cloudmade.com/1a1b06b230af4efdbb989ea99e9841af/997/256/{z}/{x}/{y}.png',
	cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade';

	map.setView(new L.LatLng(38.617, -100.261), 5);

	var baseLayer = new L.TileLayer(cloudmadeUrl, { attribution: cloudmadeAttribution});
	map.addLayer(baseLayer);

	var geojsonURL = 'http://polymaps.appspot.com/county/{z}/{x}/{y}.json';
	var geojsonLayer = window.g = new L.GeoJSON(null, {
	/* style of GeoJSON feature */
	style: {
	"color": "#1B1",
	"fillColor": "#1B1",
	"weight": 0.7,
	"opacity": 0.3,
	"fillOpacity": 0.1
	},
	/* style of GeoJSON feature when hovered */
	hoverStyle: {
	"fillOpacity": 0.4
	},
	hoverOffset: new L.Point(30,-16),
	onEachFeature: function (feature, layer) {
	layer.on('mouseover', function() {
	layer.setStyle({"fillOpacity": 0.4});
	});
	layer.on('mouseout', function() {
	layer.setStyle({"fillOpacity": 0.1});
	});
	}
	});
	map.addLayer(geojsonLayer);

	// Add GeoJSON loader layer.
	var geojson = new L.TileLayer.GeoJSON(geojsonURL);
	geojson.on('load', function() {
	geojsonLayer.clearLayers().addData(geojson.geojson());
	});
	map.addLayer(geojson);
	</script>
	</body>
	</html>