The goal is to interact with the DOM based on users input using JavaScript. I have now considered using D3js (v5) to draw the points. Without the base vector layers (loaded as a geojson) and OpenLayers, the data gets drawn with D3js but when put together I do not see it on. Below is my code.

For JavaScript files

    var width = 800,
    height = 800;
var svg = d3.select("#map")
    .attr("width", width)
    .attr("height", height);

var files = ['../data/mines.geojson', "../data/mines_centroid.geojson"];

var promises = [];

files.forEach(function (url) {

Promise.all(promises).then(function (val) {
    drawMap(val[0], val[1])

var projection = d3.geoMercator();

var geoPath = d3.geoPath()

var radius = d3.scaleLog();

function drawMap(mines, centroid) {
    projection.center([22.9696994071445, 40.8135651828386]);
    projection.fitSize([width, height], mines);
        .attr("d", geoPath)
        .attr("stroke", "blue")
        .attr("fill", "white")
        .attr("class", "mines");

function addCentroid(centroid) {

    var points = svg.selectAll("circle")
        .data(centroid.features, function (d) {
            return d;
        .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


My GeoJSON looks like this.

  "type": "FeatureCollection",
  "crs": {
    "type": "name",
    "properties": {
      "name": "EPSG:4326"
  "features": [
      "type": "Feature",
      "id": 1,
      "geometry": {
        "type": "Point",
        "coordinates": [
      "properties": {
        "FID": 1,
        "OBJECTID": 119,
        "ID": "GR-4291",
        "Code_12": "131",
        "Remark": " ",
        "Scale": 10,
        "Area_ha": 95.6086248776,
        "Shape_Leng": 6533.9468799,
        "code00": 13,
        "Shape_Le_1": 6533.9468799,
        "Shape_Area": 956086.248776,
        "ORIG_FID": 0
  • Could you provide a reproducible code example, preferably in some code playground like jsfiddle? Can be fake data. Commented Jan 13, 2019 at 19:14
  • jsfiddle.net/bayoishola20/wj9myu0o/28. The JS code in my original post was stored in another file and linked as "centroid.js". Not sure how to do that on fiddle. Thank you!
    – b_jugger
    Commented Jan 13, 2019 at 23:55
  • You will have to include some example data. Maybe plnkr.co/edit is more suitable in this case (it let's you add an arbitrary number of files). Commented Jan 14, 2019 at 9:47
  • Thank you, Stefan. Here it is now. online code
    – b_jugger
    Commented Jan 14, 2019 at 13:07
  • Okay, I see an orange polygon on a Greek peninsula. What should the result look like? Commented Jan 15, 2019 at 14:14

1 Answer 1


Fixing some minor issues in your code makes the example work. Some of them were:

  1. Linking d3js v5 instead of v3.
  2. Making the svg position absolute on the same position as the map.

Here is the cleaned up code showing your features on the map.

enter image description here


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.