Skip to content

Instantly share code, notes, and snippets.

/index.html

Created December 7, 2016 17:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/c8bd7a88c7841db2c786981b157886ba to your computer and use it in GitHub Desktop.
Save anonymous/c8bd7a88c7841db2c786981b157886ba to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Leaflet JS Bin</title>
<style>
#map {
width:600px;
height:400px;
}
</style>
</head>
<body>
<div id='map'></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
<script>
var data = {
'features': [{"type":"Feature","geometry":{"type":"Point","coordinates":[116.323749170237,39.9672905289184]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.319164193271,39.9701164073066]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.296683152667,39.9710958591702]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.315459063504,39.9681431300218]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.323514188433,39.9673258721977]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.323604499712,39.9676448629893]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.323604499712,39.9676448629893]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.323604499712,39.9676448629893]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.323604499712,39.9676448629893]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.323598300365,39.96762482004]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.323604499712,39.9676448629893]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.320104591032,39.9697844858341]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.320104591032,39.9697844858341]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.320104591032,39.9697844858341]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.291508792865,39.9704704314473]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.305695265732,39.9700928488372]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.291548683486,39.9704663248533]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.291137490438,39.970504902277]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.290986133568,39.970514273581]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.295358919447,39.9712433073566]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.315151854048,39.9702571719279]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.302984809425,39.9644081405164]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.30279180205,39.9645433176334]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.322907316017,39.9704222846983]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.322907316017,39.9704222846983]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.322907316017,39.9704222846983]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.322907316017,39.9704222846983]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.322711749259,39.9704387082774]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.322907316017,39.9704222846983]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.322907316017,39.9704222846983]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.322907316017,39.9704222846983]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.322907316017,39.9704222846983]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.322907316017,39.9704222846983]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.322907316017,39.9704222846983]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.322907316017,39.9704222846983]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.322907316017,39.9704222846983]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.322907316017,39.9704222846983]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.322907316017,39.9704222846983]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.322907316017,39.9704222846983]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.322907316017,39.9704222846983]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.322907316017,39.9704222846983]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.322907316017,39.9704222846983]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.322907316017,39.9704222846983]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.2912348007,39.9704796122759]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.2912348007,39.9704796122759]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.322907316017,39.9704222846983]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.322907316017,39.9704222846983]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.291243602743,39.9705060065234]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.291012042566,39.9705613171134]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.445431605606,39.8712931458641]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.445431605606,39.8712931458641]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.445431605606,39.8712931458641]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.445431605606,39.8712931458641]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.368379916369,39.9209471554883]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.291305611888,39.9705989153331]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.288496431039,39.9659900787985]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.285659790031,39.9614410400298]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.287365608679,39.9665141307669]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.291140035993,39.9705520091168]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.291367285128,39.9706795152679]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.291281265089,39.9705047137054]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.29125683062,39.9706166678333]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.291372169596,39.9705898338104]},"properties":{"tdid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.288242523034,39.970488486924]},"properties":{"tdid":1}}],
'type': 'FeatureCollection'
}
var id = 'map'
var baseLayer = L.tileLayer(
'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '@hijiangtao'
})
var map = new L.map(id, {
center: L.latLng(39.914,116.396),
zoom: 12,
layers: [baseLayer]
})
d3.select("#F_SVG").remove();
let color = 'red';
let svg = d3.select(map.getPanes().overlayPane).append("svg").attr("id", "F_SVG"),
g = svg.append("g").attr("class", "leaflet-zoom-hide").attr("id", "F_G");
let transform = d3.geoTransform({ point: projectPoint }),
path = d3.geoPath().projection(transform);
path.pointRadius(2);
var feature = g.selectAll("path")
.data(data.features)
.enter().append("path")
.attr("stroke", function(d) {
return "rgb(250,150,30)";
})
.attr("fill", function(d) {
return "rgb(250,150,30)";
})
.attr("opacity", "0.8")
.attr("class", "pointmapfeature");
map.on("viewreset", reset);
reset();
// Reposition the SVG to cover the features.
function reset() {
var bounds = path.bounds(data),
topLeft = bounds[0],
bottomRight = bounds[1];
console.log(bounds);
svg.attr("width", bottomRight[0] - topLeft[0] + 10)
.attr("height", bottomRight[1] - topLeft[1] + 10)
.style("left", (topLeft[0] - 5) + "px")
.style("top", (topLeft[1] - 5) + "px");
g.attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");
feature.attr("d", path)
.attr("transform", "translate(5, 5)");
};
/**
* Use Leaflet to implement a D3 geometric transformation.
* @param {[type]} x [description]
* @param {[type]} y [description]
* @return {[type]} [description]
*/
function projectPoint(x, y) {
var point = map.latLngToLayerPoint(new L.LatLng(y, x));
this.stream.point(point.x, point.y);
// console.log(point);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment