Mapa de Actores e Iniciativas v.1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
		<title>Mapa de Actores y Proyectos en Territorio</title>

.nodos:hover{
				cursor: pointer;
			}

.nodos.iniciativa {
				fill: #fff05f;
				stroke-width: 3px;
			}

.nodos.iniciativa_juvenil {
				fill: #ffad5f;
				stroke-width: 3px;
			}

.nodos.gestion{
				fill: #b9def9;
			}

.nodos.acompañamiento{
				fill: #68b3ff;
			}

.nodos.investigacion{
				fill: #336cc5;
			}

.nodos.judicializacion{
				fill: #202b3f;
			}

.nodos.internacional{
				fill: #3881bf;
			}

.nodos.civil{
				fill: #243f78;
			}

.nodos.gestion_nuevos{
				fill: #fafafa;
				stroke: #b9def9;
				stroke-width: 3px;
			}

.nodos.acompañamiento_nuevos{
				fill: #fafafa;
				stroke: #68b3ff;
				stroke-width: 3px;
			}

.nodos.investigacion_nuevos{
				fill: #fafafa;
				stroke: #336cc5;
				stroke-width: 3px;
			}

.nodos.judicializacion_nuevos{
				fill: #fafafa;
				stroke: #202b3f;
				stroke-width: 3px;
			}

.nodos.internacional_nuevos{
				fill: #fafafa;
				stroke: #3881bf;
				stroke-width: 3px;
			}

.nodos.civil_nuevos{
				fill: #fafafa;
				stroke: #243f78;
				stroke-width: 3px;
			}

.leaflet-pane {
    		z-index: 98;
			}

.text{
				font-family: 'Poppins', sans-serif;
				fill: black;
			}

h2 {
	    	display: block;
	    	font-size: 1.5em;
	    	margin-top: 0.1em;
	    	margin-bottom: 0.1em;
	    	margin-left: 0;
	    	margin-right: 0;
	    	font-weight: bold;
			}

h3 {
    		display: block;
    		font-size: 1.17em;
    		margin-top: 0.05em;
    		margin-bottom: 0.05em;
    		margin-left: 0;
    		margin-right: 0;
    		font-weight: bold;
			}

.tooltip {
  			position: absolute;
				z-index: 99;
				width: 300px;
				height: 500px;
				border: 2px dashed #bbbbbb;
  			background-color: white;
				font-family: 'Poppins', sans-serif;
  			font-size: 11px;
  			padding-left: 10px;
				padding-right: 10px;
				padding-top: 10px;
			}

.tooltip_1 {
				position: absolute;
				font-family: 'Poppins', sans-serif;
				text-align: center;
				color: white;
				font-size: 15px;
				text-align: center;
				width: 120px;
				height: 30px;
				z-index: 99;
			}

.tooltip_2 {
				position: absolute;
				font-family: 'Poppins', sans-serif;
				text-align: center;
				color: white;
				font-size: 15px;
				text-align: center;
				width: 150px;
				height: 30px;
				z-index: 99;
			}

.tooltip_logo {
				position: absolute;
				width: 100px;
				height: 100px;
				z-index: 99;
			}

.d3-tip {
				width: 250px;
  			height: 170px;
  			line-height: 1.4;
				font-family: 'Poppins', sans-serif;
				font-size: 10px;
				color: #000;
				padding: 7px;
  			background: rgba(255, 255, 255, 1);
  			border-radius: 10px;
				z-index: 99;
			}

/* 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(255, 255, 255, 1);
			  position: absolute;
			  pointer-events: none;
			}

/* Westward tooltips */
			.d3-tip.w:after {
  			content: "\25B6";
  			margin: -4px 0 0 -1px;
  			top: 50%;
  			left: 100%;
			}

.convenciones{
				position: absolute;
				z-index: 99;
			}

.logos{
				z-index:99
			}

br {
  			display: block;
				margin: 3px 0;
			}

html, body, #map {
        height: 100%;
        width: 100%;
      }

</style>
	</head>
	<body>
		<div id="map" ></div>
		<script src="casita_proyectos_14.js"></script>
	</body>
</html>

https://d3js.org/d3.v4.js

https://unpkg.com/leaflet@1.3.3/dist/leaflet.js