Hi
i am probably missing something but in the demos etc i cant seem to find a way to draw a line between 2 points , i can put the points on the map fine, but i cant seem to find a way to draw a line between them on the map.
any help/instruction would be great thanks.
Peter.
i am probably missing something but in the demos etc i cant seem to find a way to draw a line between 2 points , i can put the points on the map fine, but i cant seem to find a way to draw a line between them on the map.
any help/instruction would be great thanks.
Peter.
5 Answers, 1 is accepted
0
Hello Peter,
I have noticed that you have an open ticket for the same requirement (ticket ID: 870171), where some details on this matter are already discussed.
Nevertheless, I would like to post a very basic example that demonstrates how to provide GeoJSON data from server-side to a RadMap control:
And the code-behind:
Best Regards,
Konstantin Dikov
Telerik
I have noticed that you have an open ticket for the same requirement (ticket ID: 870171), where some details on this matter are already discussed.
Nevertheless, I would like to post a very basic example that demonstrates how to provide GeoJSON data from server-side to a RadMap control:
<
script
type
=
"text/javascript"
>
function OnInitialize(sender, args) {
var originalOptions = args.get_options();
var geoJSON = document.getElementById("<%=HiddenGeoJSON.ClientID%>").value;
originalOptions.layers[0].dataSource = { data: JSON.parse(geoJSON) };
args.set_options(originalOptions);
}
</
script
>
<
asp:HiddenField
runat
=
"server"
ID
=
"HiddenGeoJSON"
/>
<
telerik:RadMap
runat
=
"server"
ID
=
"RadMap1"
Zoom
=
"2"
Width
=
"500"
Height
=
"200"
>
<
ClientEvents
OnInitialize
=
"OnInitialize"
/>
<
CenterSettings
Latitude
=
"30"
Longitude
=
"10"
/>
<
LayerDefaultsSettings
>
<
ShapeSettings
>
<
StyleSettings
>
<
FillSettings
Color
=
"green"
/>
<
StrokeSettings
Color
=
"black"
Width
=
"2"
/>
</
StyleSettings
>
</
ShapeSettings
>
</
LayerDefaultsSettings
>
<
LayersCollection
>
<
telerik:MapLayer
Type
=
"Shape"
>
</
telerik:MapLayer
>
</
LayersCollection
>
</
telerik:RadMap
>
And the code-behind:
protected
void
Page_Load(
object
sender, EventArgs e)
{
HiddenGeoJSON.Value =
"[{\"type\": \"Polygon\",\"coordinates\": [[[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]]]}]"
;
}
Best Regards,
Konstantin Dikov
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0
Peter
Top achievements
Rank 1
answered on 21 Oct 2014, 01:45 PM
Thanks for the starter points , although for some reason it didnt seem to work in my setup when using an actual map.
it all seems to trigger just doesnt seem to actually do anything.
any thoughts ?
btw the back end code is simply populating the hidden value with valid geoJSON data eg.
it all seems to trigger just doesnt seem to actually do anything.
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="LNGRails.aspx.cs" Inherits="Eclipse_Internal_Portal_2.LNG.LNGRails" %>
<
asp:Content
ID
=
"Content1"
ContentPlaceHolderID
=
"HeadContent"
runat
=
"server"
>
</
asp:Content
>
<
asp:Content
ID
=
"Content2"
ContentPlaceHolderID
=
"MainContent"
runat
=
"server"
>
<
style
type
=
"text/css"
>
.RadMap span.k-marker { margin-top: -19px; background-image: url(CustomMarkers_Sprite.png); width: 16px; height: 21px; }
/* Resetting the default styles of the Map markers */
.RadMap span.k-marker:before { content: ""; color: none; text-shadow: none; height: auto; width: auto; padding: 0; }
</
style
>
<
div
class
=
"tup_background"
>
<
div
class
=
"tup_headings"
style
=
"width: 100%;"
>
<
asp:Label
ID
=
"Label1"
runat
=
"server"
Text
=
"LNG Rails"
></
asp:Label
>
<
telerik:RadAjaxPanel
ID
=
"RadAjaxPanel1"
runat
=
"server"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
>
<
asp:PlaceHolder
ID
=
"PlaceHolder1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
function OnInitialize2(sender, args) {
var originalOptions = args.get_options();
var geoJSON = document.getElementById("<%=HiddenGeoJSON.ClientID%>").value;
originalOptions.layers[1].dataSource = { data: JSON.parse(geoJSON) };
args.set_options(originalOptions);
}
</
script
>
</
asp:PlaceHolder
>
<
asp:HiddenField
runat
=
"server"
ID
=
"HiddenGeoJSON"
/>
<
div
>
<
telerik:RadMap
ID
=
"RadMap1"
runat
=
"server"
Skin
=
"Vista"
Zoom
=
"2"
>
<
ClientEvents
OnInitialize
=
"OnInitialize2"
/>
<
LayerDefaultsSettings
>
<
ShapeSettings
>
<
StyleSettings
>
<
FillSettings
Color
=
"green"
/>
<
StrokeSettings
Color
=
"black"
Width
=
"100"
/>
</
StyleSettings
>
</
ShapeSettings
>
</
LayerDefaultsSettings
>
<
LayersCollection
>
<
telerik:MapLayer
Type
=
"Tile"
Subdomains
=
"a,b,c"
UrlTemplate
=
"http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"
Attribution="© <a
href
=
'http://osm.org/copyright'
title
=
'OpenStreetMap contributors'
target
=
'_blank'
>OpenStreetMap contributors</
a
>.">
</
telerik:MapLayer
>
<
telerik:MapLayer
Type
=
"Shape"
>
</
telerik:MapLayer
>
</
LayersCollection
>
</
telerik:RadMap
>
</
div
>
<
div
>
<
telerik:RadButton
ID
=
"btnSave"
runat
=
"server"
Text
=
"Save"
OnClick
=
"btnSave_Click"
></
telerik:RadButton
>
<
telerik:RadButton
ID
=
"btnIgnore"
runat
=
"server"
Text
=
"Ignore"
OnClick
=
"btnIgnore_Click"
></
telerik:RadButton
>
<
telerik:RadButton
ID
=
"btnIgnoreRoute"
runat
=
"server"
Text
=
"Ignore Rest of Route"
OnClick
=
"btnIgnoreRoute_Click"
></
telerik:RadButton
>
<
telerik:RadGrid
ID
=
"RadGrid1"
runat
=
"server"
AllowPaging
=
"True"
AllowSorting
=
"True"
Skin
=
"Glow"
OnSelectedIndexChanged
=
"RadGrid1_SelectedIndexChanged"
OnNeedDataSource
=
"RadGrid1_NeedDataSource"
OnColumnCreating
=
"RadGrid1_ColumnCreating"
AutoGenerateColumns
=
"false"
>
<
MasterTableView
AllowFilteringByColumn
=
"true"
PageSize
=
"15"
EditMode
=
"InPlace"
TableLayout
=
"Auto"
>
</
MasterTableView
>
<
ClientSettings
Selecting-AllowRowSelect
=
"true"
EnablePostBackOnRowClick
=
"true"
>
</
ClientSettings
>
</
telerik:RadGrid
>
</
div
>
</
telerik:RadAjaxPanel
>
</
div
>
</
div
>
</
asp:Content
>
any thoughts ?
btw the back end code is simply populating the hidden value with valid geoJSON data eg.
[{ "type": "GeometryCollection", "geometries": [{"type":"LineString","coordinates":[[7.06461666666667,36.9803333333333],[7.08858333333333,37.1390333333333],[7.23471666666667,37.30245],[7.44175,37.4739833333333],[7.82956666667,37.8103166667],[8.02921666666667,37.9726],[8.37091666666667,38.27335],[8.54098333333333,38.4182333333333],[8.71101666666667,38.56965],[8.6118,38.7137],[8.33031666666667,38.7459333333333],[8.20381666666667,38.8862333333333],[8.05851666666667,39.0499],[7.9723,39.2247166666667],[7.98826666666667,39.4277666666667],[7.9891,39.4398],[6.54566666667,41.81915],[6.22386666667,42.1128333333],[6.06996666667,42.25315],[5.9196,42.3894833333],[5.76865,42.5266666667],[5.61166666667,42.66865],[5.53945,42.7509666667],[5.53963333333,42.79715],[5.36733333333,42.8339166667],[5.25675,42.98385],[5.09098333333,43.1371833333],[4.99538333333,43.3002833333],[4.87911666667,43.41305],[4.85436666666667,43.4508333333333],[4.85435,43.4508333333],[4.85433333333,43.4508333333],[4.85435,43.4508333333333],[4.85433333333,43.4508166667],[4.85435,43.4508166667],[4.85435,43.4508333333],[4.85435,43.4508166667],[4.85433333333,43.4508333333],[4.85433333333,43.4508333333],[4.85433333333,43.4508166667],[4.85435,43.4508333333333],[4.85433333333,43.4508333333],[4.85433333333,43.4508333333],[4.85433333333333,43.4508166666667],[4.85435,43.4508166667],[4.85435,43.4508166666667],[4.85435,43.4508333333],[4.85435,43.4508333333],[4.85433333333,43.4508166667],[4.85433333333333,43.4508333333333],[4.85433333333,43.4508166667],[4.85435,43.4508333333],[4.8753,43.4186333333],[4.9408,43.3596],[4.94065,43.35995],[4.94178333333333,43.3604833333333],[4.9418,43.3604833333],[4.94288333333,43.3602666667],[4.94285,43.3602666666667],[4.94323333333,43.3600833333],[4.94345,43.3599333333],[4.94365,43.3598333333333],[4.9438,43.35965],[4.94345,43.3598166666667],[4.94358333333333,43.3596666666667],[4.94386666666667,43.3590666666667],[4.94375,43.3583],[4.94198333333333,43.3573666666667],[4.94076666667,43.3575833333],[4.94031666667,43.3578666667],[4.94036666667,43.3578833333],[4.93996666667,43.3582166667],[4.93983333333,43.3588166667],[4.9399,43.3593833333],[4.94068333333,43.36005],[4.94143333333333,43.3603666666667],[4.94198333333,43.3602833333],[4.94328333333,43.3599666667],[4.94356666666667,43.3587333333333]]}]}]
0
Hi Peter,
Opposite to the recommendation in your other tread regarding the structure of the JSON file, here the issue is coming from what was missing in your JSON file: "[{ "type": "GeometryCollection", "geometries": ". Since this is not expected an your syntax should be correctly handled by RadMap, I will have to forward that issue to our developers team, so they could investigate it further.
Please excuse us for any inconvenience caused by this.
Regards,
Konstantin Dikov
Telerik
Opposite to the recommendation in your other tread regarding the structure of the JSON file, here the issue is coming from what was missing in your JSON file: "[{ "type": "GeometryCollection", "geometries": ". Since this is not expected an your syntax should be correctly handled by RadMap, I will have to forward that issue to our developers team, so they could investigate it further.
Please excuse us for any inconvenience caused by this.
Regards,
Konstantin Dikov
Telerik
0
Peter
Top achievements
Rank 1
answered on 23 Oct 2014, 02:44 PM
Hi there
yes thanks , it wasnt raising any form of error on the page when given an invalid dataset so it was causing alot of confusion.
i have managed to find a solution for drawing lines but unfortunately as i need parameters to filter the data it involves dynamically writing geojson files on the server , and creating datasources/map layers to point to them so although i have solution its not the cleanest of solutions.
Peter
yes thanks , it wasnt raising any form of error on the page when given an invalid dataset so it was causing alot of confusion.
i have managed to find a solution for drawing lines but unfortunately as i need parameters to filter the data it involves dynamically writing geojson files on the server , and creating datasources/map layers to point to them so although i have solution its not the cleanest of solutions.
Peter
0
Hello Peter,
I have posted an answer in your other thread regarding the binding of RadMap, which applies to your remark for the missing error message, when there is some issue with the provided data:
Best Regards,
Konstantin Dikov
Telerik
I have posted an answer in your other thread regarding the binding of RadMap, which applies to your remark for the missing error message, when there is some issue with the provided data:
Best Regards,
Konstantin Dikov
Telerik