Built with blockbuilder.org
xxxxxxxxxx
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mapa de Actores y Proyectos en Territorio</title>
<script src="https://d3js.org/d3.v4.js"></script>
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"></script>
<style type="text/css">
.link {
stroke: black;
stroke-opacity: .5;
stroke-width: 2;
opacity: 0;
}
.nodos.urbano {
fill: blue;
}
.nodos.ambiental {
fill: green;
}
.nodos.inclusion{
fill: yellow;
}
.nodos.actor{
fill: orange;
}
.nodos.colaborador{
fill: red;
}
.nodos.financiador{
fill: purple;
}
.d3-tip {
line-height: 1;
font-weight: bold;
font-family: 'Varela Round', sans-serif;
text-align: center;
font-size: 10px;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 1px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips specifically */
.d3-tip.n:after {
margin: -2px 0 0 0;
top: 100%;
left: 0;
}
</style>
</head>
<body>
<div id="map" style="width: 1300px; height: 900px"></div>
<script src="panama_nodos_mapa10.js"></script>
</body>
</html>
https://d3js.org/d3.v4.js
https://unpkg.com/leaflet@1.3.3/dist/leaflet.js