<?php
require_once '../lib/Kendo/Autoload.php';

$dataSource = new \Kendo\Data\DataSource();
$dataSource->type("geojson")
           ->transport(array('read' => '../content/dataviz/map/us.geo.json'));

$layer = new \Kendo\Dataviz\UI\MapLayer();
$layer->type("shape")
      ->dataSource($dataSource)
      ->style(array(
          'stroke' =>array('color' => '#ccebc5'),
          'fill' => array('color' => '#b3cde3')
      ));

$map = new \Kendo\Dataviz\UI\Map('map');
$map->center(array(39.6924, -97.3370))
    ->zoom(4)
    ->attr('style', 'height: 300px;')
    ->addLayer($layer)
    ->click('onClick')
    ->reset('onReset')
    ->pan('onPan')
    ->panEnd('onPanEnd')
    ->shapeClick('onShapeClick')
    ->shapeCreated('onShapeCreated')
    ->shapeFeatureCreated('onShapeFeatureCreated')
    ->shapeMouseEnter('onShapeMouseEnter')
    ->shapeMouseLeave('onShapeMouseLeave')
    ->zoomStart('onZoomStart')
    ->zoomEnd('onZoomEnd');

echo $map->render();
?>
<div class="box wide">
    <h4>Console log</h4>
    <div class="console"></div>
</div>
<script>
function onClick(e) {
    kendoConsole.log("Click at ...");
}

function onReset(e) {
    kendoConsole.log("Reset");
}

function onPan(e) {
    kendoConsole.log("Pan");
}

function onPanEnd(e) {
    kendoConsole.log("Pan end");
}

function onShapeClick(e) {
    kendoConsole.log(kendo.format(
        "Shape click :: {0}", e.shape.dataItem.properties.name
    ));
}

function onShapeCreated(e) {
    kendoConsole.log(kendo.format(
        "Shape created :: {0}", e.shape.dataItem.properties.name
    ));
}

function onShapeFeatureCreated(e) {
    kendoConsole.log(kendo.format(
    "Feature created :: {0} with {1} child shape(s)",
        e.properties.name,
        e.group.children.length
    ));
}

function onShapeMouseEnter(e) {
    kendoConsole.log(kendo.format(
        "Shape mouseEnter :: {0}", e.shape.dataItem.properties.name
    ));
}

function onShapeMouseLeave(e) {
    kendoConsole.log(kendo.format(
        "Shape mouseLeave :: {0}", e.shape.dataItem.properties.name
    ));
}

function onZoomStart(e) {
    kendoConsole.log("Zoom start");
}

function onZoomEnd(e) {
    kendoConsole.log("Zoom end");
}

</script>