How to get state in and out of Livewire+alpinejs component in form?

[scottw-finao]

Package

Form builder

Package Version

v3.0.0

How can we help you?

I'm trying to build a google map Livewire component to help auto-fill a latitude and longitude text field but I can't seem to figure out the best practices for getting information into and out of the livewire piece. I've tried at least a dozen examples I found online to bind state and can't get any to work.

More detail:

I initially tried the locationclickr plugin (and a few others) but I need a very specific implementation of google maps as I need to set bounds on the area of the map and it's zoom out ability, and I also want to overlay the map with an existing hard-copy map the users will recognize.

The users I'm dealing with aren't very tech savvy so I wanted to have three different ways to specify a location:

Latitude and Longitude text fields

Visual (google maps) map you can click on

Upload of a KML waypoint file

I have the KML and lat/lon fields working fine, but I want to have the textfields update the map and a map-click update the text fields. (the map / location data from the map aren't hydrated directly, only the latitude/longitude fields are)

I've been banging my head on the keyboard for over a week trying to get this to work 'both ways' (map updating text fields, text fields updating map) and haven't made much progress on either. My main sticking point is trying to figure out how to bind/entangle/inject the state into the map and in turn get filament to know state has been updated on a map click event. (assuming I could bind/entangle state, I presume afterStateUpdated will trigger?)

Some of the sticky issues are things like:

• Should I directly invoke the livewire component with a Livewire::make() in the Resource file or should I wrap the @livewire() in a custom field component in laravel? If one or the other, how do I pass state into the component in a way i can modify in the javascript code handling the map click event?

• Most of the examples I see on the documentation are either lacking sufficient context/detail to know what goes where and how, or relate to html type directives and not calls in javascript code.

• Most of the examples I see in the documentation are confusing when talking about Field components and Livewire components in the same breath. (the lack of context/detail makes it hard sometimes to tell what code examples refer to as far as context in the codebase)

I would post code examples but I'm so far from having anything remotely working and so confused as to how I do what and where, I'd probably just confuse the issue and myself more to post any iteration of the dozens of things I've tried.

What I can include is my map javascript. My desire would be to pass in 'state' as a parameter to the constructor so i could just update state.latitude and state.longitude or something similar to trigger afterStateChange

import { Loader } from '@googlemaps/js-api-loader';

class Ccrmap {
    constructor(element, state, apiKey, options) {
        this.element = element;
        this.state = state;
        this.apiKey = apiKey;

        this.map = null;
        this.marker = null;

        this.options = {
            center: { lat: 45.158, lng: -84.345 },
            zoom: 12.8,
            minZoom: 12.5,
            mapBounds: {
                north: 45.159,
                south: 45.157,
                east: -84.246,
                west: -84.244
            }
        };
        this.initOptions(options);

        this.loader = new Loader({
            apiKey: this.apiKey,
            version: 'weekly',
            libraries: ['places', 'geometry', 'marker']
        });
    }

    initOptions(options) {
        this.options = { ...this.options, ...options };
    }

    createLatLng(lat, lng=null) {
        if(typeof(lat) === 'object') {
            lng = lat.lng;
            lat = lat.lat;
        }
        return new google.maps.LatLng(lat, lng);
    }

    initMapElement() {
        this.map = new google.maps.Map(this.element, {
            mapId: 'ccr_map',
            center: this.options.center,
            zoom: this.options.zoom,
            minZoom: this.options.minZoom,
            restriction: {
                latLngBounds: this.options.mapBounds,
                strictBounds: false
            },
            streetViewControl: false
        });

        /*
       // eventually use state to create an initial marker if lat and lon are defined
        if(this.state.hasOwnProperty('lat') && this.state.hasOwnProperty('lon')) {
            this.marker = new google.maps.marker.AdvancedMarkerElement({
                position: this.createLatLng(this.state.lat, this.state.lon),
                map: this.map
            });
        }
         */

        this.map.addListener('click', (event) => this.mapClicked(event));
    }

    mapClicked(event) {
        if(this.marker == null) {
            this.marker = new google.maps.marker.AdvancedMarkerElement({
                position: event.latLng,
                map: this.map
            });
        } else {
            this.marker.position = event.latLng;
        }
        // I'm assuming if I can properly pass state in, updating would be something similar to below?
        //this.state.latitude = event.latLng.lat();
        //this.state.longitude = event.latLng.lng();
    }

    initializeMap() {
        this.loader.importLibrary('maps')
            .then( () => this.initMapElement() )
            .catch(e => {
                console.error('Error loading Google Maps API', e);
            });
    }
}

export { Ccrmap };

I tried the below as the blade template for the livewire component, but again, don't know how to bind the state to it:

<div
    x-data="{
            mapdiv: $refs.map,
            apikey: '{{ $apikey }}',

            options: {
                center: { lat: {{ getenv('MAP_CENTER_LAT') }}, lng: {{ getenv('MAP_CENTER_LNG') }} },
                zoom: {{ getenv('MAP_DEFAULT_ZOOM') }},
                minZoom: {{ getenv('MAP_MIN_ZOOM') }},
                mapBounds: {
                    north: {{ getenv('MAP_NORTH_BOUND') }},
                    south: {{ getenv('MAP_SOUTH_BOUND') }},
                    east: {{ getenv('MAP_EAST_BOUND') }},
                    west: {{ getenv('MAP_WEST_BOUND') }}
                }
            },
        }"
    x-init="
        // I was having a problem with vite bundling and renaming that the class was undefined even on nextTick
        //   So I added this as a hack for the timebeing to wait until my code assigns the class to window.Ccrmap
        
        new Promise((resolve) => {
            const checkCcrmap = () => {
                if (typeof(window.Ccrmap) === 'function') {
                    resolve();
                } else {
                    setTimeout(checkCcrmap, 100); // Check every 100ms
                }
            };
            checkCcrmap();
        }).then(() => {
            window.ccrmapInstance = new window.Ccrmap(mapdiv, @entangle('livewire-state'), '{{ $apikey }}');
            window.ccrmapInstance.initializeMap();
        });
        "
    x-load-js="[@js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('gmap-location'))]"
    style="height: 600px; width: 400px;"
>
    <div x-ref="map" style="height: 100%; width: 100%;"></div>
</div>

x-load-js pulls the code from the AppManager registered as load when needed.