Built with blockbuilder.org
see https://stackoverflow.com/questions/49534470/d3-js-v5-promise-all-replaced-d3-queue
forked from geraldo's block: geojson
forked from geraldo's block: openlayers and d3js geojson
license: mit |
Built with blockbuilder.org
see https://stackoverflow.com/questions/49534470/d3-js-v5-promise-all-replaced-d3-queue
forked from geraldo's block: geojson
forked from geraldo's block: openlayers and d3js geojson
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css" /> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.js"></script> | |
<script src="https://d3js.org/d3.v5.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
#map, svg { | |
position: absolute; | |
top: 0px; | |
bottom: 0px; | |
left: 0px; | |
right: 0px; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="map"></div> | |
<script> | |
/* ol */ | |
_agricStroke = new ol.style.Stroke({ | |
color : 'rgba(255, 201, 41, 1.0)', | |
width : 1 | |
}); | |
_agricFill = new ol.style.Fill({ | |
color: 'rgba(255, 201, 41, 1.0)' | |
}); | |
agricStyle = new ol.style.Style({ | |
stroke : _agricStroke, | |
fill : _agricFill | |
}); | |
var agric = new ol.layer.Vector({ | |
renderMode: 'image', | |
style: agricStyle, | |
source: new ol.source.Vector({ | |
url: 'agriculture.geojson', | |
format: new ol.format.GeoJSON() | |
}) | |
}) | |
var map = new ol.Map({ | |
target: "map", | |
layers: [ | |
new ol.layer.Tile({ | |
source: new ol.source.OSM() | |
}), | |
agric | |
], | |
view: new ol.View({ | |
center: [2620719.951785553,4954495.299388555], | |
zoom: 9.3 | |
}), | |
controls: ol.control.defaults({ | |
attributionOptions: ({ | |
collapsible: true | |
}) | |
}).extend([ | |
new ol.control.OverviewMap(), | |
]), | |
}); | |
/* d3js */ | |
var width = 800, | |
height = 800; | |
var svg = d3.select("#map") | |
.append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
var files = ["mines.json", "mines_centroid.json"]; | |
var promises = []; | |
files.forEach(function (url) { | |
promises.push(d3.json(url)); | |
}); | |
Promise.all(promises).then(function (val) { | |
drawMap(val[0], val[1]); | |
}); | |
var projection = d3.geoMercator(); | |
var geoPath = d3.geoPath() | |
.projection(projection); | |
var radius = d3.scaleLog(); | |
function drawMap(mines, centroid) { | |
projection.center([22.9696994071445, 40.8135651828386]); | |
projection.fitSize([width, height], mines); | |
svg.append("g") | |
.selectAll("path") | |
.data(mines.features) | |
.enter() | |
.append("path") | |
.attr("d", geoPath) | |
.attr("stroke", "blue") | |
.attr("fill", "white") | |
.attr("class", "mines"); | |
addCentroid(centroid); | |
} | |
function addCentroid(centroid) { | |
console.log(centroid); | |
var points = svg.selectAll("circle") | |
.data(centroid.features, function (d) { | |
return d; | |
}) | |
.enter().append("circle") | |
.attr('r', function (d) { | |
return radius(d.properties.Scale) * 1.5 | |
}) | |
.attr('cx', function (d) { | |
return projection(d.geometry.coordinates)[0] | |
}) | |
.attr('cy', function (d) { | |
return projection(d.geometry.coordinates)[1] | |
}) | |
.attr("class", "centroid") | |
.attr("id", function (d) { | |
return d.properties.ID | |
}) | |
} | |
</script> | |
</body> |