A reference overlay example using Bing/Virtual Earth Tiles
Created
October 14, 2013 15:28
-
-
Save wboykinm/6977487 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<link href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" rel="stylesheet"> | |
<style> | |
html, body, #map { | |
display:block; | |
width:100%; | |
height:100%; | |
margin:0; | |
padding:0; | |
} | |
.states { | |
fill: none; | |
stroke: #fff; | |
stroke-linejoin: round; | |
} | |
.counties :hover { | |
fill: #0055ff !important; | |
stroke: #0022FF; | |
stroke-width:2.2px; | |
stroke-linejoin: round; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="map"></div> | |
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script> | |
<script src="http://d3js.org/topojson.v1.min.js"></script> | |
<script> | |
var BingLayer = L.TileLayer.extend({ | |
getTileUrl: function(tilePoint) { | |
this._adjustTilePoint(tilePoint); | |
return L.Util.template(this._url, { | |
s: this._getSubdomain(tilePoint), | |
q: this._quadKey(tilePoint.x, tilePoint.y, this._getZoomForUrl()) | |
}); | |
}, | |
_quadKey: function(x, y, z) { | |
var quadKey = []; | |
for (var i = z; i > 0; i--) { | |
var digit = '0'; | |
var mask = 1 << (i - 1); | |
if ((x & mask) != 0) { | |
digit++; | |
} | |
if ((y & mask) != 0) { | |
digit++; | |
digit++; | |
} | |
quadKey.push(digit); | |
} | |
return quadKey.join(''); | |
} | |
}); | |
var map = new L.Map(document.querySelector('#map'), { | |
center: new L.LatLng(-8, 35), | |
zoom: 5 | |
}); | |
var baselayer = new BingLayer('http://t{s}.tiles.virtualearth.net/tiles/a{q}.jpeg?g=1398', { | |
subdomains: ['0', '1', '2', '3', '4'], | |
attribution: '© <a href="http://bing.com/maps">Bing Maps</a>' | |
}).addTo(map); | |
var fill = d3.scale.log().domain([10, 500]).range(["brown", "steelblue"]); | |
var svg = d3.select(map.getPanes().overlayPane).append("svg"); //, | |
// g = svg.append("g").attr("class", "leaflet-zoom-hide"); | |
d3.json("us.json", function(error, us) { | |
svg.append("g").attr("class", "counties leaflet-zoom-hide").selectAll("path").data(topojson.object(us, us.objects.counties).geometries).enter().append("path").attr("d", path).style("fill", function(d) { | |
return fill(path.area(d)); | |
}); | |
/*d3.json("admin.json", function(collection) { | |
var bounds = d3.geo.bounds(collection), | |
path = d3.geo.path().projection(project); | |
var feature = g.selectAll("path") | |
.data(collection.features) | |
.enter().append("path");*/ | |
map.on("viewreset", reset); | |
reset(); | |
// Reposition the SVG to cover the features. | |
function reset() { | |
var bottomLeft = project(bounds[0]), | |
topRight = project(bounds[1]); | |
svg.attr("width", topRight[0] - bottomLeft[0]).attr("height", bottomLeft[1] - topRight[1]).style("margin-left", bottomLeft[0] + "px").style("margin-top", topRight[1] + "px"); | |
g.attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")"); | |
feature.attr("d", path); | |
} | |
// Use Leaflet to implement a D3 geographic projection. | |
function project(x) { | |
var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0])); | |
return [point.x, point.y]; | |
}; | |
var topPane = map._createPane('leaflet-top-pane', map.getPanes().mapPane); | |
var topLayer = new BingLayer('http://t{s}.tiles.virtualearth.net/tiles/ho{q}.jpeg?g=700&mkt=en', { | |
subdomains: ['0', '1', '2', '3', '4'] | |
}).addTo(map); | |
topPane.appendChild(topLayer.getContainer()); | |
topLayer.setZIndex(7); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment