SmartAlert CAP Web

All customizations are to be done to capmap-config.js, index.html and capfeed.php files.

Initial set up

1. edit capmap-config.js

• set default language
• specify initial map position and zoom level
• specify which day buttons will be shown
• add event types for the dropdown menu (events can also be combined as a comam separated list, i,e. "rain,showers" : "Rain warnings")
• add map bounds
• optionally set the name of the issuing organization with senderName. Without it the name is read from the CAP file.

2. edit index.html

• load relevant language files

3. make or edit i18n/translations-xx-xx.js file

• create one, if missing
• make sure that there is translations for event types that you added to capmap-config.js
• the "Issued by" line in the popup is built as Issued by + name + Issued by suffix + at + date. For languages that inflect the name, add Issued by name suffix: it is appended directly to the name with no space, while Issued by suffix is a separate word after it. In Georgian, for example, "Issued by name suffix": "ს" and "Issued by suffix": "მიერ" turn გარემოს ეროვნული სააგენტო into გავრცელებულია გარემოს ეროვნული სააგენტოს მიერ. Leave either key out when the language does not need it.

4. make symbolic link to smartalert data directory

• ln -s /smartmet/editor/smartalert data

5. if multiple data sources are used remember to configure these in capfeed.php. See subDirectories option below.

Local development

Run application

php -S localhost:8080

