Skip to content

Instantly share code, notes, and snippets.

@lxbarth

lxbarth/geojson-tiles.js

Forked from glenrobertson/TileLayer.GeoJSON.js
Created November 5, 2012 19:10
Show Gist options
  • Save lxbarth/4019660 to your computer and use it in GitHub Desktop.
Save lxbarth/4019660 to your computer and use it in GitHub Desktop.
Download ZIP
GeoJSON Leaflet Tile Layer
Raw
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);
}
});
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment