Maps with TopoJSON, Leaflet & Chroma.js http://blog.webkid.io

## countries.topo.json

      
        
            
              
              
            

          Raw
        
        
          
            
          
          
            
              countries.topo.json
            
          
        
      
    

  
      
  
    
      
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
  

  

  

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Maps with Leaflet,TopoJSON & Chroma.js</title>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
  <style>
  *{
    margin:0;
    padding:0;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
  }
  body,html,#worldmap{
    height:100%;
  }
  body{
    color:#333;
    font-family:sans-serif;
  }
  #worldmap{
    background:white;
  }
  .country-name{
    position: absolute;
    top:2em;
    right:1em;
    z-index:6;
    background:rgba(0,0,0,.75);
    color:white;
    padding:.5em .75em;
    font-size:.85em;
    display:none;
  }
  </style>
</head>
<body>

  <div id="worldmap"></div>
  <div class="country-name"></div>

  <script src="//cdnjs.cloudflare.com/ajax/libs/chroma-js/0.5.9/chroma.min.js"></script>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="http://d3js.org/topojson.v1.min.js"></script>
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  <script>
    // Copyright (c) 2013 Ryan Clark
    // https://gist.github.com/rclark/5779673
    L.TopoJSON = L.GeoJSON.extend({
      addData: function(jsonData) {
        if (jsonData.type === "Topology") {
          for (key in jsonData.objects) {
            geojson = topojson.feature(jsonData, jsonData.objects[key]);
            L.GeoJSON.prototype.addData.call(this, geojson);
          }
        }
        else {
          L.GeoJSON.prototype.addData.call(this, jsonData);
        }
      }
    });
  </script>
  <script>

    (function(){

    'use strict'

    var map = L.map('worldmap',{maxZoom:10,minZoom:3}),
      topoLayer = new L.TopoJSON(),
      $countryName = $('.country-name'),
      colorScale = chroma
        .scale(['#D5E3FF', '#003171'])
        .domain([0,1]);

    map.setView([44,-31], 3);

    $.getJSON('data/countries.topo.json').done(addTopoData);

    function addTopoData(topoData){
      topoLayer.addData(topoData);
      topoLayer.addTo(map);
      topoLayer.eachLayer(handleLayer);
    }

    function handleLayer(layer){
        var randomValue = Math.random(),
          fillColor = colorScale(randomValue).hex();

        layer.setStyle({
          fillColor : fillColor,
          fillOpacity: 1,
          color:'#555',
          weight:1,
          opacity:.5
        });

        layer.on({
          mouseover : enterLayer,
          mouseout: leaveLayer
        });
    }

    function enterLayer(){
      var countryName = this.feature.properties.name;
      $countryName.text(countryName).show();

      this.bringToFront();
      this.setStyle({
        weight:2,
        opacity: 1
      });
    }

    function leaveLayer(){
      $countryName.hide();

      this.bringToBack();
      this.setStyle({
        weight:1,
        opacity:.5
      });
    }

    }());
  </script>
</body>
</html>