pigochu/yii2-jquery-locationpicker jquery location picker widget for yii2

extensionlocationpicker

jquery location picker widget for yii2

The widget implement jquery-locationpicker-plugin

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require pigochu/yii2-jquery-locationpicker ">=0.2.0"

or add

"pigochu/yii2-jquery-locationpicker": ">=0.2.0"

to the require section of your composer.json file.

Basic Usage for Test

<?= \pigolab\locationpicker\LocationPickerWidget::widget(); ?>

Binding UI with the widget

This sample is transformed via http://logicify.github.io/jquery-locationpicker-plugin/#usage

<?php
use yii\web\JsExpression;
?>

Location: <input type="text" id="us2-address" style="width: 200px"/>
<br>
Radius: <input type="text" id="us2-radius"/>
<br>
Lat.: <input type="text" id="us2-lat"/>
<br>
Long.: <input type="text" id="us2-lon"/>
<br>

<?php
    echo \pigolab\locationpicker\LocationPickerWidget::widget([
       'key' => 'abcabcabcabc ...', // require , Put your google map api key
       'options' => [
            'style' => 'width: 100%; height: 400px', // map canvas width and height
        ] ,
        'clientOptions' => [
            'location' => [
                'latitude'  => 46.15242437752303 ,
                'longitude' => 2.7470703125,
            ],
            'radius'    => 300,
            'addressFormat' => 'street_number',
            'inputBinding' => [
                'latitudeInput'     => new JsExpression("$('#us2-lat')"),
                'longitudeInput'    => new JsExpression("$('#us2-lon')"),
                'radiusInput'       => new JsExpression("$('#us2-radius')"),
                'locationNameInput' => new JsExpression("$('#us2-address')")
            ]
        ]        
    ]);
?>

CoordinatesPicker

CoordinatesPicker let you get coordinates in ActiveForm , In addition I implemented some features not in original jquery-locationpicker-plugin :

  • enable/disable search box , search box will overlay on map
  • enable/disable all googlemap's control

Example :

<?php
    echo $form->field($model, 'coordinates')->widget('\pigolab\locationpicker\CoordinatesPicker' , [
        'key' => 'abcabcabc...' ,   // require , Put your google map api key
        'valueTemplate' => '{latitude},{longitude}' , // Optional , this is default result format
        'options' => [
            'style' => 'width: 100%; height: 400px',  // map canvas width and height
        ] ,
        'enableSearchBox' => true , // Optional , default is true
        'searchBoxOptions' => [ // searchBox html attributes
            'style' => 'width: 300px;', // Optional , default width and height defined in css coordinates-picker.css
        ],
        'searchBoxPosition' => new JsExpression('google.maps.ControlPosition.TOP_LEFT'), // optional , default is TOP_LEFT
        'mapOptions' => [
            // google map options
            // visit https://developers.google.com/maps/documentation/javascript/controls for other options
            'mapTypeControl' => true, // Enable Map Type Control
            'mapTypeControlOptions' => [
                  'style'    => new JsExpression('google.maps.MapTypeControlStyle.HORIZONTAL_BAR'),
                  'position' => new JsExpression('google.maps.ControlPosition.TOP_LEFT'),
            ],
            'streetViewControl' => true, // Enable Street View Control
        ],
        'clientOptions' => [
            // jquery-location-picker options
            'radius'    => 300,
            'addressFormat' => 'street_number',
        ]
    ]);
?>

Get coordinates :

Default valueTemplate is '{latitude},{longtitude} , So we will get resulit like : '25.023308046766083,121.46041916878664'

We can convert it via explode() :

<?php
list($latitude,$longitude) = explode(',' , $model->coordinates);
?>

Deprecated options : enableMapTypeControl

Since version 0.2.0 , don't use 'enableMapTypeControl' , I added 'mapOptions' for set googlemap options. You can enable/disable all controlls or set control's style , position now.

Example : enable rotateControl , streetViewControl , mapTypeControl and set style/position

<?php
   echo $form->field($model, 'coordinates')->widget('\pigolab\locationpicker\CoordinatesPicker' , [

        'clientOptions' => [ 'zoom' => 20 ], // rotateControl will display when zoom is 20
        // .... other options ...
        'mapOptions' => [
            // set google map optinos
            'rotateControl' => true,
            'scaleControl' => false,
            'streetViewControl' => true,
            'mapTypeId' => new JsExpression('google.maps.MapTypeId.SATELLITE'),
            'heading'=> 90,
            'tilt' => 45 ,

            'mapTypeControl' => true,
            'mapTypeControlOptions' => [
                  'style'    => new JsExpression('google.maps.MapTypeControlStyle.HORIZONTAL_BAR'),
                  'position' => new JsExpression('google.maps.ControlPosition.TOP_CENTER'),
            ]
        ]
   ]);
?>

Please visit GoogleMaps Full Control document : https://developers.google.com/maps/documentation/javascript/controls

Other DocumentS

Changelog

phpdevserver Change Log

0.2.5 2018-03-31

  • Fixed bug : location option doesn't work in coordinate picker (issue #17)

0.2.4 2018-02-24

  • CoordinatesPicker fix for virtual attributes , thanks @deathburger

0.2.3 2018-01-20

  • Fixed bug : Issue #13 , LocationPicker value lost on update

0.2.2 2016-12-03

  • Fixed bug : CoordinatesPicker attribute value lost
  • remove version 0.2.1
  • remove version 0.0.1~0.1.4

0.2.1 2016-12-02

  • Fixed bug : CoordinatesPicker can not set id

0.2.0 2015-12-28

  • CoordinatesPicker change
    • 'enableMapTypeControl' is deprecated , please use 'mapOptions'
    • if use 'enableMapTypeControl' , browser develop console will display warning message
    • 'mapOptions' can set all gmap's control options
    • add 'searchBoxPosition'

0.1.5 2015-12-21

  • Fixed bug : CoordinatesPicker can not use 'this' object in "onchanged" and "oninitialized" event

0.1.4

  • I don't know why has this version ....

0.1.3 2015-12-01

  • Fixed bug: CoordinatesPicker Undefined offset: 0 when coordinates is empty string

0.1.2 2015-11-17

  • Fixed bug : if never moved picker on CoordinatesPicker , the ActiveField will lost value when submit
  • Change searchbox default hidden , when map rendered then display

0.1.1 2015-11-14

  • Fixed #1 : "defined variable" can not use in Class property less than PHP 5.6

0.1.0 2015-11-12

  • Add CoordinatesPicker widget

0.0.2 2015-11-11

  • Fix bug : LocationPickerWidget must assign google map api key

0.0.1 2015-11-11

  • First Test version

Statistics

Downloads
GitHub Stars
GitHub Forks

Releases

Comments



0.2.5 is the latest of 14 releases



MIT license
Stats
18 github stars & 7 github forks
8 downloads in the last day
226 downloads in the last 30 days
29888 total downloads