.. ==================================================
.. FOR YOUR INFORMATION
.. --------------------------------------------------
.. -*- coding: utf-8 -*- with BOM.

.. include:: ../../../../Includes.txt


.. _integrators-bestpractise-vectorlayers-polygons:


.. figure:: ../leaflet_marker_circle_polygon.jpg
	:width: 600px
	:alt: Leaflet map with a marker, a circle and a polygon

Leaflet map with a marker, a circle (red) and a polygon (blue). Live @ http://leafletjs.com/examples/quick-start/


Polygon
=======


Code-Snippet
------------

.. code-block:: typoscript

  L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
  ], {
    color: 'red',
    fillColor: 'white',
    fillOpacity: 0.4,
    smoothFactor: 4,
  }).addTo(map).bindPopup("My polygon with three points :)");

Leaflet documentation @ http://leafletjs.com/reference.html


Container
---------

* Please create a folder in your TYPO3 backend. Call it: "Additional Content for Leaflet"

* Create an HTML content element within this folder. 

  * Call it: "My Polygon in London"

  * Set [Appearance] > "Indentation and Frames" to [browser: No frame (i.e. for javascript)]

* Copy the code from above and paste it into the HTML content field.


.. figure:: leaflet_html_content.jpg
	:width: 600px
	:alt: The HTML content element

The HTML content element with the code from above


.. figure:: leaflet_html_frame.jpg
	:width: 600px
	:alt: The HTML content element without any frame

The HTML content element without any frame. You will get a Javascript error in the frontend, if you are using a frame!


Setup
-----

Constant Editor > Category [BROWSERMAPS - ADDITIONAL CONTENT]

* Set the "Pid" to the Pid of the folder "Additional Content for Leaflet" from above.

.. figure:: leaflet_constanteditor_pid_additionalcontent.jpg
	:width: 600px
	:alt: BrowserMaps need to know the pid of the folder only

BrowserMaps need to know the pid of the folder only


Result
------

Check the result in the frontent.

Look for London and zoom in.


.. figure:: leaflet_browserMaps_polygon.jpg
	:width: 600px
	:alt: The polygon in London. Left hand: a small dot. Right hand: the polygon

The polygon in London. Left hand: a small dot. Right hand: the polygon