Skip to content

Show pin legends on map #5977

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lucascumsille wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Show pin legends on map #5977

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6bb55a1
Added pin icon to set of icons
lucascumsille May 18, 2026
12fd8be
Display panel with pin legends
lucascumsille Apr 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions templates/web/base/icons/pin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<svg role="presentation" aria-hidden="true" width="[% width || '1rem' %]" height="[% height || '1rem' %]" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M99.9964 101.658C84.9405 101.658 72.7361 89.5257 72.7361 74.5585C72.7361 59.5913 84.9405 47.4588 99.9964 47.4588C115.051 47.4588 127.257 59.5913 127.257 74.5585C127.257 89.5257 115.051 101.658 99.9964 101.658M99.9995 0C58.5781 0 25 33.3812 25 74.5585C25 105.601 44.0866 132.204 71.2275 143.423L99.7341 200L128.11 143.683C155.6 132.623 175 105.85 175 74.5585C175 33.3812 141.422 0 99.9995 0" fill="currentColor"/>
</svg>

38 changes: 38 additions & 0 deletions templates/web/base/maps/_pin_legends.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<div class="pin-legend pin-legend--desktop">
<button type="button" class="pin-legend__preview js-pin-legend-desktop-toggle" aria-expanded="false" aria-controls="pin-legend-panel-desktop">
<span class="visuallyhidden">[% loc('Show map pin key') %]</span>
<img src="/i/pins/yellow/pin.png" alt="">
<img src="/i/pins/green/pin.png" alt="">
<img src="/i/pins/bromley/green/pin.png" alt="">
</button>
<div id="pin-legend-panel-desktop" class="pin-legend__panel" aria-labelledby="pin-legend-heading-desktop">
<div class="pin-legend__header">
<h2 id="pin-legend-heading-desktop" class="pin-legend__heading">[% loc('Map pin key') %]</h2>
<button type="button" class="pin-legend__close js-pin-legend-desktop-close" aria-label="[% loc('Close map pin key') %]">
<span aria-hidden="true">&times;</span>
</button>
</div>
<ul class="pin-legend__list">
<li class="pin-legend__item">
<img src="/i/pins/yellow/pin.png" alt="">
<span>[% loc('In progress') %]</span>
</li>
<li class="pin-legend__item">
<img src="/i/pins/green/pin.png" alt="">
<span>[% loc('Fixed') %]</span>
</li>
<li class="pin-legend__item">
<img src="/i/pins/bromley/green/pin.png" alt="">
<span>[% loc('Closed') %]</span>
</li>
<li class="pin-legend__item">
<img src="/i/pins/orange/pin.png" alt="">
<span>[% loc('Action scheduled') %]</span>
</li>
<li class="pin-legend__item">
<img src="/i/pins/bexley/aqua/pin.png" alt="">
<span>[% loc('Investigating') %]</span>
</li>
</ul>
</div>
</div>
32 changes: 32 additions & 0 deletions templates/web/base/maps/_pin_legends_mobile.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<div class="pin-legend pin-legend--mobile">
<button type="button" class="js-pin-legend-toggle btn btn--primary has-inline-svg" aria-expanded="false" aria-controls="pin-legend-panel-mobile">
[% INCLUDE 'icons/pin.html' width='1.5em' height='1.5em' %]
<span>[% loc('Display map legend') %]</span>
</button>

<div id="pin-legend-panel-mobile" class="pin-legend__panel" hidden>
<h2 id="pin-legend-heading-mobile" class="pin-legend__heading">[% loc('Map pin key') %]</h2>
<ul class="pin-legend__list">
<li class="pin-legend__item">
<img src="/i/pins/yellow/pin.png" alt="">
<span>[% loc('In progress') %]</span>
</li>
<li class="pin-legend__item">
<img src="/i/pins/green/pin.png" alt="">
<span>[% loc('Fixed') %]</span>
</li>
<li class="pin-legend__item">
<img src="/i/pins/bromley/green/pin.png" alt="">
<span>[% loc('Closed') %]</span>
</li>
<li class="pin-legend__item">
<img src="/i/pins/orange/pin.png" alt="">
<span>[% loc('Action scheduled') %]</span>
</li>
<li class="pin-legend__item">
<img src="/i/pins/bexley/aqua/pin.png" alt="">
<span>[% loc('Investigating') %]</span>
</li>
</ul>
</div>
</div>
5 changes: 5 additions & 0 deletions templates/web/base/maps/openlayers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,10 @@
<a class="js-recentre-map hidden-nojs" tabindex="0">
<span class="map-link-label">[% loc('Re-centre map') %]</span>
</a>
<button class="js-pin-legend-toggle hidden-nojs has-inline-svg" type="button" aria-expanded="false" aria-controls="pin-legend-panel-mobile">
[% INCLUDE 'icons/pin.html' width='1.5em' height='1.5em' %]
<span class="map-link-label">[% loc('Display map legend') %]</span>
</button>
[% END %]
</div>

