Extension library to display interactive maps with LeafletJs
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.
Either run
composer require 2amigos/yii2-leaflet-extension:~1.0
or add
"2amigos/yii2-leaflet-extension" : "~1.0"
to the require section of your application’s composer.json
file.
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:
// 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' => 'http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpeg',
'clientOptions' => [
'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 © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
'subdomains' => '1234'
]
]);
// 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();
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
For further information regarding the multiple settings of LeafLetJS library please visit its API reference
Please see CONTRIBUTING for details.
The BSD License (BSD). Please see License File for more information.
Web development has never been so fun!
www.2amigos.us