Skip to content

Instantly share code, notes, and snippets.

@mbertrand

mbertrand/index.html

Last active October 25, 2023 23:58
Show Gist options
  • Star 13 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save mbertrand/5218300 to your computer and use it in GitHub Desktop.
Save mbertrand/5218300 to your computer and use it in GitHub Desktop.
Download ZIP
D3.js + OpenLayers
Raw
index.html
<!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>
Raw
olstyle.css
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;
}
Raw
quakes.html
<!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>
Display the source blob
Display the rendered blob
Raw
quakes.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
us-states.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@zpxiaomi
Copy link

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