d3.carto.minimap - d3.carto.map

readme.md

Using d3.carto.minimap with d3.carto.map.

Drag the main map around and zoom in and zoom out to see the bounds change in the minimap.

The minimap creates its own d3.carto.map and, with minimap.tandem() will take the layers from the main map and recreate them in the minimap.

d3map.css

path,circle,rect,polygon,ellipse,line {
    vector-effect: non-scaling-stroke;
}
svg, canvas {
    top: 0;
}
#d3MapZoomBox {
    position: absolute;
    z-index: 10;
    height: 100px;
    width: 25px;
    top: 10px;
    right: 50px;
}

#d3MapZoomBox > button {
    height:25px;
    width: 25px;
    line-height: 25px;
}


.d3MapControlsBox > button {
  font-size:22px;
  font-weight:900;
  border: none;
  height:25px;
  width:25px;
  background: rgba(35,31,32,.85);
  color: white;
  padding: 0;
  cursor: pointer;
}

.d3MapControlsBox > button:hover {
  background: black;
}

#d3MapPanBox {
    position: absolute;
    z-index: 10;
    height: 100px;
    width: 25px;
    top: 60px;
    right: 50px;
}
#d3MapPanBox > button {
    height:25px;
    width: 25px;
    line-height: 25px;
}

#d3MapPanBox > button#left {
  position: absolute;
  left: -25px;
  top: 10px;
}

#d3MapPanBox > button#right {
  position: absolute;
  right: -25px;
  top: 10px;
}

#d3MapLayerBox {
    position: relative;
    z-index: 10;
    height: 100px;
    width: 120px;
    top: 10px;
    left: 10px;
    overflow: auto;
    color: white;
    background: rgba(35,31,32,.85);
}

#d3MapLayerBox > div {
    margin: 5px;
    border: none;
}

#d3MapLayerBox ul {
    list-style: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}
#d3MapLayerBox li {
    list-style: none;
    padding: 0;
}

#d3MapLayerBox li:hover {
    font-weight:700;
}

#d3MapLayerBox li input {
    cursor: pointer;
}

div.d3MapModal {
    position: absolute;
    z-index: 11;
    background: rgba(35,31,32,.90);
    top: 50px;
    left: 50px;
    color: white;
    max-width: 400px;
}

div.d3MapModalContent {
    width:100%;
    height: 100%;
    overflow: auto;
}

div.d3MapModalContent > p {
    padding: 0px 20px;
    margin: 5px 0;
}

div.d3MapModalContent > h1 {
    padding: 0px 20px;
    font-size: 20px;
}

div.d3MapModalArrow {
    content: "";
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid rgba(35,31,32,.90);
        position: absolute;
        bottom: -20px;
        left: 33px;
}


#d3MapSVG {

}

rect.minimap-extent {
    fill: rgba(200,255,255,0.35);
    stroke: black;
    stroke-width: 2px;
    stroke-dasharray: 5 5;
}

circle.newpoints {
    fill: black;
    stroke: red;
    stroke-width: 2px;
}

path.newfeatures {
    fill: steelblue;
    fill-opacity: .5;
    stroke: pink;
    stroke-width: 2px;
}

example.css

.countrylabel {
    font-size: 12px;
    color: red;
    text-anchor: middle;
    pointer-events: none;
    font-weight: 900;
}

.wards {
    fill: gray;
    stroke: gray;
    stroke-width: 1px;
}

.countryborders {
    fill: rgba(0,0,0,0);
    stroke-width: 1px;
    stroke: gray;
    cursor: pointer;
}

.invisible {
    fill: rgba(0,0,0,0);
    stroke-width: 0;
    stroke: black;
    cursor: pointer;
}

.countries {
    fill: none;
    stroke-width: 1px;
    stroke: black;
    opacity: 1;
}

.halffilledcountries {
    fill: rgba(224,224,209,0.5);
    stroke-width: 1px;
    stroke: black;
    opacity: 1;    
}

.filledcountries {
    fill: #E0E0D1;
    stroke-width: 1px;
    stroke: black;
    opacity: 1;
}

.francelike {
    fill: steelblue;
    stroke-width: 2px;
    stroke: lightgray;
}

.roads {
    stroke: brown;
    stroke-width: 1px;
    fill: none;
}

.rivers {
    stroke: blue;
    stroke-width: 2px;
    fill: none;
    opacity: 1;
}

.thickborders {
    stroke: brown;
    stroke-width: 2px;
    fill: none;
}

circle {
    fill: black;
    stroke: red;
}

circle.pinkcircle {
    fill: pink;
    stroke: black;
    stroke-width: 1;
    opacity: 1
}

circle.greencircle {
    fill: green;
    stroke: red;
    opacity: 1;
    stroke-width: 3;
}

  #infoBox {
    position: fixed;
    z-index: 1;
    bottom: 150px;
    right: 150px;
    background: white;
    border: 1px gray dashed;
    padding:20px;
    width: 200px;
  }

index.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>d3.carto.map - d3.carto.minimap</title>
  <meta charset="utf-8" />
    <link type="text/css" rel="stylesheet" href="d3map.css" />
    <link type="text/css" rel="stylesheet" href="example.css" />
</head>
<style>
  html,body {
    height: 100%;
    width: 100%;
    margin: 0;
  }

  #map {
    height: 100%;
    width: 100%;
    position: absolute;
  }
  
  #minimap {
        height: 25%;
        width: 25%;
        bottom: 5%;
        left: 5%;
        position: absolute;
        background: red;
        border:yellow 1px solid;
        z-index: 1;
      }

</style>
<script>
    function makeSomeMaps() {

        var map = d3.carto.map();
        d3.select("#map").call(map);
        
        var minimap = d3.carto.minimap();
        d3.select("#minimap").call(minimap);

        //Link the minimap to the full-sized map
        minimap.tandem(map);

        //Change the default scale of the minimap by accessing the d3.carto.map that it creates with d3.carto.minimap.map()
        minimap.map().setScale(1);

        var tileLayer = d3.carto.layer()
          .type("tile")
          .path("examples.map-zgrqqx0w")
          .label("Base")
          .on("load", recenter);

        var geojsonLayer = d3.carto.layer()
          .type("geojson")
          .path("http://bl.ocks.org/emeeks/raw/c970c9ee3e242e90004b/world.geojson")
          .label("GeoBorders")
          .cssClass("countryborders")
          .renderMode("canvas")
          .on("load", createFeatureLayer);

        var topojsonLayer = d3.carto.layer()
          .type("topojson")
          .path("http://bl.ocks.org/emeeks/raw/c970c9ee3e242e90004b/sample_routes.topojson")
          .label("TopoRoutes")
          .cssClass("roads")
          .renderMode("canvas");

        var csvLayer = d3.carto.layer()
          .type("csv")
          .path("http://bl.ocks.org/emeeks/raw/c970c9ee3e242e90004b/sample_points.csv")
          .label("CSV Points")
          .cssClass("pinkcircle")
          .renderMode("svg")
          .markerSize(2)
          .x("x")
          .y("y")
          .on("load", changeMarkers);

        var xyLayer = d3.carto.layer()
          .type("xyarray")
          .features([{x: 5, y: 40},{x: 5, y: 50}])
          .label("XY Array")
          .cssClass("greencircle")
          .renderMode("svg")
          .markerSize(4)
          .x("x")
          .y("y");

        map.addCartoLayer(tileLayer);
        map.addCartoLayer(topojsonLayer);
        map.addCartoLayer(geojsonLayer);
        map.addCartoLayer(csvLayer);
        map.addCartoLayer(xyLayer);

        function recenter() {
          map.setScale(6)
          map.centerOn([6,45.507],"latlong");
        }

        function changeMarkers() {
          csvLayer.g().selectAll("circle").remove();

          csvLayer.g().selectAll("g.marker")
            .append("rect")
            .attr("class", "bluesquare")
            .attr("height", 5)
            .attr("width",5)
            .attr("x",-2.5)
            .attr("y",-2.5);

        }


        function createFeatureLayer() {
          var featuresArray = [];
          var mapLayers = map.layers();
          mapLayers.forEach(function (layer) {
            if (layer.label() == "GeoBorders") {
              featuresArray = layer.features();
            }
          })

          var shortNameCountries = featuresArray.filter(function(d) {
            return d.properties.name.length < 7;
          });

          var featureLayer = d3.carto.layer()
            .type("featurearray")
            .features(shortNameCountries)
            .label("Feature Array")
            .cssClass("halffilledcountries")
            .renderMode("svg");

          map.addCartoLayer(featureLayer);

        }

      }

</script>
<body onload="makeSomeMaps()">
<div id="map"></div>
<div id="minimap"></div>
<footer>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="http://d3js.org/topojson.v1.min.js" type="text/javascript">
</script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js" type="text/javascript">
</script>
<script src="http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js" type="text/javascript">
</script>
<script src="http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.quadtiles.js" type="text/javascript">
</script>
<script src="http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.geo.raster.js" type="text/javascript">
</script>
<script src="https://rawgit.com/emeeks/d3-carto-map/master/d3.carto.map.js" type="text/javascript">
</script>
</footer>
</body>
</html>

thumbnail.png