PHP Kendo\Dataviz\UI\Map Examples

Example #1

File: bing.php Project: neevan1e/Done

<?php

require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
$layer = new \Kendo\Dataviz\UI\MapLayer();
$layer->type("bing")->key("AjQF548guEF8MWgEspVokNny7l_GULKsZ81tR-LvPK96Bm3REkCjNHs2aC_b7nvF");
$map = new \Kendo\Dataviz\UI\Map('map');
$map->center(array(51.505, -0.09))->zoom(3)->addLayer($layer);
echo $map->render();
require_once '../include/footer.php';

Example #2

File: geojson.php Project: neevan1e/Done

<?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);
}

Example #3

File: index.php Project: neevan1e/Done

<?php

require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
$layer = new \Kendo\Dataviz\UI\MapLayer();
$layer->type("tile")->urlTemplate("http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png")->subdomains(array('a', 'b', 'c'))->attribution("&copy; <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>");
$markerTooltip = new \Kendo\Dataviz\UI\MapMarkerTooltip();
$markerTooltip->content('Austin, TX');
$marker = new \Kendo\Dataviz\UI\MapMarker();
$marker->location(array(30.268107, -97.744821))->shape('pinTarget')->tooltip($markerTooltip);
$map = new \Kendo\Dataviz\UI\Map('map');
$map->center(array(30.2681, -97.7448))->zoom(3)->addLayer($layer)->addMarker($marker);
echo $map->render();
require_once '../include/footer.php';

Example #4

File: events.php Project: neevan1e/Done

<?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/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.337))->zoom(4)->addLayer($layer)->click('onClick')->reset('onReset')->pan('onPan')->panEnd('onPanEnd')->shapeClick('onShapeClick')->shapeCreated('onShapeCreated')->shapeMouseEnter('onShapeMouseEnter')->shapeMouseLeave('onShapeMouseLeave')->zoomStart('onZoomStart')->zoomEnd('onZoomEnd');
echo $map->render();
?>
<div class="console"></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) {

Example #5

File: remote-markers.php Project: neevan1e/Done

<?php

require_once '../lib/Kendo/Autoload.php';
require_once '../include/map_data.php';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    header('Content-Type: application/json');
    $result = store_locations();
    echo json_encode($result);
    exit;
}
require_once '../include/header.php';
$tile_layer = new \Kendo\Dataviz\UI\MapLayer();
$tile_layer->type("tile")->urlTemplate("http://#= subdomain #.tile2.opencyclemap.org/transport/#= zoom #/#= x #/#= y #.png")->subdomains(array('a', 'b', 'c'))->attribution("&copy; <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>." + "Tiles courtesy of <a href='http://www.opencyclemap.org/'>Andy Allan</a>");
$transport = new \Kendo\Data\DataSourceTransport();
$transport->read(array('url' => 'remote-markers.php', 'type' => 'POST', 'dataType' => 'json'));
$dataSource = new \Kendo\Data\DataSource();
$dataSource->transport($transport);
$marker_layer = new \Kendo\Dataviz\UI\MapLayer();
$marker_layer->type('marker')->dataSource($dataSource)->locationField('latLng')->titleField('name');
$map = new \Kendo\Dataviz\UI\Map('map');
$map->center(array(30.2681, -97.7448))->zoom(15)->addLayer($tile_layer)->addLayer($marker_layer);
echo $map->render();
require_once '../include/footer.php';

Example #6

File: api.php Project: neevan1e/Done

<?php

require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
$layer = new \Kendo\Dataviz\UI\MapLayer();
$layer->type("tile")->urlTemplate("http://tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png")->subdomains(array('a', 'b', 'c'))->attribution("&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors");
$map = new \Kendo\Dataviz\UI\Map('map');
$map->center(array(30.2681, -97.7448))->zoom(3)->addLayer($layer)->panEnd('updateControls')->zoomEnd('updateControls');
?>

<div id="example" class="k-content absConf">
    <div class="map-wrapper" style="margin: auto;">
        <?php 
echo $map->render();
?>
    </div>
    <div class="configuration-horizontal" id="mapConfig">
        <div class="config-section">
            <span class="configHead">Center</span>
            <ul class="options">
                <li>
                    <input id="centerLat" data-role="numerictextbox"
                           data-format="N4" value="30.2681" data-decimals="4" />
                    <input id="centerLng" data-role="numerictextbox"
                           data-format="N4" value="-97.7448" data-decimals="4" />
                    <button id="center" class="k-button">center()</button>
                </li>
            </ul>
        </div>
        <div class="config-section">
            <span class="configHead">Zoom level</span>