

					<!DOCTYPE html>
<html lang="nl">

    <head>

        <title>Out of home masters | Maps</title>

        <!-- META -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv="Content-Language" content="NL">
        <meta http-equiv="imagetoolbar" content="false">
        <meta name="robots" content="noindex">
        <!-- META -->

        <!-- CSS -->
        <link href="/css/bootstrap.min-24.css" rel="stylesheet">
        <link href="/css/normalize.css" rel="stylesheet">
        <link href="/css/global.css" rel="stylesheet">
        <link href="/css/fonts.css" rel="stylesheet">
        <link href="/css/sprites.css" rel="stylesheet">
        <link href="/css/buttons.css" rel="stylesheet">
        <link href="/css/credits.css" rel="stylesheet">
        <link href="/css/slideshow.css" rel="stylesheet">
        <!-- CSS -->

        <!-- SKIN -->
        <link href="/css/tmpl/tmpl-portaal-skin-out-of-home-masters.css" rel="stylesheet">
        <!-- SKIN -->

        <!-- ELMT -->
        <link href="/css/elmt/elmt-navbar.css" rel="stylesheet">
        <link href="/css/elmt/elmt-leftbar.css" rel="stylesheet">
        <link href="/css/elmt/elmt-leftbar-small.css" rel="stylesheet">
        <link href="/css/elmt/elmt-autocomplete.css" rel="stylesheet">
        <link href="/css/elmt/elmt-call-me-back.css" rel="stylesheet">
        <link href="/css/elmt/elmt-overlay.css" rel="stylesheet">
        <link href="/css/elmt/elmt-note.css" rel="stylesheet">
        <link href="/css/elmt/elmt-z-index.css" rel="stylesheet">
        <link href="/css/elmt/elmt-multicampaign.css" rel="stylesheet">
        <!-- ELMT -->

        <!-- RONN -->
        <link href="/css/ronn/ronn-margin.css" rel="stylesheet">
        <link href="/css/ronn/ronn-padding.css" rel="stylesheet">
        <link href="/css/ronn/ronn-height.css" rel="stylesheet">
        <link href="/css/ronn/ronn-display.css" rel="stylesheet">
        <link href="/css/ronn/ronn-font-weight.css" rel="stylesheet">
        <link href="/css/ronn/ronn-title.css" rel="stylesheet">
        <link href="/css/ronn/ronn-text-color.css" rel="stylesheet">
        <link href="/css/ronn/ronn-text-style.css" rel="stylesheet">
        <link href="/css/ronn/ronn-text-size.css" rel="stylesheet">
        <link href="/css/ronn/ronn-background.css" rel="stylesheet">
        <link href="/css/ronn/ronn-buttons.css" rel="stylesheet">
        <link href="/css/ronn/ronn-colors.css" rel="stylesheet">
        <link href="/css/ronn/ronn-icons.css" rel="stylesheet">
        <!-- RONN -->

        <!-- MAPBOX -->
        <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js'></script>
        <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet'>

        <!-- TRAFFIC -->
        <script src='/js/mapbox-gl-traffic.js'></script>
        <link href='/css/mapbox-gl-traffic.css' rel='stylesheet' />

        <!-- TO CSV -->
        <script src='/js/csv2geojson.js'></script>

        <!-- GEOCODER -->
        <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.2.0/mapbox-gl-geocoder.min.js'></script>
        <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.2.0/mapbox-gl-geocoder.css' type='text/css' />

        <link href="/css/elmt/elmt-maps.css" rel="stylesheet">

        <!-- FAVICON -->
                <link rel="shortcut icon" href="/favicon-out-of-home-masters.ico">
        
        <link rel="icon" type="image/png" href="/images/favicon-196x196-out-of-home-masters.png" sizes="196x196">
        <link rel="icon" type="image/png" href="/images/favicon-160x160-out-of-home-masters.png" sizes="160x160">
        <link rel="icon" type="image/png" href="/images/favicon-96x96-out-of-home-masters.png" sizes="96x96">
        <link rel="icon" type="image/png" href="/images/favicon-32x32-out-of-home-masters.png" sizes="32x32">
        <link rel="icon" type="image/png" href="/images/favicon-16x16-out-of-home-masters.png" sizes="16x16">

        <link rel="apple-touch-icon" href="/images/apple-touch-icon-out-of-home-masters.png">
        <link rel="apple-touch-icon" sizes="152x152" href="/images/apple-touch-icon-152x152-out-of-home-masters.png">
        <link rel="apple-touch-icon" sizes="144x144" href="/images/apple-touch-icon-144x144-out-of-home-masters.png">
        <link rel="apple-touch-icon" sizes="120x120" href="/images/apple-touch-icon-120x120-out-of-home-masters.png">
        <link rel="apple-touch-icon" sizes="114x114" href="/images/apple-touch-icon-114x114-out-of-home-masters.png">
        <link rel="apple-touch-icon" sizes="76x76" href="/images/apple-touch-icon-76x76-out-of-home-masters.png">
        <link rel="apple-touch-icon" sizes="72x72" href="/images/apple-touch-icon-72x72-out-of-home-masters.png">
        <link rel="apple-touch-icon" sizes="60x60" href="/images/apple-touch-icon-60x60-out-of-home-masters.png">
        <link rel="apple-touch-icon" sizes="57x57" href="/images/apple-touch-icon-57x57-out-of-home-masters.png">

        <meta name="msapplication-TileColor" content="#FFFFFF">
        <meta name="msapplication-square70x70logo" content="/images/mstile-70x70-out-of-home-masters.png">
        <meta name="msapplication-TileImage" content="/images/mstile-144x144-out-of-home-masters.png">
        <meta name="msapplication-square150x150logo" content="/images/mstile-150x150-out-of-home-masters.png">
        <meta name="msapplication-square310x310logo" content="/images/mstile-310x310-out-of-home-masters.png">
        <meta name="msapplication-wide310x150logo" content="/images/mstile-310x150-out-of-home-masters.png">        <!-- FAVICON -->

        <!-- ANALYTICS -->
        <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-58299200-2"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-58299200-2');
