# Measure Line Distance Does Not End

**URL:** <https://community.thinkgeo.com/t/measure-line-distance-does-not-end/9764>\
**Category:** Blazor\
**Created:** [March 31, 2020, 9:57am UTC](https://community.thinkgeo.com/t/measure-line-distance-does-not-end/9764 "2020-03-31T09:57:42Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Brandon\_Cook](https://community.thinkgeo.com/letter_avatar_proxy/v4/letter/b/3da27b/32.png) [@Brandon\_Cook](https://community.thinkgeo.com/u/Brandon_Cook)\
**Post date:** [March 31, 2020, 9:57am UTC](https://community.thinkgeo.com/t/measure-line-distance-does-not-end/9764/1 "2020-03-31T09:57:43Z")

</div>

ThinkGeo Team,

It looks like I have found another issue. If I try to use the MeasureTool in the code sample that I provided you in my other issue, area measure seems to work fine (though it does not show the area in the shape like it does in the sample). However, if I try to use line measure, I can’t get it to actually be able to click for the next line segment or double-click to end the measurement. The only way that I can get the measurement to end is to change the measurement type to none or area. Unfortunately, that doesn’t give me a measurement. This one isn’t a high priority for me at the moment, but I figured I would let someone know.

My code:

I started with the project that was zipped and uploaded to you (once my main project showed this issue). I copied the code from the How do I sample almost verbatim. My only change was to keep my FileRasterTiles. I was unable to complete a distance measurement. The sample does work for me, but I don’t know what the difference between my project(s) and the sample is that it would cause only the line measurement to fail and not display the area/distance like the sample does. The area measurement will at least complete with a double click as expected and fire the Measured event. I can at least work with that.

> 

```
@page "/map"
@using Quickstart_Map
<div style="width:100%;height:100%;">
<div class="map-container" style="width:100%;height:100%;overflow:auto">
    @*<nav class="icon-group draw-edit-tool-bar">
            <a href="javascript:void(0);" title="None" @onclick="@(e => trackMode = TrackMode.None)">
                <span>
                    <img src="images/mouse-pointer.svg" alt="None">
                </span>
            </a>

            <a href="javascript:void(0);" title="Polygon" @onclick="@(e => trackMode = TrackMode.Polygon)">
                <span>
                    <img src="images/vector-polygon.svg" alt="Polygon">
                </span>
            </a>

            <a href="javascript:void(0);" title="Modify" @onclick="@(e => trackMode = TrackMode.Modify)">
                <span>
                    <img src="images/edit.svg" alt="Modify">
                </span>
            </a>
            <a href="javascript:void(0);" title="Clear" @onclick="@(e => map.EditOverlay.Features.Clear())">
                <span>
                    <img src="images/close.svg" alt="Clear">
                </span>
            </a>
        </nav>*@
    <MapView Id="demomap"
             @ref="map"
             MapUnit="@ThinkGeo.Core.GeographyUnit.Meter"
             Width="100"
             Height="100"
             MapViewSizeUnitType="MapViewSizeUnitType.Percentage"
             Zoom="15"
             Center="@(new PointShape(-10770581.83051296, 3865538.8613018664))">
        <OverlaysSetting>                
            @*<ThinkGeoCloudRasterMapsOverlay Id="RasterOverlay"
                                            ApiKey="APIKEY"
                                            MapType="ThinkGeoCloudRasterMapsMapType.Light" />*@
            @*<LayerOverlay Id="ECWOverlay" Layers="@ecwLayers" IsVisible="@showEcw"></LayerOverlay>*@
            <TileLayerOverlay Id="Background"
                              IsCacheOnly="true"
                              MaxExtent="WorldExtent"
                              TileWidth="512"
                              TileHeight="512"
                              TileCache="@tileCache"
                              Layers="@dummyLayers" />
        </OverlaysSetting>

        <MapToolsSetting>
            <MapTools>
                <ZoomBarMapTool />
                <MeasureMapTool MeasureType="@measureType" />
            </MapTools>
        </MapToolsSetting>
    </MapView>

    <nav class="icon-group draw-edit-tool-bar">
        <a href="javascript:void(0);" class="@GetCss(MeasureType.None)" title="None" @onclick="@(e => measureType = MeasureType.None)">
            <span>
                <img src="images/mouse-pointer.svg" alt="None">
            </span>
        </a>
        <a href="javascript:void(0);" class="@GetCss(MeasureType.Line)" title="Measure Distance" @onclick="@(e => measureType = MeasureType.Line)">
            <span>
                <img src="images/distance.png" alt="Measure Distance">
            </span>
        </a>
        <a href="javascript:void(0);" class="@GetCss(MeasureType.Area)" title="Measure Area" @onclick="@(e => measureType = MeasureType.Area)">
            <span>
                <img src="images/area.png" alt="Measure Area">
            </span>
        </a>

        <a href="javascript:void(0);" title="Clear" @onclick="@(e => map.MapTools.MeasureMapTool.MeasuredFeatures.Clear())">
            <span>
                <img src="images/close.svg" alt="Clear">
            </span>
        </a>
    </nav>

</div>

```

```
@code{
MapView map;
FileRasterTileCache tileCache = new FileRasterTileCache(@"A:\MapData", "PNG", RasterTileFormat.Png);

public static RectangleShape WorldExtent = new RectangleShape(-179.999, 85.051, 179.999, -85.051).ToMeters();

TrackMode trackMode = TrackMode.None;

GeoCollection<Layer> ecwLayers = new GeoCollection<Layer>();
GeoCollection<Layer> dummyLayers = new GeoCollection<Layer>();
GeoCollection<Layer> imageLayers = new GeoCollection<Layer>();

LayerOverlay ImageOverlay { get; set; }

bool showEcw = true;

MeasureType measureType = MeasureType.None;
string GetCss(MeasureType type) => type == measureType ? "active" : string.Empty;

protected override void OnInitialized()
{
    tileCache = new FileRasterTileCache(@"A:\MapData", "PNG", RasterTileFormat.Png);
    tileCache.TileAccessMode = TileAccessMode.ReadOnly;
    StiRasterLayer image = new StiRasterLayer(@"A:\temp\Quickstart\sFloorPlan2.png");
    imageLayers.Clear();
    imageLayers.Add(image);
    var ecwLayer = new EcwRasterLayer("./Data/World.ecw");
    ecwLayers.Add(ecwLayer);
}

async void OnMapViewClick(ClickedMapViewEventArgs args)
{
    // await map.Overlays["ECWOverlay"].RedrawAsync();
}

string GetCss(TrackMode mode) => mode == trackMode ? "active" : string.Empty;

```

}

I should add that it doesn’t matter if I use the FileRasterTileCache layer or I use the ThinkGeoCloudRasterMapsOverlay, the result is the same. I commented out all other overlays so that there was only the one overlay with just an empty collection of layers.

---

<div class="post-metadata">

**Author:** ![Frank4](https://community.thinkgeo.com/user_avatar/community.thinkgeo.com/frank4/32/25224_2.png) [@Frank4](https://community.thinkgeo.com/u/Frank4)\
**Post date:** [April 1, 2020, 3:28pm UTC](https://community.thinkgeo.com/t/measure-line-distance-does-not-end/9764/2 "2020-04-01T15:28:27Z")

</div>

Thanks Brandon,  
This should be an easy fix. Please copy the following style(It can be found in the main.css of sample project) to the end of your site.css file.

```
.tooltip {
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    color: white;
    padding: 4px 8px;
    opacity: 0.7;
    white-space: nowrap;
}

.tooltip-measure {
    opacity: 1;
    font-weight: bold;
}

.tooltip-static {
    background-color: #ffcc33;
    color: black;
    border: 1px solid white;
}

    .tooltip-measure:before,
    .tooltip-static:before {
        border-top: 6px solid rgba(0, 0, 0, 0.5);
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
        content: "";
        position: absolute;
        bottom: -6px;
        margin-left: -7px;
        left: 50%;
    }

    .tooltip-static:before {
        border-top-color: #ffcc33;
    }

```

Thanks

Frank

---

<div class="post-metadata">

**Author:** ![Brandon\_Cook](https://community.thinkgeo.com/letter_avatar_proxy/v4/letter/b/3da27b/32.png) [@Brandon\_Cook](https://community.thinkgeo.com/u/Brandon_Cook)\
**Post date:** [April 1, 2020, 9:24pm UTC](https://community.thinkgeo.com/t/measure-line-distance-does-not-end/9764/3 "2020-04-01T21:24:13Z")

</div>

Sweet. I will add this. I was hoping it would be something as simple as this.

---

<div class="post-metadata">

**Author:** ![Brandon\_Cook](https://community.thinkgeo.com/letter_avatar_proxy/v4/letter/b/3da27b/32.png) [@Brandon\_Cook](https://community.thinkgeo.com/u/Brandon_Cook)\
**Post date:** [April 1, 2020, 9:39pm UTC](https://community.thinkgeo.com/t/measure-line-distance-does-not-end/9764/4 "2020-04-01T21:39:28Z")

</div>

Yep, that was it. I missed that one when I copied over css stuff from the samples. Thanks for the help on that one. It works great now. Nice!

---

<div class="post-metadata">

**Author:** ![Frank4](https://community.thinkgeo.com/user_avatar/community.thinkgeo.com/frank4/32/25224_2.png) [@Frank4](https://community.thinkgeo.com/u/Frank4)\
**Post date:** [April 2, 2020, 6:30pm UTC](https://community.thinkgeo.com/t/measure-line-distance-does-not-end/9764/5 "2020-04-02T18:30:35Z")

</div>

Thanks Brandon,  
I am glad to hear it works. Let me know if you have any more question.

Thanks

Frank