D3 Examples - d3.carto.minimap

xxxxxxxxxx
 
<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>
    