or
01.
@(Html.Kendo().Map()
02.
.Name(
"CampaignMap"
)
03.
.Center(37.828127, -98.579404)
04.
.Zoom(4)
05.
.Zoomable(
false
)
06.
.Pannable(
false
)
07.
.Wraparound(
false
)
08.
.Controls(controls => controls.Navigator(
false
).Zoom(
false
))
09.
.Layers(layers =>
10.
{
11.
layers.Add()
12.
.Type(MapLayerType.Tile)
13.
.UrlTemplate(
"http://tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"
)
14.
//.Subdomains("a", "b", "c")
15.
.Attribution(
"© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>"
);
16.
17.
layers.Add()
18.
.Type(MapLayerType.Bubble)
19.
.Style(style => style
20.
.Fill(fill => fill.Color(
"#00BFFF"
).Opacity(0.4))
21.
.Stroke(stroke => stroke.Width(0))
22.
)
23.
.DataSource(dataSource => dataSource
24.
.Read(read => read.Action(
"InstCoords"
,
"Email"
,
new
{ id = @Model.CampaignId }))
25.
)
26.
.LocationField(
"Location"
)
27.
.ValueField(
"Opens"
);
28.
})
29.
)
1.
[AcceptVerbs(HttpVerbs.Post)]
2.
public
ActionResult InstCoords(
int
id)
3.
{
4.
IEnumerable<CampaignInstOpens> coords = reportRepository.GetMapCoords(id);
5.
return
Json(coords);
6.
}
01.
function
SwitchMap(e) {
02.
var
index = $(e.item).index();
// this refers to a panelbar's selected index
03.
var
layer = $(
"#CampaignMap"
).data(
"kendoMap"
).layers[1];
04.
if
(index == 0) {
05.
layer.options.valueField =
"Opens"
;
06.
layer.options.style.fill.color =
"#00BFFF"
;
07.
}
08.
else
{
09.
layer.options.valueField =
"Clicks"
;
10.
layer.options.style.fill.color =
"#008000"
;
11.
}
12.
layer.reset();
13.
}
var mapData = $('#map').data('kendoMap');
mapData.layers[1].dataSource = new kendo.data.DataSource({
transport: {
read: {
url: ('@Url.Action("getMapData")'),
dataType: "json",
data: { customerId: customer.Id }
}
}
});
mapData.layers[1].dataSource.read();
$("#map").kendoMap({
center: [30.268107, -97.744821],
zoom: 15,
layers: [{
type: "tile",
urlTemplate: "http://#= subdomain #.tile2.opencyclemap.org/transport/#= zoom #/#= x #/#= y #.png",
subdomains: ["a", "b", "c"],
attribution: "© <
a
href
=
'http://osm.org/copyright'
>OpenStreetMap contributors</
a
>." +
"Tiles courtesy of <
a
href
=
'http://www.opencyclemap.org/'
>Andy Allan</
a
>"
},
{
type: "marker",
locationField: "latlng",
titleField: "name",
}]
});