Yii 2.0: yii2-leaflet-library

Extension Library to display interactive maps with LeafLet
5 followers

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

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

Total 2 comments

#18300 report it
Antonio Ramirez at 2014/10/13 02:49pm
@sifa786

That was an issue fixed by https://github.com/2amigos/yii2-leaflet-library/commit/0c2107dfa5c190646913ae931dfecf77e222549c

I will update the version patch asap.

Thanks

#18292 report it
sifa786 at 2014/10/12 12:34pm
Map fails to load

I get an error in firebug that says SyntaxError: missing variable name

SyntaxError: missing variable name
 
 
var  = L.map('w0', {"center":[51.508,-0.11],"zoom":13});

Any ideas as to the cause? The entire view code is as follows:

<?php
use dosamigos\leaflet\types\LatLng;
use dosamigos\leaflet\layers\Marker;
use dosamigos\leaflet\layers\TileLayer;
use dosamigos\leaflet\LeafLet;
use dosamigos\leaflet\widgets\Map;
 ?>
 
<div id="map"></div>
 
 
<?php
/* @var $this yii\web\View */
$this->title = 'About';
$this->params['breadcrumbs'][] = $this->title;
 
 
// 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();
?>

Leave a comment

Please to leave your comment.

Create extension
Downloads
No downloadable files yet