-
-
Save BikeshC/f2eafa34c97692df8e4fe30854189c93 to your computer and use it in GitHub Desktop.
D3.js + OpenLayers
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> | |
<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(84.5,28.5).transform("EPSG:4326", "EPSG:900913"), 7); | |
d3.json("nepal-districts.geojson", 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> |
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
{ | |
"type": "FeatureCollection", | |
"features": [ | |
{ "type": "Feature", "id": 0, "properties": { "HQ_NAME": "Biratnagar" }, "geometry": { "type": "Point", "coordinates": [ 87.279457092285156, 26.458152770996094 ] } } | |
, | |
{ "type": "Feature", "id": 1, "properties": { "HQ_NAME": "Diktel" }, "geometry": { "type": "Point", "coordinates": [ 86.801055908203125, 27.222742080688477 ] } } | |
, | |
{ "type": "Feature", "id": 2, "properties": { "HQ_NAME": "Taplejung" }, "geometry": { "type": "Point", "coordinates": [ 87.679977416992188, 27.357425689697266 ] } } | |
, | |
{ "type": "Feature", "id": 3, "properties": { "HQ_NAME": "Phidim" }, "geometry": { "type": "Point", "coordinates": [ 87.775611877441406, 27.145832061767578 ] } } | |
, | |
{ "type": "Feature", "id": 4, "properties": { "HQ_NAME": "Ilam" }, "geometry": { "type": "Point", "coordinates": [ 87.934860229492188, 26.910614013671875 ] } } | |
, | |
{ "type": "Feature", "id": 5, "properties": { "HQ_NAME": "Bhadrapur" }, "geometry": { "type": "Point", "coordinates": [ 88.064994812011719, 26.591939926147461 ] } } | |
, | |
{ "type": "Feature", "id": 6, "properties": { "HQ_NAME": "Khandabari" }, "geometry": { "type": "Point", "coordinates": [ 87.207740783691406, 27.376585006713867 ] } } | |
, | |
{ "type": "Feature", "id": 7, "properties": { "HQ_NAME": "Terhathum" }, "geometry": { "type": "Point", "coordinates": [ 87.539649963378906, 27.127485275268555 ] } } | |
, | |
{ "type": "Feature", "id": 8, "properties": { "HQ_NAME": "Dhankuta" }, "geometry": { "type": "Point", "coordinates": [ 87.344245910644531, 26.990818023681641 ] } } | |
, | |
{ "type": "Feature", "id": 9, "properties": { "HQ_NAME": "Bhojpur" }, "geometry": { "type": "Point", "coordinates": [ 87.051750183105469, 27.175823211669922 ] } } | |
, | |
{ "type": "Feature", "id": 10, "properties": { "HQ_NAME": "Inaruwa" }, "geometry": { "type": "Point", "coordinates": [ 87.151664733886719, 26.602121353149414 ] } } | |
, | |
{ "type": "Feature", "id": 11, "properties": { "HQ_NAME": "Salleri" }, "geometry": { "type": "Point", "coordinates": [ 86.588966369628906, 27.509082794189453 ] } } | |
, | |
{ "type": "Feature", "id": 12, "properties": { "HQ_NAME": "Okhaldhunga" }, "geometry": { "type": "Point", "coordinates": [ 86.501548767089844, 27.322074890136719 ] } } | |
, | |
{ "type": "Feature", "id": 13, "properties": { "HQ_NAME": "Gaighat" }, "geometry": { "type": "Point", "coordinates": [ 86.705787658691406, 26.792886734008789 ] } } | |
, | |
{ "type": "Feature", "id": 14, "properties": { "HQ_NAME": "Rajbiraj" }, "geometry": { "type": "Point", "coordinates": [ 86.750473022460938, 26.545316696166992 ] } } | |
, | |
{ "type": "Feature", "id": 15, "properties": { "HQ_NAME": "Siraha" }, "geometry": { "type": "Point", "coordinates": [ 86.203178405761719, 26.665773391723633 ] } } | |
, | |
{ "type": "Feature", "id": 16, "properties": { "HQ_NAME": "Charikot" }, "geometry": { "type": "Point", "coordinates": [ 86.062606811523438, 27.684759140014648 ] } } | |
, | |
{ "type": "Feature", "id": 17, "properties": { "HQ_NAME": "Ramechhap" }, "geometry": { "type": "Point", "coordinates": [ 86.081825256347656, 27.337747573852539 ] } } | |
, | |
{ "type": "Feature", "id": 18, "properties": { "HQ_NAME": "Sindhulimadi" }, "geometry": { "type": "Point", "coordinates": [ 85.909523010253906, 27.221868515014648 ] } } | |
, | |
{ "type": "Feature", "id": 19, "properties": { "HQ_NAME": "Janakpur" }, "geometry": { "type": "Point", "coordinates": [ 85.926742553710937, 26.736465454101563 ] } } | |
, | |
{ "type": "Feature", "id": 20, "properties": { "HQ_NAME": "Jaleswor" }, "geometry": { "type": "Point", "coordinates": [ 85.805091857910156, 26.660377502441406 ] } } | |
, | |
{ "type": "Feature", "id": 21, "properties": { "HQ_NAME": "Malangawa" }, "geometry": { "type": "Point", "coordinates": [ 85.560409545898438, 26.86549186706543 ] } } | |
, | |
{ "type": "Feature", "id": 22, "properties": { "HQ_NAME": "Dhunche" }, "geometry": { "type": "Point", "coordinates": [ 85.298133850097656, 28.122976303100586 ] } } | |
, | |
{ "type": "Feature", "id": 23, "properties": { "HQ_NAME": "Chautara" }, "geometry": { "type": "Point", "coordinates": [ 85.716178894042969, 27.786489486694336 ] } } | |
, | |
{ "type": "Feature", "id": 24, "properties": { "HQ_NAME": "Bidur" }, "geometry": { "type": "Point", "coordinates": [ 85.14605712890625, 27.920480728149414 ] } } | |
, | |
{ "type": "Feature", "id": 25, "properties": { "HQ_NAME": "Dhadingbesi" }, "geometry": { "type": "Point", "coordinates": [ 84.859207153320312, 27.876832962036133 ] } } | |
, | |
{ "type": "Feature", "id": 26, "properties": { "HQ_NAME": "Kathmandu" }, "geometry": { "type": "Point", "coordinates": [ 85.32275390625, 27.712886810302734 ] } } | |
, | |
{ "type": "Feature", "id": 27, "properties": { "HQ_NAME": "Bhaktapur" }, "geometry": { "type": "Point", "coordinates": [ 85.433830261230469, 27.685693740844727 ] } } | |
, | |
{ "type": "Feature", "id": 28, "properties": { "HQ_NAME": "Lalitpur" }, "geometry": { "type": "Point", "coordinates": [ 85.323646545410156, 27.683742523193359 ] } } | |
, | |
{ "type": "Feature", "id": 29, "properties": { "HQ_NAME": "Dhulikhel" }, "geometry": { "type": "Point", "coordinates": [ 85.550567626953125, 27.623132705688477 ] } } | |
, | |
{ "type": "Feature", "id": 30, "properties": { "HQ_NAME": "Gaur" }, "geometry": { "type": "Point", "coordinates": [ 85.276260375976563, 26.781095504760742 ] } } | |
, | |
{ "type": "Feature", "id": 31, "properties": { "HQ_NAME": "Kalaiya" }, "geometry": { "type": "Point", "coordinates": [ 85.006584167480469, 27.04438591003418 ] } } | |
, | |
{ "type": "Feature", "id": 32, "properties": { "HQ_NAME": "Birganj" }, "geometry": { "type": "Point", "coordinates": [ 84.890480041503906, 27.039817810058594 ] } } | |
, | |
{ "type": "Feature", "id": 33, "properties": { "HQ_NAME": "Hetauda" }, "geometry": { "type": "Point", "coordinates": [ 85.032546997070313, 27.439121246337891 ] } } | |
, | |
{ "type": "Feature", "id": 34, "properties": { "HQ_NAME": "Bharatpur" }, "geometry": { "type": "Point", "coordinates": [ 84.445762634277344, 27.685113906860352 ] } } | |
, | |
{ "type": "Feature", "id": 35, "properties": { "HQ_NAME": "Parasi" }, "geometry": { "type": "Point", "coordinates": [ 83.666267395019531, 27.535600662231445 ] } } | |
, | |
{ "type": "Feature", "id": 36, "properties": { "HQ_NAME": "Taulihawa" }, "geometry": { "type": "Point", "coordinates": [ 83.048469543457031, 27.552742004394531 ] } } | |
, | |
{ "type": "Feature", "id": 37, "properties": { "HQ_NAME": "Tansen" }, "geometry": { "type": "Point", "coordinates": [ 83.548667907714844, 27.871219635009766 ] } } | |
, | |
{ "type": "Feature", "id": 38, "properties": { "HQ_NAME": "Syangja" }, "geometry": { "type": "Point", "coordinates": [ 83.838554382324219, 28.086542129516602 ] } } | |
, | |
{ "type": "Feature", "id": 39, "properties": { "HQ_NAME": "Sandhikharka" }, "geometry": { "type": "Point", "coordinates": [ 83.129364013671875, 27.979648590087891 ] } } | |
, | |
{ "type": "Feature", "id": 40, "properties": { "HQ_NAME": "Tamghas" }, "geometry": { "type": "Point", "coordinates": [ 83.249412536621094, 28.074028015136719 ] } } | |
, | |
{ "type": "Feature", "id": 41, "properties": { "HQ_NAME": "Gorkha" }, "geometry": { "type": "Point", "coordinates": [ 84.62615966796875, 28.005746841430664 ] } } | |
, | |
{ "type": "Feature", "id": 42, "properties": { "HQ_NAME": "Damauli" }, "geometry": { "type": "Point", "coordinates": [ 84.292213439941406, 27.987340927124023 ] } } | |
, | |
{ "type": "Feature", "id": 43, "properties": { "HQ_NAME": "Besishahar" }, "geometry": { "type": "Point", "coordinates": [ 84.37652587890625, 28.24101448059082 ] } } | |
, | |
{ "type": "Feature", "id": 44, "properties": { "HQ_NAME": "Pokhara" }, "geometry": { "type": "Point", "coordinates": [ 83.979759216308594, 28.221927642822266 ] } } | |
, | |
{ "type": "Feature", "id": 45, "properties": { "HQ_NAME": "Chame" }, "geometry": { "type": "Point", "coordinates": [ 84.239059448242188, 28.563058853149414 ] } } | |
, | |
{ "type": "Feature", "id": 46, "properties": { "HQ_NAME": "Kusma" }, "geometry": { "type": "Point", "coordinates": [ 83.675666809082031, 28.222738265991211 ] } } | |
, | |
{ "type": "Feature", "id": 47, "properties": { "HQ_NAME": "Baglung" }, "geometry": { "type": "Point", "coordinates": [ 83.589714050292969, 28.273099899291992 ] } } | |
, | |
{ "type": "Feature", "id": 48, "properties": { "HQ_NAME": "Beni" }, "geometry": { "type": "Point", "coordinates": [ 83.558860778808594, 28.350009918212891 ] } } | |
, | |
{ "type": "Feature", "id": 49, "properties": { "HQ_NAME": "Jomsom" }, "geometry": { "type": "Point", "coordinates": [ 83.729598999023438, 28.782564163208008 ] } } | |
, | |
{ "type": "Feature", "id": 50, "properties": { "HQ_NAME": "Jumlikhalanga" }, "geometry": { "type": "Point", "coordinates": [ 82.516937255859375, 28.640132904052734 ] } } | |
, | |
{ "type": "Feature", "id": 51, "properties": { "HQ_NAME": "Salyan" }, "geometry": { "type": "Point", "coordinates": [ 82.149955749511719, 28.385719299316406 ] } } | |
, | |
{ "type": "Feature", "id": 52, "properties": { "HQ_NAME": "Libang" }, "geometry": { "type": "Point", "coordinates": [ 82.629631042480469, 28.315114974975586 ] } } | |
, | |
{ "type": "Feature", "id": 53, "properties": { "HQ_NAME": "Pyuthan" }, "geometry": { "type": "Point", "coordinates": [ 82.874954223632813, 28.096305847167969 ] } } | |
, | |
{ "type": "Feature", "id": 54, "properties": { "HQ_NAME": "Tribhuwannagar" }, "geometry": { "type": "Point", "coordinates": [ 82.482162475585937, 28.044925689697266 ] } } | |
, | |
{ "type": "Feature", "id": 55, "properties": { "HQ_NAME": "Shidharthanagar" }, "geometry": { "type": "Point", "coordinates": [ 83.454185485839844, 27.514167785644531 ] } } | |
, | |
{ "type": "Feature", "id": 56, "properties": { "HQ_NAME": "Nepalganj" }, "geometry": { "type": "Point", "coordinates": [ 81.626266479492188, 28.070892333984375 ] } } | |
, | |
{ "type": "Feature", "id": 57, "properties": { "HQ_NAME": "Gulariya" }, "geometry": { "type": "Point", "coordinates": [ 81.342544555664063, 28.210468292236328 ] } } | |
, | |
{ "type": "Feature", "id": 58, "properties": { "HQ_NAME": "Birendranagar" }, "geometry": { "type": "Point", "coordinates": [ 81.625946044921875, 28.594808578491211 ] } } | |
, | |
{ "type": "Feature", "id": 59, "properties": { "HQ_NAME": "Dailekh" }, "geometry": { "type": "Point", "coordinates": [ 81.706306457519531, 28.846395492553711 ] } } | |
, | |
{ "type": "Feature", "id": 60, "properties": { "HQ_NAME": "Jajarkot" }, "geometry": { "type": "Point", "coordinates": [ 82.196342468261719, 28.707923889160156 ] } } | |
, | |
{ "type": "Feature", "id": 61, "properties": { "HQ_NAME": "Dunai" }, "geometry": { "type": "Point", "coordinates": [ 82.906585693359375, 28.952920913696289 ] } } | |
, | |
{ "type": "Feature", "id": 62, "properties": { "HQ_NAME": "Jumla" }, "geometry": { "type": "Point", "coordinates": [ 82.186126708984375, 29.288976669311523 ] } } | |
, | |
{ "type": "Feature", "id": 63, "properties": { "HQ_NAME": "Manma" }, "geometry": { "type": "Point", "coordinates": [ 81.604804992675781, 29.148710250854492 ] } } | |
, | |
{ "type": "Feature", "id": 64, "properties": { "HQ_NAME": "Gamgadhi" }, "geometry": { "type": "Point", "coordinates": [ 82.153709411621094, 29.553947448730469 ] } } | |
, | |
{ "type": "Feature", "id": 65, "properties": { "HQ_NAME": "Simikot" }, "geometry": { "type": "Point", "coordinates": [ 81.8187255859375, 29.975315093994141 ] } } | |
, | |
{ "type": "Feature", "id": 66, "properties": { "HQ_NAME": "Chainpur" }, "geometry": { "type": "Point", "coordinates": [ 81.195327758789063, 29.559814453125 ] } } | |
, | |
{ "type": "Feature", "id": 67, "properties": { "HQ_NAME": "Martadi" }, "geometry": { "type": "Point", "coordinates": [ 81.47930908203125, 29.457284927368164 ] } } | |
, | |
{ "type": "Feature", "id": 68, "properties": { "HQ_NAME": "Mangalsen" }, "geometry": { "type": "Point", "coordinates": [ 81.241859436035156, 29.135719299316406 ] } } | |
, | |
{ "type": "Feature", "id": 69, "properties": { "HQ_NAME": "Silgadhi" }, "geometry": { "type": "Point", "coordinates": [ 80.961509704589844, 29.262420654296875 ] } } | |
, | |
{ "type": "Feature", "id": 70, "properties": { "HQ_NAME": "Dhangadhi" }, "geometry": { "type": "Point", "coordinates": [ 80.601310729980469, 28.700601577758789 ] } } | |
, | |
{ "type": "Feature", "id": 71, "properties": { "HQ_NAME": "Mahendranagar" }, "geometry": { "type": "Point", "coordinates": [ 80.18182373046875, 28.965801239013672 ] } } | |
, | |
{ "type": "Feature", "id": 72, "properties": { "HQ_NAME": "Dadeldhura" }, "geometry": { "type": "Point", "coordinates": [ 80.588432312011719, 29.303020477294922 ] } } | |
, | |
{ "type": "Feature", "id": 73, "properties": { "HQ_NAME": "Baitadi" }, "geometry": { "type": "Point", "coordinates": [ 80.425247192382813, 29.557313919067383 ] } } | |
, | |
{ "type": "Feature", "id": 74, "properties": { "HQ_NAME": "Darchula" }, "geometry": { "type": "Point", "coordinates": [ 80.573028564453125, 29.847379684448242 ] } } | |
] | |
} |
View raw
(Sorry about that, but we can’t show files that are this big right now.)
View raw
(Sorry about that, but we can’t show files that are this big right now.)
View raw
(Sorry about that, but we can’t show files that are this big right now.)
View raw
(Sorry about that, but we can’t show files that are this big right now.)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment