bscheshirwork / yii2-ymaps-widget
Widget for include yandex maps
Installs: 51
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Type:yii2-extension
Requires
- php: >=7.2.0
- yiisoft/yii2: >=2.0.15
This package is auto-updated.
Last update: 2024-11-17 20:04:52 UTC
README
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 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); }); // ... }
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