This is widget for representation yandex maps from yii2 widget.
Add
"bscheshirwork/yii2-ymaps-widget": "*@dev",
into require section of you composer.json file.
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,
],
]); ?>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: 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 intoPOS_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);
});
// ...
} <?= \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