d3.carto.minimap - d3.carto.map

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.

<html xmlns="https://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("https://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("https://bl.ocks.org/emeeks/raw/c970c9ee3e242e90004b/sample_routes.topojson")
          .label("TopoRoutes")
          .cssClass("roads")
          .renderMode("canvas");

var csvLayer = d3.carto.layer()
          .type("csv")
          .path("https://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="https://d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="https://d3js.org/topojson.v1.min.js" type="text/javascript">
</script>
<script src="https://d3js.org/d3.geo.projection.v0.min.js" type="text/javascript">
</script>
<script src="/emeeks/f3105fda25ff785dc5ed/example/tile.js" type="text/javascript">
</script>
<script src="/emeeks/f3105fda25ff785dc5ed/example/d3.quadtiles.js" type="text/javascript">
</script>
<script src="/emeeks/f3105fda25ff785dc5ed/example/d3.geo.raster.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>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

Modified http://d3js.org/d3.geo.projection.v0.min.js to a secure url

Updated missing url http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js to /emeeks/f3105fda25ff785dc5ed/example/tile.js

Updated missing url http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.quadtiles.js to /emeeks/f3105fda25ff785dc5ed/example/d3.quadtiles.js

Updated missing url http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.geo.raster.js to /emeeks/f3105fda25ff785dc5ed/example/d3.geo.raster.js

Updated missing url https://rawgit.com/emeeks/d3-carto-map/master/d3.carto.map.js to https://cdn.jsdelivr.net/gh/emeeks/d3-carto-map/d3.carto.map.js

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js

https://d3js.org/d3.geo.projection.v0.min.js

https://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js

https://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.quadtiles.js

https://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.geo.raster.js

https://rawgit.com/emeeks/d3-carto-map/master/d3.carto.map.js