yii2-leaflet-library Extension Library to display interactive maps with LeafLet

  1. Introduction
  2. Installation
  3. Usage
  4. Resources


After Google Maps changed its usage policies, we decided to move from it to the popular LeafLetJs library.

LeafLetJs is a modern open-source Javascript Library for mobile-friendly interactive maps. It doesn't have the huge functionality of Google Maps, but I am pretty sure it will be perfectly suitable for most of your Yii2 application mapping needs.


The preferred way to install this extension is through composer.

Either run php composer.phar require "2amigos/yii2-leaflet-extension" "*" or add "2amigos/yii2-leaflet-extension" : "*" 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 that provides a Open Tiles Service:

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([
    'tileLayer' => $tileLayer, // set the TileLayer
    'center' => $center, // set the center
$leaflet->addLayer($marker); // add the marker (addLayer is used to add different layers to our map)

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

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

This extension has a plugin architecture that allow us to enhance it according to our needs (geocoding, geo searching, maki markers, marker cluster support, etc). Check its current extensions on its github repository.


web development has never been so fun

1 0
Yii Version: 2.0
License: BSD-2-Clause
Category: Web Service
Developed by: Antonio Ramirez
Created on: Jun 7, 2014
Last updated: 10 years ago

Related Extensions