Yii2-locator demo

Eiffel Tower

Paris, FR, built 1889, height 324m

This is a demonstration of Yii2-locator, an extension to use Leaflet JavaScript mapping software in the Yii 2 PHP framework. Geographical data stored in an ActiveRecord can be displayed and updated on interactive maps.

Single model

<?php
use sjaakp\locator\Locator;
use app\models\Tower;
/**
 * @var $model Tower
 */

<?php $map = Locator::begin([
    'leafletOptions' => [
        'scrollWheelZoom' => false
    ],
]);
$map->modelCenter($model, 'mapcenter');
$map->modelZoom($model, 'mapzoom');
$map->modelFeature($model, 'location');
Locator::end();
]) ?>

Multiple models

<?php
use yii\data\ActiveDataProvider;
use yii\web\Controller;
use app\models\Tower;
/**
 * @var $model Tower
 */
class SoftwareController extends Controller
{
    // ...
    public function actionLocator {
        $dataProvider = new ActiveDataProvider([
            'query' => Tower::find(),
            'pagination' => false   // ensure all towers will appear on map
        ]);
            // ...
        return $this->render('locator', [
            'dataProvider' => $dataProvider,
            // ...
        ]);
    }
    // ...
}

<?php
use yii\data\ActiveDataProvider;
use sjaakp\locator\Locator;
use app\models\Tower;
/**
 * @var $dataProvider ActiveDataProvider
 */

<?php
$map = Locator::begin([
    'tile' => 'Stamen.Watercolor',  // basic tile layer
    'leafletOptions' => [
        'center' =>  [48.8, 2.3],   // Paris
        'zoom' => 5,
        'scrollWheelZoom' => false,
    ],
    'popup' => true,
    'cluster' => true,
    'urlTemplate' => '/tower/info/{id}',    // URL for popups
]);
$map->tileLayer('Stamen.TonerLabels');  // second tile layer with labels
$map->modelFeatures($dataProvider, 'location');
Locator::end();
?>
]) ?>

Active Locator

<?php
use yii\widgets\ActiveForm;
use sjaakp\locator\Locator;
use app\models\Tower;
/**
 * @var $model Tower
 */

<?php $form = ActiveForm::begin(); ?>
    ...
    <?php
    $map = Locator::begin([
        'tile' => [ 'TomTom', 'key' => '...' ],
        'leafletOptions' => [
            'scrollWheelZoom' => false
        ],
    ]);
    $map->activeCenter($model, 'mapcenter');
    $map->activeZoom($model, 'mapzoom');
    $map->activeMarker($model, 'location',
        [ 'type' => 'SpriteMarker', 'html' => '<i class="fal fa-3x fa-crosshairs"></i>' ]);
                                            // use FontAwesome sprite
    $map->finder([ 'TomTom', 'key' => '...' ]);
    Locator::end();
    ?>
    ...
<?php ActiveForm::end(); ?>