and navigate to `http://localhost:8080``

Application configuration

capmap-config.js configuration options:

Mandatory options

Fill in these values at initial se up

Option	Type	Default	Description
center	Array	null	Default map center point in [latitude, longitude].
bounds.north	Number	null	Default northern map boundary.
bounds.east	Number	null	Default eastern map boundary.
bounds.south	Number	null	Default southern map boundary.
bounds.west	Number	null	Default western map boundary.

Using Custom Icons

To use custom icons, you’ll need to copy the default icons into a new folder and then replace them with your own.

1. Create the custom folder

Example command (Linux / macOS):

mkdir img/custom

2. Copy the /img/ folder into /img/custom/

This ensures that all default icons (including the transparent folder) are available as a starting point.

Example command (Linux / macOS):

rsync -av --exclude 'custom' ./img/ ./img/custom/

When the custom folder is set up in capmap-config set customIcons: true

3. Replace the icons in /img/custom/

Open the /img/custom/ folder.

Replace the existing images with your own custom icons.

Important: Keep the same filenames to ensure the system recognizes them.

Other options

Option	Type	Default	Description
subDirectories	String	''	A comma separated list of data source subdirectories. E.g. 'meteorology,hydrology'. By default data/ is used.
useLocation	Boolean	false	Allow user location.
useMinorThreat	Boolean	false	Display minor threat level warning.
defaultLanguage	String	'en-US'	Choose the default language.
customLangCode	Object	'null'	Choose a custom language code for date formatting, day.js doesn't always use ISO standard language codes. I.e. customLangCode: {'ua-UA':'uk'}
dateFormat	String	'ISOString'	Use longer date format. Available options are long and (default) ISOString.
dateFormatString	String or Object	null	Define the date format used in warning popups if dateFormat:long. It's also possible to define date formats. For example: dateFormatString: { "default": "MMMM Do YYYY, HH:mm", 'vi-VN': 'HH [gi�] mm [phút], [ngà y] DD/MM/YYYY', "en-VN": "MMMM Do YYYY, HH:mm" },
displayActiveFor	Boolean	false	Display how long the warning stays active in the warning popup, i.e. Active for next 2 days 3 hours 15 minutes. Only shown for warnings that have already started.
senderName	String or Object	null	Name of the issuing organization shown in the warning popup and in the filter panel. Use a string for a single name, or an object keyed by language with an optional default key. When not set, or when the selected language is missing from the object, the name is read from the CAP file (senderName, falling back to sender). For example: senderName: { "default": "Department of Meteorological Services", "lg-UG": "Ekitongole ekivunaanyizibwa ku mbeera y'obudde" },
hideSender	Boolean	false	Hide the name of the issuing organization from the filter panel. Does not affect the warning popup.
regionsUnderTitle	Boolean	false	Display the area names of the warning under the title in the warning popup.
mapTileSource	String	''	Map tile source. See examples from here: https://leaflet-extras.github.io/leaflet-providers/preview/
zoom	Number	7	Default map zoom level.
attribution	String	null	Attribution text.
attributionLink	String	null	URL the attribution text links to.
displayWMS	Boolean	null	Display additional content (country borders, regions etc.) as a WMS layer.
displayOptions	Object	null	Settings passed to Tilelayer.WMS. Documentation: https://leafletjs.com/reference.html#tilelayer-wms-l-tilelayer-wms
displayOptions.endpoint	String	null	WMS server endpoint. E.g.: https://openwms.fmi.fi/geoserver/wms
displayOptions.params	String	null	Required query parameters. If any custom options not documented here are used, they will be sent to the WMS server as extra parameters in each request URL. This can be useful for non-standard vendor WMS parameters. E.g. {layers:'nexrad-n0r-900913', format:'image/png', transparent:true}
polygonOptions.fillOpacity	Number	0.85	Warning polygon fill opacity.
polygonOptions.strokeOpacity	Number	1	Warning polygon stroke opacity in pixels.
polygonOptions.strokeWeight	Number	1	Warning polygon stroke width in pixels.
polygonOptions.preventSymbolOverlapping	Boolean	false	Move warning symbols sideways when several warnings share the same location, so that the symbols do not overlap.
dayControl	Boolean	true	Display day control buttons.
day0Control	Boolean	true	Display Day 1 button.
day1Control	Boolean	true	Display Day 2 button.
day2Control	Boolean	true	Display Day 3 button.
day3Control	Boolean	true	Display Day 4 button.
day4Control	Boolean	true	Display Day 5 button.
allDayControl	Boolean	true	Display All days button.
extendedDayControl	Boolean	false	Display extended day selection buttons that include weekday, date and color of the highest warning of the that day.
showDayNames	Boolean	false	Display weekday names like "Tue" and "Wed" on the day buttons. When false, the buttons read "Today", "Tomorrow", "Day after tomorrow", "Day 4" and "Day 5". Requires extendedDayControl.
dayDateFormat	String	DD.MM	Date displayed on day selection buttons if extendedDayControl is true
popUpMaxHeight	Number	false	Warning popup maximum height in pixels.
refresh	Number	300	Warning refresh interval in seconds.
areaLimitForMarkers	Number	0.005	Minmum area for warning symbols to be displayed.
iconWidth	Number	30	Warning icon width in pixels.
iconHeight	Number	30	Warning icon height in pixels.
transparentIcons	Boolean	false	Use transparent icons.
customIcons	Boolean	false	Use custom icons. Requires copying contents of /img/ to /img/custom including the transparent folder. Images in custom folder can then be replaced.
customLocations	Boolean	false	Use configurable custom locations. Custom locations need to be added to locations.js file.
numberIcons	Boolean	false	Display the numeric value instead of icon for wave height, wind speed, swell height and surf height.
showIconLegend	Boolean	false	Display legend that tells meaning of active markers.
showUpdateTime	Boolean	false	Display latest update time on legend
hideOffset	Boolean	false	Hides the time offset from update time.
timeZone	String	""	Must be set using an IANA time zone identifier (e.g., "Region/City") to correctly display local time.
eventTypes	Object	{}	List of used events, key is unique word appearing in event tag. Use comma separated keys to combine multiple warning events to be displayed with one selection in the dropdown list, i.e.: "shower,rain": "Rain", An alert is shown on one row only, in the dropdown and in the icon legend alike. A key that matches at the start of the event text wins (the longest such key), so "flood": "Flood", and "flash flood,urban flood": "Flash flood/urban flood", are separate rows: Flood warning goes to the first, Flash flood warning and Urban flood warning to the second. Keys that match elsewhere in the text, like "wind" for Strong wind warning, keep working as before.