D3 Examples - London Postboxes

xxxxxxxxxx
 
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>d3.carto - Automatic Hexbinning</title>
  <meta charset="utf-8" />
    <link type="text/css" rel="stylesheet" href="d3map.css" />
​
</head>
<style>
  html,body {
    height: 100%;
    width: 100%;
    margin: 0;
  }
​
  #map {
    height: 100%;
    width: 100%;
    position: absolute;
  }
​
​
  .golden {
    fill: #FFD700;
    stroke: darkred;
    stroke-width: 1
  }
​
​
    .red {
    fill: red;
    stroke: darkred;
    stroke-width: 1
    opacity:0.5;
  }
​
  h1 {
    font-family: ChevinLight;
​
  }
​
</style>
<script>
      function makeSomeMaps() {
    map = d3.carto.map();
​
    d3.select("#map").call(map);
    
    tileLayer = d3.carto.layer();
    tileLayer
    .type("tile")
    .path("elijahmeeks.map-azn21pbi")
    .label("Base")
    
    csvLayer = d3.carto.layer.csv();
    csvLayer
    .path("Golden.csv")
    .label("Gold")
    .cssClass("golden")
    .renderMode("svg")
    .markerColor("black")
    .markerSize(7)
    .x("xcoord")
    .y("ycoord")
    .clickableFeatures(true)
​
​
​
        csvLayer2 = d3.carto.layer.csv();
    csvLayer2
    .path("RedLondon.csv")
    .label("Red")
    .cssClass("red")
    .renderMode("svg")
    .markerColor("red")
    .markerSize(3)
    .x("xcoord")
    .y("ycoord")
    .clickableFeatures(true)
    //.on("load", makeHexbins)
    
    map.addCartoLayer(tileLayer).addCartoLayer(csvLayer).addCartoLayer(csvLayer2);
    map.centerOn([-0.127758,51.507351],"latlong").setScale(11);
    
   
​
  }
</script>
<body onload="makeSomeMaps()">
  <h1>London Red & Gold Letter Boxes</h1>
<div id="map"></div>
<footer>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
​
​
<script src="/emeeks/f3105fda25ff785dc5ed/example/tile.js" type="text/javascript">
</script>
​
<script src="https://cdn.jsdelivr.net/gh/emeeks/d3-carto-map/d3.carto.map.js" type="text/javascript">
</script>
​
</footer>
</body>
</html>
    