CODEWITHSUNDEEP
d3.js
Neko
Neko

Reputation: 65

d3 js markers don't display on map

I have a problem with d3.js. Markers display below the map instead on it. Here's the code:

<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="http://d3js.org/colorbrewer.v1.min.js"></script>

<script src="http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js" type="text/javascript">
</script>
<script src="http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.quadtiles.js" type="text/javascript">
</script>
<script src="http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.geo.raster.js" type="text/javascript">
</script>
<script src="https://rawgit.com/emeeks/d3-carto-map/master/d3.carto.map.js" type="text/javascript">
</script>
<style>
.markerButton {
    position: fixed;
    top: 20px;
    cursor: pointer;
    z-index: 99;
  }

body {
  background: #fcfcfa;
}

.stroke {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}

.fill {
  fill: #fff;
}

.graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: .5;
}

.land {
  fill: #222;
}

.boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}

</style>
<body onload="makeSomeMaps()">




<script>

var width = 960,
    height = 500;

var projection = d3.geo.mollweide()
    .scale(165)
    .translate([width / 2, height / 2])
    .precision(.1);

var path = d3.geo.path()
    .projection(projection);

var graticule = d3.geo.graticule();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("defs").append("path")
    .datum({type: "Sphere"})
    .attr("id", "sphere")
    .attr("d", path);

svg.append("use")
    .attr("class", "stroke")
    .attr("xlink:href", "#sphere");

svg.append("use")
    .attr("class", "fill")
    .attr("xlink:href", "#sphere");

svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);

d3.json("world-50m.json", function(error, world) {
  if (error) throw error;

  svg.insert("path", ".graticule")
      .datum(topojson.feature(world, world.objects.land))
      .attr("class", "land")
      .attr("d", path);

  svg.insert("path", ".graticule")
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
      .attr("class", "boundary")
      .attr("d", path);
});

d3.select(self.frameElement).style("height", height + "px");
function circleMarker() {
    var sizeScale = d3.scale.linear().domain([0,100,2000]).range([2,10,20]).clamp(true);
    var randomDatapoint = "r" + Math.ceil(Math.random() * 7);
    d3.selectAll("g.marker").selectAll("*").remove();
    d3.selectAll("g.marker").append("circle")
    .attr("class", "metro")
    .attr("r", function(d) {return sizeScale(d[randomDatapoint])})
  }
function makeSomeMaps() {
    map = d3.carto.map();




    d3.select("#map").call(map);
    map.centerOn([-99,39],"latlong");
    map.setScale(4);

    map.refresh();

cityLayer = d3.carto.layer.csv();
    cityLayer
    .path("cities.csv")
    .label("Metro Areas")
    .cssClass("metro")
    .renderMode("svg")
    .x("x")
    .y("y")
    .clickableFeatures(true)
    .on("load", function(){console.log(cityLayer.dataset())});

    map.addCartoLayer(cityLayer);

}



</script>
<div id="map">
<button style="left: 340px;" class="markerButton" onclick="circleMarker();">Circle Marker</button>
</div>

</body>
</html>

Please find link to site live: http://www.ewelinawoloszyn.com/mymap/d3_projection03.html

Perhaps it's something to do with map.centerOn? Many thanks in advance for your help.

Upvotes: 0

Views: 963

Answers (1)

spyrostheodoridis
spyrostheodoridis

Reputation: 518

I suspect it's the asynchronous rendering nature of html/javascript. I had a similar issue in the past and I solved it by defining different layers/groups for the map and the markers. Something like:

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var map = svg.append("g");
var markers = svg.append("g");

and then append the map and the markers in these predefined layers. The markers will appear on top of the map because you define their layer after the map layer. In your case you should probably define a layer for each element (graticule layer etc.)

Upvotes: 1

Related Questions