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

Introduction ¶

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.

Installation ¶

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.

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 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.

Resources ¶

• LeafLetJs
• LeafLetJs Api Reference
• MapQuest
• GitHub
• 2amigOS Packagist Profile

web development has never been so fun
www.2amigos.us