html {
  height: 100%;
}
body {
  background: #cbcbcb;
  height: inherit;
  overflow: hidden;
}

.map {
  height: 100%;
  
}
.water {
  fill: black;
}
.land {
  stroke:black;
  stroke-width: 0.3px;
}
.land:hover{
  stroke: #000;
  stroke-width: 1.5px;
}
#tooltip {display:none;
  position:absolute;
  background-color:#007BFF;
  padding: .5em;
  border-radius: 2px; 
  box-shadow: 0px 0px 2px 0px #696969; 
  opacity: 0.9;
  color: white;}

var jMap = $(".map"),
    height= jMap.height(),
    width= jMap.width(),
    mapJsonUrl = 'https://gist.githubusercontent.com/ThadchaiA/04f1fad02c36a461f6c649f65ec9b050/raw/301bef119e9aaea16fd76c509c40ed7a9d2ee071/worldJsonUrl2.json',

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

//urbanization-color
var body = d3.select("body");

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");
var urbanization = d3.map();

var path = d3.geoPath();

var x = d3.scaleLinear()
    .domain([-1.2, 8.54])
    .rangeRound([600, 860]);

var color_range = ["#ed2525","#ed7c7c","#f4e7f2","#a0cdf4","#8dbeea","#6aa0cf","#4980af","#2c608d","#1a4a73","#093153","#021e37"
];
var color = d3.scaleThreshold()
    .domain(d3.range(-1, 9))
    .range(color_range);

var g = svg.append("g")
    .attr("class", "key")
    .attr("id", "legend")
    .attr("transform", "translate(-530,500)");

g.selectAll("rect")
  .data(color.range().map(function(d) {
      d = color.invertExtent(d);
      if (d[0] == null) d[0] = x.domain()[0];
      if (d[1] == null) d[1] = x.domain()[1];
      return d;
    }))
  .enter().append("rect")
    .attr("height", 8)
    .attr("x", function(d) { return x(d[0]); })
    .attr("width", function(d) { return x(d[1]) - x(d[0]); })
    .attr("fill", function(d) { return color(d[0]); });

g.append("text")
    .attr("class", "caption")
    .attr("x", x.range()[0])
    .attr("y", -6)
    .attr("fill", "#000")
    .attr("text-anchor", "start")
    .attr("font-weight", "bold")

g.call(d3.axisBottom(x)
    .tickSize(13)
    .tickFormat(function(x) { return Math.round(x)})
    .tickValues(color.domain()))
    .select(".domain")
    .remove();


  var getProjection = function(worldJson) {
  var scale = 1,
      offset = [ width/ 2, height/ 2],
      projection= d3.geoEquirectangular().scale( scale).rotate( [0,0]).center([0, 5]).translate( offset ), bounds = mercatorBounds( projection), scaleExtent;
  
    scale= width / (bounds [1][0]-bounds [0][0]);
    scaleExtent = [scale, 10* scale ];
  projection
  .scale( scaleExtent [ 0 ]);
  return projection;
},
    
mercatorBounds = function(projection)
{var maxlat= 83,
yaw = projection.rotate() [0],
xymax= projection( [-yaw + 180 - 1e-6, -maxlat]),
    xymin= projection ([-yaw - 180 + 1e-6, maxlat ]); 
return [ xymin, xymax];
};


//map
d3.json(mapJsonUrl, function (error, worldJson) {if (error) throw error;
 var projection = getProjection(),    
     path= d3.geoPath(). projection(projection);

  svg.selectAll('path.land')
     .data( topojson.feature(
worldJson, worldJson.objects.countries).features )
     .enter().append ('path')
     .attr ('class', 'land')
     .attr ('d', path)
     .attr ("fill", (d)=>{      
        const urban = d.properties.rate;
        if(urban < -1)
        {  
          return  color_range[0];
        }
        else if(urban < 0)
        {  
          return  color_range[1];
        }
        else if(urban < 1)
        {  
          return  color_range[2];
        }
        else if(urban < 2)
        {  
          return  color_range[3];
        }
        else if(urban < 3)
        {  
          return  color_range[4];
        }
        else if(urban < 4)
        {  
          return  color_range[5];
        }
        else if(urban < 5)
        {  
          return  color_range[6];
        }
        else if(urban < 6)
        {  
          return  color_range[7];
        }
        else if(urban < 7)
        {  
          return  color_range[8];
        }
        else if(urban < 8)
        {  
          return  color_range[9];
        }
        else if(urban < 9)
        {  
          return  color_range[10];
        }
        else
        {  
          return  "#f7f7f7";
        }
        })
     
                                                 
.on("mouseover", function(d){
           
           var tooltipDiv = document.getElementById('tooltip');
           tooltipDiv.innerHTML = d.properties.name + "<br>" + "urbanization: " +d.properties.rate +"%" ;
           tooltipDiv.style.top = 50+'vh';
           tooltipDiv.style.left = 5+'vw';
           tooltipDiv.style.display = "block";
       })
.on("mouseout", function(d){
               d3.select(this);
               var tooltipDiv = document.getElementById('tooltip');
               tooltipDiv.style.display = "none";
           });
});