function Guid() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
} 
function rand() {
    return Math.random()*360 - 180;
}
function onMarkerClick(e) {
    console.log(e);
}
function createMap() {
    var datasrc = new kendo.data.DataSource({
        type: "geojson",
        data: []
    });
    var datasrc1 = new kendo.data.DataSource({
        type: "geojson",
        data: []
    });
    var map = $("#map").kendoMap({
        center: [0, 0],
        zoom: 12,
        layers: [{
            type: "tile",
            urlTemplate: "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
            subdomains: ["a", "b", "c"],
            attribution: "© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>"
        },
        {
            type: "shape",
            dataSource: datasrc,
        },{
            type: "shape",
            dataSource: datasrc1,
        }],
        markerClick: onMarkerClick,
        markerCreated: onMarkerCreated,
        shapeCreated: onShapeCreated,
    }).data("kendoMap");

    let arr = [];
    let arr1 = [];
    
    for (var i = 0; i < 20; i++) {
        arr.push({type: "Feature", id: Guid(), geometry: {type: "Point", coordinates: [0,0-i*0.005]}})
        datasrc.data(arr)
    }


    for (var i = 0; i < 30; i++) {
        arr1.push({type: "Feature", id: Guid(), geometry: {type: "LineString", coordinates: [[-5,0.08 - i * 0.002], [5,0.08- i * 0.002]]}})
        datasrc1.data(arr1)
    }
}

$(document).ready(createMap);

function onMarkerCreated(e) {
e.preventDefault()
}
function onShapeCreated(e) {
if (e.shape.dataItem.geometry.type == "Point") {
    console.log("creating shape")
    var bbox = e.shape.bbox();
    var center = bbox.center()
    var label = new kendo.drawing.Text("Lorem Ipsum");
    var labelCenter = label.bbox().center()
    label.position([
        center.x - labelCenter.x,
        center.y - labelCenter.y
    ])
    label.dataItem = e.shape.dataItem;
    e.layer.surface.draw(label);
    e.preventDefault();
} else {
    console.log("creating line")
}
}

@(Html.Kendo().RadioGroup()
                    .Name("xxx")
                    .Items(i =>
                    {
                        i.Add().Label("United States").Value("1");
                        i.Add().Label("Canade").Value("2");
                        i.Add().Label("Mexiko").Value("3");
                        i.Add().Value("4").Encoded(false).Label("Other: " + Html.Kendo().DropDownListFor(x => x.ProviderId)
                                    .DataSource(source => source
                                        .Custom()
                                        .Sort(x => x.Add(Html.NameFor(y => new Provider().Name)))
                                        .Transport(x => x
                                            .Read(read =>
                                            {
                                                read.Url($"https://{webApiHost}/fruehehilfen/api/Provider").Headers(new { authorization = user.TokenString });
                                            })))
                                    .DataTextField(Html.NameFor(x => new Provider().Name))
                                    .DataValueField(Html.NameFor(x => new Provider().ID))
                                    .HtmlAttributes(new { style = "width: 100%" })
                                    .OptionLabel("Bitte auswählen").ToHtmlString());
                    })
                )