63anp3ca/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    A simple map example created with d3.carto.map that loads a single geoJSON layer.
forked from emeeks's block: Simple Map - d3.carto

  
## 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;
}

## index.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>d3.carto - Basic d3.carto Map</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;
  }

  .country {
    fill-opacity: 1;
    fill: #4682B4;
    stroke-opacity: 1;
    stroke: black;
    stroke-width: 2px;
  }

</style>
<script>
    function makeSomeMaps() {
    map = d3.carto.map();

    d3.select("#map").call(map);

    countryLayer = d3.carto.layer.geojson();

    countryLayer.path("world.geojson")
    .label("Countries")
    .renderMode("svg")
    .cssClass("country")
    .clickableFeatures(true);

    map.addCartoLayer(countryLayer);
    map.setScale(2);

  }
</script>
<body onload="makeSomeMaps()">
<div id="map"></div>
<footer>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8" 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>

## world.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world.geojson
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	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;
	}
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>d3.carto - Basic d3.carto Map</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;
	}

	.country {
	fill-opacity: 1;
	fill: #4682B4;
	stroke-opacity: 1;
	stroke: black;
	stroke-width: 2px;
	}

	</style>
	<script>
	function makeSomeMaps() {
	map = d3.carto.map();

	d3.select("#map").call(map);

	countryLayer = d3.carto.layer.geojson();

	countryLayer.path("world.geojson")
	.label("Countries")
	.renderMode("svg")
	.cssClass("country")
	.clickableFeatures(true);

	map.addCartoLayer(countryLayer);
	map.setScale(2);

	}
	</script>
	<body onload="makeSomeMaps()">
	<div id="map"></div>
	<footer>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8" 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>