[Helper] Add static map styles support (#239)

egeloen · May 27, 2017 · c161267 · c161267
1 parent 89c9d5c
commit c161267
Show file tree

Hide file tree

Showing 8 changed files with 241 additions and 0 deletions.
diff --git a/doc/map.md b/doc/map.md
@@ -140,6 +140,7 @@ want to override them, you can use the following ones:
  - width: The map width (default 300).
  - height: The map height (default 300).
  - maptype: The map type (default roadmap).
+ - styles: The map styles which override the default map rendering.
  - visible: The elements which should be visible which can be either a `Coordinate`, an address or an array of both 
    (default empty).
 
@@ -149,6 +150,29 @@ use Ivory\GoogleMap\MapTypeId;
 $map->setStaticOption('maptype', MapTypeId::HYBRID);
 ```
 
+The [Map styles](https://developers.google.com/maps/documentation/static-maps/styling) allows you to customize the 
+presentation of the standard Google map by applying your own styles. Here, an example showing you how to use it:
+
+``` php
+$map->setStaticOption('styles', [
+    [
+        'feature' => 'road.highway', // Optional
+        'element' => 'geometry',     // Optional
+        'rules'   => [               // Mandatory (at least one rule)
+            'color'      => '0xc280e9',
+            'visibility' => 'simplified',
+        ],
+    ],
+    [
+        'feature' => 'transit.line',
+        'rules'   => [
+            'visibility' => 'simplified',
+            'color'      => '0xbababa',
+        ]
+    ],
+]);
+```
+
 ## Configure stylesheets
 
 If you want to configure map stylesheets, you can use:

diff --git a/src/Helper/Builder/StaticMapHelperBuilder.php b/src/Helper/Builder/StaticMapHelperBuilder.php
@@ -28,6 +28,7 @@
 use Ivory\GoogleMap\Helper\Renderer\Image\Overlay\PolylineRenderer;
 use Ivory\GoogleMap\Helper\Renderer\Image\Overlay\PolylineStyleRenderer;
 use Ivory\GoogleMap\Helper\Renderer\Image\SizeRenderer;
+use Ivory\GoogleMap\Helper\Renderer\Image\StyleRenderer;
 use Ivory\GoogleMap\Helper\StaticMapHelper;
 use Ivory\GoogleMap\Helper\Subscriber\Image\CenterSubscriber;
 use Ivory\GoogleMap\Helper\Subscriber\Image\EncodedPolylineSubscriber;
@@ -39,6 +40,7 @@
 use Ivory\GoogleMap\Helper\Subscriber\Image\ScaleSubscriber;
 use Ivory\GoogleMap\Helper\Subscriber\Image\SizeSubscriber;
 use Ivory\GoogleMap\Helper\Subscriber\Image\StaticSubscriber;
+use Ivory\GoogleMap\Helper\Subscriber\Image\StyleSubscriber;
 use Ivory\GoogleMap\Helper\Subscriber\Image\TypeSubscriber;
 use Ivory\GoogleMap\Helper\Subscriber\Image\ZoomSubscriber;
 
@@ -224,6 +226,7 @@ protected function createSubscribers()
         // Renderers
         $coordinateRenderer = new CoordinateRenderer();
         $sizeRenderer = new SizeRenderer();
+        $styleRenderer = new StyleRenderer();
         $encodedPolylineValueRenderer = new EncodedPolylineValueRenderer();
         $encodedPolylineStyleRenderer = new EncodedPolylineStyleRenderer();
         $encodedPolylineRenderer = new EncodedPolylineRenderer($encodedPolylineStyleRenderer, $encodedPolylineValueRenderer);
@@ -248,6 +251,7 @@ protected function createSubscribers()
             new PolylineSubscriber($polylineCollector, $polylineRenderer),
             new ScaleSubscriber(),
             new SizeSubscriber($sizeRenderer),
+            new StyleSubscriber($styleRenderer),
             new StaticSubscriber(),
             new TypeSubscriber(),
             new ZoomSubscriber(),

diff --git a/src/Helper/Event/StaticMapEvents.php b/src/Helper/Event/StaticMapEvents.php
@@ -21,6 +21,7 @@ final class StaticMapEvents
     const FORMAT = 'map.static.format';
     const SCALE = 'map.static.scale';
     const SIZE = 'map.static.size';
+    const STYLE = 'map.static.style';
     const TYPE = 'map.static.type';
     const ZOOM = 'map.static.zoom';
     const MARKER = 'map.static.marker';

diff --git a/src/Helper/Renderer/Image/StyleRenderer.php b/src/Helper/Renderer/Image/StyleRenderer.php
@@ -0,0 +1,53 @@
+<?php
+
+/*
+ * This file is part of the Ivory Google Map package.
+ *
+ * (c) Eric GELOEN <geloen.eric@gmail.com>
+ *
+ * For the full copyright and license information, please read the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Ivory\GoogleMap\Helper\Renderer\Image;
+
+/**
+ * @author GeLo <geloen.eric@gmail.com>
+ */
+class StyleRenderer
+{
+    /**
+     * @param mixed[] $style
+     *
+     * @return string
+     */
+    public function render(array $style)
+    {
+        $result = [];
+
+        if (isset($style['feature'])) {
+            $result[] = $this->renderStyle('feature', $style['feature']);
+        }
+
+        if (isset($style['element'])) {
+            $result[] = $this->renderStyle('element', $style['element']);
+        }
+
+        foreach ($style['rules'] as $rule => $value) {
+            $result[] = $this->renderStyle($rule, $value);
+        }
+
+        return implode('|', $result);
+    }
+
+    /**
+     * @param string $name
+     * @param string $value
+     *
+     * @return string
+     */
+    private function renderStyle($name, $value)
+    {
+        return $name.':'.$value;
+    }
+}
diff --git a/src/Helper/Subscriber/Image/StaticSubscriber.php b/src/Helper/Subscriber/Image/StaticSubscriber.php
@@ -62,6 +62,7 @@ public static function getDelegatedSubscribedEvents()
                 StaticMapEvents::FORMAT,
                 StaticMapEvents::SCALE,
                 StaticMapEvents::SIZE,
+                StaticMapEvents::STYLE,
                 StaticMapEvents::TYPE,
                 StaticMapEvents::EXTENDABLE,
                 StaticMapEvents::ZOOM,

diff --git a/src/Helper/Subscriber/Image/StyleSubscriber.php b/src/Helper/Subscriber/Image/StyleSubscriber.php
@@ -0,0 +1,66 @@
+<?php
+
+/*
+ * This file is part of the Ivory Google Map package.
+ *
+ * (c) Eric GELOEN <geloen.eric@gmail.com>
+ *
+ * For the full copyright and license information, please read the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Ivory\GoogleMap\Helper\Subscriber\Image;
+
+use Ivory\GoogleMap\Helper\Event\StaticMapEvent;
+use Ivory\GoogleMap\Helper\Event\StaticMapEvents;
+use Ivory\GoogleMap\Helper\Renderer\Image\StyleRenderer;
+use Symfony\Component\EventDispatcher\EventSubscriberInterface;
+
+/**
+ * @author GeLo <geloen.eric@gmail.com>
+ */
+class StyleSubscriber implements EventSubscriberInterface
+{
+    /**
+     * @var StyleRenderer
+     */
+    private $styleRenderer;
+
+    /**
+     * @param StyleRenderer $styleRenderer
+     */
+    public function __construct(StyleRenderer $styleRenderer)
+    {
+        $this->styleRenderer = $styleRenderer;
+    }
+
+    /**
+     * @param StaticMapEvent $event
+     */
+    public function handleMap(StaticMapEvent $event)
+    {
+        $map = $event->getMap();
+
+        if (!$map->hasMapOption('styles')) {
+            return;
+        }
+
+        $styles = [];
+
+        foreach ($map->getStaticOption('styles') as $style) {
+            $styles[] = $this->styleRenderer->render($style);
+        }
+
+        if (!empty($styles)) {
+            $event->setParameter('style', $styles);
+        }
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public static function getSubscribedEvents()
+    {
+        return [StaticMapEvents::STYLE => 'handleMap'];
+    }
+}
diff --git a/tests/Helper/Functional/StaticMapFunctionalTest.php b/tests/Helper/Functional/StaticMapFunctionalTest.php
@@ -150,6 +150,30 @@ public function testRenderWithCenterAddress()
         $this->renderMap($map);
     }
 
+    public function testRenderWithStyles()
+    {
+        $map = new Map();
+        $map->setStaticOption('styles', [
+            [
+                'feature' => 'road.highway',
+                'element' => 'geometry',
+                'rules'   => [
+                    'color'      => '0xc280e9',
+                    'visibility' => 'simplified',
+                ],
+            ],
+            [
+                'feature' => 'transit.line',
+                'rules'   => [
+                    'visibility' => 'simplified',
+                    'color'      => '0xbababa',
+                ]
+            ],
+        ]);
+
+        $this->renderMap($map);
+    }
+
     public function testRenderWithMapType()
     {
         $map = new Map();

diff --git a/tests/Helper/Renderer/Image/StyleRendererTest.php b/tests/Helper/Renderer/Image/StyleRendererTest.php
@@ -0,0 +1,68 @@
+<?php
+
+/*
+ * This file is part of the Ivory Google Map package.
+ *
+ * (c) Eric GELOEN <geloen.eric@gmail.com>
+ *
+ * For the full copyright and license information, please read the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Ivory\Tests\GoogleMap\Helper\Renderer\Image;
+
+use Ivory\GoogleMap\Helper\Renderer\Image\StyleRenderer;
+
+/**
+ * @author GeLo <geloen.eric@gmail.com>
+ */
+class StyleRendererTest extends \PHPUnit_Framework_TestCase
+{
+    /**
+     * @var StyleRenderer
+     */
+    private $styleRenderer;
+
+    /**
+     * {@inheritdoc}
+     */
+    protected function setUp()
+    {
+        $this->styleRenderer = new StyleRenderer();
+    }
+
+    /**
+     * @param string  $expected
+     * @param mixed[] $style
+     *
+     * @dataProvider renderProvider
+     */
+    public function testRender($expected, array $style)
+    {
+        $this->assertSame($expected, $this->styleRenderer->render($style));
+    }
+
+    /**
+     * @return mixed[]
+     */
+    public function renderProvider()
+    {
+        return [
+            ['color:0x00ff00', ['rules' => ['color' => '0x00ff00']]],
+            ['color:0x00ff00|lightness:50', ['rules' => ['color' => '0x00ff00', 'lightness' => '50']]],
+            ['feature:road|color:0x00ff00|lightness:50', [
+                'feature' => 'road',
+                'rules'   => ['color' => '0x00ff00', 'lightness' => '50'],
+            ]],
+            ['element:geometry|color:0x00ff00|lightness:50', [
+                'element' => 'geometry',
+                'rules'   => ['color' => '0x00ff00', 'lightness' => '50'],
+            ]],
+            ['feature:road.local|element:geometry|color:0x00ff00|lightness:50', [
+                'feature' => 'road.local',
+                'element' => 'geometry',
+                'rules'   => ['color' => '0x00ff00', 'lightness' => '50'],
+            ]],
+        ];
+    }
+}