</script>        <!-- ANALYTICS -->

        <!-- HACKS AND ERROR -->

        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

        <!--[if lt IE 8]>
            <link href="/css/ie7.css" rel="stylesheet">
        <![endif]-->

        <noscript>
            <link href="/css/no-script.css" rel="stylesheet">
        </noscript>
        
            <style>


        .marker {
          /*background-image: url('/mapbox-icon.png');*/
          background-size: cover;
          width: 50px;
          height: 50px;
          /*border-radius: 50%;*/
          cursor: pointer;
        }
                
        .test {
            width: 26px;
            height: 26px;
            border-radius: 50% 50% 50% 0;
            background: #89849b;
            position: absolute;
            transform: rotate(-45deg);
            left: 50%;
            top: 50%;
            margin: -20px 0 0 -20px;
            z-index: 99999999;
        }
        
/*
        .test:after {
            content: "";
            width: 14px;
            height: 14px;
            margin: 8px 0 0 8px;
            background: #2e353f;
            position: absolute;
            border-radius: 50%;
            box-shadow: inset 0px 2px 0px #252A32;
            transform: rotate(45deg);
        }
*/
                
        .test span {
            padding-top: 3px;
            padding-left: 2px;
            width: 100%;
            text-align: center;
            color: #fff;
            transform: rotate(+45deg);
            display: block;
            font-weight: bold;
        }

    </style>
        
        
        <!-- AUTHOR -->
        <link rel="author" href="https://plus.google.com/+OutofhomemastersNloutofhomemasters/posts">

    </head>

    <body style="overflow-x: hidden;">
        
        <div class='pin bounce'></div>
        <div class='pulse'></div>
        
                        <nav class="nav-ron navbar-fixed-top navbar-default print-none" role="navigation">
    <div class="container-fluid">

            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                
                                <a class="navbar-brand" style="background-image: url(/images/logo-out-of-home-masters.svg); background-size: contain;"></a>
                
                                                
                <a class="navbar-menu-b hidden-lg hidden-md hidden-sm"></a>

                                                
            </div>

            
    </div>

                    
</nav>                
        
                        
<div class="leftbar print-none">

    <a class="home background-color"><img src="/images/icon-menu.svg" width="20"></a>

    <a class="switch overview " href="/overview/museum-jan-cunen-een-moment---week-38/1630314960/194218/"><span class="icon"></span><span class="txt">Overzicht</span></a>

    
        <a class="switch maps active" href="/maps/museum-jan-cunen-een-moment---week-38/1630314960/194218/"><span class="icon"></span><span class="txt">Maps</span></a>
        
        
        <a class="switch begroting " href="/begroting/museum-jan-cunen-een-moment---week-38/1630314960/194218/"><span class="icon"></span><span class="txt">Begroting</span></a>
        
        <a class="switch materiaal-specificaties " href="/aanleverspecs/museum-jan-cunen-een-moment---week-38/1630314960/194218/"><span class="icon"></span><span class="txt">Materiaal specificaties</span></a>
        
    
    <a class="switch doorsturen"><span class="icon"></span><span class="txt">Doorsturen</span></a>

    
