OpenSeaMap Forum

For new registrations: Please create and activate an account. Afterwards send an email to forum.openseamap@gmail.com including a short message and your username to get write access to this forum. Thanks!
Für neue Registrierungen: Bitte erstelle einen neuen Account und schalte ihn frei. Anschließend sende eine kurze Mail mit deinem Nutzernamen an forum.openseamap@gmail.com um Schreibzugriff für dieses Forum zu bekommen. Danke!

You are not logged in.

#1 2016-08-13 08:21:55

DLichti
Member
Registered: 2016-08-13
Posts: 1

Cannot enable/disable water depth tracks layer

I noticed that on the online map on openseamap.org, I cannot enable/disable the layer with water depth tracks by clicking on the corresponding checkbox in the drop-down menu. Enabling/disabling works fine by clicking on the label "Wassertiefen" though. This happens consistently with Mozilla Firefox 48 and Google Chrome 52 and is very unintuitive, since the checkboxes work fine for each of the other list entries.

I had a look into the HTML-code and the problem seems to be the on-click event handler associated with the list entry for the water depth tracks layer:

<html>
<body onload="init();">
<div id="topmenu2" style="position:absolute; top:10px; left:60px;">
    <ul class="dropdown">
        <li>
            <ul class="sub_menu">
                <li onclick="showWaterDepthTrackPoints(true)">
                  <a onclick="document.getElementById('checkLayerWaterDepthTrackPoints').checked = !document.getElementById('checkLayerWaterDepthTrackPoints').checked">
                    <input id="checkLayerWaterDepthTrackPoints" type="checkbox">&nbsp;Wassertiefen
                  </a>
                </li>
            </ul>
        </li>
    </ul>
</div></body></html>

When the a-element is clicked, the on-click event handler correctly switches the input-element's checked-state. But when the input-element itself is clicked, the internal event handling switches its checked-state before the event bubbles up to the a-element where the on-click event handler causes another state switch resulting in the same state as before.

At the first glance, I see three solutions which i shortly tested using Firefox's web development tools:

  1. Replace the <a><input /></a> structure by a <input /><label></label> structure:

    <li onclick="showWaterDepthTrackPoints(true)">
       <input id="checkLayerWaterDepthTrackPoints" type="checkbox">
       <label for="checkLayerWaterDepthTrackPoints">&nbsp;Wassertiefen</label>
    </li>

    This would also reduce the number of JavaScript calls and DOM tree searches since the browser can internally take care of handling the click on the label.

  2. Stop the click event on the input-element from bubbling up and call the showWaterDepthTrackPoints method explicitly from the input-element's event handler, i.e. use

    <input onclick="event.stopPropagation(); showWaterDepthTrackPoints(true)" id="checkLayerWaterDepthTrackPoints" type="checkbox">
  3. Force another state switching by the input-element's event handler:

    <input onclick="this.checked = !this.checked" id="checkLayerWaterDepthTrackPoints" type="checkbox">

    This would add up to a total number of state switchings of 3 which results in the opposite state as before.

Offline

#2 2016-08-14 07:25:27

Axel
Administrator
Registered: 2015-11-13
Posts: 49

Re: Cannot enable/disable water depth tracks layer

Hi,

thank you very much for reporting this and already provide possible solutions.

Would you like to implement the fix on your own? The code is open for everyone: https://github.com/OpenSeaMap/online_chart
Feel free to submit a pull request!

As I am the maintainer of the map I will merge the request and update the web server.

If you take a deeper look into the source code I am sure you will find more problems like this. The code quality of this site is not very good.

We are currently working on a new website for our map: https://github.com/aAXEe/online_chart_ol3
It is based on modern web technologies like modern JavaScript (ES2016) and Gulp as a build system. It uses OpenLayer 3 for the map display, React for building the user interface and bootstrap for the UI design.
You find a preview of the development state here: https://alpha.openseamap.org
Would you like to help us?

Regards,
Axel


Axel Utech, OpenSeaMap developer

Offline

#3 2017-03-02 12:59:52

vk
Member
Registered: 2014-08-15
Posts: 4

Re: Cannot enable/disable water depth tracks layer

The disable water tracks layer problem is not solved now for Firefox 51.0.1

Offline

Board footer

Powered by FluxBB