Expand All @@ -82,3 +86,4 @@
[% map_sub_links | safe %]
</p>
[% INCLUDE 'maps/_map_instructions.html' %]
[% INCLUDE 'maps/_pin_legends.html' %]
2 changes: 2 additions & 0 deletions templates/web/base/reports/_list-filters.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,8 @@
</form>
[% END %]

[% PROCESS 'maps/_pin_legends_mobile.html' %]

[% IF NOT heatmap %]
</div>
[% END %]
37 changes: 37 additions & 0 deletions web/cobrands/fixmystreet/fixmystreet.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1471,6 +1471,43 @@ $.extend(fixmystreet.set_up, {
});
},

pin_legend_toggle: function() {
$(document).on('click', '.js-pin-legend-toggle', function() {
var $btn = $(this);
var $panel = $('#' + $btn.attr('aria-controls'));
var is_open = $btn.attr('aria-expanded') === 'true';
var is_map_view = $('html').hasClass('only-map');

$btn.attr('aria-expanded', !is_open);

if (is_map_view) {
$panel.stop(true, true).fadeToggle(200);
} else {
$panel.stop(true, true).slideToggle(200);
}
});
},

pin_legend_desktop_toggle: function() {
$(document).on('click', '.js-pin-legend-desktop-toggle', function() {
var $btn = $(this);
var $legend = $btn.closest('.pin-legend--desktop');
var is_open = $btn.attr('aria-expanded') === 'true';

$btn.attr('aria-expanded', !is_open);
$legend.toggleClass('pin-legend--desktop-open', !is_open);
});

$(document).on('click', '.js-pin-legend-desktop-close', function() {
var $legend = $(this).closest('.pin-legend--desktop');
var $btn = $legend.find('.js-pin-legend-desktop-toggle');

$btn.attr('aria-expanded', 'false');
$legend.removeClass('pin-legend--desktop-open');
$btn.trigger('focus');
});
},

ward_select_multiple: function() {
$(".js-ward-select-multiple").on('click', function(e) {
e.preventDefault();
Expand Down
77 changes: 77 additions & 0 deletions web/cobrands/sass/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3649,6 +3649,83 @@ $site-message-border: 1px solid #525252 !default;
display: none;
}

.pin-legend {
box-sizing: border-box;

&--desktop {
display: none;
}

&--mobile {
.pin-legend__panel {
margin-top: 1rem;
}
}

.only-map & {
.js-pin-legend-toggle {
display: none !important; //overrides .has-inline-svg
}
}

.pin-legend__list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 1.25rem;
row-gap: 0.75rem;
}

&__item {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.25rem;

img {
max-width: 1.6em;
}
}

&__heading {
margin: 0 0 0.75rem;
font-size: 1.25rem;
}

&__list {
margin: 0;

li {
margin: 0;
list-style: none;
}
}
}

html.only-map {
.report-list-filters-wrapper .js-pin-legend-toggle {
display: none !important; //overrides .has-inline-svg
}

.js-pin-legend-toggle {
border: none;
}

.pin-legend__panel {
position: absolute;
right: 0;
bottom: 4rem;
z-index: 5;
background: transparentize($color: #000, $amount: 0.05);
color: #fff;
padding: 1rem;
max-width: 80%;
border-radius: 8px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}

.badge {
padding: 0.25em 0.35em;
margin-right: 0.25em;
Expand Down
88 changes: 88 additions & 0 deletions web/cobrands/sass/_layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1330,6 +1330,94 @@ textarea.form-error {
}
}

.pin-legend--mobile {
display: none;
}

.pin-legend--desktop {
display: block;
width: 12.5rem;
left: -12.5rem;
position: absolute;
top: 3rem;
transition: left 0.4s cubic-bezier(0.25, 1, 0.5, 1);

img {
max-width: 1.5rem;
}

.pin-legend__preview {
display: flex;
gap: 0.5rem;
flex-direction: column;
width: fit-content;
position: absolute;
right: -2.5rem;
background: white;
padding: 0.5rem;
border: 0;
border-radius: 8px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
top: 50%;
transform: translateY(-50%);
z-index: 1;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
transition: right 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.pin-legend__panel {
position: relative;
z-index: 2;
background: #fff;
padding: 1rem;
border-radius: 8px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}

.pin-legend__header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;

.pin-legend__heading {
margin: 0;
}

.pin-legend__close {
font-size: 1.3rem;
border: 0;
width: 2.25rem;
height: 2.25rem;

&:hover {
background-color: #e5e5e5;
}
}
}

.pin-legend__list {
flex-direction: column;
}

&.pin-legend--desktop-open {
left: 0;

.pin-legend__preview {
right: 0;
}
}
}

// Hides the mobile button
.js-pin-legend-toggle {
display: none !important; // overrides .has-inline-svg
}

// Animation for shrinking circle keyboard-pin
@-webkit-keyframes shrink {
0% { transform: scale(0.5); }
Expand Down
Loading