Saudi Arabia - Highmaps

Highmaps demo

HTML

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>

<div id="map"></div>

JavaScript

var width = 960,
    height = 1160;

// SVG element as a JavaScript object that we can manipulate later
var svg = d3.select("#map").append("svg")
      .attr("width", width)
      .attr("height", height);

var center = [24.679341, 46.680381];

// Instantiate the projection object
var projection = d3.geo.mercator()
      .center(center)
      .clipAngle(180)
          // Size of the map itself, you may want to play around with this in
          // relation to your canvas size
      .scale(10000)
          // Center the map in the middle of the canvas
      .translate([width / 2, height / 2])
      .precision(.1);

// Assign the projection to a path
var path = d3.geo.path().projection(projection);

d3.json("https://raw.githubusercontent.com/bumbeishvili/Assets/master/Other/junk/sa-all.geo.json", function(err, data) {
debugger;
  
  svg.selectAll('path')
      .data(data.features)
      .enter()
      .append("path")
      .attr("d", path)
      .attr("class", "border")
      .attr("stroke", "black")
      .attr("fill", "blue");
      
});