LWC Lightning Map

controller.cls

public with sharing class MapDataController {
    @AuraEnabled(cacheable=true)
    public static List<Opportunity> getAllLocations(){
        List<Opportunity> oppList;

        try {
            Map_data__c settings = Map_data__c.getInstance();
            String filters = settings.QueryFilters__c;


            String query = ''+filters;
           oppList = (List<Opportunity>) Database.query(query);

        } catch (Exception e) {
            throw new AuraHandledException(e.getMessage());
        }
        return oppList;
    }

}

map.html

<template>

	<header class="demo-only-element slds-theme_default slds-border_bottom slds-p-around_small" style="z-index:1">
		<button class="slds-button slds-button_icon slds-is-selected slds-button_icon-border-filled slds-button_icon-border"
			title="Toggle panel" aria-expanded="true" aria-controls="example-unique-id-7" aria-pressed="true">
			<svg class="slds-button__icon" aria-hidden="true">
				<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#toggle_panel_left"></use>
			</svg>
			<span class="slds-assistive-text">Provide description of action</span>
		</button>
	</header>
	<div class="demo-only-element" style="background-color:#fafaf9;position:relative;overflow:hidden;display:flex;flex-direction:">
		<div class="slds-panel slds-size_medium slds-panel_docked slds-panel_docked-right slds-panel_drawer slds-is-open"
			id="example-unique-id-7">
			<div class="slds-panel__header">
				<h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Panel Header">Map Marker Filters
				</h2>
				<div class="slds-panel__header-actions">
					<button class="slds-button slds-button_icon slds-button_icon-small slds-panel__close"
						title="Collapse Panel Header">
						<svg class="slds-button__icon" aria-hidden="true">
							<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
						</svg>
						<span class="slds-assistive-text">Collapse Panel Header</span>
					</button>
				</div>
			</div>
			<div class="slds-panel__body">
				<lightning-select
            name="productsSelect" label="Product"
            value={productsSelectValue}
            options={productMap}
						onchange={handleChangeProductSelect} ></lightning-select>
				<lightning-select
            name="stageSelect" label="Stage"
            value={stageSelectValue}
            options={stageNameMap}
						onchange={handleChangestageSelect} ></lightning-select>
				
				<lightning-select
            name="owner" label="Owner Name"
            value={ownerSelectValue}
            options={ownerMap}
            onchange={handleChangeOwnerSelect} ></lightning-select>
				
				<lightning-select
            name="account" label="Account Name"
            value={accountSelectValue}
            options={accountMap}
            onchange={handleChangeAccountSelect} ></lightning-select>
				
				<lightning-select
            name="sytemSize" label="System Size (MW)"
            value={systemSizeSelectValue}
            options={systemSizeMap}
            onchange={handleChangeSystemSizeSelect} ></lightning-select>
				
				<lightning-select
            name="createdDate" label="Created Date"
            value={createdDateSelectValue}
            options={createdDateMap}
            onchange={handleChangeCreatedDateSelect} ></lightning-select>
				
				<lightning-select
            name="closeDate" label="Close Date"
            value={closeDateSelectValue}
            options={closeDateMap}
            onchange={handleChangeCloseDateSelect} ></lightning-select>
				
				<lightning-select
            name="subCategory" label="Sub-Category"
            value={subCategorySelectValue}
            options={subCategoryMap}
            onchange={handleChangeSubCategorySelect} ></lightning-select>
				
				<p>Total Records: {total_records}</p>
				<p>Filtered Records: {filtered_records}</p>

				<lightning-button label="Filter" title="Non-primary action" onclick={handleFilter} class="slds-m-left_x-small"></lightning-button>
			</div>
		</div>
		<div class="demo-only-content slds-col slds-p-around_medium"><lightning-map map-markers={mapMarkers}
				draggable="true" list-view="hidden" scrollwheel="true" zoom-level={zoomLevel}> </lightning-map></div>
	</div>
</template>

map.js

import { LightningElement, track, wire } from 'lwc';
import getLocations from "@salesforce/apex/ProjectsMapDataController.getAllProjectsLocation";

export default class LightningMapExample extends LightningElement {
    
    mapMarkers;
    zoomLevel = 9;
    productMap;
    stageNameMap;
    ownerMap;
    accountMap;
    systemSizeMap;
    createdDateMap;
    closeDateMap;
    subCategoryMap;
    total_records=0;
    filtered_records =0;
    MAIN_DATA;
    @wire(getLocations) 
    projectLocations({error, data}){
        let tempMapMarkers = [];
        let prodMapTemp = new Map();
        let stageMapTemp = new Map();
        let ownerMapTemp = new Map();
        let accountMapTemp = new Map();
        let subCategoryMapTemp = new Map();
        if (data) {
            this.MAIN_DATA = data;
            this.total_records = data.length;
            for (let index = 0; index < data.length; index++) {
                
                prodMapTemp.set(data[index].Product__c, data[index].Product__c);
                //stageMapTemp.set(data[index].StageName, data[index].StageName);
                ownerMapTemp.set(data[index].OwnerId, data[index].Owner.Name);
                accountMapTemp.set(data[index].AccountId, data[index].Account.Name);
                subCategoryMapTemp.set(data[index].Sub_Category__c, data[index].Sub_Category__c);
                
                
                tempMapMarkers.push(this.makeMapMarker(data[index]));
            }
            this.mapMarkers = tempMapMarkers;
            this.productMap = this.addValuesToSelect(prodMapTemp);
            this.ownerMap = this.addValuesToSelect(ownerMapTemp);
            this.accountMap = this.addValuesToSelect(accountMapTemp);
            this.stageNameMap = this.prepareStageNameSelect();
            this.systemSizeMap = this.prepareSystemSizeSelect();
            this.createdDateMap = this.prepareMonthsSelect();
            this.closeDateMap = this.prepareMonthsSelect();
            this.subCategoryMap = this.addValuesToSelect(subCategoryMapTemp);
            
        } else if(error) {
            console.error("Error response: "+error);
        }
        
    }

    handleFilter(event) {
        console.log('------> Button clicked');
        let filteredData = [];
        let productFilter = this.productsSelectValue === '0' ? true : false;
        let accFilter = this.accountSelectValue === '0' ? true : false;
        let ownerFilter = this.ownerSelectValue === '0' ? true : false;
        let subCatFilter = this.subCategorySelectValue === '0' ? true : false;
        let createdDateFilter = this.createdDateSelectValue === '-1' ? true : false;
        let closeDateFilter = this.closeDateSelectValue === '-1' ? true : false;
        let systemSizeFilter = this.systemSizeSelectValue != '0' ? false : true;
        let stageFilter = this.stageSelectValue != '0' ? false : true;
        
            for (let index = 0; index < this.MAIN_DATA.length; index++) {
                
                if ((this.MAIN_DATA[index].Product__c === this.productsSelectValue || productFilter)
                    && (stageFilter ||(
                        (this.stageSelectValue === 'open' && 
                        (
                            this.MAIN_DATA[index].StageName === '01 - Indentify/Develop' ||
                            this.MAIN_DATA[index].StageName === '02 - Develop/Budgetary' ||
                            this.MAIN_DATA[index].StageName === '03 - Preparing Project for Close' ||
                            this.MAIN_DATA[index].StageName === '04 - Negotiation' ||
                            this.MAIN_DATA[index].StageName === '05 - Highly Likely' ||
                            this.MAIN_DATA[index].StageName === '06 - Verbal Committed' ||
                            this.MAIN_DATA[index].StageName === '07 - PO Received / Pending Sales Ops Review' ||
                            this.MAIN_DATA[index].StageName === '07 - PO Received / Pending Legal Review' ||
                            this.MAIN_DATA[index].StageName === '07 - PO Received / Legal Complete / Pending Admin Setup'
                        )
                       )
                    || (this.stageSelectValue === 'closed_lost' && 
                        (
                            this.MAIN_DATA[index].StageName === '99 - Dead / Lost to Competition' ||
                            this.MAIN_DATA[index].StageName === '99 - Dead / No Decision' ||
                            this.MAIN_DATA[index].StageName === '99 - Dead / No-Bid' ||
                            this.MAIN_DATA[index].StageName === '99 - Closed - Duplicate'
                        )
                       )
                    || (this.stageSelectValue === 'closed_won' &&  this.MAIN_DATA[index].StageName === '77 - PO Received / Closed Won')
                    ))
                    && (this.MAIN_DATA[index].OwnerId === this.ownerSelectValue || ownerFilter)
                    && (this.MAIN_DATA[index].AccountId === this.accountSelectValue || accFilter)
                    && (this.MAIN_DATA[index].Sub_Category__c === this.subCategorySelectValue || subCatFilter)
                    && (systemSizeFilter ||(
                        (this.systemSizeSelectValue === 'DG' && this.MAIN_DATA[index].System_Size_in_MW__c < 20)
                    || (this.systemSizeSelectValue === 'Util' && this.MAIN_DATA[index].System_Size_in_MW__c > 20 && this.MAIN_DATA[index].System_Size_in_MW__c < 75)
                    || (this.systemSizeSelectValue === 'Util+' && this.MAIN_DATA[index].System_Size_in_MW__c >75)
                    ))
                    && (new Date(this.MAIN_DATA[index].CreatedDate).getMonth().toString() === this.createdDateSelectValue || createdDateFilter)
                    && (new Date(this.MAIN_DATA[index].CloseDate).getMonth().toString() === this.closeDateSelectValue || closeDateFilter)
                ) {
                        filteredData.push(this.MAIN_DATA[index]);

                        console.log('------>data clicked '+index);
                        console.log('------>closed date '+this.MAIN_DATA[index].CloseDate);
                        console.log('------>closed date to string '+new Date(this.MAIN_DATA[index].CloseDate).getMonth().toString());
                        console.log('------>closed date to string '+this.closeDateSelectValue);
                        
                }
            }
            
        // }
        this.filtered_records = filteredData.length;
        this.mapMarkers = this.createMapMarkers(filteredData);
    }
    createMapMarkers(data) {
        var tempMapMarkers = [];
        for (let index = 0; index < data.length; index++) {
            
            tempMapMarkers.push(this.makeMapMarker(data[index]));
        }
        return tempMapMarkers;
    }
    makeMapMarker(data) {
        // Create marker object with the custom map icon
        const marker = {
            location: {
                Latitude: data.Project_Site__r.Address__Latitude__s,
                Longitude: data.Project_Site__r.Address__Longitude__s
            },
            title: data.Name,
            description: data.StageName+'  --- id ---'+data.Id,
            mapIcon: this.decorateMapMarker(data)
        };
    
        return marker;
    }    

    decorateMapMarker(data) {
        
        var customMapIcon;
        var product = data.Product__c;
        if (product === "Canopy") {
            customMapIcon = {
                path: 'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z',
                fillColor: 'Blue',
                fillOpacity: 0.8,
                strokeWeight: 0,
                strokeColor: '#AB47BC',
                anchor: { x: 12, y: 24 },
            };
            
        } else if (product === "Fixed Tilt") {
            customMapIcon = {
                path: 'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z',
                fillColor: 'red',
                fillOpacity: 0.8,
                strokeWeight: 0,
                strokeColor: '#AB47BC',
                anchor: { x: 12, y: 24 },
            };

        } else if (product === "Tracker") {
            customMapIcon = {
                path: 'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z',
                fillColor: 'Green',
                fillOpacity: 0.8,
                strokeWeight: 0,
                strokeColor: '#AB47BC',
                anchor: { x: 12, y: 24 },
            };
        } else {
            customMapIcon = {
                path: 'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z',
                fillColor: 'yellow',
                fillOpacity: 0.8,
                strokeWeight: 0,
                strokeColor: '#AB47BC',
                anchor: { x: 12, y: 24 },
            };

        }
        return customMapIcon;
    }

    prepareStageNameSelect() {
        var temp = [];
        temp.push(
            { label: 'none', value: '0' },
            { label: 'Open', value: 'open' },
            { label: 'Closed Lost', value: 'closed_lost' },
            { label: 'Closed Won', value: 'closed_won' },
        );
        return temp;
    }
    prepareSystemSizeSelect() {
        var temp = [];
        temp.push(
            { label: 'none', value: '0' },
            { label: 'DG', value: 'DG' },
            { label: 'Util', value: 'Util' },
            { label: 'Util+', value: 'Util+' },
        );
        return temp;
    }
    prepareMonthsSelect() {
        var temp = [];
        temp.push(
            { label: 'none', value: '-1' },
            { label: 'January', value: '0' },
            { label: 'February', value: '1' },
            { label: 'March', value: '2' },
            { label: 'April', value: '3' },
            { label: 'May', value: '4' },
            { label: 'June', value: '5' },
            { label: 'July', value: '6' },
            { label: 'August', value: '7' },
            { label: 'September', value: '8' },
            { label: 'October', value: '9' },
            { label: 'November', value: '10' },
            { label: 'December', value: '11' },
        );
        return temp;
    }
    addValuesToSelect(data) {
        var temp = [];
        temp.push(
            { label: 'none', value: '0' },
        );
        data.forEach((value, key) => {
            temp.push(
                { label: value, value: key },
            );
            
        });
        return temp;
    }
    productsSelectValue = '';
    handleChangeProductSelect(event) {
        this.productsSelectValue = event.detail.value;
    }
    stageSelectValue = '';
    handleChangestageSelect(event) {
        this.stageSelectValue = event.detail.value;
    }
    ownerSelectValue = '';
    handleChangeOwnerSelect(event) {
        this.ownerSelectValue = event.detail.value;
    }
    accountSelectValue = '';
    handleChangeAccountSelect(event) {
        this.accountSelectValue = event.detail.value;
    }
    systemSizeSelectValue = '';
    handleChangeSystemSizeSelect(event) {
        this.systemSizeSelectValue = event.detail.value;
    }
    createdDateSelectValue = '';
    handleChangeCreatedDateSelect(event) {
        this.createdDateSelectValue = event.detail.value;
    }
    closeDateSelectValue = '';
    handleChangeCloseDateSelect(event) {
        this.closeDateSelectValue = event.detail.value;
    }
    subCategorySelectValue = '';
    handleChangeSubCategorySelect(event) {
        this.subCategorySelectValue = event.detail.value;
    }
    
}