mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-02-23 01:54:18 -08:00
Add 4 additional territory buttons (#956)
* Add 4 additional territory buttons * Fix bug where territories fires multiple times - move territory handler from J40Map to component * Update SVGs for all territory buttons
This commit is contained in:
Vim
GitHub
parent
819f3ff478
commit
df564658a5
13 changed files with 274 additions and 47 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
/* eslint-disable no-unused-vars */
|
/* eslint-disable no-unused-vars */
|
||||||
// External Libs:
|
// External Libs:
|
||||||
import React, {MouseEvent, useRef, useState, useMemo} from 'react';
|
import React, {useRef, useState, useMemo} from 'react';
|
||||||
import {Map, MapboxGeoJSONFeature, LngLatBoundsLike} from 'maplibre-gl';
|
import {Map, MapboxGeoJSONFeature, LngLatBoundsLike} from 'maplibre-gl';
|
||||||
import ReactMapGL, {
|
import ReactMapGL, {
|
||||||
MapEvent,
|
MapEvent,
|
||||||
|
|
@ -136,29 +136,6 @@ const J40Map = ({location}: IJ40Interface) => {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const onClickTerritoryFocusButton = (event: MouseEvent<HTMLButtonElement>) => {
|
|
||||||
event.stopPropagation();
|
|
||||||
const buttonID = event.target && (event.target as HTMLElement).id;
|
|
||||||
|
|
||||||
switch (buttonID) {
|
|
||||||
case '48':
|
|
||||||
goToPlace(constants.LOWER_48_BOUNDS);
|
|
||||||
break;
|
|
||||||
case 'AK':
|
|
||||||
goToPlace(constants.ALASKA_BOUNDS);
|
|
||||||
break;
|
|
||||||
case 'HI':
|
|
||||||
goToPlace(constants.HAWAII_BOUNDS);
|
|
||||||
break;
|
|
||||||
case 'PR':
|
|
||||||
goToPlace(constants.PUERTO_RICO_BOUNDS);
|
|
||||||
break;
|
|
||||||
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onTransitionStart = () => {
|
const onTransitionStart = () => {
|
||||||
setTransitionInProgress(true);
|
setTransitionInProgress(true);
|
||||||
};
|
};
|
||||||
|
|
@ -273,7 +250,7 @@ const J40Map = ({location}: IJ40Interface) => {
|
||||||
onClick={onClickGeolocate}
|
onClick={onClickGeolocate}
|
||||||
/> : ''}
|
/> : ''}
|
||||||
{geolocationInProgress ? <div>Geolocation in progress...</div> : ''}
|
{geolocationInProgress ? <div>Geolocation in progress...</div> : ''}
|
||||||
<TerritoryFocusControl onClickTerritoryFocusButton={onClickTerritoryFocusButton}/>
|
<TerritoryFocusControl goToPlace={goToPlace}/>
|
||||||
{'fs' in flags ? <FullscreenControl className={styles.fullscreenControl}/> :'' }
|
{'fs' in flags ? <FullscreenControl className={styles.fullscreenControl}/> :'' }
|
||||||
|
|
||||||
</ReactMapGL>
|
</ReactMapGL>
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,53 @@
|
||||||
import {useIntl} from 'gatsby-plugin-intl';
|
import {useIntl} from 'gatsby-plugin-intl';
|
||||||
import React, {MouseEventHandler} from 'react';
|
import React from 'react';
|
||||||
import {_useMapControl as useMapControl} from 'react-map-gl';
|
import {LngLatBoundsLike} from 'mapbox-gl';
|
||||||
|
|
||||||
import * as styles from './territoryFocusControl.module.scss';
|
import * as styles from './territoryFocusControl.module.scss';
|
||||||
import * as EXPLORE_COPY from '../data/copy/explore';
|
import * as EXPLORE_COPY from '../data/copy/explore';
|
||||||
|
import * as constants from '../data/constants';
|
||||||
|
|
||||||
interface ITerritoryFocusControl {
|
interface ITerritoryFocusControl {
|
||||||
onClickTerritoryFocusButton: MouseEventHandler<HTMLButtonElement>;
|
goToPlace(bounds: LngLatBoundsLike): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const TerritoryFocusControl = ({onClickTerritoryFocusButton}: ITerritoryFocusControl) => {
|
|
||||||
|
const TerritoryFocusControl = ({goToPlace}: ITerritoryFocusControl) => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
|
|
||||||
const {containerRef} = useMapControl({
|
const onClickTerritoryFocusButton = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||||
// @ts-ignore // Types have not caught up yet, see https://github.com/visgl/react-map-gl/issues/1492
|
event.stopPropagation();
|
||||||
onClick: onClickTerritoryFocusButton,
|
const buttonID = event.target && (event.target as HTMLElement).id;
|
||||||
});
|
|
||||||
|
switch (buttonID) {
|
||||||
|
case '48':
|
||||||
|
goToPlace(constants.LOWER_48_BOUNDS);
|
||||||
|
break;
|
||||||
|
case 'AK':
|
||||||
|
goToPlace(constants.ALASKA_BOUNDS);
|
||||||
|
break;
|
||||||
|
case 'HI':
|
||||||
|
goToPlace(constants.HAWAII_BOUNDS);
|
||||||
|
break;
|
||||||
|
case 'PR':
|
||||||
|
goToPlace(constants.PUERTO_RICO_BOUNDS);
|
||||||
|
break;
|
||||||
|
case 'GU':
|
||||||
|
goToPlace(constants.GUAM_BOUNDS);
|
||||||
|
break;
|
||||||
|
case 'AS':
|
||||||
|
goToPlace(constants.AMERICAN_SAMOA_BOUNDS);
|
||||||
|
break;
|
||||||
|
case 'MP':
|
||||||
|
goToPlace(constants.MARIANA_ISLAND_BOUNDS);
|
||||||
|
break;
|
||||||
|
case 'VI':
|
||||||
|
goToPlace(constants.US_VIRGIN_ISLANDS_BOUNDS);
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const territories = [
|
const territories = [
|
||||||
{
|
{
|
||||||
|
|
@ -34,6 +66,22 @@ const TerritoryFocusControl = ({onClickTerritoryFocusButton}: ITerritoryFocusCon
|
||||||
short: intl.formatMessage(EXPLORE_COPY.MAP.PR_SHORT),
|
short: intl.formatMessage(EXPLORE_COPY.MAP.PR_SHORT),
|
||||||
long: intl.formatMessage(EXPLORE_COPY.MAP.PR_LONG),
|
long: intl.formatMessage(EXPLORE_COPY.MAP.PR_LONG),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
short: intl.formatMessage(EXPLORE_COPY.MAP.GU_SHORT),
|
||||||
|
long: intl.formatMessage(EXPLORE_COPY.MAP.GU_LONG),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
short: intl.formatMessage(EXPLORE_COPY.MAP.AS_SHORT),
|
||||||
|
long: intl.formatMessage(EXPLORE_COPY.MAP.AS_LONG),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
short: intl.formatMessage(EXPLORE_COPY.MAP.MP_SHORT),
|
||||||
|
long: intl.formatMessage(EXPLORE_COPY.MAP.MP_LONG),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
short: intl.formatMessage(EXPLORE_COPY.MAP.VI_SHORT),
|
||||||
|
long: intl.formatMessage(EXPLORE_COPY.MAP.VI_LONG),
|
||||||
|
},
|
||||||
];
|
];
|
||||||
// the offset for this array should map the territories variable
|
// the offset for this array should map the territories variable
|
||||||
const territoriesIconClassName = [
|
const territoriesIconClassName = [
|
||||||
|
|
@ -41,16 +89,20 @@ const TerritoryFocusControl = ({onClickTerritoryFocusButton}: ITerritoryFocusCon
|
||||||
'mapboxgl-ctrl-zoom-to-ak',
|
'mapboxgl-ctrl-zoom-to-ak',
|
||||||
'mapboxgl-ctrl-zoom-to-hi',
|
'mapboxgl-ctrl-zoom-to-hi',
|
||||||
'mapboxgl-ctrl-zoom-to-pr',
|
'mapboxgl-ctrl-zoom-to-pr',
|
||||||
|
'mapboxgl-ctrl-zoom-to-gu',
|
||||||
|
'mapboxgl-ctrl-zoom-to-as',
|
||||||
|
'mapboxgl-ctrl-zoom-to-mp',
|
||||||
|
'mapboxgl-ctrl-zoom-to-vi',
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={containerRef} className={styles.territoryFocusContainer}>
|
<div className={styles.territoryFocusContainer}>
|
||||||
<div className={'mapboxgl-ctrl mapboxgl-ctrl-group'}>
|
<div className={'mapboxgl-ctrl mapboxgl-ctrl-group'}>
|
||||||
{territories.map((territory, index) =>
|
{territories.map((territory, index) =>
|
||||||
<button
|
<button
|
||||||
id={territory.short}
|
id={territory.short}
|
||||||
key={territory.short}
|
key={territory.short}
|
||||||
onClick={onClickTerritoryFocusButton}
|
onClick={(e) => onClickTerritoryFocusButton(e)}
|
||||||
className={'mapboxgl-ctrl-icon ' + territoriesIconClassName[index]}
|
className={'mapboxgl-ctrl-icon ' + territoriesIconClassName[index]}
|
||||||
aria-label={intl.formatMessage(
|
aria-label={intl.formatMessage(
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -121,6 +121,11 @@ export const AMERICAN_SAMOA_BOUNDS: LngLatBoundsLike = [
|
||||||
[-168.1433, -11.046934],
|
[-168.1433, -11.046934],
|
||||||
];
|
];
|
||||||
|
|
||||||
|
export const US_VIRGIN_ISLANDS_BOUNDS: LngLatBoundsLike = [
|
||||||
|
[-65.5782239, 17.6739145],
|
||||||
|
[-64.2704123, 18.7495796],
|
||||||
|
];
|
||||||
|
|
||||||
export const DEFAULT_CENTER = [32.4687126, -86.502136];
|
export const DEFAULT_CENTER = [32.4687126, -86.502136];
|
||||||
|
|
||||||
// Opacity
|
// Opacity
|
||||||
|
|
|
||||||
|
|
@ -57,6 +57,16 @@ export const MAP = defineMessages({
|
||||||
defaultMessage: 'Zoom in to the state or regional level to see prioritized communities on the map.',
|
defaultMessage: 'Zoom in to the state or regional level to see prioritized communities on the map.',
|
||||||
description: 'zoom warning on map',
|
description: 'zoom warning on map',
|
||||||
},
|
},
|
||||||
|
SEARCH_PLACEHOLDER: {
|
||||||
|
id: 'map.search.placeholder.text',
|
||||||
|
defaultMessage: 'Enter a city, state or ZIP',
|
||||||
|
description: 'placeholder text for search',
|
||||||
|
},
|
||||||
|
SEARCH_RESULTS_EMPTY_MESSAGE: {
|
||||||
|
id: 'map.search.results.empty.text',
|
||||||
|
defaultMessage: 'No location found. Please try another location.',
|
||||||
|
description: 'text displaying message for no search results found',
|
||||||
|
},
|
||||||
LOWER48_SHORT: {
|
LOWER48_SHORT: {
|
||||||
id: 'map.territoryFocus.lower48.short',
|
id: 'map.territoryFocus.lower48.short',
|
||||||
defaultMessage: '48',
|
defaultMessage: '48',
|
||||||
|
|
@ -97,15 +107,45 @@ export const MAP = defineMessages({
|
||||||
defaultMessage: 'Puerto Rico',
|
defaultMessage: 'Puerto Rico',
|
||||||
description: 'The full name indicating the bounds of Puerto Rico',
|
description: 'The full name indicating the bounds of Puerto Rico',
|
||||||
},
|
},
|
||||||
SEARCH_PLACEHOLDER: {
|
GU_SHORT: {
|
||||||
id: 'map.search.placeholder.text',
|
id: 'map.territoryFocus.guam.short',
|
||||||
defaultMessage: 'Enter a city, state or ZIP',
|
defaultMessage: 'GU',
|
||||||
description: 'placeholder text for search',
|
description: 'The abbreviated name indicating the bounds of Guam',
|
||||||
},
|
},
|
||||||
SEARCH_RESULTS_EMPTY_MESSAGE: {
|
GU_LONG: {
|
||||||
id: 'map.search.results.empty.text',
|
id: 'map.territoryFocus.guam.long',
|
||||||
defaultMessage: 'No location found. Please try another location.',
|
defaultMessage: 'Guam',
|
||||||
description: 'text displaying message for no search results found',
|
description: 'The full name indicating the bounds of Guam',
|
||||||
|
},
|
||||||
|
AS_SHORT: {
|
||||||
|
id: 'map.territoryFocus.american.samoa.short',
|
||||||
|
defaultMessage: 'AS',
|
||||||
|
description: 'The abbreviated name indicating the bounds of American Somoa',
|
||||||
|
},
|
||||||
|
AS_LONG: {
|
||||||
|
id: 'map.territoryFocus.american.samoa.long',
|
||||||
|
defaultMessage: 'American Somoa',
|
||||||
|
description: 'The full name indicating the bounds of American Somoa',
|
||||||
|
},
|
||||||
|
MP_SHORT: {
|
||||||
|
id: 'map.territoryFocus.commonwealth.nmp.short',
|
||||||
|
defaultMessage: 'MP',
|
||||||
|
description: 'The abbreviated name indicating the bounds of Commonwealth of Northern Mariana Islands',
|
||||||
|
},
|
||||||
|
MP_LONG: {
|
||||||
|
id: 'map.territoryFocus.commonwealth.nmp.long',
|
||||||
|
defaultMessage: 'Commonwealth of Northern Mariana Islands',
|
||||||
|
description: 'The full name indicating the bounds of Commonwealth of Northern Mariana Islands',
|
||||||
|
},
|
||||||
|
VI_SHORT: {
|
||||||
|
id: 'map.territoryFocus.us.virgin.islands.short',
|
||||||
|
defaultMessage: 'VI',
|
||||||
|
description: 'The abbreviated name indicating the bounds of US Virgin Islands',
|
||||||
|
},
|
||||||
|
VI_LONG: {
|
||||||
|
id: 'map.territoryFocus.us.virgin.islands.long',
|
||||||
|
defaultMessage: 'US Virgin Islands',
|
||||||
|
description: 'The full name indicating the bounds of US Virgin Islands',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1 +1,21 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M-.54.11h24v24h-24Z" transform="translate(0.54 -0.11)" style="fill:none"/><path d="M11.74,13.46H10.18V16H8.61V13.46H4.67V12.31L8.79,6.83h1.39v5.28h1.56ZM8.61,9.22,6.34,12.11H8.61Z" transform="translate(0.54 -0.11)"/><path d="M12.74,13.77a2.23,2.23,0,0,1,.15-.83,2.62,2.62,0,0,1,.39-.67,3.51,3.51,0,0,1,.55-.54,6.51,6.51,0,0,1,.64-.43,4,4,0,0,1-1.08-.89A2,2,0,0,1,13,9.12a2.21,2.21,0,0,1,.22-.95,2.54,2.54,0,0,1,.62-.77,3.13,3.13,0,0,1,.94-.5,3.8,3.8,0,0,1,1.19-.18,4,4,0,0,1,1.1.15,3.14,3.14,0,0,1,.9.44,2.15,2.15,0,0,1,.61.7,1.82,1.82,0,0,1,.22.9,2.26,2.26,0,0,1-.4,1.34,3.46,3.46,0,0,1-1.08,1,4,4,0,0,1,1.24.95,2.07,2.07,0,0,1,.46,1.4,2.21,2.21,0,0,1-.25,1.06,2.54,2.54,0,0,1-.68.81A3.14,3.14,0,0,1,17,16a3.86,3.86,0,0,1-1.23.19A3.93,3.93,0,0,1,14.6,16a3.14,3.14,0,0,1-1-.48,2.15,2.15,0,0,1-.65-.76A2,2,0,0,1,12.74,13.77Zm4.63-.22A1,1,0,0,0,17.2,13a1.82,1.82,0,0,0-.42-.41,4.34,4.34,0,0,0-.56-.33c-.2-.1-.4-.2-.59-.31a2.45,2.45,0,0,0-1,.74,1.37,1.37,0,0,0-.35.85,1.08,1.08,0,0,0,.41.9,1.9,1.9,0,0,0,1.16.32,1.78,1.78,0,0,0,1.09-.31A1,1,0,0,0,17.37,13.55ZM14.58,9.2a1,1,0,0,0,.13.53,1.53,1.53,0,0,0,.35.37,2.64,2.64,0,0,0,.49.29l.55.26a2.13,2.13,0,0,0,.41-.26,1.88,1.88,0,0,0,.35-.34,2.2,2.2,0,0,0,.26-.39,1,1,0,0,0,.09-.41,1,1,0,0,0-.11-.47,1.15,1.15,0,0,0-.31-.35,1.19,1.19,0,0,0-.42-.21,1.59,1.59,0,0,0-.48-.07,1.51,1.51,0,0,0-.53.09,1.46,1.46,0,0,0-.41.23,1.13,1.13,0,0,0-.28.34A.92.92,0,0,0,14.58,9.2Z" transform="translate(0.54 -0.11)"/></svg>
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:none;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M0,0h24v24H0L0,0z"/>
|
||||||
|
<g>
|
||||||
|
<path d="M8.9,15.6v-2.3H5v-1.1l3.5-5.5h1.9V12h1.1v1.2h-1.1v2.3H8.9z M6.5,12h2.3v-2c0-0.3,0-0.6,0-0.9c0-0.4,0-0.7,0-0.9H8.9
|
||||||
|
C8.8,8.4,8.7,8.6,8.5,8.9C8.4,9.1,8.3,9.3,8.2,9.6L6.5,12z"/>
|
||||||
|
<path d="M15.5,15.8c-0.6,0-1.1-0.1-1.6-0.3c-0.5-0.2-0.8-0.5-1.1-0.9s-0.4-0.8-0.4-1.3c0-0.6,0.2-1,0.5-1.4
|
||||||
|
c0.3-0.4,0.7-0.7,1.1-0.9V11c-0.3-0.2-0.6-0.5-0.9-0.9c-0.2-0.3-0.4-0.7-0.4-1.2c0-0.5,0.1-0.9,0.3-1.3s0.6-0.6,1-0.8
|
||||||
|
c0.4-0.2,0.9-0.3,1.4-0.3c0.8,0,1.4,0.2,1.9,0.7c0.5,0.4,0.7,1,0.7,1.7c0,0.4-0.1,0.8-0.4,1.2c-0.3,0.4-0.5,0.6-0.8,0.9V11
|
||||||
|
c0.4,0.2,0.8,0.5,1.1,0.9c0.3,0.4,0.5,0.8,0.5,1.4c0,0.5-0.1,0.9-0.4,1.2c-0.3,0.4-0.6,0.7-1.1,0.9C16.6,15.6,16.1,15.8,15.5,15.8z
|
||||||
|
M15.5,14.6c0.4,0,0.8-0.1,1.1-0.4s0.4-0.6,0.4-1c0-0.3-0.1-0.6-0.3-0.8c-0.2-0.2-0.4-0.4-0.8-0.5s-0.7-0.3-1.1-0.5
|
||||||
|
c-0.3,0.2-0.5,0.4-0.7,0.7c-0.2,0.3-0.3,0.6-0.3,0.9c0,0.4,0.2,0.8,0.5,1.1S15,14.6,15.5,14.6z M16.1,10.6c0.2-0.2,0.4-0.5,0.6-0.7
|
||||||
|
s0.2-0.5,0.2-0.8c0-0.4-0.1-0.7-0.3-1c-0.2-0.3-0.6-0.4-1-0.4c-0.3,0-0.6,0.1-0.9,0.3c-0.2,0.2-0.4,0.5-0.4,0.9
|
||||||
|
c0,0.3,0.1,0.5,0.2,0.7c0.2,0.2,0.4,0.4,0.7,0.5C15.4,10.3,15.7,10.4,16.1,10.6z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
|
@ -1 +1,14 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M-.54.11h24v24h-24Z" transform="translate(0.54 -0.11)" style="fill:none"/><path d="M9.34,14H6.62L6,16H4.22L7.16,6.9H8.94L11.86,16H10ZM7,12.55H9l-.92-3H8Z" transform="translate(0.54 -0.11)"/><path d="M15.39,12.2h-.93V16H12.68V6.9h1.78v3.72h.93L17.47,6.9h2l-2.57,4.39L19.82,16h-2.2Z" transform="translate(0.54 -0.11)"/></svg>
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:none;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M0,0h24v24H0L0,0z"/>
|
||||||
|
<g>
|
||||||
|
<path d="M3.8,15.6l3-9.2h1.9l3,9.2H9.9l-0.7-2.5H6.1l-0.7,2.5H3.8z M6.8,10.7l-0.3,1.1h2.3l-0.3-1.1c-0.1-0.5-0.3-1-0.4-1.5
|
||||||
|
C8,8.7,7.8,8.2,7.7,7.7H7.6c-0.1,0.5-0.2,1-0.4,1.5S7,10.2,6.8,10.7z"/>
|
||||||
|
<path d="M12.8,15.6V6.4h1.6v4.2h0l3.3-4.2h1.8L16.7,10l3.3,5.6h-1.8l-2.5-4.3l-1.3,1.6v2.7H12.8z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 415 B After Width: | Height: | Size: 747 B |
19
client/src/images/mapbtn-AS.svg
Normal file
19
client/src/images/mapbtn-AS.svg
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:none;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M0,0h24v24H0L0,0z"/>
|
||||||
|
<g>
|
||||||
|
<path d="M4.2,15.6l3-9.2h1.9l3,9.2h-1.7l-0.7-2.5H6.6l-0.7,2.5H4.2z M7.3,10.7L7,11.8h2.3L9,10.7c-0.1-0.5-0.3-1-0.4-1.5
|
||||||
|
c-0.1-0.5-0.3-1-0.4-1.5H8.1C8,8.2,7.8,8.7,7.7,9.2S7.4,10.2,7.3,10.7z"/>
|
||||||
|
<path d="M15.9,15.8c-0.6,0-1.2-0.1-1.8-0.3c-0.6-0.2-1.1-0.6-1.5-1l1-1.1c0.3,0.3,0.7,0.6,1.1,0.7c0.4,0.2,0.8,0.3,1.3,0.3
|
||||||
|
c0.5,0,0.9-0.1,1.2-0.3c0.3-0.2,0.4-0.5,0.4-0.9c0-0.4-0.1-0.7-0.4-0.8c-0.3-0.2-0.6-0.3-1-0.5l-1.3-0.5c-0.3-0.1-0.6-0.3-0.9-0.5
|
||||||
|
c-0.3-0.2-0.5-0.5-0.7-0.8C13.1,9.7,13,9.3,13,8.8c0-0.5,0.1-0.9,0.4-1.3c0.3-0.4,0.6-0.7,1.1-0.9c0.5-0.2,1-0.3,1.6-0.3
|
||||||
|
c0.5,0,1,0.1,1.5,0.3c0.5,0.2,0.9,0.5,1.3,0.8l-0.8,1c-0.3-0.2-0.6-0.4-0.9-0.6c-0.3-0.1-0.7-0.2-1.1-0.2c-0.4,0-0.8,0.1-1,0.3
|
||||||
|
c-0.3,0.2-0.4,0.5-0.4,0.8c0,0.2,0.1,0.4,0.2,0.6c0.1,0.2,0.3,0.3,0.5,0.4c0.2,0.1,0.5,0.2,0.7,0.3l1.2,0.5c0.5,0.2,1,0.5,1.3,0.9
|
||||||
|
c0.3,0.4,0.5,0.9,0.5,1.6c0,0.5-0.1,0.9-0.4,1.4c-0.3,0.4-0.6,0.7-1.1,1C17.2,15.6,16.6,15.8,15.9,15.8z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
18
client/src/images/mapbtn-GU.svg
Normal file
18
client/src/images/mapbtn-GU.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:none;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M0,0h24v24H0L0,0z"/>
|
||||||
|
<g>
|
||||||
|
<path d="M7.9,15.8c-0.8,0-1.6-0.2-2.2-0.5c-0.7-0.4-1.2-0.9-1.5-1.6C3.8,12.9,3.6,12,3.6,11c0-1,0.2-1.9,0.6-2.6
|
||||||
|
c0.4-0.7,0.9-1.3,1.6-1.6s1.4-0.6,2.2-0.6c0.7,0,1.2,0.1,1.7,0.4c0.5,0.2,0.8,0.5,1.1,0.8L9.8,8.5C9.6,8.3,9.3,8.1,9,7.9
|
||||||
|
C8.8,7.8,8.4,7.7,8,7.7C7.2,7.7,6.5,8,6,8.6C5.5,9.2,5.2,10,5.2,11c0,1,0.2,1.9,0.7,2.5s1.2,0.9,2.1,0.9c0.3,0,0.5,0,0.7-0.1
|
||||||
|
c0.2-0.1,0.4-0.2,0.6-0.3v-2H7.6v-1.3h3.2v4c-0.3,0.3-0.7,0.6-1.2,0.8C9.1,15.7,8.5,15.8,7.9,15.8z"/>
|
||||||
|
<path d="M16.3,15.8c-0.7,0-1.3-0.1-1.8-0.4s-0.9-0.7-1.2-1.3c-0.3-0.6-0.4-1.4-0.4-2.4V6.4h1.6v5.3c0,0.7,0.1,1.2,0.2,1.6
|
||||||
|
c0.2,0.4,0.4,0.7,0.7,0.8c0.3,0.2,0.6,0.2,1,0.2c0.4,0,0.7-0.1,1-0.2c0.3-0.2,0.5-0.4,0.7-0.8c0.2-0.4,0.2-0.9,0.2-1.6V6.4h1.6v5.1
|
||||||
|
c0,1-0.1,1.8-0.4,2.4c-0.3,0.6-0.7,1.1-1.2,1.3C17.6,15.6,17,15.8,16.3,15.8z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -1 +1,13 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M-.54.11h24v24h-24Z" transform="translate(0.54 -0.11)" style="fill:none"/><path d="M9.64,12.19H6.7V16H4.92V6.9H6.7v3.7H9.64V6.9h1.78V16H9.64Z" transform="translate(0.54 -0.11)"/><path d="M12.63,14.41h2.31V8.48H12.63V6.9H19V8.48H16.72v5.93H19V16h-6.4Z" transform="translate(0.54 -0.11)"/></svg>
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:none;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M0,0h24v24H0L0,0z"/>
|
||||||
|
<g>
|
||||||
|
<path d="M6.4,15.6V6.4H8v3.7h3.7V6.4h1.6v9.2h-1.6v-4.1H8v4.1H6.4z"/>
|
||||||
|
<path d="M15.7,15.6V6.4h1.6v9.2H15.7z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 385 B After Width: | Height: | Size: 566 B |
17
client/src/images/mapbtn-MP.svg
Normal file
17
client/src/images/mapbtn-MP.svg
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:none;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M0,0h24v24H0L0,0z"/>
|
||||||
|
<g>
|
||||||
|
<path d="M3.7,15.6V6.4h1.8l1.6,4.5c0.1,0.3,0.2,0.6,0.3,0.9c0.1,0.3,0.2,0.6,0.3,0.9h0.1c0.1-0.3,0.2-0.6,0.3-0.9
|
||||||
|
c0.1-0.3,0.2-0.6,0.3-0.9L10,6.4h1.8v9.2h-1.5v-4.2c0-0.3,0-0.6,0-0.9c0-0.3,0.1-0.7,0.1-1c0-0.3,0.1-0.7,0.1-0.9h-0.1l-0.7,2.1
|
||||||
|
l-1.5,4.1h-1l-1.5-4.1L5,8.5H5C5,8.8,5,9.1,5.1,9.4c0,0.3,0.1,0.7,0.1,1c0,0.3,0,0.7,0,0.9v4.2H3.7z"/>
|
||||||
|
<path d="M14.1,15.6V6.4H17c0.7,0,1.3,0.1,1.8,0.3c0.5,0.2,1,0.5,1.3,0.9s0.5,1,0.5,1.7c0,0.7-0.2,1.2-0.5,1.7
|
||||||
|
c-0.3,0.4-0.7,0.8-1.2,1c-0.5,0.2-1.1,0.3-1.8,0.3h-1.3v3.4H14.1z M15.8,10.9h1.2c1.3,0,2-0.6,2-1.7c0-0.6-0.2-1-0.5-1.2
|
||||||
|
c-0.3-0.2-0.9-0.3-1.5-0.3h-1.1V10.9z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1 KiB |
|
|
@ -1 +1,17 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M-.54.11h24v24h-24Z" transform="translate(0.54 -0.11)" style="fill:none"/><path d="M5.25,7a12.1,12.1,0,0,1,1.2-.16c.44,0,.87-.06,1.31-.06a7.88,7.88,0,0,1,1.36.11,3.3,3.3,0,0,1,1.22.44,2.54,2.54,0,0,1,.89.92,3.05,3.05,0,0,1,.35,1.54,3.15,3.15,0,0,1-.3,1.43,2.79,2.79,0,0,1-.79,1,3.24,3.24,0,0,1-1.13.56,4.69,4.69,0,0,1-1.3.18H7.55l-.31,0-.21,0V16H5.25ZM7.9,8.3l-.49,0a2.53,2.53,0,0,0-.38,0v3l.16,0,.22,0H7.8a3.23,3.23,0,0,0,.69-.07,1.61,1.61,0,0,0,.62-.24,1.18,1.18,0,0,0,.43-.48,1.75,1.75,0,0,0,.17-.82,1.38,1.38,0,0,0-.16-.71,1.19,1.19,0,0,0-.41-.45,1.57,1.57,0,0,0-.58-.23A2.84,2.84,0,0,0,7.9,8.3Z" transform="translate(0.54 -0.11)"/><path d="M12.71,7l.64-.1L14,6.82l.67,0h.6a6.54,6.54,0,0,1,1.25.12,3.37,3.37,0,0,1,1.11.42,2.33,2.33,0,0,1,.78.81,2.55,2.55,0,0,1,.29,1.26,3.93,3.93,0,0,1-.11,1,3,3,0,0,1-.31.72,2.23,2.23,0,0,1-.47.54,4.33,4.33,0,0,1-.61.41l2.2,4H17.39l-1.84-3.56H14.49V16H12.71Zm2.73,1.36-.54,0a1.81,1.81,0,0,0-.41.05v2.64h.7a2.06,2.06,0,0,0,1.21-.34,1.3,1.3,0,0,0,.47-1.12,1.14,1.14,0,0,0-.37-.91A1.49,1.49,0,0,0,15.44,8.35Z" transform="translate(0.54 -0.11)"/></svg>
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:none;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M0,0h24v24H0L0,0z"/>
|
||||||
|
<g>
|
||||||
|
<path d="M4.7,15.6V6.4h2.9c0.7,0,1.3,0.1,1.8,0.3c0.5,0.2,1,0.5,1.3,0.9s0.5,1,0.5,1.7c0,0.7-0.2,1.2-0.5,1.7
|
||||||
|
c-0.3,0.4-0.7,0.8-1.2,1c-0.5,0.2-1.1,0.3-1.8,0.3H6.4v3.4H4.7z M6.4,10.9h1.2c1.3,0,2-0.6,2-1.7c0-0.6-0.2-1-0.5-1.2
|
||||||
|
C8.7,7.8,8.2,7.7,7.5,7.7H6.4V10.9z"/>
|
||||||
|
<path d="M12.9,15.6V6.4H16c0.6,0,1.2,0.1,1.7,0.3s0.9,0.5,1.2,0.8c0.3,0.4,0.4,0.9,0.4,1.6c0,0.7-0.2,1.3-0.5,1.7
|
||||||
|
c-0.3,0.4-0.8,0.7-1.3,0.9l2.2,3.8h-1.8l-2-3.6h-1.4v3.6H12.9z M14.5,10.7h1.3c0.6,0,1.1-0.1,1.4-0.4c0.3-0.3,0.5-0.7,0.5-1.2
|
||||||
|
c0-0.5-0.2-0.9-0.5-1.1c-0.3-0.2-0.8-0.3-1.4-0.3h-1.3V10.7z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1,018 B |
14
client/src/images/mapbtn-VI.svg
Normal file
14
client/src/images/mapbtn-VI.svg
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:none;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M0,0h24v24H0L0,0z"/>
|
||||||
|
<g>
|
||||||
|
<path d="M9,15.6L6.1,6.4h1.7L9.1,11c0.1,0.5,0.3,1,0.4,1.5c0.1,0.5,0.3,1,0.4,1.5H10c0.2-0.5,0.3-1,0.4-1.5c0.1-0.5,0.2-1,0.4-1.5
|
||||||
|
l1.3-4.6h1.7l-2.8,9.2H9z"/>
|
||||||
|
<path d="M14.8,15.6V6.4h1.6v9.2H14.8z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 654 B |
|
|
@ -262,6 +262,30 @@ This section will outline styles that are component specific
|
||||||
background-image: url("../images/mapbtn-PR.svg");
|
background-image: url("../images/mapbtn-PR.svg");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button.mapboxgl-ctrl-zoom-to-gu {
|
||||||
|
.mapboxgl-ctrl-icon {
|
||||||
|
background-image: url("../images/mapbtn-GU.svg");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button.mapboxgl-ctrl-zoom-to-as {
|
||||||
|
.mapboxgl-ctrl-icon {
|
||||||
|
background-image: url("../images/mapbtn-AS.svg");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button.mapboxgl-ctrl-zoom-to-mp {
|
||||||
|
.mapboxgl-ctrl-icon {
|
||||||
|
background-image: url("../images/mapbtn-MP.svg");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button.mapboxgl-ctrl-zoom-to-vi {
|
||||||
|
.mapboxgl-ctrl-icon {
|
||||||
|
background-image: url("../images/mapbtn-VI.svg");
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//Area Detail Component
|
//Area Detail Component
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue