BOATS NEAR ME
boatsNearMe.html
<template>
<lightning-card class="slds-is-relative">
<!-- The template and lightning-spinner goes here -->
<template if:true={isLoading}>
<lightning-spinner alternative-text="Loading" size="medium" variant="brand"></lightning-spinner>
</template>
<!-- The lightning-map goes here -->
<template if:true={isRendered}>
<lightning-map map-markers={mapMarkers} zoom-level="10"></lightning-map>
<div slot="footer">Top 10 Only!</div>
</template>
</lightning-card>
</template>
boatsNearMe.js
import { LightningElement, track, api, wire } from 'lwc';
import getBoatsByLocation from '@salesforce/apex/BoatDataService.getBoatsByLocation';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
const LABEL_YOU_ARE_HERE = 'You are here!';
const ICON_STANDARD_USER = 'standard:user';
const ERROR_TITLE = 'Error loading Boats Near Me';
const ERROR_VARIANT = 'error';
export default class BoatsNearMe extends LightningElement {
@api boatTypeId;
@track mapMarkers = [];
@track isLoading = true;
@track isRendered = false;
latitude;
longitude;
// Add the wired method from the Apex Class
// Name it getBoatsByLocation, and use latitude, longitude and boatTypeId
@wire(getBoatsByLocation, { latitude:'$latitude', longitude: '$longitude', boatTypeId: '$boatTypeId'})
// Handle the result and calls createMapMarkers
wiredBoatsJSON({error, data}) {
if(data){
this.createMapMarkers(data);
}else if(error){
this.dispatchEvent(
new ShowToastEvent({
title: ERROR_TITLE,
message: error.body.message,
variant: ERROR_VARIANT
})
);
this.isLoading = false;
}
}
// Controls the isRendered property
// Calls getLocationFromBrowser()
renderedCallback() {
if(this.isRendered == false){
this.getLocationFromBrowser();
}
this.isRendered = true;
}
// Gets the location from the Browser
// position => {latitude and longitude}
getLocationFromBrowser(){
navigator.geolocation.getCurrentPosition(
(position) => {
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
},
(e) =>{
},{
enableHighAccuracy: true
}
);
}
// Creates the map markers
createMapMarkers(boatData) {
// const newMarkers = boatData.map(boat => {...});
this.mapMarkers = boatData.map(rowBoat =>{
return{
location:{
Latitude: rowBoat.Geolocation__Latitude__s,
Longitude: rowBoat.Geolocation__Longitude__s
},
title: rowBoat.Name,
};
});
// newMarkers.unshift({...});
this.mapMarkers.unshift({
location: {
Latitude: this.latitude,
Longitude: this.longitude
},
title:LABEL_YOU_ARE_HERE,
icon:ICON_STANDARD_USER
});
this.isLoading = false;
}
}
boatsNearMe.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>49.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
</targets>
</LightningComponentBundle>
Comments
Post a Comment