ThinkGeo.com    |     Documentation    |     Premium Support

PathMeasure and PolygonMeasure tools bug

I’m noticing I have a slight bug when I’m using the PathMeasure and PolygonMeasure tools. The tool will measure as intended and give me the output correctly in the popup, however when I close the measure results popup the tool will “reset” and think that the close click was the first click in another measure. Is there something I can add to the js to ignore the close click so it won’t try to start a new measure? Here is my code:

function lineMeasureFunction()
{
deactivateToolbarIcon(‘iconAreaMeasure’);
deactivateToolbarIcon(‘iconZoomBox’);

if (iconLineMeasureActive == false)
{
    iconLineMeasureActive = true;
    Map1.setMeasureMode('PathMeasure');
    document.getElementById('iconLineMeasure').src = "../Content/images/iconLineMeasure-hover.png";
    document.getElementById('iconLineMeasure').style.border = "inset";
}
else
{
    deactivateToolbarIcon('iconLineMeasure');
}
return false;

}

function polylineMeasureFunction()
{
deactivateToolbarIcon(‘iconLineMeasure’);
deactivateToolbarIcon(‘iconZoomBox’);

if (iconAreaMeasureActive == false)
{
    iconAreaMeasureActive = true;
    Map1.setMeasureMode('PolygonMeasure');
    document.getElementById('iconAreaMeasure').src = "../Content/images/iconAreaMeasure-hover.png";
    document.getElementById('iconAreaMeasure').style.border = "inset";
}
else
{
    deactivateToolbarIcon('iconAreaMeasure');
}
return false;

}

function deactivateToolbarIcon(iconID)
{
switch (iconID) {
case “iconLineMeasure”:
{
iconLineMeasureActive = false;
Map1.setMeasureMode(‘Normal’);
document.getElementById(‘iconLineMeasure’).src = “…/Content/images/iconLineMeasure.png”;
document.getElementById(‘iconLineMeasure’).style.border = “outset”;
}
break;
case “iconAreaMeasure”:
{
iconAreaMeasureActive = false;
Map1.setMeasureMode(‘Normal’);
document.getElementById(‘iconAreaMeasure’).src = “…/Content/images/iconAreaMeasure.png”;
document.getElementById(‘iconAreaMeasure’).style.border = “outset”;
}
break;
default:
break;
}
}

Hi Chad,

That’s strange, I viewed our MeasureMapTool sample in MVC edition, but hadn’t found the new instance popup when I click close button of the result.

It looks your code only do some other things like modify style and image source, that’s not different with our sample MeasureMapTool.

I think maybe that related with how you call the functions, could you please provide more detail client side code, include how you call the function. If possible, please directly modify our sample file MeasureMapTool.cshtml and make sure you are using the latest dll.

Regards,

Don

For a live view of the issue, you can go to KansasMaps.co (not .com) and you can see the issue first hand. Also I noticed different results when using different internet browsers on how the tool is displayed when being used. Below is more client side code.

INDEX.CSHTML

@section JavaScript
{

    <script type="text/javascript" src="@Url.Content("~/Scripts/Home/Index.js")" async></script>
    <script type="text/javascript">
        OnMapCreated = function (map) {
            for (var i = 0; i < map.layers.length; i++) {
                var layer = map.layers[i];
                if (layer) //  && layer.initVisibility == false
                {
                    layer.events.register("visibilitychanged", layer, function (layer) {
                        if ($('#parcelInfo').length) {
                            $('#parcelInfo').empty();
                            $("#parcelInfoDiv").animate({ width: 'toggle' });
                            $("#parcelInfoDiv").hide();
                        }
                        Map1.ajaxCallAction('@(ViewContext.RouteData.Values["Controller"].ToString())', 'ChangeOverlayVisibility', { id: layer.object.id, visibility: layer.object.visibility },
                    function () {
                        Map1.redrawLayer(layer.object.id)
                        $("#parcelInfo").empty();
                        Map1.redrawLayer("MapL");
                    });
                    })
                }
            }
        }
    </script>
}

<div id="toolbarDiv" >
    <input style="vertical-align:middle; border:outset; display: block; float:left;" width="30" height="30" type="image" src="~/Content/images/iconLineMeasure.png" id="iconLineMeasure" title="Distance Measure" onmouseover="inputMouseOver('iconLineMeasure');" onmouseout="inputMouseOut('iconLineMeasure');" onclick="lineMeasureFunction(); return false;" />
    <input style="vertical-align:middle; border:outset; display: block; float:left;" width="30" height="30" type="image" src="~/Content/images/iconAreaMeasure.png" id="iconAreaMeasure" title="Area Measure" onmouseover="inputMouseOver('iconAreaMeasure');" onmouseout="inputMouseOut('iconAreaMeasure');" onclick="polylineMeasureFunction(); return false;" />
</div>
<div class="col-lg-12" id="content" style="display:block; height:calc(100vh - 50px); width: 100%; position: absolute; top: 0px;">
        @{
            Html.ThinkGeo().Map(Model)
                .OnClientClick("mapClick")                
                .Render();}
</div>



INDEX.JS

function mapClick(d)
{
    olMap = Map1.getOpenLayersMap();

    // Remove any existing popups from the map
/* This for loop was coded in before I started working on the measure tools. When I removed it, it didn't fix the problem with the measure tools.*/
    for (var i = 0; i < olMap.popups.length; i++) {
        olMap.removePopup(olMap.popups[i]);
    }

    var params = { x: d.worldXY.lon, y: d.worldXY.lat, scale: olMap.getScale() };
    Map1.ajaxCallAction("Home", 'ClickEvent', params, function (result) {
        /*
        CODE REMOVED - CODE IS FOR FILLING A DATA TABLE
       */
        for (var i = 2; i < Map1.getNumLayers(); i++)
        {
            Map1.redrawLayer(Map1.layers[i].id);
        }
    });
}
function deactivateToolbarIcon(iconID)
{
    switch (iconID) {
        case "iconLineMeasure":
            {
                iconLineMeasureActive = false;
                Map1.setMeasureMode('Normal');
                document.getElementById('iconLineMeasure').src = "../Content/images/iconLineMeasure.png";
                document.getElementById('iconLineMeasure').style.border = "outset";
            }
            break;
        case "iconAreaMeasure":
            {
                iconAreaMeasureActive = false;
                Map1.setMeasureMode('Normal');
                document.getElementById('iconAreaMeasure').src = "../Content/images/iconAreaMeasure.png";
                document.getElementById('iconAreaMeasure').style.border = "outset";
            }
            break;
               default:
            break;
    }
}
function lineMeasureFunction()
{    
    deactivateToolbarIcon('iconAreaMeasure');
    deactivateToolbarIcon('iconZoomBox');

    if (iconLineMeasureActive == false)
    {
        iconLineMeasureActive = true;
        Map1.setMeasureMode('PathMeasure');
        document.getElementById('iconLineMeasure').src = "../Content/images/iconLineMeasure-hover.png";
        document.getElementById('iconLineMeasure').style.border = "inset";
    }
    else
    {
        deactivateToolbarIcon('iconLineMeasure');
    }
    return false;
}
function polylineMeasureFunction()
{
    deactivateToolbarIcon('iconLineMeasure');
    deactivateToolbarIcon('iconZoomBox');

    if (iconAreaMeasureActive == false)
    {
        iconAreaMeasureActive = true;
        Map1.setMeasureMode('PolygonMeasure');
        document.getElementById('iconAreaMeasure').src = "../Content/images/iconAreaMeasure-hover.png";
        document.getElementById('iconAreaMeasure').style.border = "inset";
    }
    else
    {
        deactivateToolbarIcon('iconAreaMeasure');
    }
    return false;
}

Hi Chad,

Thanks for your detail code and live view, as below is the sample I built based on your code, it looks it works don’t the same like your live view. Please unzip it and put it in our Howdoisamples project.

DisplayASimpleMap.zip (1.6 KB)

I tried some times of your live view, most times it works just like you described, but I also met it works correct small probability chance. Your website contains many JS library and code, I tried to view the map related JS like Index.js but hadn’t got more useful information from it. I can just think some JS code conflict with the popup window, which make the click event pass into the map through popup window. I think you can try to find where is the problem by a process of elimination.

As below is how I tested that: http://screencast.com/t/062u7tyJJWD

Regards,

Don

Found that the issue was with the css. I added the following code:

Site=>Content=>theme>default=>style.css,

.olControlAttribution {
pointer-events: none;
}

Hi Chad,

I am glad to hear that solved and thanks for your share.

Your solution is awesome, it should be helpful any other guy met the same issue.

Regards,

Don