Skip to content
Snippets Groups Projects
Commit 0e4fb590 authored by Bastien DUMONT's avatar Bastien DUMONT :angel:
Browse files

feat(carto): update map & icons

parent 48fc8c36
No related branches found
No related tags found
1 merge request!783V3.0.0
......@@ -45,7 +45,7 @@
}
.right-pane {
width: 100%;
padding: 0 16px 16px 16px;
padding: 0 48px 0 16px;
@media #{$tablet} {
display: none;
&.mapPhone {
......
......@@ -255,7 +255,7 @@ export class MapComponent implements OnChanges {
this.initMDMLayer();
// Init WMS service with param from data.grandlyon.com
layerGroup();
const carteLayer = tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
const carteLayer = tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
attribution:
'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attributions">CARTO</a>',
maxZoom: ZoomLevel.max,
......@@ -303,7 +303,7 @@ export class MapComponent implements OnChanges {
type: metropole.features[0].geometry.type,
coordinates: metropole.features[0].geometry.coordinates,
} as any,
{ style: () => ({ color: '#a00000', fillOpacity: 0, weight: 1 }) },
{ style: () => ({ color: '#696969', fillOpacity: 0, weight: 1 }) },
),
);
}
......
......@@ -8,7 +8,6 @@ import {
markerIconAddedToList,
markerIconHover,
markerIconMdm,
markerIconMdmActive,
userLocationIcon,
} from './marker';
@Injectable({
......@@ -60,10 +59,7 @@ export class MapService {
private getActiveMarkerIcon(markerType: MarkerType): DivIcon {
switch (markerType) {
case MarkerType.mdm:
return markerIconMdmActive;
case MarkerType.conseillerFrance:
// return markerIconFranceServiceActive;
return markerIconActive;
case MarkerType.user:
return userLocationIcon;
......
......@@ -2,13 +2,13 @@ import { divIcon } from 'leaflet';
export const markerIcon = divIcon({
className: null,
html: '<svg width="34" height="34" fill="#4C4D53"><use xlink:href="assets/ico/sprite.svg#map-marker"></use></svg>',
html: '<svg width="16" height="16" fill="#4C4D53"><use xlink:href="assets/ico/sprite.svg#map-marker"></use></svg>',
iconAnchor: [24, 48],
popupAnchor: [0, -48],
});
export const markerIconHover = divIcon({
className: 'on-top-marker',
html: '<svg width="34" height="34"><use xlink:href="assets/ico/sprite.svg#map-markerHover"></use></svg>',
html: '<svg width="16" height="16"><use xlink:href="assets/ico/sprite.svg#map-markerHover"></use></svg>',
iconAnchor: [24, 48],
popupAnchor: [0, -48],
});
......@@ -38,12 +38,6 @@ export const markerIconMdm = divIcon({
iconSize: [19, 24],
iconAnchor: [9, 0],
});
export const markerIconMdmActive = divIcon({
className: null,
html: '<svg width="19" height="24"><use xlink:href="assets/ico/sprite.svg#mdmActive"></use></svg>',
iconSize: [19, 24],
iconAnchor: [9, 0],
});
export const markerIconFranceService = divIcon({
className: null,
html: '<svg width="48" height="48" fill="#ED3939" class="france-service"><use xlink:href="assets/ico/sprite.svg#conseillerFranceService"></use></svg>',
......
......@@ -9,7 +9,7 @@
flex-direction: column;
flex: 1;
padding-left: 48px;
padding-right: 16px;
padding-right: 8px;
@media #{$phone} {
padding-left: 16px;
......
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="map-marker" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="17" cy="17" r="9.5" fill="currentColor" stroke="white" />
<symbol id="map-marker" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="8" cy="8" r="7.5" fill="currentColor" stroke="white" />
</symbol>
<symbol id="map-markerHover" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="17" cy="17" r="9.5" fill="#DA3635" stroke="white" />
<symbol id="map-markerHover" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="8" cy="8" r="7.5" fill="#DA3635" stroke="white" />
</symbol>
<symbol id="map-markerSelected" viewBox="0 0 34 44" fill="none" xmlns="http://www.w3.org/2000/svg">
......@@ -31,31 +31,12 @@
stroke="white" stroke-width="1.5" stroke-linecap="round" />
</symbol>
<symbol id="mdm" viewBox="0 0 19 24" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="0" y="-0.108661" width="19" height="24" fill="black">
<rect fill="white" y="-0.108661" width="19" height="24" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M2.84054 5.57617C1.72559 6.04339 1 7.13416 1 8.34305V23H8V18.5C8 17.6716 8.67157 17 9.5 17C10.3284 17 11 17.6716 11 18.5V23H18V8.40362C18 7.1644 17.2381 6.05271 16.0823 5.60565L14.5555 5.01505C14.1291 4.85011 13.746 4.5899 13.4355 4.2543L10.9183 1.5332C10.1451 0.6974 8.83121 0.674761 8.0297 1.48343L5.19821 4.34019C4.92065 4.62023 4.5906 4.84281 4.22694 4.9952L2.84054 5.57617Z" />
</mask>
<symbol id="mdm" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M2.84054 5.57617L3.03378 6.03731L2.84054 5.57617ZM1 23H0.5V23.5H1V23ZM8 23V23.5H8.5V23H8ZM11 23H10.5V23.5H11V23ZM18 23V23.5H18.5V23H18ZM16.0823 5.60565L16.2627 5.13932L16.0823 5.60565ZM14.5555 5.01505L14.3751 5.48138H14.3751L14.5555 5.01505ZM13.4355 4.2543L13.0685 4.59383V4.59383L13.4355 4.2543ZM10.9183 1.5332L11.2854 1.19366V1.19366L10.9183 1.5332ZM8.0297 1.48343L8.38482 1.8354V1.8354L8.0297 1.48343ZM5.19821 4.34019L4.84309 3.98821L5.19821 4.34019ZM4.22694 4.9952L4.42019 5.45634L4.22694 4.9952ZM1.5 8.34305C1.5 7.33564 2.10466 6.42666 3.03378 6.03731L2.6473 5.11502C1.34652 5.66011 0.5 6.93268 0.5 8.34305H1.5ZM1.5 23V8.34305H0.5V23H1.5ZM8 22.5H1V23.5H8V22.5ZM8.5 23V18.5H7.5V23H8.5ZM8.5 18.5C8.5 17.9477 8.94772 17.5 9.5 17.5V16.5C8.39543 16.5 7.5 17.3954 7.5 18.5H8.5ZM9.5 17.5C10.0523 17.5 10.5 17.9477 10.5 18.5H11.5C11.5 17.3954 10.6046 16.5 9.5 16.5V17.5ZM10.5 18.5V23H11.5V18.5H10.5ZM18 22.5H11V23.5H18V22.5ZM17.5 8.40362V23H18.5V8.40362H17.5ZM15.9019 6.07197C16.865 6.44453 17.5 7.37094 17.5 8.40362H18.5C18.5 6.95786 17.6111 5.66089 16.2627 5.13932L15.9019 6.07197ZM14.3751 5.48138L15.9019 6.07197L16.2627 5.13932L14.7359 4.54872L14.3751 5.48138ZM13.0685 4.59383C13.4307 4.98537 13.8776 5.28895 14.3751 5.48138L14.7359 4.54872C14.3805 4.41127 14.0613 4.19443 13.8026 3.91476L13.0685 4.59383ZM10.5513 1.87273L13.0685 4.59383L13.8026 3.91476L11.2854 1.19366L10.5513 1.87273ZM8.38482 1.8354C8.98595 1.22891 9.97141 1.24589 10.5513 1.87273L11.2854 1.19366C10.3189 0.148915 8.67647 0.120616 7.67458 1.13145L8.38482 1.8354ZM5.55333 4.69216L8.38482 1.8354L7.67458 1.13145L4.84309 3.98821L5.55333 4.69216ZM4.42019 5.45634C4.84445 5.27856 5.22951 5.01888 5.55333 4.69216L4.84309 3.98821C4.61179 4.22158 4.33675 4.40706 4.0337 4.53405L4.42019 5.45634ZM3.03378 6.03731L4.42019 5.45634L4.0337 4.53405L2.6473 5.11502L3.03378 6.03731Z"
fill="white" mask="url(#path-1-outside-1)" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M2.84054 5.57617C1.72559 6.04339 1 7.13416 1 8.34305V23H8V18.5C8 17.6716 8.67157 17 9.5 17C10.3284 17 11 17.6716 11 18.5V23H18V8.40362C18 7.1644 17.2381 6.05271 16.0823 5.60565L14.5555 5.01505C14.1291 4.85011 13.746 4.5899 13.4355 4.2543L10.9183 1.5332C10.1451 0.6974 8.83121 0.674761 8.0297 1.48343L5.19821 4.34018C4.92065 4.62023 4.5906 4.84281 4.22694 4.9952L2.84054 5.57617ZM11 4.5C11 5.32843 10.3284 6 9.5 6C8.67157 6 8 5.32843 8 4.5C8 3.67157 8.67157 3 9.5 3C10.3284 3 11 3.67157 11 4.5ZM4.25 15.9354C3.54057 16.0544 3 16.6714 3 17.4146V18.75H4.25V15.9354ZM3 21.9146V19.25H4.25V21.9146H3ZM4.75 21.9146V19.25H6V21.9146H4.75ZM6 17.4146V18.75H4.75V15.9354C5.45943 16.0544 6 16.6714 6 17.4146ZM13 17.4146C13 16.6714 13.5406 16.0544 14.25 15.9354V18.75H13V17.4146ZM13 19.25V21.9146H14.25V19.25H13ZM14.75 19.25V21.9146H16V19.25H14.75ZM16 18.75V17.4146C16 16.6714 15.4594 16.0544 14.75 15.9354V18.75H16ZM14.25 8C13.5406 8.11902 13 8.73601 13 9.47926V10.8146H14.25V8ZM13 13.9793V11.3146H14.25V13.9793H13ZM14.75 13.9793V11.3146H16V13.9793H14.75ZM16 9.47926V10.8146H14.75V8C15.4594 8.11902 16 8.73601 16 9.47926ZM8 9.47926C8 8.73601 8.54057 8.11902 9.25 8V10.8146H8V9.47926ZM8 11.3146V13.9793H9.25V11.3146H8ZM9.75 11.3146V13.9793H11V11.3146H9.75ZM11 10.8146V9.47926C11 8.73601 10.4594 8.11902 9.75 8V10.8146H11ZM4.25 8C3.54057 8.11902 3 8.73601 3 9.47926V10.8146H4.25V8ZM3 13.9793V11.3146H4.25V13.9793H3ZM4.75 13.9793V11.3146H6V13.9793H4.75ZM6 9.47926V10.8146H4.75V8C5.45943 8.11902 6 8.73601 6 9.47926Z"
stroke="none" />
</symbol>
<symbol id="mdmActive" viewBox="0 0 18 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0 23.1087V7.95171C0 6.54134 0.84652 5.26877 2.1473 4.72368L3.5337 4.14271C3.83675 4.01572 4.11179 3.83024 4.34309 3.59687L7.17458 0.740107C8.17647 -0.270723 9.81889 -0.242424 10.7854 0.802322L13.3026 3.52342C13.5613 3.80309 13.8805 4.01994 14.2359 4.15738L15.7627 4.74798C17.1111 5.26956 18 6.56652 18 8.01228V23.1087H10V18.1087C10 17.5564 9.55229 17.1087 9 17.1087C8.44772 17.1087 8 17.5564 8 18.1087V23.1087H0ZM10.5 22.6087V18.1087C10.5 17.2802 9.82843 16.6087 9 16.6087C8.17157 16.6087 7.5 17.2802 7.5 18.1087V22.6087H0.5V7.95171C0.5 6.74282 1.22559 5.65205 2.34054 5.18483L3.72694 4.60386C4.0906 4.45147 4.42065 4.22889 4.69821 3.94885L7.5297 1.09209C8.33121 0.283422 9.64515 0.306061 10.4183 1.14186L12.9355 3.86296C13.246 4.19857 13.6291 4.45878 14.0555 4.62371L15.5823 5.21431C16.7381 5.66137 17.5 6.77306 17.5 8.01228V22.6087H10.5Z"
fill="white" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M2.34054 5.18483C1.22559 5.65205 0.5 6.74282 0.5 7.95171V22.6087L7.5 22.6087V18.1087C7.5 17.2802 8.17157 16.6087 9 16.6087C9.82843 16.6087 10.5 17.2802 10.5 18.1087V22.6087L17.5 22.6087V8.01228C17.5 6.77306 16.7381 5.66137 15.5823 5.21431L14.0555 4.62371C13.6291 4.45877 13.246 4.19856 12.9355 3.86296L10.4183 1.14186C9.64515 0.306061 8.33121 0.283422 7.5297 1.09209L4.69821 3.94885C4.42065 4.22889 4.0906 4.45147 3.72694 4.60386L2.34054 5.18483ZM10.5 4.10866C10.5 4.93709 9.82843 5.60866 9 5.60866C8.17157 5.60866 7.5 4.93709 7.5 4.10866C7.5 3.28023 8.17157 2.60866 9 2.60866C9.82843 2.60866 10.5 3.28023 10.5 4.10866ZM3.75 15.544C3.04057 15.6631 2.5 16.2801 2.5 17.0233V18.3587H3.75V15.544ZM2.5 21.5233V18.8587H3.75V21.5233H2.5ZM4.25 21.5233V18.8587H5.5V21.5233H4.25ZM5.5 17.0233V18.3587H4.25V15.544C4.95943 15.6631 5.5 16.2801 5.5 17.0233ZM12.5 17.0233C12.5 16.2801 13.0406 15.6631 13.75 15.544V18.3587H12.5V17.0233ZM12.5 18.8587V21.5233H13.75V18.8587H12.5ZM14.25 18.8587V21.5233H15.5V18.8587H14.25ZM15.5 18.3587V17.0233C15.5 16.2801 14.9594 15.6631 14.25 15.544V18.3587H15.5ZM13.75 7.60866C13.0406 7.72768 12.5 8.34467 12.5 9.08792V10.4233H13.75V7.60866ZM12.5 13.5879V10.9233H13.75V13.5879H12.5ZM14.25 13.5879V10.9233H15.5V13.5879H14.25ZM15.5 9.08792V10.4233H14.25V7.60866C14.9594 7.72768 15.5 8.34467 15.5 9.08792ZM7.5 9.08792C7.5 8.34467 8.04057 7.72768 8.75 7.60866V10.4233H7.5V9.08792ZM7.5 10.9233V13.5879H8.75V10.9233H7.5ZM9.25 10.9233V13.5879H10.5V10.9233H9.25ZM10.5 10.4233V9.08792C10.5 8.34467 9.95943 7.72768 9.25 7.60866V10.4233H10.5ZM3.75 7.60866C3.04057 7.72768 2.5 8.34467 2.5 9.08792V10.4233H3.75V7.60866ZM2.5 13.5879V10.9233H3.75V13.5879H2.5ZM4.25 13.5879V10.9233H5.5V13.5879H4.25ZM5.5 9.08792V10.4233H4.25V7.60866C4.95943 7.72768 5.5 8.34467 5.5 9.08792Z"
fill="#ED3939" />
d="M12.543 6.41671C12.7063 6.41671 12.8346 6.28838 12.8346 6.12504V5.40171C12.8346 5.30838 12.788 5.21504 12.7121 5.16254L7.3338 1.40004C7.13547 1.26004 6.86714 1.26004 6.66297 1.40004L1.29047 5.16254C1.21464 5.21504 1.16797 5.30838 1.16797 5.40171V6.12504C1.16797 6.28838 1.2963 6.41671 1.45964 6.41671H2.33464V11.6667H1.7513C1.43047 11.6667 1.16797 11.9292 1.16797 12.25C1.16797 12.5709 1.43047 12.8334 1.7513 12.8334H12.2513C12.5721 12.8334 12.8346 12.5709 12.8346 12.25C12.8346 11.9292 12.5721 11.6667 12.2513 11.6667H11.668V6.41671H12.543ZM9.33464 9.91671C9.33464 10.2375 9.07214 10.5 8.7513 10.5C8.43047 10.5 8.16797 10.2375 8.16797 9.91671V8.16671L7.48547 9.18754C7.25214 9.53171 6.74464 9.53171 6.51714 9.18754L5.83464 8.16671V9.91671C5.83464 10.2375 5.57214 10.5 5.2513 10.5C4.93047 10.5 4.66797 10.2375 4.66797 9.91671V7.17504C4.66797 6.75504 5.0063 6.41671 5.4263 6.41671C5.67714 6.41671 5.9163 6.54504 6.0563 6.75504L7.0013 8.16671L7.94047 6.75504C8.0863 6.54504 8.31964 6.41671 8.5763 6.41671C8.9963 6.41671 9.33464 6.75504 9.33464 7.17504V9.91671Z"
fill="#DA3635" />
</symbol>
<symbol id="user-location" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="17" cy="17" r="16.5" fill="#ED3939" fill-opacity="0.15" stroke="white" />
<circle cx="17" cy="17" r="6" fill="#ED3939" />
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment