Yandex map widget for yii2

This is widget for representation yandex maps from yii2 widget.

Installation

Add

    "bscheshirwork/yii2-ymaps-widget": "*@dev",

into require section of you composer.json file.

Configure (optional)

You can change default values of Connector for customize connection to yandex map API

First: add into config of application the ymaps components:

<?php
return [
        'components' => [
            'ymaps' => [
                'class' => \bscheshirwork\ymaps\Connection::class,
                'apiUri' => 'https://enterprise.api-maps.yandex.ru',
                'apiParams' => ['apikey' => '<hash>'],
            ],
        ],
    ];

Second: use this component in widget connection param

<?= \bscheshirwork\ymaps\YMaps::widget([
    'connection' => Yii::$app->ymaps,
    'mapState' => [
        'center' => [55.7372, 37.6066],
        'zoom' => 9,
    ],
    ]); ?>

Usage

Simple

Inject canvas for map.

In view: Inject code for generate map (optional, default).

<?= \bscheshirwork\ymaps\YMaps::widget([
    'htmlOptions' => [
        'style' => 'height: 400px;',
    ],
    'mapState' => '{
        center: [55.9238145091058, 37.897131347654376],
        zoom: 10
    }',
    'mapOptions' => <<<JS
    {
        searchControlProvider: 'yandex#search'
    }
JS
]); ?>

The

will be generated; The yandex maps will be initialized and assign to this canvas.

Tips: mapState and mapOptions can accept json string or php array

Advanced usage

Advanced: Inject js vars for external js file.

In view:

    <?= $form->field($model, 'latitude')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'longitude')->textInput(['maxlength' => true]) ?>

    <?= \bscheshirwork\ymaps\YMaps::widget([
        'htmlOptions' => [
            'style' => 'height: 400px;',
        ],
        'mapState' => [
            'center' => [$model->latitude ?: 55.7372, $model->longitude ?: 37.6066],
            'zoom' => 9,
        ],
        'simpleMap' => false,
        'jsVars' => true,
    ]); ?>

The

will be generated. The JS builders will be generated and inserting into POS_HEAD position

In js:

ymaps.ready(init);

function init() {
    var myPlacemark,
        myMap = mapBuilder(mapId(), mapState(), mapOptions());
    myMap.events.add('click', function (e) {
        var coords = e.get('coords');
        myPlacemark = new ymaps.Placemark(coords, {
            iconCaption: 'caption'
        }, {
            preset: 'islands#violetDotIconWithCaption',
            draggable: true
        });
        myMap.geoObjects.add(myPlacemark);
    });
    
    // ...
}

Select a controls

    <?= \bscheshirwork\ymaps\YMaps::widget([
        'htmlOptions' => [
            'style' => 'height: 400px;',
        ],
        'mapState' => [
            'center' => [
                $model->latitude ?? false ?: Yii::$app->params['map']['default']['latitude'],
                $model->longitude ?? false ?: Yii::$app->params['map']['default']['longitude'],
            ],
            'zoom' => $model->zoom ?? false ?: Yii::$app->params['map']['default']['zoom'],
            'controls' => [
                'zoomControl', 'searchControl', 'typeSelector', 'fullscreenControl', 'routeButtonControl',
/*
                new \yii\web\JsExpression('new ymaps.control.ZoomControl({options: {size: "small"}})'),
                new \yii\web\JsExpression('new ymaps.control.SearchControl({options: {size: "small"}})'),
                new \yii\web\JsExpression('new ymaps.control.TrafficControl({options: {size: "small"}})'),
                new \yii\web\JsExpression('new ymaps.control.GeolocationControl({options: {size: "small"}})'),
                new \yii\web\JsExpression('new ymaps.control.FullscreenControl({options: {size: "small"}})'),
                new \yii\web\JsExpression('new ymaps.control.RouteEditor({options: {size: "small"}})'),
*/
            ],
        ],
        'mapOptions' => [
        ],
        'simpleMap' => false,
        'jsVars' => true,
    ]); ?>

All rights reserved.

2018 © bscheshir.work@gmail.com