HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<link href="https://fonts.googleapis.com/css?family=Alegreya|Staatliches|Passion+One" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
<div id="dvHtmlString">
<div id="popTorno"><div id="content"><div id="bodyContent"><div class="fondocita"> <span class="lblCabildo">CABILDO TORNO ROJO</span><span class="lblDistancia">Distancia de la operación de Cerro Matoso: 4.150 metros</span><img id="itorno" src="#" class="imgCabildo" /><div class="derecha"><img id="irtorno" src="#" class="imgRetrato" /><p class="lblnombrecita">Nefri Reyes, cabildo Torno Rojo</p></div><div class="cita"><span><span class="comilla">"</span>Nos dicen que no están contaminando, que ellos hacen todo un plan de manejo ambiental lo más excelente, vigilado por la Anla. Eso lo pudieron hacer de 10 años para acá <b>¿y los otros 26 años, qué?</b>.<span class="comilla">"</span></div></div></div></div></div>
<div id="popFlecha"><div class="fondocita"> <span class="lblCabildo">CABILDO UNIÓN MATOSO <br>PUEBLO FLECHA</span><span class="lblDistancia">Distancia de la operación de Cerro Matoso: 902 metros</span><img id="iflecha" src="#" class="imgCabildo" /><div class="derecha"><img id="irflecha" src="#" class="imgRetrato" /><p class="lblnombrecita">Ramón Carvajal, fundador del cabildo Unión Matoso (Pueblo Flecha)</p></div><div class="cita"><span><span class="comilla">"</span>Con todo mi corazón le digo que estamos así, pero vivíamos en una libertad tan grande, tan linda, tan preciosa... y ahora se llegó todo estrecho.<span class="comilla">"</span></div></div></div>
<div id="popCentro"><div id="content"><div id="bodyContent"><div class="fondocita"> <span class="lblCabildo">CABILDO CENTROAMÉRICA</span><span class="lblDistancia">Distancia de la operación de Cerro Matoso: 3.400 metros</span><img id="icentro" src="#" class="imgCabildo" /><div class="derecha"><img id="ircentro" src="#" class="imgRetrato" /><p class="lblnombrecita">Joaquín Rojas, Gobernador del cabildo Centroamérica</p></div><div class="cita"><span><span class="comilla">"</span>Uno sí dice que Cerro Matoso, pero es que nuestro padre Estado es uno de los culpables también, porque en el momento nos tenía olvidados y se da el caso todavía, que nos tiene olvidados, porque no únicamente es la empresa la que tiene que suplir las necesidades de las comunidades.<span class="comilla">"</span></div></div></div></div></div>
<div id="popOdisea"><div id="content"><div id="bodyContent"><div class="fondocita"> <span class="lblCabildo">CABILDO GUACARÍ-LA ODISEA</span><span class="lblDistancia">Distancia de la operación de Cerro Matoso: 4.130 metros</span><img id="iodisea" src="#" class="imgCabildo" /><div class="derecha"><img id="irodisea" src="#" class="imgRetrato" /><p class="lblnombrecita">Edwin Negrete, Gobernador del cabildo Guacarí-La Odisea</p></div><div class="cita"><span><span class="comilla">"</span>Del 2000 al 2009, cuando nosotros estábamos luchando para ser reconocidos adelante del Ministerio del Interior, por la constitución del resguardo, que es nuestro papá, […] nos asesinaron al alguacil mayor, nos asesinaron a varios gobernadores, en Montelíbano, en varios sectores aquí.<span class="comilla">"</span></div></div></div></div></div>
<div id="popLibertad"><div id="content"><div id="bodyContent"><div class="fondocita"> <span class="lblCabildo">CABILDO PUERTO COLOMBIA</span><span class="lblDistancia">Distancia de la operación de Cerro Matoso: 750 metros</span><img id="ipuerto" src="#" class="imgCabildo" /><div class="derecha"><img id="irpuerto" src="#" class="imgRetrato" /><p class="lblnombrecita">Estela Hoyos, Gobernadora del cabildo Puerto Colombia</p></div><div class="cita"><span><span class="comilla">"</span>La afectación más grande que la empresa Cerro Matoso le ha hecho a la comunidad fue el traslado brusco que tuvo la comunidad de su territorio ancestral hacia acá.<span class="comilla">"</span></div></div></div></div></div>
<div id="popPuente"><div id="content"><div id="bodyContent"><div class="fondocita"> <span class="lblCabildo">CABILDO PUENTE URÉ</span><span class="lblDistancia">Distancia de la operación de Cerro Matoso: 1.360 metros</span><img id="ipuente" src="#" class="imgCabildo" /><div class="derecha"> <p class="lblnombrecita">Sirce, cabildo Puente Uré</p></div><div class="cita"><span><span class="comilla">"</span>Aquí todas las personas sufren de lo mismo: piel, dolor de cabeza, problemas en la vista. ¿Entonces es normal de que eso pase? Algo tiene que ver una cosa con la otra.<span class="comilla">"</span></div></div></div></div></div>
<div id="popBocas"><div id="content"><div id="bodyContent"><div class="fondocita"> <span class="lblCabildo">CABILDO BOCAS DE URÉ</span><span class="lblDistancia">Distancia de la operación de Cerro Matoso: 3.850 metros</span><img id="ibocas" src="#" class="imgCabildo" /><div class="derecha"><img id="irbocas" src="#" class="imgRetrato" /><p class="lblnombrecita">Emiliano Rodiño, sabedor del cabildo Bocas de Uré</p></div><div class="cita"><span><span class="comilla">"</span>Aquí cuidamos mucho de no bañar a los niños pequeños con esa agua. ¿Sabe qué hacemos? ahora estamos utilizando pozos artesanales. Esa es la agüita que, como no le hacemos un estudio y la vemos un poquito más clarita, decimos nosotros que está mejor. Y de pronto sí. <span class="comilla">"</span></div></div></div></div></div>
</div>
<details id="dvGuia" open>
<summary class="lblCabildo">ocultar</summary>
<h2 class="grande">Zenúes vs niquelera<br> en 5 pasos</h2>
<br>
<img src="https://recursosdatoset.files.wordpress.com/2018/09/logosblanco.png" width="150px"/><br>
<p class="lblLead">Descubra el territorio por el que se enfrentan hace 37 años la mina de níquel Cerro Matoso con las comunidades indígenas zenú.</p>
<button type="button" class="leyenda" onclick="iracolombia(6);"><b>1.</b> COLOMBIA</button>
<div id="dprimera" class="dvDescripcion">
<p class="lbldesc">Colombia es productora de ferroníquel desde 1982. El negocio está en manos de South 32, filial de la multinacional BHP Billiton, a través de la socidad anónima Cerro Matoso. </p>
<p class="lbldesc">El principal uso del ferroníquel es la fabricación de acero inoxidable, sin embargo, se espera un aumento de la demanda de níquel para hacer <a href="http://www1.upme.gov.co/simco/Cifras-Sectoriales/Datos/mercado-inter/Producto2_Niquel_FINAL_12DIC2018.pdf" target="_blank">baterías de carros eléctricos</a>.</p> </div>
<button class="leyenda" onclick="iramonteria(9)"><b>2.</b> CÓRDOBA</button>
<div id="dsegunda" class="dvDescripcion">
<p class="lbldesc">Colombia cuenta con <a href="http://www1.upme.gov.co/simco/Cifras-Sectoriales/Datos/mercado-inter/Producto2_Niquel_FINAL_12DIC2018.pdf" target="_blank">seis yacimientos de níquel</a>, tres de los cuales quedan en el departamento de Córdoba: en Planeta Rica, San José de Uré y Montelíbano.</p> <p class="lbldesc">Este último es el único que se ha explotado y el año pasado produjo 43 mil toneladas de ferroníquel, según la Agencia Nacional de Minería (ANM).</p>
</div>
<button class="leyenda" onclick="iralosrios(13)"><b>3.</b> MONTELÍBANO</button>
<div id="dtercera" class="dvDescripcion">
<p class="lbldesc">Antes de llegar desde Montería, capital del departamento, al casco urbano de Montelíbano, se atraviesa por el río San Jorge, que nace en el Parque Nacional Natural Paramillo. En su trayecto por zona rural de Montelíbano, el San Jorge recibe las aguas del río Uré, en cuya margen derecha se ubica la mina a cielo abierto de Cerro Matoso S.A.</p>
</div>
<button class="leyenda" onclick="iralamina(15)"><b>4.</b> CERRO MATOSO</button>
<div id="dcuarta" class="dvDescripcion">
<p class="lbldesc">El ferroníquel se extrae del interior de la montaña, para molerlo y filtrarlo con agua, secarlo y después fundirlo en un horno junto con químicos que refinan el níquel y lo separan de la escoria. La escoria se apila en botaderos cerca de la planta. </p>
</div>
<button class="leyenda" onclick="iraCabildos(13)"><b>5.</b> EL PUEBLO ZENÚ</button>
<div id="dquinta" class="dvDescripcion">
<p class="lbldesc">En el área de influencia de Cerro Matoso hay siete comunidades indígenas zenúes, dos de ellas están a menos de un kilómetro, la una de la mina y la otra del botadero de escoria.</p>
<p class="lbldesc">El pueblo zenú tuteló en 2013 sus derechos a la salud y al medio ambiente. La Corte Constitucional emitió una sentencia en 2017 que exhortó a Cerro Matoso a indemnizarlos, pero en 2018 la misma Corte anuló parcialmente la decisión.</p>
<p class="lbldesc">Hoy se está adelantando una consulta previa, para pactar mitigaciones por lo que la producción de níquel les puede causar a los indígenas y al territorio en el futuro. </p>
</div>
</details>
<div id="dvMovil">
<h2 class="grande">Zenúes vs niquelera en 5 pasos</h2>
<br>
<img src="https://recursosdatoset.files.wordpress.com/2018/09/logosblanco.png" width="150px"/><br>
<p class="lblLead">Descubra el territorio por el que se enfrentan hace 37 años la mina de níquel Cerro Matoso con las comunidades indígenas zenú.</p>
<button type="button" class="leyenda btnmovil" onclick="iracolombia(5);"><b>1</b></button>
<button type="button" class="leyenda btnmovil" onclick="iramonteria(8);"><b>2</b></button>
<button type="button" class="leyenda btnmovil" onclick="iralosrios(11);"><b>3</b></button>
<button type="button" class="leyenda btnmovil" onclick="iralamina(13);"><b>4</b></button>
<button type="button" class="leyenda btnmovil" onclick="iraCabildos(12);"><b>5</b></button>
</div>
<div id="dvPortada">
<div id="intro">
</div>
</div>
<div id="map">
<div id="map-canvas"></div>
</div>
#aperturaModular {z-index:-4;}
.wf-page-container {z-index:-5;}
.container_footer02_2015 {z-index:-6;}
.especiales_modulares {z-index: 999;}
.especiales {z-index: 999;}
#dvHtmlString{ display:none;}
#dvPortada { width: 100vw;
height:100vh;
position: absolute;
z-index: 901;
top: 0;
left: 0;}
#intro {
padding:0;
background: url(https://recursosdatoset.files.wordpress.com/2019/04/cyd_8288.jpeg) no-repeat center center fixed;
background-size: cover;
position:absolute; height:100%; width:100%; top:0px; left:0px;
overflow: hidden;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
}
#map {
z-index:900;
width: 100vw;
height:100vh;
margin: 0;
padding: 0;
position: absolute;
left: 0;
bottom: 0;
top:0;
}
#map-canvas {
height: 100%;
width: 100%;
border: none;
}
#dvGuia {
background-color:#262C2C;
width:23em;
position: fixed;
z-index:902;
left:30px;
top:60px;}
.grande { padding-top:0.3em; padding-bottom:0.2em; font-family: 'Staatliches', cursive; font-size: 1.5em; color:#262C2C; line-height:1.7; text-align:center; line-height:1.3; margin-top:5px; background-color:#CAD980;}
.lblLead {padding-top:0.5em; margin-top:0; padding-bottom:0; font-family: 'Alegreya', serif; font-size: 1.1em; color:#D6D4D4; text-align:justify; padding-left:1em; padding-right:1em; line-height:1.6;}
.leyenda { padding-top:0.2em; padding-bottom:0.3em; padding-left:0.3em; font-family: 'Source Sans Pro', sans-serif; font-weight:600; font-size: 1.2em; color:#ECECEC; background-color:#262C2C; width:100%; border-style:none; text-align:left;}
.leyenda:hover {cursor: pointer; background-color:#CAD980; color:#1E1F21;}
.leyenda:focus {outline: none; background-color:#CAD980; color:#1E1F21;}
.dvDescripcion {background-color:#ECECEC; padding-top:1em;padding-bottom:0.7em;}
.lbldesc {font-family: 'Alegreya', serif; font-size: 0.9em; color:#1E1F21; text-align:justify; margin-left:1em; margin-right:1em; line-height:1.6;}
#dvMovil {
background-color:#262C2C;
width:100%;
position: fixed;
z-index:902;
left:0;
bottom:0;
display:none;
padding-bottom:0.5em;
}
.btnmovil {width:50px; height:50px; text-align:center; border-radius: 50%; border-color:#CAD980; border-width:1px; padding:3px; border-style:solid;}
.lblCabildo { padding-bottom:0; padding-top:0.5em; font-family: 'Source Sans Pro', sans-serif; font-size: 1.2em; font-weight:600; color:#ECECEC; text-align:center; width:100%; display:inline-block; background-color:#262C2C;}
.lblDistancia {padding-top:0.1em; padding-bottom:0.3em; font-family: 'Alegreya', serif; font-size: 1em; color:#262C2C; text-align:center; width:100%; display:inline-block; background-color:#CAD980; margin:0;}
.fondocita {display:table; margin:0; width:100%; background-color:#ECECEC;}
.lblnombrecita { font-family: 'Source Sans Pro', sans-serif; font-size: 1em; background-color:#1E1F21; color:#F0F2F5; padding-top:2px; padding-bottom:2px; margin:0;}
.imgCabildo {width:100%; margin:0; margin-bottom:1em; display:inline-block;}
.imgRetrato {border-radius: 50%; border-color:#1E1F21; border-width:1px; padding:3px; border-style:solid;}
.derecha {
display:inline-block;
width:30%; font-family: 'Alegreya', serif;
font-color:#262C2C;
text-align:center;
padding:0;
padding-left:0.5em; margin:0; line-height:1.2;}
.cita { width:64%; display:inline-block; font-family: 'Alegreya', serif; font-size: 1.2em; text-align:center; color:#262C2C; vertical-align:top; padding-bottom:1em; line-height:1.6;}
.comilla {font-family: 'Passion One', cursive; font-size: 1.8em; color:#CAD980;}
#dprimera, #dsegunda, #dtercera, #dcuarta, #dquinta {display:none;}
@media only screen and (max-device-width: 1024px)
{
#dvGuia
{display:none;}
#dvMovil
{display:block;}
#map {
height:70vh;
left: 0;
top:0;
}
.imgRetrato {width:100%;}
}
var map;
var monteria, montelibano, cabildos, mina, rios, contexto;
var mFlecha, mPuerto, mCentro, mTorno, mOdise, mPuente, mBocas;
function initMap()
{
map = new google.maps.Map(document.getElementById('map-canvas'),
{
center:{lat: 6.365269, lng: -77.658929},
zoom: 6,
disableDefaultUI: true,
draggable: true,
zoomControl: false,
scrollwheel: false,
disableDoubleClickZoom: true,
mapTypeId: 'satellite'
});
map.setTilt(45);
var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 2};
var mar1 = new google.maps.Marker({
position: {lat: 11.832922, lng: -77.535356},
map: map,
icon: lineSymbol,
label: {
text: "Caribe",
color: "#ECECEC",
fontSize: "1.8em",
fontWeight: "bold",
}
});
var mar2 = new google.maps.Marker({
position: {lat: 4.367659, lng: -80.807617},
map: map,
icon: lineSymbol,
label: {
text: "Pac\u00edfico",
color: "#ECECEC",
fontSize: "1.8em",
fontWeight: "bold",
}
});
var nbgta = new google.maps.Marker({
position: {lat: 5.050000, lng: -74.008134},
map: map,
icon: lineSymbol,
label: {
text: "Bogot\u00e1",
color: "#ECECEC",
fontSize: "1.5em",
fontWeight: "bold",
}
});
limpiar();
}
function limpiar()
{
monteria = 'false';
montelibano = 'false';
parque = 'false';
cabildos = 'false';
mina = 'false';
rios = 'false';
contexto='false';
}
function iracolombia(zoomi)
{
var lati= 6.365269;
var longi=-77.658929;
var latlng = new google.maps.LatLng(lati, longi);
map.setCenter(latlng);
map.setZoom(zoomi);
document.getElementById('dprimera').style.display='block';
document.getElementById('dsegunda').style.display='none';
document.getElementById('dtercera').style.display='none';
document.getElementById('dcuarta').style.display='none';
document.getElementById('dquinta').style.display='none';
document.getElementById('dvPortada').style.display='none';
}
function iramonteria(zoomi)
{
var lati, longi;
lati=8.355526; longi= -75.683697;
pintarMonteria();
pintarMontelibano();
var latlng = new google.maps.LatLng(lati, longi);
map.setCenter(latlng);
map.setZoom(zoomi);
document.getElementById('dprimera').style.display='none';
document.getElementById('dsegunda').style.display='block';
document.getElementById('dtercera').style.display='none';
document.getElementById('dcuarta').style.display='none';
document.getElementById('dquinta').style.display='none';
document.getElementById('dvPortada').style.display='none';
}
function iralosrios(zoomi)
{
var lati, longi;
lati=7.919742; longi= -75.517306;
ubicarcontexto();
var latlng = new google.maps.LatLng(lati, longi);
map.setCenter(latlng);
map.setZoom(zoomi);
document.getElementById('dprimera').style.display='none';
document.getElementById('dsegunda').style.display='none';
document.getElementById('dtercera').style.display='block';
document.getElementById('dcuarta').style.display='none';
document.getElementById('dquinta').style.display='none';
document.getElementById('dvPortada').style.display='none';
}
function iralamina(zoomi)
{
var lati, longi;
lati=7.910744; longi= -75.550224;
pintarMina();
var latlng = new google.maps.LatLng(lati, longi);
map.setCenter(latlng);
map.setZoom(zoomi);
document.getElementById('dprimera').style.display='none';
document.getElementById('dsegunda').style.display='none';
document.getElementById('dtercera').style.display='none';
document.getElementById('dcuarta').style.display='block';
document.getElementById('dquinta').style.display='none';
document.getElementById('dvPortada').style.display='none';
}
function iraCabildos(zoomi)
{
var lati, longi;
if(zoomi == 12)
{ lati=7.910744; longi= -75.550224;}
else
{ lati=7.920511; longi= -75.537040; }
pintarAreadeInfluencia();
var latlng = new google.maps.LatLng(lati, longi);
map.setCenter(latlng);
map.setZoom(zoomi);
document.getElementById('dprimera').style.display='none';
document.getElementById('dsegunda').style.display='none';
document.getElementById('dtercera').style.display='none';
document.getElementById('dcuarta').style.display='none';
document.getElementById('dquinta').style.display='block';
document.getElementById('dvPortada').style.display='none';
}
function pintarMonteria()
{
if(monteria=='false')
{
var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 2};
var nMtea = new google.maps.Marker({
position: {lat: 8.781432, lng: -75.884367},
map: map,
icon: lineSymbol,
label: {
text: "Monter\u00eda, C\u00f3rdoba",
color: "#ECECEC",
fontSize: "1.5em",
fontWeight: "bold",
}
});
monteria='true';
}
}
function pintarMontelibano()
{
if(montelibano=='false')
{
var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 2};
var nMtea = new google.maps.Marker({
position: {lat: 7.955768, lng: -75.418779},
map: map,
icon: lineSymbol,
label: {
text: "Montel\u00edbano, C\u00f3rdoba",
color: "#ECECEC",
fontSize: "1.5em",
fontWeight: "bold",
}});
montelibano='true';
}
}
function pintarMina() {
if(mina=='false')
{
var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 2};
var minaycanal = [
{lat: 7.904683, lng: -75.552509},
{lat: 7.912091, lng: -75.534908}];
var Lineaminaycanal = new google.maps.Polyline({
path: minaycanal,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '10px'}],
geodesic: true,
strokeColor: '#FFDE78',
strokeOpacity: 0,
strokeWeight: 2 });
Lineaminaycanal.setMap(map);
var marker8 = new google.maps.Marker({
position: {lat: 7.912688, lng: -75.533627},
map: map,
icon: lineSymbol,
label: {
text: "Mina",
color: "#FFDE78",
fontSize: "1.3em",
fontWeight: "bold",
margin:"2em"
}
});
var horno = [
{lat: 7.918408, lng: -75.553726},
{lat: 7.918263, lng: -75.537801}];
var Lineahorno = new google.maps.Polyline({
path: horno,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '10px'}],
geodesic: true,
strokeColor: '#FFDE78',
strokeOpacity: 0,
strokeWeight: 2 });
Lineahorno.setMap(map);
var marker9 = new google.maps.Marker({
position: {lat: 7.918819, lng: -75.537767},
map: map,
icon: lineSymbol,
label: {
text: "Horno",
color: "#FFDE78",
fontSize: "1.3em",
fontWeight: "bold",
margin:"2em"}
});
var Pozo1 = [
{lat: 7.927174, lng: -75.553004},
{lat: 7.927017, lng: -75.562785}];
var LineaPozo1 = new google.maps.Polyline({
path: Pozo1,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '10px'}],
geodesic: true,
strokeColor: '#FFDE78',
strokeOpacity: 0,
strokeWeight: 2 });
LineaPozo1.setMap(map);
var marker10 = new google.maps.Marker({
position: {lat: 7.927623, lng: -75.562774},
map: map,
icon: lineSymbol,
label: {
text: "Botadero de escoria",
color: "#FFDE78",
fontSize: "1.3em",
fontWeight: "bold",
margin:"2em"}
});
var Pozo2 = [
{lat: 7.894444, lng: -75.528091},
{lat: 7.904191, lng: -75.525816}];
var LineaPozo2 = new google.maps.Polyline({
path: Pozo2,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '10px'}],
geodesic: true,
strokeColor: '#FFDE78',
strokeOpacity: 0,
strokeWeight: 2 });
LineaPozo2.setMap(map);
var marker11 = new google.maps.Marker({
position: {lat: 7.904469, lng: -75.524909},
map: map,
icon: lineSymbol,
label: {
text: "Botadero de escoria",
color: "#FFDE78",
fontSize: "1.3em",
fontWeight: "bold",
margin:"2em"}
});
mina='true';
}
}
function pintarAreadeInfluencia() {
if(cabildos=='false')
{
//---- iconos ---------------**
var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 2
};
var cumbiero = {
url: 'https://recursosdatoset.files.wordpress.com/2019/04/zenu.png',
scaledSize: new google.maps.Size(50,45),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(25,42),
labelOrigin: new google.maps.Point(0,0),
};
cargarfotos();
var popTorno = document.getElementById('popTorno').innerHTML;
var popPuente = document.getElementById('popPuente').innerHTML;
var popBocas = document.getElementById('popBocas').innerHTML;
var popOdisea = document.getElementById('popOdisea').innerHTML;
var popCentro = document.getElementById('popCentro').innerHTML;
var popFlecha = document.getElementById('popFlecha').innerHTML;
var popLibertad = document.getElementById('popLibertad').innerHTML;
var infoTorno = new google.maps.InfoWindow({
content: popTorno,
maxWidth: 450
});
var infoBocas = new google.maps.InfoWindow({
content: popBocas,
maxWidth: 450
});
var infoPuente = new google.maps.InfoWindow({
content: popPuente,
maxWidth: 450
});
var infoOdisea = new google.maps.InfoWindow({
content: popOdisea,
maxWidth: 450
});
var infoCentro = new google.maps.InfoWindow({
content: popCentro,
maxWidth: 450
});
var infoLibertad = new google.maps.InfoWindow({
content: popLibertad,
maxWidth: 450
});
var infoFlecha = new google.maps.InfoWindow({
content: popFlecha,
maxWidth: 450
});
//---- Marcadores de citas ---------------**
//---- Marcadores de citas ---------------**
mTorno = new google.maps.Marker({
position: {lat: 7.971000, lng: -75.553004},
map: map,
title: 'Cabildo Zen\u00fa Torno Rojo',
animation: google.maps.Animation.DROP,
icon: cumbiero
});
mTorno.addListener('click', function() {
infoTorno.open(map, mTorno);
infoBocas.close();
infoPuente.close();
infoOdisea.close();
infoLibertad.close();
infoCentro.close();
infoFlecha.close();
mTorno.setAnimation(null);
});
mTorno.setAnimation(google.maps.Animation.BOUNCE);
mPuente = new google.maps.Marker({
position: {lat: 7.935281, lng: -75.536711},
map: map,
title: 'Cabildo Zen\u00fa Puente Ur\u00e9',
icon:cumbiero
});
mPuente.addListener('click', function() {
infoPuente.open(map, mPuente);
infoBocas.close();
infoTorno.close();
infoOdisea.close();
infoLibertad.close();
infoCentro.close();
infoFlecha.close();
mPuente.setAnimation(null);
});
mPuente.setAnimation(google.maps.Animation.BOUNCE);
mFlecha = new google.maps.Marker({
position: {lat: 7.883507, lng: -75.560445},
map: map,
title: 'Cabildo Zen\u00fa Uni\u00f3n Matoso o Pueblo Flecha',
icon:cumbiero
});
mFlecha.addListener('click', function() {
infoFlecha.open(map, mFlecha);
infoBocas.close();
infoPuente.close();
infoOdisea.close();
infoLibertad.close();
infoCentro.close();
infoTorno.close();
mFlecha.setAnimation(null);
});
mFlecha.setAnimation(google.maps.Animation.BOUNCE);
mBocas = new google.maps.Marker({
position: {lat: 7.943901, lng: -75.512002},
map: map,
title: 'Cabildo Zen\u00fa Bocas de Ur\u00e9',
icon:cumbiero
});
mBocas.addListener('click', function() {
infoBocas.open(map, mBocas);
infoTorno.close();
infoPuente.close();
infoOdisea.close();
infoLibertad.close();
infoCentro.close();
infoFlecha.close();
mBocas.setAnimation(null);
});
mBocas.setAnimation(google.maps.Animation.BOUNCE);
mCentro = new google.maps.Marker({
position: {lat: 7.927308, lng: -75.595978},
map: map,
title: 'Cabildo Zen\u00fa Centroam\u00e9rica',
icon:cumbiero
});
mCentro.addListener('click', function() {
infoCentro.open(map, mCentro);
infoBocas.close();
infoPuente.close();
infoOdisea.close();
infoLibertad.close();
infoTorno.close();
infoFlecha.close();
mCentro.setAnimation(null);
});
mCentro.setAnimation(google.maps.Animation.BOUNCE);
mPuerto = new google.maps.Marker({
position: {lat: 7.888342, lng: -75.510972},
map: map,
title: 'Cabildo Zen\u00fa La Libertad - Puerto Colombia',
icon:cumbiero
});
mPuerto.addListener('click', function() {
infoLibertad.open(map, mPuerto);
infoBocas.close();
infoPuente.close();
infoOdisea.close();
infoTorno.close();
infoCentro.close();
infoFlecha.close();
mPuerto.setAnimation(null);
});
mPuerto.setAnimation(google.maps.Animation.BOUNCE);
mOdise = new google.maps.Marker({
position: {lat: 7.881306, lng: -75.601769},
map: map,
title: 'Cabildo Zen\u00fa Guacar\u00ed - La Odisea',
icon:cumbiero
});
mOdise.addListener('click', function() {
infoOdisea.open(map, mOdise);
infoBocas.close();
infoPuente.close();
infoTorno.close();
infoLibertad.close();
infoCentro.close();
infoFlecha.close();
mOdise.setAnimation(null);
});
mOdise.setAnimation(google.maps.Animation.BOUNCE);
//---- ---------------**
var OdiseaToMina = [
{lat: 7.880996, lng: -75.600507},
{lat: 7.900706, lng: -75.568175}
];
var LineaOdisea = new google.maps.Polyline({
path: OdiseaToMina,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '10px'}],
geodesic: true,
strokeColor: '#DEDBDB',
strokeOpacity: 0,
strokeWeight: 2
});
LineaOdisea.setMap(map);
var distanciaOdisea = new google.maps.Marker({
position: {lat: 7.892069, lng: -75.590481},
map: map,
icon: lineSymbol,
label: {
text: "4.130 m",
color: "#DEDBDB",
fontSize: "1.2em",}});
var CentroToMina = [
{lat: 7.926468, lng: -75.595274},
{lat: 7.914168, lng: -75.565812}
];
var LineaCentro = new google.maps.Polyline({
path: CentroToMina,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '10px'}],
geodesic: true,
strokeColor: '#DEDBDB',
strokeOpacity: 0,
strokeWeight: 2
});
LineaCentro.setMap(map);
var distanciaCentro = new google.maps.Marker({
position: {lat: 7.924066, lng: -75.582316},
map: map,
icon: lineSymbol,
label: {
text: "3.400 m",
color: "#DEDBDB",
fontSize: "1.2em",}});
var TornoToMina = [
{lat: 7.969800, lng: -75.553004},
{lat: 7.930873, lng: -75.551285}
];
var LineaTorno = new google.maps.Polyline({
path: TornoToMina,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '10px'}],
geodesic: true,
strokeColor: '#DEDBDB',
strokeOpacity: 0,
strokeWeight: 2
});
LineaTorno.setMap(map);
var distanciaTorno = new google.maps.Marker({
position: {lat: 7.954542, lng: -75.547502},
map: map,
icon: lineSymbol,
label: {
text: "4.150 m",
color: "#DEDBDB",
fontSize: "1.2em",}});
var FlechaToMina = [
{lat: 7.883959, lng: -75.558178},
{lat: 7.889769, lng: -75.551075}
];
var LineaFlecha = new google.maps.Polyline({
path: FlechaToMina,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '10px'}],
geodesic: true,
strokeColor: '#DEDBDB',
strokeOpacity: 0,
strokeWeight: 2
});
LineaFlecha.setMap(map);
var distanciaFlecha = new google.maps.Marker({
position: {lat: 7.885153, lng: -75.552167},
map: map,
icon: lineSymbol,
label: {
text: "902 m",
color: "#DEDBDB",
fontSize: "1.2em",}});
var LibertadToMina = [
{lat: 7.888177, lng: -75.513362},
{lat: 7.888242, lng: -75.520352}
];
var LineaLibertad = new google.maps.Polyline({
path: LibertadToMina,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '10px'}],
geodesic: true,
strokeColor: '#DEDBDB',
strokeOpacity: 0,
strokeWeight: 2
});
LineaLibertad.setMap(map);
var distanciaLibertad = new google.maps.Marker({
position: {lat: 7.887120, lng: -75.519182},
map: map,
icon: lineSymbol,
label: {
text: "750 m",
color: "#DEDBDB",
fontSize: "1.2em",}});
var PuenteToMina = [
{lat: 7.934182, lng: -75.537418},
{lat: 7.924651, lng: -75.546683}
];
var LineaPuente = new google.maps.Polyline({
path: PuenteToMina,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '10px'}],
geodesic: true,
strokeColor: '#DEDBDB',
strokeOpacity: 0,
strokeWeight: 2
});
LineaPuente.setMap(map);
var distanciaPuente = new google.maps.Marker({
position: {lat: 7.931574, lng: -75.545256},
map: map,
icon: lineSymbol,
label: {
text: "1.360 m",
color: "#DEDBDB",
fontSize: "1.2em",}});
var BocasToMina = [
{lat: 7.942994, lng: -75.512747},
{lat: 7.924651, lng: -75.546683}
];
var LineaBocas = new google.maps.Polyline({
path: BocasToMina,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '10px'}],
geodesic: true,
strokeColor: '#DEDBDB',
strokeOpacity: 0,
strokeWeight: 2
});
LineaBocas.setMap(map);
var distanciaBocas = new google.maps.Marker({
position: {lat: 7.933345, lng: -75.524411},
map: map,
icon: lineSymbol,
label: {
text: "3.850 m",
color: "#DEDBDB",
fontSize: "1.2em",}});
cabildos='true';
}
}
function pintarRios() {
if(rios=='false')
{
var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 2};
//Río Uré
var flightPlanCoordinates = [
{lat: 7.947972, lng: -75.514364},
{lat: 7.947717, lng: -75.514782},
{lat: 7.946346, lng: -75.514814},
{lat: 7.944412, lng: -75.513881},
{lat: 7.943870, lng: -75.513194},
{lat: 7.943509, lng: -75.513151},
{lat: 7.943201, lng: -75.513548},
{lat: 7.943329, lng:-75.514428 },
{lat: 7.944774, lng: -75.517175},
{lat: 7.943892, lng: -75.519739 },
{lat: 7.943945, lng: -75.520973},
{lat: 7.945496, lng: -75.524267 },
{lat: 7.947759, lng: -75.523902},
{lat: 7.948715, lng: -75.524041},
{lat: 7.948821, lng: -75.525243},
{lat: 7.947174, lng: -75.525436},
{lat: 7.946515, lng: -75.525930},
{lat: 7.946069, lng: -75.527411},
{lat: 7.945315, lng: -75.527701},
{lat: 7.944901, lng: -75.527486},
{lat: 7.945167, lng: -75.525791},
{lat: 7.944328, lng: -75.524901},
{lat: 7.943287, lng: -75.524837},
{lat: 7.943117, lng: -75.525234},
{lat: 7.943638, lng: -75.527004},
{lat: 7.943192, lng: -75.527583},
{lat: 7.942193, lng: -75.527787},
{lat: 7.939717, lng: -75.527165},
{lat: 7.939090, lng: -75.527176},
{lat: 7.938314, lng: -75.527820},
{lat: 7.937730, lng: -75.529762},
{lat: 7.938399, lng: -75.530685},
{lat: 7.940896, lng: -75.528486},
{lat: 7.942267, lng: -75.528250},
{lat: 7.943160, lng: -75.529108},
{lat: 7.942841, lng: -75.529569},
{lat: 7.940641, lng: -75.530041},
{lat: 7.940152, lng: -75.531650},
{lat: 7.941246, lng: -75.532498},
{lat: 7.941033, lng: -75.532713},
{lat: 7.939620, lng: -75.532413},
{lat: 7.937930, lng: -75.531995},
{lat: 7.936867, lng: -75.533862},
{lat: 7.937101, lng: -75.534141},
{lat: 7.938270, lng: -75.534141},
{lat: 7.938982, lng: -75.534967},
{lat: 7.937707, lng: -75.535536},
{lat: 7.936740, lng: -75.535697},
{lat: 7.936379, lng: -75.535321},
{lat: 7.935752, lng: -75.535675},
{lat: 7.935656, lng: -75.536093},
{lat: 7.936818, lng: -75.542220},
{lat: 7.936457, lng: -75.542950},
{lat: 7.936117, lng: -75.544645},
{lat: 7.935044, lng: -75.546040},
{lat: 7.935033, lng: -75.547767},
{lat: 7.935756, lng: -75.548164},
{lat: 7.937467, lng: -75.547488},
{lat: 7.938168, lng: -75.548293},
{lat: 7.938200, lng: -75.549098},
{lat: 7.938508, lng: -75.551480},
{lat: 7.938274, lng: -75.551856},
{lat: 7.937509, lng: -75.551695},
{lat: 7.936244, lng: -75.552210},
{lat: 7.936318, lng: -75.554816},
{lat: 7.937211, lng: -75.556544},
{lat: 7.936414, lng: -75.556576},
{lat: 7.935606, lng: -75.557198},
{lat: 7.935053, lng: -75.557166},
{lat: 7.933980, lng: -75.556479},
{lat: 7.934097, lng: -75.556103},
{lat: 7.934543, lng: -75.555137},
{lat: 7.934511, lng: -75.554890},
{lat: 7.934160, lng: -75.553517},
{lat: 7.933916, lng: -75.553614},
{lat: 7.934192, lng: -75.554912},
{lat: 7.933884, lng: -75.555202},
{lat: 7.933280, lng: -75.554959},
{lat: 7.932717, lng: -75.554197},
{lat: 7.931835, lng: -75.554058},
{lat: 7.931697, lng: -75.554283},
{lat: 7.932016, lng: -75.554991},
{lat: 7.930805, lng: -75.556354},
{lat: 7.929094, lng: -75.555678},
{lat: 7.928786, lng: -75.556182},
{lat: 7.929211, lng: -75.557813},{lat: 7.928765, lng: -75.558167},
{lat: 7.927724, lng: -75.557749},
{lat: 7.927299, lng: -75.556537},
{lat: 7.926980, lng: -75.556333},
{lat: 7.926672, lng: -75.556666},
{lat: 7.926608, lng: -75.557696},
{lat: 7.926109, lng: -75.559016},
{lat: 7.925806, lng: -75.560841}, {lat: 7.924945, lng: -75.560176},
{lat: 7.924212, lng: -75.560015},
{lat: 7.922916, lng: -75.560573},
{lat: 7.922247, lng: -75.561496},
{lat: 7.921716, lng: -75.561153},{lat: 7.920473, lng: -75.559018},
{lat: 7.919177, lng: -75.557913},
{lat: 7.918720, lng: -75.557452},
{lat: 7.917732, lng: -75.557473},
{lat: 7.916064, lng: -75.559490},{lat: 7.915065, lng: -75.563320},
{lat: 7.917010, lng: -75.562623},
{lat: 7.918062, lng: -75.560874},
{lat: 7.918646, lng: -75.561314},{lat: 7.918593, lng: -75.563342},{lat: 7.917328, lng: -75.564136},
{lat: 7.916724, lng: -75.564804},
{lat: 7.913440, lng: -75.566896},
{lat: 7.912494, lng: -75.568162},
{lat: 7.911963, lng: -75.567314},
{lat: 7.911123, lng: -75.566906},
{lat: 7.908995, lng: -75.566469},
{lat: 7.908421, lng: -75.565708},
{lat: 7.907433, lng: -75.565257},
{lat: 7.907295, lng: -75.565761},
{lat: 7.907444, lng: -75.566651},
{lat: 7.906870, lng: -75.566866},
{lat: 7.905457, lng: -75.566458},
{lat: 7.904628, lng: -75.567070},
{lat: 7.903831, lng: -75.567392},
{lat: 7.902811, lng: -75.567295},
{lat: 7.902141, lng: -75.568014},
{lat: 7.901960, lng: -75.568872},
{lat: 7.900823, lng: -75.569709},
{lat: 7.900302, lng: -75.569612},
{lat: 7.899356, lng: -75.568389},
{lat: 7.899409, lng: -75.567338},
{lat: 7.900132, lng: -75.566383},
{lat: 7.899388, lng: -75.565493},
{lat: 7.899027, lng: -75.564978},
{lat: 7.898411, lng: -75.564688},
{lat: 7.898390, lng: -75.565085},
{lat: 7.898783, lng: -75.566029},
{lat: 7.898624, lng: -75.566909},
{lat: 7.897933, lng: -75.567875},
{lat: 7.897508, lng: -75.569044},
{lat: 7.896679, lng: -75.569420},
{lat: 7.895255, lng: -75.568798},
{lat: 7.895531, lng: -75.567135},
{lat: 7.896827, lng: -75.566556},
{lat: 7.897443, lng: -75.565065},
{lat: 7.896986, lng: -75.564743},
{lat: 7.895881, lng: -75.565312},
{lat: 7.895211, lng: -75.566331},
{lat: 7.894563, lng: -75.566428},
{lat: 7.892831, lng: -75.565623},
{lat: 7.891821, lng: -75.565923},
{lat: 7.891757, lng: -75.566642},
{lat: 7.893425, lng: -75.566975},
{lat: 7.894211, lng: -75.568069},
{lat: 7.893648, lng: -75.568573},
{lat: 7.892649, lng: -75.568648},
{lat: 7.891246, lng: -75.568573},
{lat: 7.889184, lng: -75.568337},
{lat: 7.886368, lng: -75.568337},
{lat: 7.885443, lng: -75.567768},
{lat: 7.884657, lng: -75.565944},
{lat: 7.883817, lng: -75.565365},
{lat: 7.883084, lng: -75.565944},
{lat: 7.882202, lng: -75.565923},
{lat: 7.881543, lng: -75.565590},
{lat: 7.881065, lng: -75.563841},
{lat: 7.881278, lng: -75.563026},
{lat: 7.880662, lng: -75.561824},
{lat: 7.879992, lng: -75.561470},
{lat: 7.878823, lng: -75.561974},
{lat: 7.877888, lng: -75.562103},
{lat: 7.877176, lng: -75.560655},
{lat: 7.876538, lng: -75.559421},
{lat: 7.876910, lng: -75.558520},
{lat: 7.877994, lng: -75.558005},
{lat: 7.879418, lng: -75.558499},
{lat: 7.880863, lng: -75.558177},
{lat: 7.881267, lng: -75.557104},
{lat: 7.880215, lng: -75.555570},
{lat: 7.879758, lng: -75.553907},
{lat: 7.880226, lng: -75.552802},
{lat: 7.880279, lng: -75.551493},
{lat: 7.879886, lng: -75.551032},
{lat: 7.877665, lng: -75.550034},
{lat: 7.876794, lng: -75.550152},
{lat: 7.876751, lng: -75.551579},
{lat: 7.877367, lng: -75.552448},
{lat: 7.878398, lng: -75.553274},
{lat: 7.878058, lng: -75.553993},
{lat: 7.877038, lng: -75.554336},
{lat: 7.877038, lng: -75.554336},
{lat: 7.875911, lng: -75.554089},
{lat: 7.875295, lng: -75.554475},
{lat: 7.874859, lng: -75.555323},
{lat: 7.873637, lng: -75.555484},
{lat: 7.872946, lng: -75.554905},
{lat: 7.873105, lng: -75.553768},
{lat: 7.874125, lng: -75.552019},
{lat: 7.873902, lng: -75.550839},
{lat: 7.873211, lng: -75.549981},
{lat: 7.872690, lng: -75.548275},
{lat: 7.872127, lng: -75.547857},
{lat: 7.871883, lng: -75.548351},
{lat: 7.871681, lng: -75.550850},
{lat: 7.871075, lng:-75.550829},
{lat: 7.870724, lng:-75.549874},
{lat: 7.869725, lng:-75.548565},
{lat: 7.869151, lng:-75.547460},
{lat: 7.868683, lng: -75.545818},
{lat: 7.867259, lng: -75.544992},
{lat: 7.865973, lng: -75.545282},
{lat: 7.864761, lng: -75.544467},
{lat: 7.862869, lng: -75.545229},
{lat: 7.862423, lng: -75.546474},
{lat: 7.864272, lng: -75.549231},
{lat: 7.863889, lng: -75.550347},
{lat: 7.862964, lng: -75.550422},
{lat: 7.859606, lng:-75.548877},
{lat: 7.858564, lng: -75.549596},
{lat: 7.855748, lng: -75.548362},
{lat: 7.855737, lng: -75.547761},
{lat: 7.856290, lng: -75.546795},
{lat: 7.855992, lng: -75.546441},
{lat: 7.853973, lng: -75.546269},
{lat: 7.853463, lng: -75.545647},
{lat: 7.853548, lng: -75.544617},
{lat: 7.853601, lng: -75.542611},
{lat: 7.851932, lng: -75.539789},
{lat:7.849445, lng: -75.538845},
{lat:7.848148, lng:-75.539886},
{lat:7.846862, lng:-75.539371},
{lat:7.846671, lng:-75.537665},
{lat:7.845757, lng: -75.536624},
{lat:7.845034, lng:-75.536270},
{lat:7.844864, lng:-75.534993},
{lat:7.845597, lng:-75.533888},
{lat:7.847893, lng:-75.533427},
{lat:7.847914, lng:-75.532461},
{lat:7.846224, lng:-75.531528},
{lat:7.843726, lng:-75.530927},
{lat:7.839762, lng: -75.526013},
{lat:7.838742, lng: -75.525852},
{lat:7.837328, lng:-75.527011},
{lat:7.833821, lng:-75.526142},
{lat:7.832949, lng:-75.526217},
{lat:7.832364, lng:-75.527547}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#55A7D0',
strokeOpacity: 1.0,
strokeWeight: 4
});
flightPath.setMap(map);
//Quebrada El Tigre
flightPlanCoordinates = [
{lat: 7.899947, lng: -75.531363},
{lat: 7.899472, lng: -75.531649},
{lat: 7.898707, lng: -75.531742},
{lat: 7.897062, lng: -75.532155},
{lat: 7.896845, lng: -75.532154},
{lat: 7.896228, lng: -75.531818},
{lat: 7.895514, lng: -75.531813}
];
flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#55A7D0',
strokeOpacity: 1.0,
strokeWeight: 3
});
flightPath.setMap(map);
rios='true';
var rioure = [
{lat: 7.909886, lng: -75.566753},
{lat: 7.909759, lng: -75.573664}];
var Lineaure = new google.maps.Polyline({
path: rioure,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '10px'}],
geodesic: true,
strokeColor: '#A0D8DD',
strokeOpacity: 0,
strokeWeight: 2 });
Lineaure.setMap(map);
var Ure = new google.maps.Marker({
position: {lat: 7.910365, lng: -75.573777},
map: map,
icon:lineSymbol,
label: {
text: "R\u00edo Ur\u00e9",
color: "#A0D8DD",
fontSize: "1.3em",
fontWeight: "bold",
margin:"2em"
}
});
var eltigre = [
{lat: 7.897200, lng: -75.532137},
{lat: 7.907532, lng: -75.528904}];
var LineaTigre = new google.maps.Polyline({
path: eltigre,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '10px'}],
geodesic: true,
strokeColor: '#A0D8DD',
strokeOpacity: 0,
strokeWeight: 2 });
LineaTigre.setMap(map);
var tigre = new google.maps.Marker({
position: {lat: 7.908233, lng: -75.528916},
map: map,
icon:lineSymbol,
label: {
text: "Quebrada El Tigre",
color: "#A0D8DD",
fontSize: "1.3em",
fontWeight: "bold",
margin:"2em"
}
});
}
}
function ubicarcontexto()
{
if(contexto=='false')
{
var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 2};
var sanjorge = [
{lat: 7.963376, lng: -75.476207},
{lat: 7.967376, lng: -75.487715}];
var LineaSanJorge = new google.maps.Polyline({
path: sanjorge,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '10px'}],
geodesic: true,
strokeColor: '#A0D8DD',
strokeOpacity: 0,
strokeWeight: 2 });
LineaSanJorge.setMap(map);
var msj = new google.maps.Marker({
position: {lat: 7.970374, lng: -75.487742},
map: map,
icon: lineSymbol,
label: {
text: "R\u00edo San Jorge",
color: "#A0D8DD",
fontSize: "1.3em",
fontWeight: "bold",
margin:"2em"
}
});
var ptol = new google.maps.Marker({
position: {lat: 7.891802, lng: -75.670655},
map: map,
icon: lineSymbol,
label: {
text: "Puerto Libertador, C\u00f3rdoba",
color: "#ECECEC",
fontSize: "1.5em",
fontWeight: "bold",
}
});
var Emina = new google.maps.Marker({
position: {lat: 7.924482, lng: -75.525326},
map: map,
icon: lineSymbol,
label: {
text: "Entrada Cerro Matoso S.A.",
color: "#ECECEC",
fontSize: "1.5em",
fontWeight: "bold",
}
});
pintarRios();
contexto='true';
}
}
function cargarfotos()
{
document.getElementById('icentro').src='https://recursosdatoset.files.wordpress.com/2019/04/centroamerica-1.jpg';
document.getElementById('ircentro').src='https://recursosdatoset.files.wordpress.com/2019/04/luis-joaquin-1-e1555366169116.png';
document.getElementById('iflecha').src='https://recursosdatoset.files.wordpress.com/2019/04/pueblofleccha-1.jpg';
document.getElementById('irflecha').src='https://recursosdatoset.files.wordpress.com/2019/04/ramon-e1555360352846.jpeg';
document.getElementById('ibocas').src='https://recursosdatoset.files.wordpress.com/2019/04/bocasdeurc3a9-1.jpg';
document.getElementById('irbocas').src='https://recursosdatoset.files.wordpress.com/2019/04/cyd_8129-e1555363422718.jpeg';
document.getElementById('ipuente').src='https://recursosdatoset.files.wordpress.com/2019/04/puenteurc3a9-1.jpg';
document.getElementById('itorno').src='https://recursosdatoset.files.wordpress.com/2019/04/tornorojo.jpg';
document.getElementById('irtorno').src='https://recursosdatoset.files.wordpress.com/2019/04/nefri-1-e1555352081967.jpg';
document.getElementById('ipuerto').src='https://recursosdatoset.files.wordpress.com/2019/04/puertocolombia-1.jpg';
document.getElementById('irpuerto').src='https://recursosdatoset.files.wordpress.com/2019/04/estela-e1555359263469.jpeg';
document.getElementById('iodisea').src='https://recursosdatoset.files.wordpress.com/2019/04/laodisea-1.jpg';
document.getElementById('irodisea').src='https://recursosdatoset.files.wordpress.com/2019/04/edwin-samuel-1-e1555365056336.png';
}
Also see: Tab Triggers