Web component created using lit
- For farmers, tourist or travel organisations who want to display the map on their website see the end users section
- For developers see the developer section
-
Copy and paste the lines below directly inside the
<head></head>tag of website<meta name="viewport" content="width=device-width,initial-scale=1" /> -
Generate a google maps API key
-
Copy and paste the following code inside the
<body></body>tag of website where the component should appear, replacingGOOGLE-API-KEYwith your key
<alpaca-map apiKey="GOOGLE-API-KEY"></alpaca-map>
- Optional. To center the map on a favourite farm, replace the latitude and longitude with its
centerLatandcenterLngcoordinates
<alpaca-map apiKey="GOOGLE-API-KEY" centerLat="-33.8688" centerLng="151.2093"></alpaca-map>
- Optional. To override the data source, set the value of
dataSource, eg
<alpaca-map apiKey="GOOGLE-API-KEY" dataSource="https://www.replace-me.com/api/cool-api"></alpaca-map>
- Optional. To override map markers linking to the farm page, set the value of
linkToFarmPage
true- shows link on map marker to www.alpaca.life farm info pagefalse- does not show link
eg
<alpaca-map apiKey="GOOGLE-API-KEY" linkToFarmPage=false></alpaca-map>
- Pre condition: Node version 22
npm install
Ensure APIs this app depends on are running
/api/companies
- Pre condition: Build the file(s) indicated in build.js. Update as required
Build with hot refresh
npm run build:watch
Standard build
npm run build
Format the code
npm run prettier
🧪
Unit tests
npm run testUI tests
- Precondition: Install browsers for UI tests
npx playwright install --with-depsRun tests headless mode
npm run test-uiInteractive mode
npm run test-ui -- --uinpm run start
Navigate to address shown in log