Telerik Forums
UI for ASP.NET MVC Forum
1 answer
304 views
Hello all

I have downloaded Open Street Maps Tile.

I would like to know whether i can build  Asp.Net MVC 4 Web Application and i want to load OSM Tiles downloaded locally.

The computer will not be connected to the Internet.

Can you please let us know on how to  implement  map control and load tiles from locally downloaded folder.

I would also like to know if i can trigger markers on particular lat and Long

Thanks
Suresh


T. Tsonev
Telerik team
 answered on 12 Mar 2015
1 answer
155 views
Hi,

I'm trying to use the map to display the open and click results of an email campaign. When the page loads I want to display a bubble layer that represents the number of opens for the campaign. When the user clicks on certain panel in a panelbar, I want to instead display a bubble layer with the number of clicks for the campaign. I've been able to get it to switch back and forth successfully, but every time I do I encounter some nasty lag that I need to find a way to get rid of.

Here's the html for the map itself:
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.            )


This is the method the map reads from in my controller:
1.[AcceptVerbs(HttpVerbs.Post)]
2.public ActionResult InstCoords(int id)
3.{
4.    IEnumerable<CampaignInstOpens> coords = reportRepository.GetMapCoords(id);
5.    return Json(coords);
6.}


reportRepository.GetMapCoords(id) builds a SQL string which retrieves the number of opens, the number of clicks, latitude, and longitude for each building that was targeted by the campaign.

All of the above code seems to work fine on the initial page load - all of the data for number of opens displays in a bubble layer. What I'm trying to accomplish is when the user clicks a certain button I want to switch the bubble layer from using the "Opens" as the value field to using "Clicks," but this causes a huge amount of lag and freezes the page for several seconds. Like I said, my Read() function already grabs the data for both opens and clicks, so it seems to be like switching shouldn't be such a huge issue since it already has all the data it needs.

Here is the function I'm using to switch the value field:
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.}

Can someone help me figure out how to switch back and forth between value fields without the horrible lag?
T. Tsonev
Telerik team
 answered on 04 Mar 2015
5 answers
51 views
The link that currently is pointing to the documentation for the Map helper returns a 404:

http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/map/overview

If I try looking up the documentation in the helpers list, I do not see the Map helper listed. Will this be fixed any time soon?
T. Tsonev
Telerik team
 answered on 04 Feb 2015
5 answers
475 views
I am currently trying to add custom markers to a map in MVC C#.
Is there anyway of creating a different shape/image in MapMarkersShape to display it on the map?
My current code is as follows:

@(Html.Kendo().Map()
    .Name("map")
    .Center(30.268107, -97.744821)
    .Zoom(3)
    .Layers(layers =>
    {
        layers.Add()
            .Type(MapLayerType.Bing)
            .Shape(MapMarkersShape.Pin) // -< this line
            .Key("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"); 
    })
)

Thanks
Daniel
Top achievements
Rank 1
 answered on 29 Sep 2014
1 answer
70 views
Hi,
I'm following the example "binding markers to remote data"
My question is: is it possible to center the map programmatically after the Datasource.read is being called? My datasource contains a list of possible stores. However, I would like to center the map (add a marker) with the initial longitude/latitude of my search request?

Next question : would it be possible (after datasource.read) to center/zoom the map around that layer?

So my code looks more or less as follow:
 @(Html.Kendo().Map()
    .Name("map")
    .Zoom(3)
    .Layers(layers =>
    {
        layers.Add()
            .Type(MapLayerType.Tile)
            .UrlTemplateId("http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png")
            .Subdomains("a", "b", "c")
            .Attribution("&copy; <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>");

        layers.Add()
            .Type(MapLayerType.Marker)
            .DataSource(dataSource => dataSource
                  .Read(read => read.Action("_StoreLocations", "Order", new { OrderId = Request.QueryString["OrderId"] }))
                  )
            .LocationField("LatLng")

            .TitleField("Name");

    })
Hristo Germanov
Telerik team
 answered on 30 Jul 2014
1 answer
158 views
Hello,

I am trying to set marks on a marker layer via JSON returned from my MVC controller.  I am capturing an onCriteriaChange event from a ListView.  In the event handler function I am try the following

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();

My declaration code is 

$("#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",
                              
                          }]
                      });

so you can see the layer already exists.  I just want to set a marker for the lat, long returned by my controller.  

I can verify that my controller is producing JSON (see attached screenshot).   But the markers do not show. Am I doing this correctly? Any help would be appreciated.

T. Tsonev
Telerik team
 answered on 20 Jun 2014
1 answer
197 views
Hello!
Tell me please. Can I add a layer with gps track on the map? Thank you!
T. Tsonev
Telerik team
 answered on 04 Jun 2014
4 answers
67 views
I have a problem with IE10. Explorer hangs when tiles can not read UrlTemplateId. If UrlTemplateId is not a valid IP address or no connection to the Internet. In FireFox and Chrome  all ok! 

How can I solve this problem with IE?
Hristo Germanov
Telerik team
 answered on 03 Jun 2014
3 answers
230 views
Hi,

I am having problems getting the GeoJSON map example working. I have used the same code and there are no errors and the navigation icons on top left are displayed but I can't see any map. The map control works perfectly for Bing so I know that is working.

I assume the issue is related to JSON file I am using. Can I please get a download of the GeoJSON file "~/Content/dataviz/map/countries-users.geo.json" used the example? or a download of the example GeoJSON project.

I am using IE10 latest KendoUI and VS2012.

Thanks

Rob
T. Tsonev
Telerik team
 answered on 01 Apr 2014
1 answer
121 views
I have been searching documentations but couldnt find any document about adding locations dynamicaly to the map ui. I want to get places locations from my database? I will be glad to see if someone shares knowledge about it.Thanks.
T. Tsonev
Telerik team
 answered on 18 Mar 2014
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?