LeafLet Extension Library

Visit GitHub Repository

What is LeafLet Library?

This extension allows to display interactive maps with the superb and open source LeafletJs Javascript Library for mobile-friendly interactive maps.

LeafletJs is an extraordinary alternative to Google Maps, which it has pretty tough policies of usage.


The preferred way to install this extension is through composer.

Either run

composer require 2amigos/yii2-leaflet-extension:~1.0

or add the following to the require section of your application's composer.json file:

"2amigos/yii2-leaflet-extension" : "~1.0" 

Usage example

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:

use dosamigos\leaflet\types\LatLng;
use dosamigos\leaflet\layers\Marker;
use dosamigos\leaflet\layers\TileLayer;
use dosamigos\leaflet\LeafLet;
use dosamigos\leaflet\widgets\Map;


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

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

// The Tile Layer (very important)
$tileLayer = new 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 &copy; <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 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 Map::widget(['leafLet' => $leaflet]);

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


Thanks All