Visited countries map with different map projections

There are a couple of websites, where you can create a map of the countries you visited, e.g. http://www.amcharts.com/visited_countries. I think, this would be a cool thing to add to my travel blog. However, all pages I could find, use a Mercator projection for the map, which I don't particularly like. I was wondering, if anyone knows of a way to create these kind of maps for different map projections (like Hobo-Dyer or Gall-Peters).

maps

Best Answer

If you want something more interactive done in javascript, the d3js library has some lovely "choropleth" examples

Sorry this is another coding answer though, so you'll have to adapt it to your needs as well as persuading the whole thing to run within whatever blogging system you use.

Here I've adapted this choropleth example, swapped to a different projection, remove the "world populations" csv data source and replaced it with a few more basic lines of "countries visited" data (on a scale of 0 to 2)

<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="http://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>

<!-- Create an element where the map will take place -->
<svg id="my_dataviz" width="600" height="500"></svg>

<script>
// The svg
var svg = d3.select("svg"),
  width = +svg.attr("width"),
  height = +svg.attr("height");

// Map and projection
var path = d3.geoPath();
var projection = d3.geoNaturalEarth()
    .scale(width / 2 / Math.PI)
    .translate([width / 2, height / 2])

// Data and color scale
var data = d3.map();
var colorScale = d3.scaleThreshold()
  .domain([0, 1, 2])
  .range(d3.schemeBlues[3]);

// Load external data and boot
d3.queue()
  .defer(d3.json, "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson")
  .await(ready);

function ready(error, topo) {
  // Visited country codes. 1 time / 2 or more times.
  data.set("GBR", 2);
  data.set("IRL", 1);
  data.set("FRA", 2);
  data.set("ESP", 2);
  data.set("BRA", 2);
  data.set("ARG", 1);
  data.set("CHN", 1);
  data.set("EGY", 1);
  
  let mouseOver = function(d) {
    d3.selectAll(".Country")
      .transition()
      .duration(200)
      .style("opacity", .5)
    d3.select(this)
      .transition()
      .duration(200)
      .style("opacity", 1)
  }

  let mouseLeave = function(d) {
    d3.selectAll(".Country")
      .transition()
      .duration(200)
      .style("opacity", .8)
    d3.select(this)
      .transition()
      .duration(200)
      .style("stroke", "transparent")
  }

  // Draw the map
  svg.append("g")
    .selectAll("path")
    .data(topo.features)
    .enter()
    .append("path")
      // draw each country
      .attr("d", d3.geoPath()
        .projection(projection)
      )
      // set the color of each country
      .attr("fill", function (d) {
        d.total = data.get(d.id) || 0;
        return colorScale(d.total);
      })
      .style("stroke", "transparent")
      .attr("class", function(d){ return "Country" } )
      .style("opacity", .8)
      .on("mouseover", mouseOver )
      .on("mouseleave", mouseLeave )
    }

</script>

For less coding I guess ideally you'd want something like this as for example a wordpress plugin.

Pictures about "Visited countries map with different map projections"

Visited countries map with different map projections - Top view of creative world continents made of various nuts and assorted dried fruits on white background in light room

Visited countries map with different map projections - Compass Placed on a World Map

Visited countries map with different map projections - Set of various supplies for traveling

How do I highlight multiple countries on a map?

Keyboard Shortcuts

Right-click on a country to:

Hold Control and move your mouse over the map to quickly color several countries. Holding Control + Shift has the opposite result.

Control + Z undoes your latest action. ...

In the legend table, click on a color box to change the color for all countries in the group.

What are the 5 different map projections?

Top 5 different world map projections you need to know about

The Mercator Projection.
The Mollweide Projection.
The Peters Projection.
The Winkel Tripel Projection.
The Robinson Projection.

What is the most accurate world map projection?

AuthaGraph. This is hands-down the most accurate map projection in existence. In fact, AuthaGraph World Map is so proportionally perfect, it magically folds it into a three-dimensional globe. Japanese architect Hajime Narukawa invented this projection in 1999 by equally dividing a spherical surface into 96 triangles.

How do I create a map of places visited?

Once you have an account, click on the \u201cMy Maps\u201d tab on Google Maps. Select \u201cCreate New Map\u201d and name your map. You'll now be able to add place markers and lines to your map by clicking the icons in the top left of your map. When you set a marker, you can give it a name.

Why all world maps are wrong

Sources: Stack Exchange - This article follows the attribution requirements of Stack Exchange and is licensed under CC BY-SA 3.0.

Images: Nothing Ahead, Monstera, Lara Jameson, Rachel Claire