Skip to content

Instantly share code, notes, and snippets.

@cpietsch

cpietsch/README.md

Last active Oct 29, 2020
Embed
What would you like to do?
d3.js map with markers

Easy example on how to put marker on a d3.js map.

You got 2 options:

  • using d3.geo.path() which does all the work for you
  • using svg circles and translating them via projection(d.geometry.coordinates)
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.graticule {
fill: none;
stroke: #777;
stroke-opacity: .5;
stroke-width: .5px;
}
.land {
fill: #222;
}
.boundary {
fill: none;
stroke: #fff;
stroke-width: .5px;
}
circle {
fill: yellow;
}
.geopath {
fill: green;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
var width = 1200,
height = 720;
var projection = d3.geo.mercator()
.scale(8000)
.precision(.1)
.center([13.320255,52.52831499])
.translate([width / 2, height / 2])
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("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
d3.json("world-50m.json", function(error, world) {
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.json("stops_berlin.geojson", function(error, data) {
// using d3.geo.path() which does all the work for you
svg.append("path")
.datum(data)
.classed("geopath", true)
.attr("d", path)
// or insert your own custom dots by hand
svg.append("g")
.selectAll("g")
.data(data.features)
.enter()
.append("g")
.attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; })
.append("circle")
.attr("r", 1)
});
d3.select(self.frameElement).style("height", height + "px");
</script>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View raw

(Sorry about that, but we can’t show files that are this big right now.)

@AtulDabhi

This comment has been minimized.

Copy link

@AtulDabhi AtulDabhi commented Nov 14, 2019

I have downloaded the zip file but the map does not work. In the browser, it shows only a vertical line. It shows generated and elements when I inspected in developer toolbar.
Any help to get this example working?

@cpietsch

This comment has been minimized.

Copy link
Owner Author

@cpietsch cpietsch commented Nov 15, 2019

Hey Atul, this is a quiet old example but it still works: http://bl.ocks.org/cpietsch/dc76fc25863458a6a83e

@dancrisan

This comment has been minimized.

Copy link

@dancrisan dancrisan commented Apr 14, 2020

In the link that you've provided, in doesn't indeed seem like it works.

Screen Shot 2020-04-13 at 8 56 19 PM

@v3nt

This comment has been minimized.

Copy link

@v3nt v3nt commented Oct 29, 2020

Really struggling with clustering of icons on a. project and this seem the most promising so far.

What is the actual code that creates the clusters? I've laid out my location dots with this but they do not cluster. Data is in a CSV format and the x, y. placement is accurate. No errors.

Any pointers welcomed & much appreciated!

Screenshot 2020-10-29 at 09 49 01

  svg
    .append("g")
    .attr("class", "cluster-markers")
    .selectAll("g")
    .data(locations)
    .enter()
    .append("g")
    .attr("data-date", (d) => console.log(d))
    .attr("transform", function (d) {
      return "translate(" + projection([d.lng, d.lat]) + ")";
    })
    .append("circle")
    .attr("r", 1);

data

data,,city,country,region,lat,lng,ccode,maintext,Tier,Category,,,
1979-02-01,,,Yemen,Middle East,15.552727,48.516388,YE,,,,,,
1979-02-11,,,Iran,Middle East,32.427908,53.688046,IR,,,,,,
@cpietsch

This comment has been minimized.

Copy link
Owner Author

@cpietsch cpietsch commented Oct 29, 2020

You are using circles as the markers and it works. The example does not do clustering, it just overlays all the circles.
The green outline is created by

svg.append("path")
    .datum(data)
    .classed("geopath", true)
    .attr("d", path)

which makes it look like they are fused together.
Hope this answers your question.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.