RadMap empty in IE fine in Chrome

2 posts, 0 answers
  1. Michael
    Michael avatar
    1 posts
    Member since:
    May 2011

    Posted 10 Sep 2014 Link to this post

    I've written an application that uses RadMap to display GeoJson shape data for the individual counties in a selected State in the USA. 
    In ANY other browser (Chrome, Safari, FireFox) the RadMap is displayed perfectly.  In IE (Any version) the radmap navigation is displayed but the map is completely empty.   I'm at my wits end trying to troubleshoot this and would appreciate any help anyone can give me. 
    I've included the aspx relating to the radmap as well as the associated js file text. 
     
    <telerik:RadMap runat="server" ID="RadMap1" Zoom="6" Width="100%" Height="500" Skin="MetroTouch" >
    <CenterSettings Latitude="40" Longitude="-100" />
    <LayerDefaultsSettings>
    <ShapeSettings>
        <StyleSettings>
     <FillSettings Color="DarkBlue " Opacity="1" />
    <StrokeSettings Color="White" />
    </StyleSettings>
    </ShapeSettings>
    </LayerDefaultsSettings>
    <ClientEvents OnShapeCreated="shapeCreated" OnShapeMouseEnter="shapeMouseEnter"
    OnShapeClick="shapeClick" OnShapeMouseLeave="shapeMouseLeave" OnClick="clientClick" />
    <LayersCollection>
    <telerik:MapLayer ClientDataSourceID="RadClientDataSource1" Type="Shape" Opacity="1">
    </telerik:MapLayer>
                    </LayersCollection>

    </telerik:RadMap>

    ---- Script.js ----
    var HIGHLIGHT_STROKE_COLOR = "Red";
    var HIGHLIGHT_STROKE_HOVER_COLOR = "Green";
    var COUNTRIES_COLOR = "DarkBlue";
    var COUNTRIES_STROKE_COLOR = "White";

    function shapeCreated(e) {

    if (e.shape.dataItem.properties["GEO_ID"].substring(0, 2) === '05') {
    if (e.shape.dataItem.properties["STATE"] === getParameterByName("ID")) {

    var COUNTY_NAME = e.shape.dataItem.properties["NAME"];
    var COUNTIES_COLOR = getcountycolor(e.shape.dataItem.properties["NAME"]);

    e.shape.options.set("fill.color", COUNTIES_COLOR);
    e.shape.options.set("stroke.color", COUNTRIES_STROKE_COLOR);
    e.shape.innerHTML = e.shape.dataItem.properties["NAME"];

    }
    else { e.shape.options.set("visible", false); }
    }


    }

    function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }
    function shapeMouseEnter(e) {
    document.getElementById("lblShapeName").innerHTML = e.shape.dataItem.properties["NAME"];
    e.shape.options.set("fill.color", HIGHLIGHT_STROKE_COLOR);
    e.shape.options.set("stroke.color", HILIGHT_STROKE_COLOR);

    e.shape.toolTip.set(e.shape.dataItem.properties["NAME"]);


    }

    function shapeMouseLeave(e) {

    e.shape.options.set("fill.color",COUNTRIES_COLOR);
    e.shape.options.set("stroke.color", COUNTRIES_STROKE_COLOR);
    }

    function shapeClick(e) {

    if (e.shape.dataItem.properties["GEO_ID"].substring(0,2) === '05')
    {
    var County = e.shape.dataItem.properties['NAME'];
    var state = getParameterByName("state");
    window.location = "http://olaagenthub.onelifeamerica.com/OrderLeadsCounties.aspx?County=" + County + "&state="+state+"&ID=" + e.shape.dataItem.properties['STATE'];
    }
    else{
    var state = e.shape.dataItem.properties['NAME'];
    window.location = "http://olaagenthub.onelifeamerica.com/OrderLeadsCounties.aspx?state="+state+"&ID="+e.shape.dataItem.properties['STATE'];
    }


    }



    function markerCreated(e) {
    e.preventDefault();
    }

    function clientClick(e) {
    toolTip.hide();
    }

    function clientPan(e) {
    toolTip.hide();
    }

    function zoomStart(e) {
    toolTip.hide();
    }



    function buildToolTipFromShape(shape, div) {

    div.innerHTML = "<div><span class='detail'>Name: </span><span>" + shape.dataitem.properties["NAME"] + "</span></div>"

    }

    function getColorFromMagnitude(magnitude) {
    return interpolateColor(magnitude, 3, 7, 255, 255, 0, 240, 0, 0);
    }

    function interpolateColor(value, minimum, maximum, R1, G1, B1, R2, G2, B2) {
    value = value > maximum ? maximum : value;
    value = value < minimum ? minimum : value;
    value = value - minimum;
    var percent = value / (maximum - minimum);

    var r1 = R1 / 255.0, g1 = G1 / 255.0, b1 = B1 / 255.0;
    var r2 = R2 / 255.0, g2 = G2 / 255.0, b2 = B2 / 255.0;

    var r3 = (r1 + (r2 - r1) * percent) * 255;
    var g3 = (g1 + (g2 - g1) * percent) * 255;
    var b3 = (b1 + (b2 - b1) * percent) * 255;
    return rgb2hex(r3, g3, b3);
    }

    function rgb2hex(red, green, blue) {
    var rgb = blue | (green << 8) | (red << 16);
    return '#' + (0x1000000 + rgb).toString(16).slice(1)
    }
  2. Vessy
    Admin
    Vessy avatar
    1383 posts

    Posted 15 Sep 2014 Link to this post

    Hi Michael,

    We are not aware of the described problem and I am afraid that the provided configuration was not enough to reproduce the issue and find what is causing it. Can you, please, follow the steps in this blog post and prepare a sample fully runnable project (including all needed references like sample Json data source) that we can use for a further investigation?

    Looking forward to hearing from you,
    Vessy
    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top