<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
<style>
.leaflet-popup-content-wrapper {
border-radius: 4px;
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
background: rgba(250,250,250,0.9);
color: #333;
box-shadow: 0 3px 14px rgba(0,0,0,0.1);
}
.leaflet-popup-content-wrapper h3,
.leaflet-popup-tip h3 {
font-family: Lora, Garamond, georgia, serif;
text-transform: uppercase;
letter-spacing: .125em;
color: #555;
margin-top: 2em;
font-size: 2rem;
}
.leaflet-popup-content {
margin: -16px 24px 32px 24px;
line-height: 1.4;
}
.leaflet-popup-content p {
margin: 1rem 0;
font-size: 1.2rem;
line-height: 1.6em;
}
.leaflet-popup-content li {
font-family: Lora, Garamond, georgia;
}
.leaflet-container a.leaflet-popup-close-button {
top: 4px;
right: 4px;
}
.project-title {
margin: 0;
font-size: 1.5rem;
padding: 0.7rem;
}
/*
.playButton {
font-size: 1em;
padding: .5em 1em;
position: absolute;
top: 10px;
right: 5px;
color: #ffffff;
border: 0 none transparent;
background-color: #f15b4a;
text-transform: uppercase;
}
.playButton:hover, .playButton:focus {
background-color: #ff7f7a;
}*/
.icon {
max-width: 70%;
max-height: 70%;
margin: 4px;
}
#map {
height: 100vh;
width: 100%;
}
.help {
font-size: 1rem;
position: absolute;
top: 8.5rem;
left: 20px;
right: 0;
height: auto;
max-width: 170px;
z-index: 10;
background-color: rgba(32, 39, 60, 0.7);
color: white;
padding: 1rem;
margin: 0px;
border-radius: 0 4px 4px 4px;
}
.help::before {
content: "";
position: absolute;
top: -1rem;
left: 0;
width: 0;
height: 0;
border-right: 1rem solid transparent;
border-bottom: 1rem solid rgba(32, 39, 60, 0.7);
}
/**
* IMPORTS (i-)
* LEAFLET (s-)
* VARIABLES (v-)
* MIXINS (m-)
* BASE STYLES (b-)
* LAYOUT (l-)
* COMPONENTS (c-)
* UTILITIES (u-)
* JAVASCRIPT (j-)
* ANIMATION (a-)
**/
/* LEAFLET (s-)
============================================= */
#map {
width: 100%;
}
/* VARIABLES (v-)
============================================= */
/* BASE STYLES (b-)
============================================= */
.project-title {
font-weight: 300;
padding: 16px 24px;
}
.regionTitle {
border-bottom: solid 1px rgba(219, 222, 227, 0.6);
font-size: 1rem;
margin: 0;
}
.btns {
position: absolute;
top: 8px;
left: 62px;
z-index: 98;
}
.btn {
font-size: 1em;
padding: .5em 1em;
top: 10px;
right: 5px;
color: #3e3e3e;
border: 0 none transparent;
background-color: rgba(242, 243, 245, 0.6);
text-transform: uppercase;
}
.btn:hover, .btn:focus {
background-color: #ff7f7a;
}
.leaflet-popup-content span {
padding: .25em .75em;
margin: .125em;
display: inline-block;
background: #666;
color: #eee;
border-radius: 1em;
}
/* LAYOUT (l-)
============================================= */
.map-wrap {
height: auto;
overflow: hidden;
position: relative;
}
.map-aside {
background: rgba(242, 243, 245, 0.6);
width: 325px;
position: absolute;
top: 0;
right: 0;
z-index: 98;
}
.map-aside ul,
.map-aside li {
list-style: none;
margin: 0;
padding: 0;
}
.map-main {
width: auto;
overflow: hidden;
position: relative;
z-index: 97;
}
/* COMPONENTS (c-)
============================================= */
.c-nav__container {
position: relative;
}
.c-nav__container > li > .regionTitle {
background-color: #ffffff;
border-top: solid 1px rgba(219, 222, 227, 0.6);
}
.c-nav__container .regionTitle {
color: #3e3e3e;
font-weight: 400;
padding: 16px 40px;
position: relative;
text-transform: uppercase;
text-decoration: none;
z-index: 2;
font-size: 1.5rem;
}
.c-nav__container .regionTitle:hover {
color: #006fba;
}
.c-nav__container .regionTitle:before {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 8px solid #006fba;
content: '';
position: absolute;
top: 43%;
left: 22px;
}
.c-nav__container .regionTitle:after {
background-color: rgba(242, 243, 245, 0.6);
border: solid 2px #006fba;
border-radius: 50%;
content: '';
height: 8px;
position: absolute;
top: 43%;
left: 22px;
width: 8px;
transform: translateY(-50%);
}
.c-nav__item:after {
color: rgba(213, 216, 223, 0.6);
content: '+';
font-size: 1.5rem;
font-weight: 300;
margin-top: 2px;
position: absolute;
top: 13px;
left: 296px;
transform: rotate(0deg);
transition: all 0.25s cubic-bezier(0.87, -0.41, 0.19, 1.44);
}
.c-nav__item.j-is-active:after {
color: rgba(156, 163, 178, 0.6);
transform: rotate(-45deg);
transition: all 0.25s cubic-bezier(0.87, -0.41, 0.19, 1.44);
}
.c-nav__item {
cursor: pointer;
margin-top: -1px;
position: relative;
}
.c-nav__sub {
background-color: rgba(242, 243, 245, 0.6);
max-height: 0;
opacity: 0;
visibility: hidden;
transition: 0.25s ease-in-out;
transition-property: max-height, opacity;
}
.c-nav__sub a {
color: #3e3e3e;
display: block;
padding: 8px 40px;
position: relative;
font-family: Lora, Garamond, georgia, serif;
text-transform: uppercase;
text-decoration: none;
width: 100%;
}
.c-nav__sub a:hover {
background-color: rgba(233, 235, 238, 0.6);
}
.c-nav__sub a:before {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 8px solid #3e3e3e;
content: '';
position: absolute;
top: 42%;
left: 22px;
}
.c-nav__sub a:after {
background-color: rgba(242, 243, 245, 0.6);
border: solid 2px #3e3e3e;
border-radius: 50%;
content: '';
height: 8px;
position: absolute;
top: 42%;
left: 22px;
width: 8px;
transform: translateY(-50%);
}
.c-icon {
background-color: transparent;
border: solid 9px #006fba;
border-radius: 50%;
transform: rotate(-45deg);
}
.c-icon:after {
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-top: 12px solid #006fba;
content: '';
position: absolute;
top: 16px;
left: -5px;
}
.c-icon__red {
border-color: #ef4658;
}
.c-icon__red:after {
border-top-color: #ef4658;
}
/* JAVASCRIPT (j-)
============================================= */
.c-nav__sub.j-is-open {
max-height: 100vh;
opacity: 1;
transition: 0.25s ease-in-out;
transition-property: max-height, opacity;
visibility: visible;
}
.j-is-highlight {
background-color: rgba(233, 235, 238, 0.6);
}
/* ANIMATION (a-)
============================================= */
.leaflet-marker-icon,
.leaflet-marker-shadow {
animation: fadein 2s;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
<div class="map-wrap">
<div class="map-main">
<div id="map"></div>
</div>
<div class="btns">
<button class="btn playButton"><i class="fa fa-play" style="cursor:pointer;"></i> Play</button>
<button class="btn pauseButton"><i class="fa fa-pause" style="cursor:pointer;"></i> Pause</button>
<button class="btn resetButton"><i class="fa fa-reply" style="cursor:pointer;"></i> Restart</button>
</div>
<div class="map-aside">
<div class="c-nav">
<h1 class="project-title">Projects</h1>
<!--<button class="playButton"><i class="fa fa-play" style="cursor:pointer;"></i> Play</button>-->
<ul class="c-nav__container">
<li class="c-nav__item">
<h2 id="regionTitle1" class="regionTitle" style="cursor:pointer;">Middle East</h2>
<ul class="c-nav__sub">
<li><a href="#" id="Egypt">Egypt</a></li>
<li><a href="#" id="Syria">Syria</a></li>
<li><a href="#" id="Lebanon">Lebanon</a></li>
<li><a href="#" id="Lybia">Lybia</a></li>
<li><a href="#" id="Tunisia">Tunisia</a></li>
<li><a href="#" id="Iraq">Iraq</a></li>
<li><a href="#" id="Jordan">Jordan</a></li>
</ul>
</li>
<li class="c-nav__item">
<h2 class="regionTitle" style="cursor:pointer;">Africa</h2>
<ul class="c-nav__sub">
<li><a href="#" id="Ethiopia">Ethiopia</a></li>
<li><a href="#" id="Kenya">Kenya</a></li>
<li><a href="#" id="Tanzania">Tanzania</a></li>
<li><a href="#" id="Uganda">Uganda</a></li>
<li><a href="#" id="Rwanda">Rwanda</a></li>
<li><a href="#" id="Burundi">Burundi</a></li>
<li><a href="#" id="SouthAfrica">South Africa</a></li>
<li><a href="#" id="Niger">Niger</a></li>
<li><a href="#" id="Guinea">Guinea</a></li>
<li><a href="#" id="Liberia">Liberia</a></li>
</ul>
</li>
<li class="c-nav__item">
<h2 id="regionTitle3" class="regionTitle" style="cursor:pointer;">Asia</h2>
<ul class="c-nav__sub">
<li><a href="#" id="Nepal">Nepal</a></li>
<li><a href="#" id="Myanmar">Myanmar</a></li>
<li><a href="#" id="Philippines">Philippines</a></li>
<li><a href="#" id="Armenia">Armenia</a></li>
<li><a href="#" id="Georgia">Georgia</a></li>
</ul>
</li>
<li class="c-nav__item">
<h2 id="regionTitle4" class="regionTitle" style="cursor:pointer;">Europe</h2>
<ul class="c-nav__sub">
<li><a href="#" id="Ukraine">Ukraine</a></li>
<li><a href="#" id="France">France</a></li>
</ul>
</li>
<li class="c-nav__item">
<h2 id="regionTitle5" class="regionTitle" style="cursor:pointer;">Americas</h2>
<ul class="c-nav__sub">
<li><a href="#" id="Haiti">Haiti</a></li>
<li><a href="#" id="ElSalvador">El Salvador</a></li>
<li><a href="#" id="Panama">Panama</a></li>
<li><a href="#" id="Tennessee">Tennessee</a></li>
<li><a href="#" id="BVI">British Virgin Islands</a></li>
<li><a href="#" id="Mexico">Mexico</a></li>
<li><a href="#" id="Honduras">Honduras</a></li>
<li><a href="#" id="DominicanRepublic">Dominican Republic</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div><!-- end .map-wrap -->
<script>
var startPoint = [25.6872, 32.6396];
var map = L.map('map').setView(startPoint, 3);
//var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
var googleTerrain = new /*L.tileLayer('http://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}',{*/
/*
L.tileLayer('http://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',{
maxZoom: 9,
subdomains:['mt0','mt1','mt2','mt3']
}).addTo(map);
*/
L.tileLayer('https://api.mapbox.com/styles/v1/nezunoban/cjvlg3wxq0s4o1cnr4uhemtyj/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoibmV6dW5vYmFuIiwiYSI6ImNqd3dpbHRteDBoenI0YnBmYXd3dm1qMnkifQ.StDt9gBicmmSPSpiqtK1lg', {
maxZoom: 9,
//subdomains:['mt0','mt1','mt2','mt3']
}).addTo(map);
var redIcon = L.icon({
iconUrl: 'http://bouchebelconsultants.com/wp-content/uploads/2019/06/marker-icon-red.png',
iconSize: [25, 41], // size of the icon
iconAnchor: [12, 41], // point of the icon which will correspond to marker's location
popupAnchor: [0, -29] // point from which the popup should open relative to the iconAnchor
});
var animIndex = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31 ];
var first = false;
var stopping = false;
const points = [
// Middle East
{
"country": "Egypt",
"countryTitle": "Egypt",
"description": "Designed, managed, and evaluated extensive refugee response programming.<ul><li>Risk reduction</li><li>Expat evacuation</li><li>Response to migrant crisis from Libya</li></ul><span>WASH</span><span>CFI</span><span>relief</span><span>programming</span>",
"coords": L.latLng(25.6872, 32.6396),
"zoom": 4,
"marker": undefined
},
{
"country": "Syria",
"countryTitle": "Syria",
"description": "Risk reduction, evacuation, and response to migrant crisis from Libya<ul><li>Feeding and WASH Program Design and launch</li><li>Core humanitarian relief focussed on IDP response</li><li>Cash/voucher based programs</li><li>Emergency relief</li><li>Increased funding by one million dollars for IDP response after one year of launch</li></ul><span>WASH</span><span>IDP</span><span>relief</span><span>programming</span>",
"coords": L.latLng(33.5138, 36.2765),
"zoom": 6,
"marker": undefined
},
{
"country": "Lebanon",
"countryTitle": "Lebanon",
"description": "Designed, managed, and evaluated extensive refugee response programming<ul><li>Core humanitarian relief </li><li>Cash/voucher based programs</li><li>Emergency relief </li><li>Researched, designed, and implemented refugee response, including the launch of programming</li></ul><span>WASH</span><span>CFI</span><span>relief</span><span>programming</span>",
"coords": L.latLng(33.8938, 35.5018),
"zoom": 8,
"marker": undefined
},
{
"country": "Lybia",
"countryTitle": "Lybia",
"description": "<ul><li>Expat evacuation</li><li>Crisis response</li><li>Migrant crisis</li><li>Humanitarian response during conflict</li><li>Advising transitional council in Benghazi on human rights law and humanitarian affairs</li></ul>",
"coords": L.latLng(27.0365, 14.4290),
"zoom": 4,
"marker": undefined
},
{
"country": "Tunisia",
"countryTitle": "Tunisia",
"description": "<ul><li>Managing migrant crisis response</li></ul>",
"coords": L.latLng(36.8065, 10.1815),
"zoom": 6,
"marker": undefined
},
{
"country": "Iraq",
"countryTitle": "Iraq",
"description": "<ul><li>Humanitarian response</li><li>Managed USAID contract</li></ul>",
"coords": L.latLng(33.3152, 44.3661),
"zoom": 6,
"marker": undefined
},
{
"country": "Jordan",
"countryTitle": "Jordan",
"description": "<ul><li>Refugee crisis response</li><li>Risk reduction preparedness</li></ul>",
"coords": L.latLng(31.9539, 35.9106),
"zoom": 7,
"marker": undefined
},
// Africa
{
"country": "Ethiopia",
"countryTitle": "Ethiopia",
"description": "On the ground research of the long-term effect of women’s economic empowerment project on poverty and nutrition in Addis Ababa.<ul><li>Trained enumerators and facilitators</li><li>Supervised initial round of household surveys and key informant interviews</li><li>Collaborated with local consulting company on collection of raw data</li><li>Drought recovery in pastoralist contexts</li><li>Emergency-based feeding</li><li>School-based nutrition programs</li><li>Urban gardening</li><li>Humanitarian staff development</li><li>Longitudinal program assessment study oversight</li><ul>",
"coords": L.latLng(8.9806, 38.7578),
"zoom": 4,
"marker": undefined
},
{
"country": "Kenya",
"countryTitle": "Kenya",
"description": "<ul><li>Humanitarian staff development</li><li>Adolescent life skills training</li><li>Emergency-based feeding</li><li>Women's livelihood programs</li><li>Team building strategy development</li></ul>",
"coords": L.latLng(1.2921, 36.8219),
"zoom": 4,
"marker": undefined
},
{
"country": "Tanzania",
"countryTitle": "Tanzania",
"description": "<ul><li>Designed and led a Capacity Building Modality for school-based nutrition programs.</li><li>Mortgage project to provide low cost houses for public employees and farmers</li><li>Proposal and planning for well system in Mtwara</li><li>Project write-ups, Strategic Plans, Business Plans, Project design, Concept Papers, Resource Mobilization strategy, and Project Appraisals</li><li>Formulation of a two year plan to end Female Genital Mutilation (FGM) and child marriage practices involving broadcast media, school groups and activities, community and school task forces, monitoring and evaluation </li><li>Grant coordination for marketing support for local businesses - Grant proposal for vocational education and training program</li></ul><span>ASRH</span><span>life skills training</span><span>WASH</span><span>child nutrition</span><span>women's empowerment</span><span>cross-sector linkages</span>",
"coords": L.latLng(-6.1630, 35.7516),
"zoom": 4,
"marker": undefined
},
{
"country": "Uganda",
"countryTitle": "Uganda",
"description": "<ul><li>ASRH in refugee contexts</li><li>Nutrition program for chronically malnourished pregnant/lactating women</li><li>Youth-led WASH project in refugee settlements proposal</li></ul><span>WASH</span><span>ASRH</span>",
"coords": L.latLng(0.3476, 32.5825),
"zoom": 4,
"marker": undefined
},
{
"country": "Rwanda",
"countryTitle": "Rwanda",
"description": "<ul><li>Established program between refugees and immigrants to local students for educational and transitional assistance</li><li>Created and led various fundraising opportunities for support of microfinance loans</li><li>Collaborated with Kigali Health Institute to plan logistics of five week mental health training</li></ul>",
"coords": L.latLng(-1.9706, 30.1044),
"zoom": 4,
"marker": undefined
},
{
"country": "Burundi",
"countryTitle": "Burundi",
"description": "<ul><li>Humanitarian response and development efforts</li></ul>",
"coords": L.latLng(-3.3731, 29.9189),
"zoom": 4,
"marker": undefined
},
{
"country": "SouthAfrica",
"countryTitle": "South Africa",
"description": "<ul><li>Food product distribution</li></ul>",
"coords": L.latLng(-26.2041, 28.0473),
"zoom": 4,
"marker": undefined
},
{
"country": "Niger",
"countryTitle": "Niger",
"description": "Development Contract supporting:<ul><li>Water</li><li>Health</li><li>Operations</li><li>Cereal Banks</li><li>Feeding program</li></ul>",
"coords": L.latLng(13.5116, 2.1254),
"zoom": 4,
"marker": undefined
},
{
"country": "Liberia",
"countryTitle": "Liberia",
"description": "Led socio-economic research in contribution to the conservation of Liberia's biodiversity for a proposed protected area of rain forest to enable active conservation and sustainable use of biodiversity by forest-dependent communities, with research including:<ul><li>Designing social component of SES survey</li><li>Focus group questions</li><li>Key-informant interviews</li><li>Desk review</li><li>Final report prepared for World Bank</li></ul><span>MEL</span><span>environment</span>",
"coords": L.latLng(6.3156, -10.8074),
"zoom": 4,
"marker": undefined
},
{
"country": "Guinea",
"countryTitle": "Guinea",
"description": "IRC contract in support of UNHCR serving Liberian and Sierra Leonean refugees<ul><li>Education</li><li>Food security</li><li>WASH</li><li>Protection and a feeding program</li><li>Gender based violence program</li></ul><span>WASH</span>",
"coords": L.latLng(9.9456, -9.6966),
"zoom": 4,
"marker": undefined
},
// Europe
{
"country": "Ukraine",
"countryTitle": "Ukraine",
"description": "<ul><li>Conflict response</li></ul>",
"coords": L.latLng(50.4501, 30.5234),
"zoom": 4,
"marker": undefined
},
{
"country": "France",
"countryTitle": "France",
"description": "Conducted assessment of refugee crisis and provided strategy consultation for field based project implementers in Calais",
"coords": L.latLng(50.9513, 1.8587),
"zoom": 4,
"marker": undefined
},
// Americas
{
"country": "Haiti",
"countryTitle": "Haiti",
"description": "<ul><li>Aid and development</li><li>Hurricane response</li><li>Earthquake response</li></ul>",
"coords": L.latLng(18.5944, -72.3074),
"zoom": 4,
"marker": undefined
},
{
"country": "ElSalvador",
"countryTitle": "El Salvador",
"description": "<ul><li>Nutrition</li></ul>",
"coords": L.latLng(13.6929, -89.2182),
"zoom": 4,
"marker": undefined
},
{
"country": "Panama",
"countryTitle": "Panama",
"description": "<ul><li>Disaster response</li><li>Development work amongst indigenous population</li></ul>",
"coords": L.latLng(8.9824, -79.5199),
"zoom": 4,
"marker": undefined
},
{
"country": "Tennessee",
"countryTitle": "Tennessee",
"description": "Researched regulations, legal requirements and compliance for operation and certification requirements<ul><li>Managed compliance processes for multiple entities: The Achievement School District, State of Tennessee, and other charter school organizations</li><li>Lead Diversity Initiative project in order to increase diverse hires by 40% network wide</li></ul><span>education</span>",
"coords": L.latLng(36.1627, -86.7816),
"zoom": 4,
"marker": undefined
},
{
"country": "BritishVirginIslands",
"countryTitle": "British Virgin Islands",
"description": "Coordinated disaster response relief following Hurricane Irma<ul><li>Worked with partner organizations and major donors to provide immediate life-saving aid</li></ul><span>emergency aid</span><span>relief</span><span>CFI</span>",
"coords": L.latLng(18.4207, -64.6400),
"zoom": 4,
"marker": undefined
},
{
"country": "Mexico",
"countryTitle": "Mexico",
"description": "<ul><li>Feasbility study for a large water project with WVI</li></ul>",
"coords": L.latLng(19.4326, -99.1332),
"zoom": 4,
"marker": undefined
},
{
"country": "Honduras",
"countryTitle": "Honduras",
"description": "<ul><li>Feasibility study for a development project</li></ul>",
"coords": L.latLng(14.0650, -87.1715),
"zoom": 4,
"marker": undefined
},
{
"country": "DominicanRepublic",
"countryTitle": "Dominican Republic",
"description": "<ul><li>Consultancy on sponsorship program efficacy</li></ul>",
"coords": L.latLng(18.4861, -69.9312),
"zoom": 4,
"marker": undefined
},
// Asia
{
"country": "Nepal",
"countryTitle": "Nepal",
"description": "Earthquake Response<ul><li>Created, managed, and evaluated Children’s Feeding, Agriculture and Women’s Empowerment programming in Kimtang</li><li>Contributed to household survey creation, trained enumerators and facilitators, supervised data collection and analyzed raw data</li><li>Presented analyzed data and used to craft 5 year national program design plan</li><li>Managed relationship, provided counsel, and capacity management expertise to partner organizations to increase efficiency and effectiveness of programming</li></ul><span>WASH</span><span>WE</span><span>Agriculture</span>",
"coords": L.latLng(28.3949, 84.1240),
"zoom": 4,
"marker": undefined
},
{
"country": "Myanmar",
"countryTitle": "Myanmar",
"description": "Typhoon response",
"coords": L.latLng(16.8661, 96.1951),
"zoom": 4,
"marker": undefined
},
{
"country": "Philippines",
"countryTitle": "Philippines",
"description": "<ul><li>Child nutrition</li><li>Disaster response</li></ul>",
"coords": L.latLng(14.5995, 120.9842),
"zoom": 4,
"marker": undefined
},
{
"country": "Armenia",
"countryTitle": "Armenia",
"description": "Rural Development project design and management",
"coords": L.latLng(40.1872, 44.5152),
"zoom": 4,
"marker": undefined
},
{
"country": "Georgia",
"countryTitle": "Georgia",
"description": "<ul><li>Conflict response</li></ul>",
"coords": L.latLng(41.7151, 44.8271),
"zoom": 4,
"marker": undefined
},
];
// NEW Markerstuff
for ( const point of points ) {
point.marker = L.marker (point.coords, {
title: point.countryTitle,
icon: redIcon,
}).addTo(map).bindPopup("<h3>" + point.countryTitle + "</h3><p>" + point.description + "</p>");
}
/// Automated animation ///
var duration = 3;
var index = 0;
googleTerrain.on('load', function(e) {
map.scrollWheelZoom.disable();
if(first) return;
first = true;
setTimeout(animation, 2000);
});
function animation() {
if(stopping === false) {
const point = points[animIndex[index]]
console.log('animaaate');
map.closePopup();
fly(point);
index++;
setTimeout(animation, duration * 2000 + 3000);
}
}
function fly(point){
console.log('flyyy');
//map.flyTo(position,zoom,{pan:{easeLinearity: 1}});
map.flyTo(point.coords, point.zoom, {
duration: duration,
easeLinearity: 1,
});
setTimeout(() => {
console.log(point.marker.getPopup());
//map.openPopup(point.marker.getPopup());
point.marker.openPopup(point.coords);
}, duration * 1000 );
}
/// Clicking ///
// open popup
function markerFunction(id){
for (const point of points){
//console.log( markerID );
//console.log(id);
if (point.country == id){
fly(point);
//markers[i].openPopup();
//console.log(markerID + id);
};
}
}
jQuery("a").click(function(){
map.closePopup();
markerFunction(jQuery(this)[0].id);
jQuery('a').removeClass("j-is-highlight");
jQuery(this).addClass("j-is-highlight");
stopping = true;
});
jQuery(".resetButton").click(function(){
stopping = false;
index = 0;
map.closePopup();
console.log('resettify');
animation();
});
jQuery(".pauseButton").click(function(){
stopping = true;
console.log('pausification');
});
jQuery(".playButton").click(function(){
stopping = false;
console.log('playtime');
animation();
});
// open sub menus
jQuery('.regionTitle').click(function (e) {
jQuery(this).next( ".c-nav__sub").toggleClass('j-is-open');
jQuery(this).closest( ".c-nav__item").toggleClass('j-is-active');
});
</script>
We are a broad-based consulting firm with more than 40 years experience in the humanitarian industry. Our work spans the front lines of some of the world’s most challenging environments. From Iraq, Yemen, Guinea, Niger and Rwanda, to Haiti and Mexico, Bouchebel Consultants has worked in more than 40 countries. This has included advising clients, implementing programs, cultivating local relationships in contextually challenging regions, and delivering effective and reliable relief operations in partnership with NGOs and the private sector.