ThinkGeo.com    |     Documentation    |     Premium Support

Measure Line Distance Does Not End

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.

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

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

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!

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

Thanks

Frank