LeafLet Extension for Yii2

Extension library to display interactive maps with LeafletJs

This is the fork of original 2amigos/yii2-leaflet-extension Mainly i Forked it to add ecdode function for popupTrait, to correctly display rendered by Yii2 popups. In original package JS error happened, when tryinf to set 'popupContent' => $this->render(....), because string have unterminated lines. So need to encode it first.

Installation

The preferred way to install this extension is through composer. This requires the composer-asset-plugin, which is also a dependency for yii2 – so if you have yii2 installed, you are most likely already set.

To use this fork, your composer.json should look something like this:

"require": [
    ...
    "2amigos/yii2-leaflet-extension": "master"
],
"repositories": [
    {
        "type": "vcs",
        "url":  "https://github.com/wiperawa/yii2-leaflet-extension"
    }
...
    

Usage

One of the things to take into account when working with LeafletJs is that we need a Tile Provider. Is very important, if we fail to provide a Tile Provider Url, the map will display plain, without any maps at all.

The following example, is making use of MapQuest: //Wiperawa comment: During testing i cant find free map url sources, so i decided to use mapbox (found that in documentation of leaflet, but you need to register and get access token of it) But you can use any map images source.

// first lets setup the center of our map
$center = new dosamigos\leaflet\types\LatLng(['lat' => 51.508, 'lng' => -0.11]);

// now lets create a marker that we are going to place on our map
$marker = new \dosamigos\leaflet\layers\Marker(['latLng' => $center, 'popupContent' => 'Hi!']);

// The Tile Layer (very important)
$tileLayer = new \dosamigos\leaflet\layers\TileLayer([
   'urlTemplate' => 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}',
    'clientOptions' => [
	'id' => 'mapbox.streets',
	'accessToken' =>'Your-access-token',
        'attribution' => 'Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> ' .
        '<img src="http://developer.mapquest.com/content/osm/mq_logo.png">, ' .
        'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
        'subdomains' => ['1', '2', '3', '4'],
    ],
]);

// now our component and we are going to configure it
$leaflet = new \dosamigos\leaflet\LeafLet([
    'center' => $center, // set the center
]);
// Different layers can be added to our map using the `addLayer` function.
$leaflet->addLayer($marker)      // add the marker
        ->addLayer($tileLayer);  // add the tile layer

// finally render the widget
echo \dosamigos\leaflet\widgets\Map::widget(['leafLet' => $leaflet]);

// we could also do
// echo $leaflet->widget();

Testing

To test the extension, is better to clone this repository on your computer. After, go to the extensions folder and do the following (assuming you have composer installed on your computer):

$ composer install --no-interaction --prefer-source --dev

Once all required libraries are installed then do:

$ vendor/bin/phpunit

Further Information

For further information regarding the multiple settings of LeafLetJS library please visit its API reference

Contributing

Please see CONTRIBUTING for details.

Credits

• Antonio Ramirez
• All Contributors

License

The BSD License (BSD). Please see License File for more information.

Web development has never been so fun!
www.2amigos.us