Alexey Boroda / uamap_old

<?php
/**
 * Created by PhpStorm.
 * User: allakuzmenko
 * Date: 23.10.17
 * Time: 21:02
 *
 * @var $this \yii\web\View
 *
 */

use yii\helpers\Html;
use frontend\themes\defaults\assets\AppAssetMap;
use frontend\modules\map\Map;
use frontend\modules\map\widgets\search\SearchString;

$bundle = AppAssetMap::register($this);

$urlMapResource = Map::getUrlListByType('resource');
$urlMapProjects = Map::getUrlListByType('project');

$js_icons = [];
$js_features = [];
function jsString($str = '')
{
    return preg_replace("/(\r?\n)/", '', $str);
}

foreach ($models as $model) {
    /* $js_icons[] = '
                 ' . $group['id'] . ':  { icon: \'' . addslashes($group->getImageLink()) . '\'}';*/
    $content = $this->render('parts/_popup', ['model' => $model, 'types' => $types, 'regions' => $regions]);
    $position = str_replace('(', '', $model['coordinates']);
    $position = str_replace(')', '', $position);
    $position = explode(',', $position);
    //
    $sign = \frontend\components\ImageResizer::getSign(
        Yii::getAlias('@frontend-web') . '/images/sign.png',
        (isset($areas[$model['area_id']])) ? $areas[$model['area_id']]->getImageLink2Path() : '',
        $types[$model['type_id']]['color'] ?? '#000000',
        $model['area_id'] . $model['type_id']
    );
    //
    $js_features[] = '{   
                    "id": "' . $model['id'] . '",    
                    "title": "' . addslashes(jsString($model['lang']['title'])) . '",
                    "position": {"lat": ' . $position[0] . ', "lng": ' . $position[1] . '},
                    "type": "' . $model['type_id'] . '",
                    "direction": "' . $model['area_id'] . '",
                    "region": "' . $model['region_id'] . '",
                    "power": "' . $model['electric_power'] . '",
                    "investment": "' . $model['investment'] . '",
                    "heat_capacity": "' . $model['heat_capacity'] . '",
                    "icon": "' . ($sign ?? '') . '",
                    "infoWindow": {"content": "' . addslashes(jsString($content)) . '"}
                }';
}

if (!empty($js_icons)) {
    $js_icons = implode(",", $js_icons);
} else {
    $js_icons = '';
}

if (!empty($js_features)) {
    $js_features = implode(",", $js_features);
} else {
    $js_features = '';
}
?>
<div class="maps-action-elements">
    <?= $this->render('parts/filters', [
        'types' => $types,
        'regions' => $regions,
        'investment' => $investment,
        'powers' => $powers
    ])
    . SearchString::widget() ?>
    <div class="all-obj">
        <a href="<?= Map::getUrlList() ?>" class="link-all-obj"><span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
    </div>
</div>
<div class="container">
    <div style="position: relative">
        <div class="static-btn-container">
            <?= (Yii::$app->request->get('type') == 'project')
                ? Html::a(Yii::t('front', 'resource potential'), $urlMapResource, [
                    'class' => 'static-btn static-btn-resours'
                ]) : Html::a(Yii::t('front', 'projects'), $urlMapProjects, [
                    'class' => 'static-btn static-btn-project'
                ])
            ?>
        </div>
    </div>

</div>
<style>
    .map {
        height: calc(100vh - 175px);
    }
</style>
<?php
$baseUrl = $bundle->baseUrl;
$script = <<< JS
    var markers = [$js_features];
    var markersReInit;
    var markerCluster;
    var map;
     function initMap() {
            var myLatLng = {lat: 48.741280, lng: 30.215513};

            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 6,
                center: myLatLng,
                scrollwheel: false,
                mapTypeControlOptions: {
                    position: google.maps.ControlPosition.RIGHT_BOTTOM
                }
            });
            
            map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(printMapControl(map, window));
            
            var infowindow = new google.maps.InfoWindow();
            for (var i = 0, l = markers.length; i < l; i++) {
                var marker = markers[i];
                marker.map = map;
                markers[i] = new google.maps.Marker(marker);
        
                markers[i].addListener('click', function() {
                    infowindow.setContent(this.infoWindow.content);
                    infowindow.open(map, this);
                });
            }
            
            markersReInit = markers;

            markerCluster = new MarkerClusterer(map, markers, {
                gridSize: 50,
                maxZoom: 10,
                imagePath: '$baseUrl/img/m',
                styles: [{
                    url: '$baseUrl/img/m/m1.png',
                    textColor: "#7a9cb4",
                    width: 55,
                    height: 55,
                    textSize: 16
                }, {
                    url: '$baseUrl/img/m/m2.png',
                    textColor: "#7a9cb4",
                    width: 70,
                    height: 70,
                    textSize: 16
                },{
                    url: '$baseUrl/img/m/m3.png',
                    textColor: "#7a9cb4",
                    width: 85,
                    height: 85,
                    textSize: 16
                }, {
                    url: '$baseUrl/img/m/m4.png',
                    textColor: "#7a9cb4",
                    width: 91,
                    height: 91,
                    textSize: 16
                }, {
                    url: '$baseUrl/img/m/m5.png',
                    textColor: "#7a9cb4",
                    width: 114,
                    height: 114,
                    textSize: 16
                } ]
            });
        }
        
        function clearMarkerClusterer() {
            markerCluster.clearMarkers();
            for (var i = 0; i < markers.length; i++) { 
                markers[i].setOptions({map: map, visible:true});
            }
        }
        
        function refreshMarkerClusterer(){
                markers = markersReInit;
                
                markerCluster = new MarkerClusterer(map, markers, {
                gridSize: 50,
                maxZoom: 10,
                imagePath: '$baseUrl/img/m',
                styles: [{
                    url: '$baseUrl/img/m/m1.png',
                    textColor: "#7a9cb4",
                    width: 55,
                    height: 55,
                    textSize: 16
                }, {
                    url: '$baseUrl/img/m/m2.png',
                    textColor: "#7a9cb4",
                    width: 70,
                    height: 70,
                    textSize: 16
                },{
                    url: '$baseUrl/img/m/m3.png',
                    textColor: "#7a9cb4",
                    width: 85,
                    height: 85,
                    textSize: 16
                }, {
                    url: '$baseUrl/img/m/m4.png',
                    textColor: "#7a9cb4",
                    width: 91,
                    height: 91,
                    textSize: 16
                }, {
                    url: '$baseUrl/img/m/m5.png',
                    textColor: "#7a9cb4",
                    width: 114,
                    height: 114,
                    textSize: 16
                } ]
            });
        }
        
        function printMapCanvas(){
            clearMarkerClusterer();
            
            setTimeout(function(){
                            html2canvas($('#map'), {
                allowTaint: true,
                onrendered: function (canvas) {
                    $('body').append(canvas);
                    window.print();
                    
                    setTimeout(function(){
                        var elem = document.getElementsByTagName("canvas");
                        var t = document.getElementsByTagName("canvas")[elem.length-1];
                        t.remove();
                        refreshMarkerClusterer();
                    }, 150);
                }
            });
            }, 1000);
        }
JS;

$this->registerJsFile('//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js', ['position' => yii\web\View::POS_HEAD]);
$this->registerJsFile('//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js', ['position' => yii\web\View::POS_HEAD]);
$this->registerJsFile($bundle->baseUrl . '/js/markerclusterer.js', ['position' => yii\web\View::POS_HEAD]);

$this->registerJsFile($bundle->baseUrl . '/libs/infoBubble/infobubble.js');
$this->registerJsFile($bundle->baseUrl . '/js/PrintMapControl.js');
$this->registerJsFile('//developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js');

$this->registerJsFile('//maps.googleapis.com/maps/api/js?key=AIzaSyCRjI5CDX5BPpcmvu6a6bSzDyMXThMaNeo&callback=initMap&language=' . mb_substr(Yii::$app->language, 0, 2));

$this->registerJs($script, yii\web\View::POS_HEAD);
?>
<style>
    .search-input-btn {
        display: none;
    }

    @media print {
        header,
        footer,
        #map,
        .inner-map-container {
            display: none;
        }
    }
</style>