Working Examples

[sabbelasichon]

Hi, thanks for this library. Looks promising. Do you have any working examples? For me it is not working to have a map with a simple TileLayer. The javascript outputs only the map part. But not the TileLayer part. Thanks in advance.

[dmolineus]

This should work (Taken from #5):

<?php

use Netzmacht\JavascriptBuilder\Builder;
use Netzmacht\JavascriptBuilder\Encoder\ChainEncoder;
use Netzmacht\JavascriptBuilder\Encoder\JavascriptEncoder;
use Netzmacht\JavascriptBuilder\Encoder\MultipleObjectsEncoder;
use Netzmacht\JavascriptBuilder\Output;
use Netzmacht\JavascriptBuilder\Symfony\EventDispatchingEncoder;
use Netzmacht\LeafletPHP\Definition\Map;
use Netzmacht\LeafletPHP\Definition\Raster\TileLayer;
use Netzmacht\LeafletPHP\Definition\UI\Marker;
use Netzmacht\LeafletPHP\Encoder\ControlEncoder;
use Netzmacht\LeafletPHP\Encoder\GroupEncoder;
use Netzmacht\LeafletPHP\Encoder\MapEncoder;
use Netzmacht\LeafletPHP\Encoder\RasterEncoder;
use Netzmacht\LeafletPHP\Encoder\TypeEncoder;
use Netzmacht\LeafletPHP\Encoder\UIEncoder;
use Netzmacht\LeafletPHP\Encoder\VectorEncoder;
use Netzmacht\LeafletPHP\Leaflet;
use Netzmacht\LeafletPHP\Value\LatLng;
use Symfony\Component\EventDispatcher\EventDispatcher;

require 'vendor/autoload.php';

/*
 * 1. Setup the encoder
 */

// The event dispatcher
$dispatcher = new EventDispatcher();

// All encoders are event subscribers.
$dispatcher->addSubscriber(new ControlEncoder());
$dispatcher->addSubscriber(new GroupEncoder());
$dispatcher->addSubscriber(new MapEncoder());
$dispatcher->addSubscriber(new RasterEncoder());
$dispatcher->addSubscriber(new TypeEncoder());
$dispatcher->addSubscriber(new UIEncoder());
$dispatcher->addSubscriber(new VectorEncoder());

// Create a custom factory for the javascript builder which uses the event dispatcher.
// The order of the registered encoders are important! Only change if you know what you do.
$factory = function(Output $output) use ($dispatcher) {
    $encoder = new ChainEncoder();

    $encoder
        ->register(new MultipleObjectsEncoder())
        ->register(new EventDispatchingEncoder($dispatcher))
        ->register(new JavascriptEncoder($output, JSON_UNESCAPED_SLASHES));

    return $encoder;
};

$builder = new Builder($factory);
$leaflet = new Leaflet($builder, $dispatcher, [], JSON_UNESCAPED_SLASHES ^ Netzmacht\JavascriptBuilder\Flags::BUILD_STACK);

/*
 * 2. Create the map definitions
 */
$map = new Map('leafletMap', 'map');
$position = new LatLng(51.047093, 13.747347);
$marker = (new Marker('marker', $position)) ->addTo($map);
$map
    ->setZoom(12)
    ->setCenter($position);

$copyRight = '© OpenStreetMap und Mitwirkende '.
    '<a href="http://www.openstreetmap.org/">http://www.openstreetmap.org/</a>'
    .'<br/>Lizenz: CC BY-SA'
    .'<a href="http://creativecommons.org/licenses/by-sa/2.0/">'
    .    ' http://creativecommons.org/licenses/by-sa/2.0/'
    .'</a>';
$tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
$tileLayer = (new TileLayer('osm', $tileUrl))
    ->setAttribution($copyRight);
$tileLayer->addTo($map);

/*
 * 3. Build the javascript
 */

// Will return javascript with following local vars: "map", "layers", "controls", "icons".
$jsCode = $leaflet->build($map);
echo $jsCode;

The important part is that the Netzmacht\JavascriptBuilder\Flags::BUILD_STACK flag is set. Otherwise the other objects of the graph are not built (in fact it's a bug, b/c the flag should just be an optimazion - I have to have a look on this)

 $leaflet = new Leaflet($builder, $dispatcher, [], JSON_UNESCAPED_SLASHES ^ Netzmacht\JavascriptBuilder\Flags::BUILD_STACK);`

[sabbelasichon]

@dmolineus Thanks. This is working. Should i close the issue?

[sabbelasichon]

@dmolineus I would really like to use this library in one of my projects, but i am struggling with some basic things e.g. open a popUp automatically. Do you use this library in production and could provide some practical examples? Or would you be able to give paid support for my specific questions.

[dmolineus]

@dmolineus I would really like to use this library in one of my projects, but i am struggling with some basic things e.g. open a popUp automatically.

Yes, it's used in production. A map extension for the open source CMS Contao is built upon this library and is widely used.

Adding a popup could be done like this:

$popup = new \Netzmacht\LeafletPHP\Definition\UI\Popup('popup');
$popup->setLatLng(LatLng::fromArray([52.52437, 13.41053]));
$popup->setContent('<p>Hello world</p>');
$popup->openOn($map);

Open a marker popup:

$handler = <<<'JS'
function (event) {
  event.layer.openPopup();
}
JS;

$marker = new Marker('test', LatLng::fromArray([52.52437, 13.41053]));
$marker->bindPopup('<p>Hello world</p>');
$marker->on('add', new \Netzmacht\JavascriptBuilder\Type\Expression($handler));

Do you use this library in production and could provide some practical examples? Or would you be able to give paid support for my specific questions.

In general I'm availabe to give paid support. Please use the contact information from my website.