<p dir="auto">This PR addresses "Map Data checkbox: perhaps use toggle slider instead" issue mentioned in the <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2380414033" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/4931" data-hovercard-type="issue" data-hovercard-url="/openstreetmap/openstreetmap-website/issues/4931/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/issues/4931">#4931</a></p>
<p dir="auto">Several changes were made to the data loading functionality:</p>
<ol dir="auto">
<li>Clicking "Map Data" checkbox will add "(Loading...)" suffix to the label. It will be shown until back end collects and returns all the information (see "Loading Video"). After all the information is returned, suffix will be removed.</li>
<li>After getting information and agreeing to show it on the map, rendering process will be asynchronous. Therefore, there will be no more browser or page freezes and it will have animation like visual (see "Render Video").</li>
<li>If user unchecks "Map Data" checkbox, removing process will be also asynchronous and there won't be any freezes. It will also have animation like visual (see "Remove Video").</li>
</ol>
<ul dir="auto">
<li>Checkbox state will be updated as soon as it is clicked, so changing it to the toggle one has no more benefits.</li>
<li>If the user decides to uncheck "Map Data" while back end collects information, "(Loading...)" suffix will disappear.</li>
<li>If the user decides to uncheck "Map Data" while objects is rendered, it won't trigger change until the rendering process is done. After the process, application will check and if "Map Data" is unchecked, it will start removing rendered objects.</li>
</ul>
<p dir="auto"><span class="issue-keyword tooltipped tooltipped-se" aria-label="This pull request closes issue #4931.">Fixes</span> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2380414033" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/4931" data-hovercard-type="issue" data-hovercard-url="/openstreetmap/openstreetmap-website/issues/4931/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/issues/4931">#4931</a></p>
<h3 dir="auto">Videos:</h3>
<p dir="auto">Loading Video</p>
<p dir="auto"><a href="https://github.com/user-attachments/assets/7f3bc0bd-544f-4f9f-bd5c-2eca126020b9">https://github.com/user-attachments/assets/7f3bc0bd-544f-4f9f-bd5c-2eca126020b9</a></p>
<p dir="auto">Render Video</p>
<p dir="auto"><a href="https://github.com/user-attachments/assets/8e11fc5f-1d9c-4458-a5a8-96479627d5ff">https://github.com/user-attachments/assets/8e11fc5f-1d9c-4458-a5a8-96479627d5ff</a></p>
<p dir="auto">Remove Video</p>
<p dir="auto"><a href="https://github.com/user-attachments/assets/0743916d-353e-4717-8600-c74937b6f2fe">https://github.com/user-attachments/assets/0743916d-353e-4717-8600-c74937b6f2fe</a></p>
<hr>
<h4>You can view, comment on, or merge this pull request online at:</h4>
<p> <a href='https://github.com/openstreetmap/openstreetmap-website/pull/5009'>https://github.com/openstreetmap/openstreetmap-website/pull/5009</a></p>
<h4>Commit Summary</h4>
<ul>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/5009/commits/777c28c44b041a1ee7e0d7137bfd18da7ec0ee97" class="commit-link">777c28c</a> Map Data checkbox: perhaps use toggle slider instead</li>
</ul>
<h4 style="display: inline-block">File Changes </h4> <p style="display: inline-block">(<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5009/files">4 files</a>)</p>
<ul>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5009/files#diff-999fd69dc428de17d14446f737f8c03cd280be7b66a1ac07fb765b900a19c2c4">app/assets/javascripts/index/browse.js</a>
(12)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5009/files#diff-87e33ea7d5e625dd851a78a3192719681de20caea8edd278a10f5342585c98e7">app/assets/javascripts/leaflet.layers.js</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5009/files#diff-44438ce218f5287c58d0017f965d888715635d94280669896f75841fbd7b4cd7">config/locales/en.yml</a>
(1)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5009/files#diff-4fe14e869cf17b068e1bea009a55b094fed13f0cad85337cf4769f32b40a01b5">vendor/assets/leaflet/leaflet.osm.js</a>
(59)
</li>
</ul>
<h4>Patch Links:</h4>
<ul>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/5009.patch'>https://github.com/openstreetmap/openstreetmap-website/pull/5009.patch</a></li>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/5009.diff'>https://github.com/openstreetmap/openstreetmap-website/pull/5009.diff</a></li>
</ul>
<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/5009">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLK2A5UXKCAVMRPNCT3ZNJNRJAVCNFSM6AAAAABLF5RXIWVHI2DSMVQWIX3LMV43ASLTON2WKOZSGQZDAOBYHE4TIMI">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLIMYB2L3FGT4GK4AW3ZNJNRJA5CNFSM6AAAAABLF5RXIWWGG33NNVSW45C7OR4XAZNFJFZXG5LFVJRW63LNMVXHIX3JMTHJAS6ZKU.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/pull/5009</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/5009",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/5009",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>