</div>

                
<div class="leftbar-small print-none">
    <div class="inner">

        <a class="switch overview " href="/overview/museum-jan-cunen-een-moment---week-38/1630314960/194218/"><span class="canvas"><span class="icon"></span></span><span class="txt">Overzicht</span></a>

        
                <a class="switch maps active" href="/maps/museum-jan-cunen-een-moment---week-38/1630314960/194218/"><span class="canvas"><span class="icon"></span></span><span class="txt">Maps</span></a>
        
        
                <a class="switch begroting " href="/begroting/museum-jan-cunen-een-moment---week-38/1630314960/194218/"><span class="canvas"><span class="icon"></span></span><span class="txt">Begroting</span></a>
        
                <a class="switch materiaal-specificaties " href="/aanleverspecs/museum-jan-cunen-een-moment---week-38/1630314960/194218/"><span class="canvas"><span class="icon"></span></span><span class="txt">Materiaal specificaties</span></a>
        
        
                <a class="switch doorsturen"><span class="canvas"><span class="icon"></span></span><span class="txt">Doorsturen</span></a>

        <!-- BUTTON -->
                <!-- BUTTON -->

        <a class="b-close background-color"></a>
    </div>
</div>

                        
<div class="call-me-back print-none">
    <div class="canvas">
        <div class="left">
            <a class="profile background-color hover-background-color-lite border-color-lite-top border-color-lite-left"><img src="https://outofhomemasters-campaigns.com/images/uploads/user-photo/rudy_2024-10-09-090729_stnb.jpg">Rudy</a>
            <a class="contact background-color hover-background-color-lite border-color-lite-left border-color-lite-bottom"><img src="/images/icon-talk.svg" width="26">Contact </a>
        </div>
        <div class="right">

            <div class="info">
                <ul>
                    <li class="name">Rudy</li>
                    <li class="surname">Dimmendaal</li>
                    <li class="phone">+31 06 81 40 12 49</li>
                    <li class="phone">+31 (0)85 - 043 67 09</li>
                    <li><a class="text-color text-color-hover">Bel mij terug</a></li>
                </ul>
            </div>

            <div class="send">
                <div class="status"></div>
                
                                <div id="form-messages"></div>
                
                <form id="form-call-me-back" method="post" action="/mail/smtp-mail-call-me-back.php">

                    <input type="hidden" id="from" name="from" size="40" maxlength="35" value="info@outofhomemasters.nl">
                    <input type="hidden" id="subject" name="subject" value="Website - U heeft een terugbelverzoek">
                    <input type="hidden" id="to" name="to" size="40" value="rudy@outofhomemasters.nl">
                    <input type="hidden" id="campagne" name="campagne" size="40" value="
	Museum Jan Cunen | Een Moment - week 38
">
                    <input type="hidden" id="link" name="link" size="40" value="https://outofhomemasters-campaigns.com/overview/museum-jan-cunen-een-moment---week-38/1630314960/194218/">
                    <input type="hidden" id="authorname" name="authorname" size="40" value="Rudy Dimmendaal">

                    <div class="form-group">
                        <input type="text" id="name" class="finput" name="name" maxlength="32" size="25" placeholder="Uw naam">
                    </div>

                    <div class="form-group">
                        <input type="text" id="telefoonnummer" class="finput" name="telefoonnummer" maxlength="32" size="25" placeholder="Uw telefoonnummer">
                    </div>

                    <div class="form-group">
                        <button type="submit" class="bsend" name="submit" value="Submit">Verzenden</button>
                    </div>
                    
                </form>

            </div>

        </div>
    </div>
</div>


<div id="overlay-tell-a-friend" class="padding-lg-top-60 elmt-overlay">

    <div class="inner border-color margin-lg-top-100 margin-sm-top-50 margin-lg-bottom-100 col-lg-6 col-lg-offset-9 col-md-6 col-md-offset-9 col-sm-20 col-sm-offset-2 col-xs-22 col-xs-offset-1 text-center">
        <div class="row">
            <a class="b-close" style="background-image: url(/images/icon-close-out-of-home-masters.svg);"></a>
            <div class="status background-color-trans"><span>hallow</span></div>
            <div class="padding-lg-top-90 padding-xs-top-60 padding-lg-bottom-90 padding-lg-left-80 padding-lg-right-80 " onclick="event.stopPropagation();">
            <div class="row">

                <img class="margin-lg-bottom-90 margin-sm-bottom-20 margin-xs-bottom-20" src="/images/logo-out-of-home-masters.svg" class="responsive-img" style="max-width: 200px;">
                
                                <div id="form-messages" style="display: none;"></div>
                
                
                    <form id="form-tell-a-friend" method="post" action="/mail/smtp-mail-send-a-friend.php">

                                                                                                <input type="hidden" id="subject" name="subject" value="Museum Jan Cunen | Abricampagne Oss - week 38">
                                                
                        <input type="hidden" name="message" value="<table cellpadding='10' cellspacing='0' border='0' width='100%' bgcolor='f8fafc'>
	<tr>
		<td align='center'>
		
			<table cellpadding='0' cellspacing='1' border='0' bgcolor='e0e1e3'>
				<tr>
					<td align='center'>

						<table cellpadding='0' cellspacing='0' border='0' width='498' bgcolor='ffffff'>
							<tr>
								<td align='center' height='100'>
                                    
                                      <table cellpadding='30' cellspacing='0' border='0'>
                                        <tr>
                                            <td align='center'>
                                                                                                                                                                                                <font size='5' face='arial' color='4e4e4e'>Museum Jan Cunen | Abricampagne Oss - week 38</font>
                                                                                            </td>
                                        </tr>
                                    </table>
									
								</td>
							</tr>
							<tr>
								<td align='center' height='225'>
                                    <img src='https://outofhomemasters-campaigns.com/images/logo-mail-out-of-home-masters.gif' border='0' alt=''>
								</td>
							</tr>
							<tr>
								<td height='20'></td>
							</tr>
							<tr>
								<td height='1' bgcolor='e0e1e3'></td>
							</tr>
							<tr>
								<td align='center'>

									<table cellpadding='40' cellspacing='0' border='0' width='100%'>
										<tr>
											
                                                
									            	<td align='center'>

										            													<a href='https://outofhomemasters-campaigns.com/overview/museum-jan-cunen-een-moment---week-38/1630314960/194218/'>
				                                        <font size='3' face='arial' color='56565a'><b>Bekijk de campagne</b></font>
				                                    </a>

				                                	</td>

									        	
										</tr>
									</table>

								</td>
							</tr>
							<tr>
								<td height='1' bgcolor='e0e1e3'></td>
							</tr>
						</table>

					</td>
				</tr>
			</table>
            <br>
            <br>
            <p><b>Disclaimer:</b>  De inhoud van dit bericht is alleen bestemd voor de geadresseerde en kan vertrouwelijke of persoonlijke informatie bevatten. Als u dit bericht onbedoeld heeft ontvangen verzoeken wij u het te vernietigen en de afzender te informeren. Het is niet toegestaan om een bericht dat niet voor u bestemd is te vermenigvuldigen dan wel te verspreiden. Aan dit bericht inclusief de bijlagen kunnen geen rechten ontleend worden, tenzij schriftelijk anders wordt overeengekomen.</p>
            
            <p><b>Disclaimer:</b>  This message is intended for the exclusive use of the person(s) mentioned as recipient(s) and may contain personal and/or confidential information. If you have received this message in error, please notify the sender and delete this message from your system immediately. Directly or indirectly copying, disclosing, distributing, printing, publicising and/or in any way using this message or any part thereof by any means is strictly prohibited if you are not the intended recipient(s). This message and any associated attachments cannot be deemed as legally binding under any circumstances without the express written consent.</p>            

		</td>
	</tr>
</table>">
                        <input type="hidden" name="cc" value="rudy@outofhomemasters.nl">

                        <div class="form-group">
                            <input type="text" id="name" class="form-input" name="name" maxlength="32" size="25" placeholder="Uw naam" >
                        </div>

                        <div class="form-group">
                            <input type="text" id="from" class="form-input" name="from" maxlength="50" size="25" placeholder="Uw email" >
                        </div>

                        <div class="form-group">
                            <input type="text" id="to" class="form-input" name="to" maxlength="50" size="25" placeholder="Versturen naar">
                        </div>

                        <div class="form-group">
                            <button type="submit" class="form-button hover-background-color" name="submit" value="Submit">Doorsturen</button>
                        </div>

                    </form>

                            </div>
            </div>
            
        </div>
    </div>

</div>

                        
                        <div class="container-fluid" id="portaal">
            <div class="row">

                                        <div id="split-window-left" class="col-lg-24" style="margin-bottom: -90px; overflow: hidden;">
    <div class="row">

        <div id='maps' style="height: 800px;"></div>

        <a id='maps-style-control' class="satelite"></a>

                    <a class="b-rounded maps" target="_blank" href="/maps/museum-jan-cunen-een-moment---week-38/6521259840/194218/standalone/">Standalone</a>
        
                <div id="maps-nav" class="active mapsnav">
            <div class="b-close background-color hover-background-color-lite active"></div>
            <div class="canvas">
                <h1>Maps</h1>
                <h2>
	Museum Jan Cunen | Een Moment - week 38
 - lagen</h2>

                <ul>

                    
                                    <li onclick="layercontrol('1')" class="active">

                                        <span class="icon" style=" 
                                                                                            background-color: #ff0000;
                                            ">
                                        </span>

                                        <a href="#">
                                            abri | Oss 
                                            
                                            
                                        </a>

                                    </li>
                                    
                                                                                                
                </ul>
            </div>
        </div>
        

    </div>
</div>

<div id="split-window-right" class="col-lg-12" style="margin-top:  80px; margin-bottom: -90px; display: none;">
    <div class="row">

        <div class="streetview">
            <div class="b-close background-color hover-background-color-lite active"></div>
            <div id="pano" style="width: 100%; border: none;"></div>
        </div>

    </div>
</div>
                
            </div>
        </div>
                

                        <div id="credits" class="container-fluid text-right margin-lg-top-90 print-none">
    <a href="https://www.birddash.nl" target="_blank">Birddash</a>
</div>                

        <!-- JAVASCRIPT -->
        <script src="/js/jquery.js"></script>
        <script src="/js/jquery.form.js"></script>
        <script src="/js/jquery-validate.min.js"></script>
        <script src="/js/send-form.js"></script>
        <script src="/js/jquery.autocomplete.js"></script>
        <script src="/js/sticky-menu.js"></script>
        <script src='/js/add-mapbox-layer.js'></script>

        <script src="/js/ui.js"></script>
        <script src="/js/init.js"></script>

        <script>
            
                                                                        
            init("tmplMaps");

        </script>

        <script>

            aCsv = new Array();
            aColor = new Array();
            aVisibility = new Array();
            aPOI = new Array();
            aMarker = new Array();

                        
                    aCsv[1] = "https://outofhomemasters-campaigns.com/files/uploads/campagne-maps-layer-csv/museum-jan-cunen-een-moment-week-38/DEFINITIEF-XY-202138_Museum-Jan-Cunen-wk38_EM_D.csv";
                    aColor[1] = "#ff0000";
                    aVisibility[1] = "visible";
                    aPOI[1] = "";
                    aMarker[1] = "";

                 
            // Global Counter
            var globalCounter = 1
            
            
            // Install Mapxbox
            mapboxgl.accessToken = 'pk.eyJ1Ijoicm9ubmllIiwiYSI6ImpreTZ3OHcifQ.epVDsls0EbJPpV5ZqPNTgg';
            var map = new mapboxgl.Map({
                container: 'maps', // container id
                style: 'mapbox://styles/ronnie/cjjpw0rmr00u52rmpdccz46vh', //stylesheet location
                
                                    center: [ 5.946,52.094], // starting position
                    zoom: 7.0, // starting zoom
                                                       
                                                       
                //pitch: 60,
                //bearing: -60, 
            });

            // Add items
            map.addControl(new mapboxgl.NavigationControl(), 'top-left');
            map.addControl(new MapboxTraffic(), 'top-left');
            map.addControl(new MapboxGeocoder({
                accessToken: mapboxgl.accessToken
            }), 'top-right');


            // JSON
            function makeGeoJSON(csvData) {

                csv2geojson.csv2geojson(csvData, {
                    latfield: 'Latitude',
                    lonfield: 'Longitude',
                    properties: 'Medium',
                    properties: 'Formule',
                    properties: 'Exploitant',
                    properties: 'Plaats',
                    properties: 'Straat',
                    properties: 'PC',
                    properties: 'Objectnr',
                    properties: 'Medium',
                    properties: 'Uiting',
                    properties: 'Formaat',
                    properties: 'Periode',
                    delimiter: ','
                }, function(err, data) {
                    
                    //map.on('load', function () {
                    
                        var switchy = document.getElementById('maps-style-control');
                        switchy.addEventListener("click", function(){
                            switchy = document.getElementById('maps-style-control');
                            if (switchy.className === 'on') {
                                switchy.setAttribute('class', 'off');
                                map.setLayoutProperty('mapbox-satellite', 'visibility', 'none');
//                                switchy.innerHTML = 'Add satellite';
                            } else {
                                switchy.setAttribute('class', 'on');
                                map.setLayoutProperty('mapbox-satellite', 'visibility', 'visible');
//                                switchy.innerHTML = 'Remove satellite';
                            }
                        });
                    

                        //var rNum = Math.random(1000)
                        map.addSource('idLayer'+globalCounter, {
                            type: 'geojson',
                            data: data
                        });
                        //console.log(data)

                    
                        // ADDLAYER CIRCLE
                        // -----------------------------------------------------------------
                        if (aPOI[globalCounter] == 0 && aMarker[globalCounter] == "") {

                            map.addLayer({
                                id: 'idLayer'+globalCounter,
                                type: 'circle',
                                source: 'idLayer'+globalCounter,
                                layout: {
                                    'visibility': 'visible'
                                },
                                paint: {
                                    'circle-radius': {
                                        'base': 1.75,
                                        'stops': [[12, 8.8], [22, 180]]
                                    },
                                    'circle-stroke-width': 2,
                                    'circle-stroke-color': "#484d5b",
                                    'circle-stroke-opacity': 1,
                                    'circle-opacity': 1,
                                    'circle-color': ["case",
                                        ['!',['has', 'user_isProcessed']], aColor[globalCounter],'#214AED']
                                }
                            });

                        }
                        // -----------------------------------------------------------------
                        // ADDLAYER CIRCLE


                        // ADDLAYER CUSTOM MARKER
                        // -----------------------------------------------------------------
                        if (aMarker[globalCounter] != "") {

                            // ADD NORMAL LAYER
                            map.addLayer({
                                id: 'idLayer'+globalCounter,
                                type: 'circle',
                                source: 'idLayer'+globalCounter,
                                layout: {
                                    'visibility': 'visible'
                                },
                                paint: {
                                    'circle-radius': {
                                        'base': 1.75,
                                        'stops': [[12, 8.8], [22, 180]]
                                    },
                                    'circle-stroke-width': 2,
                                    'circle-stroke-color': "#484d5b",
                                    'circle-stroke-opacity': 0,
                                    'circle-opacity': 0,
                                    'circle-color': ["case",
                                        ['!',['has', 'user_isProcessed']], aColor[globalCounter],'#214AED']
                                }
                            });

                            // ADD COUNTER
                            if (globalCounter > 0) {
                                data.features.forEach(function(marker) {

                                  // create a HTML element for each feature
                                  var el = document.createElement('div');
                                      el.className = 'marker mlayer'+globalCounter;
                                      el.style.backgroundImage = "url("+aMarker[globalCounter]+")";
                                      el.style.backgroundSize = "36px 36px";
                                      el.style.width = "36px";
                                      el.style.height = "36px";
                                      

                                  // make a marker for each feature and add to the map
                                  new mapboxgl.Marker(el)
                                  .setLngLat(marker.geometry.coordinates)
                                  //.setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
                                  //.setHTML('<h3>' + marker.properties.Exploitant + '</h3><p>' + marker.properties.description + '</p>'))
                                  .addTo(map);
                                });
                            }

                        }
                        // -----------------------------------------------------------------
                        // ADDLAYER CUSTOM MARKER

                    
                        // ADDLAYER POI ICON
                        // -----------------------------------------------------------------
                        if (aPOI[globalCounter] == 1) {


                        map.addLayer({
                            id: 'idLayer'+globalCounter,
                            //id: 'airports'+Math.random(1000),
            //                type: 'symbol',
                            type: 'symbol',
                            source: 'idLayer'+globalCounter,
            //                source: {
            //                    'type': 'geojson',
            //                    'data': data
            //                },
                            layout: {
                                'visibility': 'visible',
                                //'icon-image': 'icon-yellow',
                                'text-line-height': 1, // this is to avoid any padding around the "icon"
                                'text-padding': 0,
                                'text-anchor': 'bottom', // change if needed, "bottom" is good for marker style icons like in my screenshot,
                                'text-allow-overlap': true, // assuming you want this, you probably do
                                'text-field': "a", // IMPORTANT SEE BELOW: -- this should be the unicode character you're trying to render as a string -- NOT the character code but the actual character,
                                'icon-optional': true, // since we're not using an icon, only text.
                                'text-font': ['r-a-b-2 a-b-2'], // see step 1 -- whatever the icon font name,
                                'text-size': 40 // or whatever you want -- dont know if this can be data driven...
                            },
                            paint: {
                                'text-translate-anchor': 'viewport', // up to you to change this -- see the docs
                                'text-color': aColor[globalCounter], // whatever you want -- can even be data driven using a `{featureProperty}`,
                                'text-opacity': 1,
                                'text-halo-width': 2,
                                'text-halo-color': '#ffffff'
                            }
                        });

                        }
                        // -----------------------------------------------------------------
                        // ADDLAYER POI ICON
                        
                        
                        // BALLOON
                        // --------------------------------------------------------------------
                        // When a click event occurs on a feature in the places layer, open a popup at the
                        // location of the feature, with description HTML from its properties.
                        map.on('click', 'idLayer'+globalCounter, function (e) {
                            var coordinates = e.features[0].geometry.coordinates.slice();
                            //var description = e.features[0].properties.description;
                            var description = "";
                            
//                            if (typeof e.features[0].geometry.coordinates !== 'undefined') {
//                                description = description+e.features[0].geometry.coordinates+"<br>"
//                            }
                            if (typeof e.features[0].properties.Medium !== 'undefined') {
                                description = description+e.features[0].properties.Medium+"<br>"
                            }
                            if (typeof e.features[0].properties.Formule !== 'undefined') {
                                description = description+e.features[0].properties.Formule+"<br>"
                            }
                            if (typeof e.features[0].properties.Exploitant !== 'undefined') {
                                description = description+e.features[0].properties.Exploitant+"<br>"
                            }
                            if (typeof e.features[0].properties.Plaats !== 'undefined') {
                                description = description+e.features[0].properties.Plaats+"<br>"
                            }
                            if (typeof e.features[0].properties.Straat !== 'undefined') {
                                description = description+e.features[0].properties.Straat+"<br>"
                            }
                            if (typeof e.features[0].properties.PC !== 'undefined') {
                                description = description+e.features[0].properties.PC+"<br>"
                            }
                            if (typeof e.features[0].properties.Objectnr !== 'undefined') {
                                description = description+e.features[0].properties.Objectnr+"<br>"
                            }
                            if (typeof e.features[0].properties.Uiting !== 'undefined') {
                                description = description+e.features[0].properties.Uiting+"<br>"
                            }
                            if (typeof e.features[0].properties.Formaat !== 'undefined') {
                                description = description+e.features[0].properties.Formaat+"<br>"
                            }
                            if (typeof e.features[0].properties.Periode !== 'undefined') {
                                description = description+e.features[0].properties.Periode+"<br>"
                            }
                            if (typeof e.features[0].properties.Latitude !== 'undefined') {
                                description = description+e.features[0].latfield.Latitude;
                            }

                            // SHOW STREETVIEW
                            streetviewPos(coordinates[1], coordinates[0]);

                            $("#split-window-left").removeClass("col-lg-24");
                            $("#split-window-right").removeClass("col-lg-0");

                            $("#split-window-left").addClass("col-lg-12");
                            $("#split-window-right").addClass("col-lg-12");
                            $("#split-window-right").css("display", "block");

                            $('#maps-nav .b-close').removeClass("active");
                            $('#maps-nav').removeClass("active");

                            map.resize();
                            posGeo();
        
                            //window.open("https://www.google.nl/maps/@52.0319515,5.5572794,3a,75y,287.83h,81.9t/data=!3m6!1e1!3m4!1s2D0aqLWD0RL7w1mckUShDA!2e0!7i13312!8i6656");

                            // latfield: 'Latitude',
                            // lonfield: 'Longitude',
                            // properties: 'Medium',
                            // properties: 'Formule',
                            // properties: 'Exploitant',
                            // properties: 'Plaats',
                            // properties: 'Straat',
                            // properties: 'PC',
                            // properties: 'Objectnr',
                            // properties: 'Medium',
                            // properties: 'Uiting',
                            // properties: 'Formaat',
                            // properties: 'Periode',

                            // Ensure that if the map is zoomed out such that multiple
                            // copies of the feature are visible, the popup appears
                            // over the copy being pointed to.

                            while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
                                coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
                            }

                            new mapboxgl.Popup()
                                .setLngLat(coordinates)
                                .setHTML(description)
                                .addTo(map);
                        });

                        // Change the cursor to a pointer when the mouse is over the places layer.
                        map.on('mouseenter', 'idLayer'+globalCounter, function () {
                            map.getCanvas().style.cursor = 'pointer';
                        });

                        // Change it back to a pointer when it leaves.
                        map.on('mouseleave', 'idLayer'+globalCounter, function () {
                            map.getCanvas().style.cursor = '';
                        });

                        // --------------------------------------------------------------------
                        // BALLOON

                        globalCounter++

                        loadCSV();

                    //});
                });
            }


            function loadCSV() {
                if (globalCounter < aCsv.length) {

                    $.ajax({
                        type: "GET",
                        url: aCsv[globalCounter],
                        dataType: "text",
                        success: function(csvData) {makeGeoJSON(csvData);}
                     });
                }
            };


            function layercontrol(id) {
                if(aVisibility[id] == 'visible'){
                    map.setLayoutProperty("idLayer"+id, 'visibility', 'none');
                    aVisibility[id] = "none"
                    // CUSTOM ICON
                    $( ".mlayer"+id ).hide();
                }else{
                    map.setLayoutProperty("idLayer"+id, 'visibility', 'visible');
                    aVisibility[id] = "visible"
                    // CUSTOM ICON
                    $( ".mlayer"+id ).show();
                }
            }
                 
            map.on('load', function () {
                loadCSV();
            });
                 
            function posGeo() {
                var stageWidth = new Number($("#split-window-left").width());
                var newPos = new Number((stageWidth - 300) / 2)
                $(".mapboxgl-ctrl-geocoder").css("cssText", "left: -"+newPos+"px !important;");


            }
                 
            // Resize
            $(window).resize(function() {
                posGeo();
            });
                 
            posGeo();
  
        </script>

        <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCWptWYVQdH8MD6CQrVCOlYzBgZ43iRvLM&libraries=&v=weekly"></script>

        <script>
            
            var map;
            var panorama;

                        var sv = new google.maps.StreetViewService();

            // panorama = new google.maps.StreetViewPanorama(
            //     document.getElementById('pano') 
            // );

            panorama = new google.maps.StreetViewPanorama(
                
                document.getElementById("pano"),{
                    pov: {
                        heading: 34,
                        pitch: 10,
                    },
                    motionTrackingControl: false,
                    fullscreenControlOptions: {
                        position: google.maps.ControlPosition.RIGHT_TOP,
                    },
                    addressControlOptions: {
                        position: google.maps.ControlPosition.BOTTOM_CENTER,
                    },
                }

            );

            // Set the initial Street View camera to the center of the map
            sv.getPanorama({
                // location: myLatlng, 
                radius: 150, 
                fullscreenControl: false,
                source: google.maps.StreetViewSource.OUTDOOR
            }, 
                processSVData
            );

            function processSVData(data, status) {
                if (status === google.maps.StreetViewStatus.OK) {
                    panorama.setPano(data.location.pano);
                    // panorama.setPov({
                    //     heading: 270,
                    //     pitch: 0
                    // });
                    // panorama.setVisible(true);
                } else {
                    console.error('Street View data not found for this location.');
                }
            }

            // Set position
            function streetviewPos(pLat, pLng) {

                var newPosLat = parseFloat(pLat);
                var newPosLng = parseFloat(pLng);

                var newPos = new google.maps.LatLng(newPosLat, newPosLng);

                // panorama.setPosition({lat: newPosLat, lng: newPosLng});
                sv.getPanorama({
                    location: newPos,
                        radius: 250,
                        source: google.maps.StreetViewSource.OUTDOOR
                    }, 
                        processSVData
                    );

                //panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));
            
            }

        </script>

    </body>
    
</html>