Esempio n. 1
0
<?php

require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
$dataSource = new \Kendo\Data\DataSource();
$dataSource->type("geojson")->transport(array('read' => '../content/dataviz/map/countries-users.geo.json'));
$layer = new \Kendo\Dataviz\UI\MapLayer();
$layer->type("shape")->dataSource($dataSource)->style(array('fill' => array('opacity' => 0.7)));
$map = new \Kendo\Dataviz\UI\Map('map');
$map->center(array(30.2681, -97.7448))->zoom(3)->addLayer($layer)->shapeCreated('onShapeCreated')->shapeMouseEnter('onShapeMouseEnter')->shapeMouseLeave('onShapeMouseLeave');
echo $map->render();
?>
<script src="../content/dataviz/map/js/chroma.min.js"></script>
<script>

var scale = chroma
    .scale(["white", "green"])
    .domain([1, 1000]);

function onShapeCreated(e) {
    var shape = e.shape;
    var users = shape.dataItem.properties.users;
    if (users) {
        var color = scale(users).hex();
        shape.fill(color);
    }
}

function onShapeMouseEnter(e) {
    e.shape.options.set("fill.opacity", 1);
}