

					<!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>
                
                                                                                
            </div>

            
    </div>

                    
</nav>                
        
                        
                        <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-tentoonstelling-erwin-wurm-2022/6544401120/249826/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 - tentoonstelling Erwin Wurm 2022
 - lagen</h2>

                <ul>

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

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

                                        <a href="#">
                                            Metro 30x schermen 
                                            
                                            
                                        </a>

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

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

                                        <a href="#">
                                            A0 320x frames 
                                            
                                                                                            <span class="cont">Locaties zijn 
                                                    <span class="text-color">
                                                                                                                    Indicatief
                                                                                                            </span>
                                                </span>
                                            
                                        </a>

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

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

                                        <a href="#">
                                            A0 frames Eindhoven 
                                            
                                                                                            <span class="cont">Locaties zijn 
                                                    <span class="text-color">
                                                                                                                    Indicatief
                                                                                                            </span>
                                                </span>
                                            
                                        </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-tentoonstelling-erwin-wurm-2022/CSDM-2x-locaties-metro-XY.csv";
                    aColor[1] = "#ff0000";
                    aVisibility[1] = "visible";
                    aPOI[1] = "";
                    aMarker[1] = "";

                 
                    aCsv[3] = "https://outofhomemasters-campaigns.com/files/uploads/campagne-maps-layer-csv/museum-jan-cunen-tentoonstelling-erwin-wurm-2022/CC-A0-frames-320x-67877-OOHM-Museum-Jan-Cunen-wk-4-26.csv";
                    aColor[3] = "#fff700";
                    aVisibility[3] = "visible";
                    aPOI[3] = "";
                    aMarker[3] = "";

                 
                    aCsv[6] = "https://outofhomemasters-campaigns.com/files/uploads/campagne-maps-layer-csv/museum-jan-cunen-tentoonstelling-erwin-wurm-2022/CC-50x-a0-frames-Eindhoven-XY.csv";
                    aColor[6] = "#fff700";
                    aVisibility[6] = "visible";
                    aPOI[6] = "";
                    aMarker[6] = "";

                 
            // 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>