Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
D3.js + OpenLayers
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>D3.js and Openlayers - US States</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/blitzer/jquery-ui.css" type="text/css">
<script src="http://d3js.org/d3.v2.min.js?2.9.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js"></script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
#map {
margin: 0;
width: 960px;
height: 500px;
}
path {
fill: #000;
fill-opacity: .2;
stroke: #fff;
stroke-width: 1.5px;
}
path:hover {
fill: brown;
fill-opacity: .7;
}
</style>
<script type="text/javascript">
var map;
function init() {
var extent = [-20037508.34, -20037508.34,
20037508.34, 20037508.34
];
map = new OpenLayers.Map('map', {
numZoomLevels: 20,
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG: 4326"),
maxExtent: extent,
restrictedExtent: extent,
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.Zoom(),
new OpenLayers.Control.ScaleLine(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.KeyboardDefaults()
]
});
var ol_wms = new OpenLayers.Layer.OSM();
map.addLayers([ol_wms]);
map.setCenter(new OpenLayers.LonLat(-96, 37).transform("EPSG:4326", "EPSG:900913"), 4);
d3.json("us-states.json", function (collection) {
var overlay = new OpenLayers.Layer.Vector("states");
// Add the container when the overlay is added to the map.
overlay.afterAdd = function () {
//get the vector layer div element
var div = d3.selectAll("#" + overlay.div.id);
//remove the existing svg element and create a new one
div.selectAll("svg").remove();
var svg = div.append("svg");
//Add a G (group) element
g = svg.append("g");
var bounds = d3.geo.bounds(collection),
path = d3.geo.path().projection(project);
var feature = g.selectAll("path")
.data(collection.features)
.enter().append("path");
map.events.register("moveend", map, reset);
reset();
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);
}
function project(x) {
var point = map.getViewPortPxFromLonLat(new OpenLayers.LonLat(x[0], x[1])
.transform("EPSG:4326", "EPSG:900913"));
return [point.x, point.y];
}
}
map.addLayer(overlay);
});
}
</script>
</head>
<body onload="init()">
<h1>D3.js + OpenLayers</h1>
<div id="map"></div>
<p>This is an example of <a href="http://d3js.org">D3.js</a> used in conjunction with
<a href="http://www.openlayers.org">OpenLayers</a> to display GeoJSON on a map,
based on the <a href="http://bost.ocks.org/mike/leaflet/">D3+Leaflet</a> demo by
<a href="http://bost.ocks.org/mike/">Mike Bostock</a>.</p>
<p>Another example using point data (earthquakes) and D3.js info balloons is <a href="quakes.html">here</a>.
<p>Code is at <a href="https://gist.github.com/mbertrand/5218300">https://gist.github.com/mbertrand/5218300</a>
</body>
</html>
body, html, #map {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
width: 100%;
height: 100%;
}
path {
fill: #000;
fill-opacity: .2;
stroke: #fff;
stroke-width: 1.5px;
}
path:hover {
fill: red;
fill-opacity: .7;
}
div#pop-up {
display: none;
position:absolute;
color: white;
font-size: 14px;
background: rgba(0,0,0,0.5);
padding: 5px 10px 5px 10px;
-moz-border-radius: 5px 5px;
border-radius: 5px 5px;
z-index: 9999;
}
div#pop-up-title {
font-size: 15px;
width:300px;
margin-bottom: 4px;
font-weight: bolder;
}
div#pop-up-content {
font-size: 14px;
}
div#pop-desc {
margin-left: 10px;
width: 300px;
}
div#pop-img {
font-size: 30px;
font-weight: bolder;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>D3.js and OpenLayers - Earthquakes (Points)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="olstyle.css" type="text/css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/blitzer/jquery-ui.css" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="http://d3js.org/d3.v2.min.js?2.9.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js"></script>
<script type="text/javascript">
var map;
var extent = [-20037508.34, -20037508.34,
20037508.34, 20037508.34
];
function init() {
map = new OpenLayers.Map('map', {
numZoomLevels: 20,
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG: 4326"),
maxExtent: extent,
restrictedExtent: extent,
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.ScaleLine(),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.KeyboardDefaults()
]
});
var ol_wms = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {
layers: 'basic'
});
map.addLayers([ol_wms]);
map.setCenter(new OpenLayers.LonLat(0, 0), 3);
d3.json("quakes.json", function (collection) {
var overlay = new OpenLayers.Layer.Vector("stations");
// Add the container when the overlay is added to the map.
overlay.afterAdd = function () {
var div = d3.selectAll("#" + overlay.div.id);
div.selectAll("svg").remove();
var svg = div.append("svg");
g = svg.append("g");
var bounds = d3.geo.bounds(collection),
path = d3.geo.path().projection(project);
var feature = g.selectAll("path")
.data(collection.features)
.enter().append("path")
.attr("d", path.pointRadius(function (d) {
return Math.sqrt((Math.exp(parseFloat(d.properties.mag))));
}))
.on("mouseover", function (d) {
var mousePosition = d3.svg.mouse(this);
var format = d3.time.format("%Y-%m-%d %HH:%MM:%SS");
$("#pop-up").fadeOut(100, function () {
// Popup content
$("#pop-up-title").html(format(new Date(parseInt(d.properties.time))));
$("#pop-img").html(d.properties.mag);
$("#pop-desc").html(d.properties.place);
// Popup position
var popLeft = mousePosition[0] + 300 > screen.width ?
mousePosition[0] - 400 : mousePosition[0];
var popTop = mousePosition[1];
$("#pop-up").css({
"left": popLeft + 50,
"top": popTop
});
$("#pop-up").fadeIn(100);
});
}).
on("mouseout", function () {
$("#pop-up").fadeOut(50);
});
map.events.register("moveend", map, reset);
reset();
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);
}
function project(x) {
var point = map.getViewPortPxFromLonLat(new OpenLayers.LonLat(x[0], x[1])
.transform("EPSG:4326", "EPSG:900913"));
return [point.x, point.y];
}
}
map.addLayer(overlay);
});
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
<a href="#" id="permalink" onclick="drawSVG();return false;">Permalink</a>
<div id="pop-up">
<div id="pop-up-title"></div>
<div id="pop-up-content">
<table> <tr>
<td><div id="pop-img"></div></td>
<td><div id="pop-desc"></div></td>
</tr> </table>
</div>
</div>
<div id="slider"></div>
<div id="docs"></div>
</body>
</html>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@zpxiaomi
Copy link

zpxiaomi commented Sep 25, 2014

Well done, this really give me hints to do some implementation for my master thesis. Thank you for the hints

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment