<!DOCTYPE html>
<html>

<head>

    <!-- Yandex.Metrika counter -->
<script type="text/javascript" >
   (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
   m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
   (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

   ym(86811220, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true,
        webvisor:true
   });
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/86811220" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter --> 

<link rel="icon" href="favicon.png">
<meta property="og:image:secure_url" content="https://mapap.ru/homealone2/og-map-ha2.jpg"/>
<meta property="og:title" content="Один дома - 2: Затерянный в Нью-Йорке" />
<meta property="og:description" content="Карта 30 лет спустя" />

    <meta charset='utf-8' />
    <title>Один дома - 2: Затерянный в Нью-Йорке</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css' rel='stylesheet' />
    <script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>
    <script src="https://unpkg.com/scrollama"></script>
  <style>
        @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;500;600;700;800;900&display=swap');

        body {
            margin: 0;
            padding: 0;
            font-family: 'Raleway', sans-serif;
            font-size: 16px;
            line-height: 1.3;
            font-weight: 400;
        }

        a,
        a:hover,
        a:visited {
            color: #0071bc;
        }

        #map {
            top: 0;
            height: 100vh;
            width: 100vw;
            position: fixed;
        }

        #header {
            padding: 15px 0px;
            margin: auto;
            width: 100%;
            position: relative;
            z-index: 5;
        }

        #header h1,
        #header h2,
        #header p {
            margin: 0;
            padding: 2vh 2vw;
            text-align: center;
        }

        #footer {
            width: 100%;
            min-height: 5vh;
            padding-top: 2vh;
            padding-bottom: 2vh;
            text-align: center;
            line-height: 25px;
            font-size: 13px;
            position: relative;
            z-index: 5;
        }

        #features {
            padding-top: 10vh;
            padding-bottom: 10vh;
        }

        .hidden {
            visibility: hidden;
        }

        .centered {
            width: 50vw;
            margin: 0 auto;
        }

        .lefty {
            width: 50vw;
            margin-left: 5vw;
        }

        .righty {
            width: 33vw;
            margin-left: 62vw;
        }

        .fully {
            width: 100%;
            margin: auto;
        }

        .light {
            color: #444;
            background-color: #fafafa;
        }

        .dark {
            color: #fafafa;
            background-color: #444;
        }

        .step {
            padding-bottom: 80vh;
            /* margin-bottom: 10vh; */
            opacity: 0.25;
        }

        .step.active {
            opacity: 0.9;
        }

        .step div {
            padding: 25px 50px;
            line-height: 25px;
            font-size: 13px;
        }

        .step img {
            width: 100%;
        }

        .step h3 {
            font-size: 18px;
        }

        .step h3::after {
            display: block;
            font-size: 15px;
            font-style: italic;
            font-weight: 500;
        }

        .step p {
            text-align: justify;
        }

        .step ul {
            padding-left: 20px;
        }

        #slide-2 h3::after {
            content: "Виннетка, Линкольн-авеню, 671";
        }

        #slide-3 h3::after {
            content: "Эванстон, Прери авеню, 2417";
        }

        #slide-4 h3::after {
            content: "Нью-Йорк, 10-я авеню, 210";
        }

        #slide-5 h3::after {
            content: "Нью-Йорк, Мотт-Стрит, 32";
        }

        #slide-6 h3::after {
            content: "Нью-Йорк, Саут-стрит, 109";
        }

        #slide-7 h3::after {
            content: "Нью-Йорк, Западная 23-я улица и 6-я авеню";
        }

        #slide-8 h3::after {
            content: "Нью-Йорк, 5-я авеню, 768";
        }

        #slide-9 h3::after {
            content: "Нью-Йорк, Центральный парк";
        }

        #slide-10 h3::after {
            content: "Нью-Йорк, Центральный парк";
        }

        #slide-11 h3::after {
            content: "Чикаго, Саут-Ласалл-стрит, 209";
        }

        #slide-12 h3::after {
            content: "Нью-Йорк, Восточная 57-я улица, 5";
        }

        #slide-13 h3::after {
            content: "Нью-Йорк, 5-я авеню, 744";
        }

        #slide-17 h3::after {
            content: "Нью-Йорк, Центральный парк";
        }

        #slide-18 h3::after {
            content: "Нью-Йорк, Центральный парк";
        }

        #slide-19 h3::after {
            content: "Нью-Йорк, 7-я авеню, 881";
        }


        .last-title {
            padding: 0 !important;
            margin-bottom: 20px;
            font-size: 20px !important;
            text-align: center;
            font-weight: 700;
        }

        .last-subtitle {
            padding: 0 !important;
            margin-bottom: 30px;
            font-size: 16px !important;
            text-align: center;
            font-weight: 600;
        }

        .last-button {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 !important;
        }

        .last-button a {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px 20px;
            background: #1934fd;
            font-size: 16px;
            text-align: center;
            font-weight: 900;
            color: #fff;
            text-decoration: none;
            transition: 0.3s;
        }

        .last-button a:hover {
            background: #3e4cba;
            transition: 0.3s;
        }

        @media (max-width: 750px) {

            .centered,
            .lefty,
            .righty,
            .fully {
                width: 90vw;
                margin: 0 auto;
            }
        }

        /* Fix issue on mobile browser where scroll breaks  */
        .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,
        .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas {
            touch-action: unset;
        }


        .header {
            position: relative;
            padding: 30px 0px;
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("images/shapka.jpg");
            background-position: 50% 16.74%;
            z-index: 99;
        }

        .header__wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1140px;
            margin: 0 auto;
        }

        .header__logo {
            padding: 10px 30px;
            color: #fff;
            font-size: 48px;
            line-height: 48px;
            font-weight: 700;
            text-decoration: none;
            transition: 0.3s;
        }

        .header__logo:hover {
            color: #fff;
            background: #1934fd;
            transition: 0.3s;
        }

        .header__logo:visited {
            color: #fff;
        }

        .header__lang {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .header__lang a {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 15px 30px;
            margin-left: 25px;
            background: #1934fd;
            color: #fff;
            font-size: 16px;
            line-height: 16px;
            font-weight: 700;
            cursor: pointer;
            transition: 0.3s;
        }

        .header__lang a:visited {
            color: #fff;
        }

        .header__lang a:hover {
            background: #3e4cba;
            transition: 0.3s;
        }


        .footer {
            position: relative;
            padding: 30px 0px;
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("images/podval.jpg");
            background-position: 19.53% 50.51%;
            background-size: 110%;
            z-index: 99;
        }

        .footer__wrapper {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            max-width: 1140px;
            margin: 0 auto;
        }

        .footer__name {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            color: #fff;
            font-size: 18px;
            font-weight: 400;
            z-index: 1;
        }

        .footer__social {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1;
        }

        .footer__social a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50px;
            height: 50px;
            margin: 0px 5px;
        }

        .footer__social a svg {
            width: 100%;
            height: auto;
            fill: #1934fd;
        }
        .footer__social a svg circle {
            fill: #1934fd;
        }

        #story #header h2::after {
            content: "Декабрь 1991 - Декабрь 2021";
            display: block;
        }


        

        @media screen and (max-width: 900px) {
            #header h1 {font-size: 22px;}
            #header h2 {font-size: 18px;}
            .step div {padding: 15px 25px; line-height: 20px;}


            .footer__wrapper {flex-direction: column;}
            .footer__name {position: relative; order: 2; text-align: center; font-size: 16px;}
            .footer__social {order: 1; margin-bottom: 20px;}
            .footer__social a {width: 36px; height: 36px;}
        }

        @media screen and (max-width: 768px) {
            .header__wrapper {flex-direction: column;}
            .header__logo {margin-bottom: 20px;}
            .header__lang a {margin-left: 10px; margin-right: 10px; padding: 10px 20px; font-size: 14px;}
        }
    </style>
</head>

<body>
    <header class="header">
        <div class="header__wrapper">
            <a class="header__logo" href="/">MapAP</a>

            <div class="header__lang">
                <a onclick="window.location.href = '/homealone2/';">RU</a>
                <a onclick="window.location.href = '/homealone2/en';">EN</a>
                <a onclick="window.location.href = '/homealone2/es';">ES</a>
            </div>
        </div>
    </header>

    <div id="map"></div>
    <div id="story"></div>

    <footer class="footer">
        <div class="footer__wrapper">
            <div class="footer__name">
                Александр Пронин<br>
                © 2021, Все права защищены
            </div>

            <div class="footer__social">
                <a href="https://facebook.com/uproninn" target="_blank">
                    <svg class="u-svg-content" viewBox="0 0 112 112" x="0" y="0" id="svg-8fa8">
                        <circle fill="currentColor" cx="56.1" cy="56.1" r="55"></circle>
                        <path fill="#FFFFFF" d="M73.5,31.6h-9.1c-1.4,0-3.6,0.8-3.6,3.9v8.5h12.6L72,58.3H60.8v40.8H43.9V58.3h-8V43.9h8v-9.2
                        c0-6.7,3.1-17,17-17h12.5v13.9H73.5z"></path>
                    </svg>
                </a>
                <a href="https://instagram.com/uproonin" target="_blank">
                    <svg class="u-svg-content" viewBox="0 0 112 112" x="0" y="0" id="svg-d413">
                        <circle fill="currentColor" cx="56.1" cy="56.1" r="55"></circle>
                        <path fill="#FFFFFF"
                            d="M55.9,38.2c-9.9,0-17.9,8-17.9,17.9C38,66,46,74,55.9,74c9.9,0,17.9-8,17.9-17.9C73.8,46.2,65.8,38.2,55.9,38.2
                        z M55.9,66.4c-5.7,0-10.3-4.6-10.3-10.3c-0.1-5.7,4.6-10.3,10.3-10.3c5.7,0,10.3,4.6,10.3,10.3C66.2,61.8,61.6,66.4,55.9,66.4z">
                        </path>
                        <path fill="#FFFFFF"
                            d="M74.3,33.5c-2.3,0-4.2,1.9-4.2,4.2s1.9,4.2,4.2,4.2s4.2-1.9,4.2-4.2S76.6,33.5,74.3,33.5z">
                        </path>
                        <path fill="#FFFFFF" d="M73.1,21.3H38.6c-9.7,0-17.5,7.9-17.5,17.5v34.5c0,9.7,7.9,17.6,17.5,17.6h34.5c9.7,0,17.5-7.9,17.5-17.5V38.8
                        C90.6,29.1,82.7,21.3,73.1,21.3z M83,73.3c0,5.5-4.5,9.9-9.9,9.9H38.6c-5.5,0-9.9-4.5-9.9-9.9V38.8c0-5.5,4.5-9.9,9.9-9.9h34.5
                        c5.5,0,9.9,4.5,9.9,9.9V73.3z"></path>
                    </svg>
                </a>
                <a href="https://vk.com/upronin" target="_blank">
                    <svg class="u-svg-content" viewBox="0 0 112 112" x="0" y="0" id="svg-6715">
                        <circle fill="currentColor" class="st0" cx="56.1" cy="56.1" r="55"></circle>
                        <path fill="#FFFFFF"
                            d="M88.2,80.7l-9.8,0.1c0,0-2.1,0.4-4.9-1.5c-3.7-2.5-7.2-9.1-9.9-8.2C60.9,72,61,77.9,61,77.9s0,1.3-0.6,1.9
                        c-0.7,0.7-2,0.9-2,0.9H54c0,0-9.7,0.6-18.3-8.3c-9.3-9.7-17.6-29-17.6-29s-0.5-1.3,0-1.9c0.6-0.7,2.2-0.7,2.2-0.7l10.5-0.1
                        c0,0,1,0.2,1.7,0.7c0.6,0.4,0.9,1.2,0.9,1.2s1.7,4.3,4,8.2c4.4,7.6,6.4,9.3,7.9,8.4c2.2-1.2,1.5-10.7,1.5-10.7s0-3.5-1.1-5
                        c-0.9-1.2-2.5-1.5-3.3-1.6c-0.6-0.1,0.4-1.5,1.6-2.1c1.9-0.9,5.2-1,9.2-0.9c3.1,0,4,0.2,5.2,0.5c3.6,0.9,2.4,4.3,2.4,12.4
                        c0,2.6-0.5,6.3,1.4,7.5c0.8,0.5,2.8,0.1,7.7-8.3c2.3-4,4.1-8.6,4.1-8.6s0.4-0.8,1-1.2s1.4-0.3,1.4-0.3l11.1-0.1c0,0,3.3-0.4,3.9,1.1
                        c0.6,1.6-1.2,5.3-5.8,11.3c-7.4,9.9-8.3,9-2.1,14.7c5.9,5.5,7.1,8.1,7.3,8.5C93.4,80.4,88.2,80.7,88.2,80.7z">
                        </path>
                    </svg>
                </a>
                <a href="https://t.me/mapapro" target="_blank">
                    <svg class="u-svg-content" viewBox="0 0 112 112" x="0" y="0" id="svg-b4e7">
                        <circle fill="currentColor" cx="56.1" cy="56.1" r="55"></circle>
                        <path fill="#FFFFFF"
                            d="M18.4,53.2l64.7-24.9c3-1.1,5.6,0.7,4.7,5.3l0,0l-11,51.8c-0.8,3.7-3,4.6-6.1,2.8L53.9,75.8l-8.1,7.8
                        c-0.9,0.9-1.7,1.6-3.4,1.6l1.2-17l31.1-28c1.4-1.2-0.3-1.9-2.1-0.7L34.2,63.7l-16.6-5.2C14,57.4,14,54.9,18.4,53.2L18.4,53.2z">
                        </path>
                    </svg>
                </a>
                <a href="mailto:mapapro@yandex.ru?subject=%D0%A1%20%D1%81%D0%B0%D0%B9%D1%82%D0%B0" target="_blank">
                    <svg class="u-svg-content" viewBox="0 0 112 112" x="0" y="0" id="svg-8f07">
                        <circle fill="currentColor" cx="56.1" cy="56.1" r="55"></circle>
                        <path id="path3864" fill="#FFFFFF" d="M27.2,28h57.6c4,0,7.2,3.2,7.2,7.2l0,0v42.7c0,3.9-3.2,7.2-7.2,7.2l0,0H27.2
                        c-4,0-7.2-3.2-7.2-7.2V35.2C20,31.1,23.2,28,27.2,28 M56,52.9l28.8-17.8H27.2L56,52.9 M27.2,77.7h57.6V43.5L56,61.3L27.2,43.5V77.7z
                        "></path>
                    </svg>
                </a>
            </div>
        </div>
    </footer>

    <script src="./homealone.js"></script>
    <script>
        var layerTypes = {
            'fill': ['fill-opacity'],
            'line': ['line-opacity'],
            'circle': ['circle-opacity', 'circle-stroke-opacity'],
            'symbol': ['icon-opacity', 'text-opacity'],
            'raster': ['raster-opacity'],
            'fill-extrusion': ['fill-extrusion-opacity'],
            'heatmap': ['heatmap-opacity']
        }

        var alignments = {
            'left': 'lefty',
            'center': 'centered',
            'right': 'righty',
            'full': 'fully'
        }

        function getLayerPaintType(layer) {
            var layerType = map.getLayer(layer).type;
            return layerTypes[layerType];
        }

        function setLayerOpacity(layer) {
            var paintProps = getLayerPaintType(layer.layer);
            paintProps.forEach(function (prop) {
                var options = {};
                if (layer.duration) {
                    var transitionProp = prop + "-transition";
                    options = { "duration": layer.duration };
                    map.setPaintProperty(layer.layer, transitionProp, options);
                }
                map.setPaintProperty(layer.layer, prop, layer.opacity, options);
            });
        }

        var story = document.getElementById('story');
        var features = document.createElement('div');
        features.setAttribute('id', 'features');

        var header = document.createElement('div');

        if (config.title) {
            var titleText = document.createElement('h1');
            titleText.innerText = config.title;
            header.appendChild(titleText);
        }

        if (config.subtitle) {
            var subtitleText = document.createElement('h2');
            subtitleText.innerText = config.subtitle;
            header.appendChild(subtitleText);
        }

        if (config.byline) {
            var bylineText = document.createElement('p');
            bylineText.innerText = config.byline;
            header.appendChild(bylineText);
        }

        if (header.innerText.length > 0) {
            header.classList.add(config.theme);
            header.setAttribute('id', 'header');
            story.appendChild(header);
        }

        config.chapters.forEach((record, idx) => {
            var container = document.createElement('div');
            var chapter = document.createElement('div');

            if (record.title) {
                var title = document.createElement('h3');
                title.innerText = record.title;
                chapter.appendChild(title);
            }

            if (record.image) {
                var image = new Image();
                image.src = record.image;
                chapter.appendChild(image);
            }

            if (record.description) {
                var story = document.createElement('p');
                story.innerHTML = record.description;
                chapter.appendChild(story);
            }

            container.setAttribute('id', record.id);
            container.classList.add('step');
            if (idx === 0) {
                container.classList.add('active');
            }

            chapter.classList.add(config.theme);
            container.appendChild(chapter);
            container.classList.add(alignments[record.alignment] || 'centered');
            if (record.hidden) {
                container.classList.add('hidden');
            }
            features.appendChild(container);
        });

        story.appendChild(features);

        var footer = document.createElement('div');

        if (config.footer) {
            var footerText = document.createElement('p');
            footerText.innerHTML = config.footer;
            footer.appendChild(footerText);
        }

        if (footer.innerText.length > 0) {
            footer.classList.add(config.theme);
            footer.setAttribute('id', 'footer');
            story.appendChild(footer);
        }

        mapboxgl.accessToken = config.accessToken;

        const transformRequest = (url) => {
            const hasQuery = url.indexOf("?") !== -1;
            const suffix = hasQuery ? "&pluginName=scrollytellingV2" : "?pluginName=scrollytellingV2";
            return {
                url: url + suffix
            }
        }

        var map = new mapboxgl.Map({
            container: 'map',
            style: config.style,
            center: config.chapters[0].location.center,
            zoom: config.chapters[0].location.zoom,
            bearing: config.chapters[0].location.bearing,
            pitch: config.chapters[0].location.pitch,
            interactive: false,
            transformRequest: transformRequest
        });

        if (config.showMarkers) {
            var marker = new mapboxgl.Marker({ color: config.markerColor });
            marker.setLngLat(config.chapters[0].location.center).addTo(map);
        }

        // instantiate the scrollama
        var scroller = scrollama();

        map.on("load", function () {
            if (config.use3dTerrain) {
                map.addSource('mapbox-dem', {
                    'type': 'raster-dem',
                    'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
                    'tileSize': 512,
                    'maxzoom': 14
                });
                // add the DEM source as a terrain layer with exaggerated height
                map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });

                // add a sky layer that will show when the map is highly pitched
                map.addLayer({
                    'id': 'sky',
                    'type': 'sky',
                    'paint': {
                        'sky-type': 'atmosphere',
                        'sky-atmosphere-sun': [0.0, 0.0],
                        'sky-atmosphere-sun-intensity': 15
                    }
                });
            };

            // setup the instance, pass callback functions
            scroller
                .setup({
                    step: '.step',
                    offset: 0.5,
                    progress: true
                })
                .onStepEnter(response => {
                    var chapter = config.chapters.find(chap => chap.id === response.element.id);
                    response.element.classList.add('active');
                    map[chapter.mapAnimation || 'flyTo'](chapter.location);
                    if (config.showMarkers) {
                        marker.setLngLat(chapter.location.center);
                    }
                    if (chapter.onChapterEnter.length > 0) {
                        chapter.onChapterEnter.forEach(setLayerOpacity);
                    }
                    if (chapter.callback) {
                        window[chapter.callback]();
                    }
                    if (chapter.rotateAnimation) {
                        map.once('moveend', function () {
                            const rotateNumber = map.getBearing();
                            map.rotateTo(rotateNumber + 90, {
                                duration: 24000, easing: function (t) {
                                    return t;
                                }
                            });
                        });
                    }
                })
                .onStepExit(response => {
                    var chapter = config.chapters.find(chap => chap.id === response.element.id);
                    response.element.classList.remove('active');
                    if (chapter.onChapterExit.length > 0) {
                        chapter.onChapterExit.forEach(setLayerOpacity);
                    }
                });
        });

        // setup resize event
        window.addEventListener('resize', scroller.resize);

    </script>

</body>

</html>