Plotting a map(poly-shaped) area dynamically?

Question

I am trying to implement a Lightning component/VF page that could render a shape/layer on a Map(may be a Google Map) after successfully capturing the plotting.

Initially the end user submits a record that contains Geolocation (longitude and latitude) field. When he opens the created record, I would like to show a map(on a record detail section) which maps that coordinate on a map. Then I want the user to plot an area around the coordinates to extract the area that owns by the user. After he clicks on Save, I would like to store all the plotted coordinates and save it as a shape(or however feasible).

From here-on, whenever the user opens the record, the map should render the above extracted shape on the map section.

I am not sure how I can achieve this feature. If any ideas on what/how to use Salesforce's out-of-box functionalities and other integrations, that would be much appreciated.

My findings:

1. https://releasenotes.docs.salesforce.com/en-us/winter18/release-notes/rn_field_service_package_polygons.htm (this could be FSL, which I am not intended to do, but looking for something similar)
2. https://developers.google.com/maps/documentation/javascript/examples/polyline-complex
3. https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_maps_example.htm

NOTE: I am not asking for someone to build or provide me with any code source. I am looking for ideas and thoughts around this implementation.

Answer 1

I don't think this can natively be done in Salesforce lightning , but I can come up with an idea to achieve it.

lightning:container introduced few release back can help you use apps that minipulate dom directly like Google Maps API, Angular , JS etc without having to worry about Locker services.

Upload an app developed with a third-party framework as a static resource, and host the content in a Lightning component using lightning:container. Use lightning:container to use third-party frameworks like AngularJS or React within your Lightning pages.

You can pass messages and attributes from Lightninng component to the container using the messaging framework

 <lightning:container aura:id="ReactApp"
                             src="{!$Resource.SendReceiveMessages + '/index.html'}"
                             onmessage="{!c.handleMessage}"
                             onerror="{!c.handleError}"/>

Send Messaging JS:

({    
    sendMessage : function(component, event, helper) {

        var msg = {
            name: "General",
            value: component.get("v.messageToSend")
        };
        component.find("ReactApp").message(msg);
    },

    handleMessage: function(component, message, helper) {
        var payload = message.getParams().payload;
        var name = payload.name;
        if (name === "General") {
            var value = payload.value;
            component.set("v.messageReceived", value);
        }
        else if (name === "Foo") {
            // A different response
        }
    },

    handleError: function(component, error, helper) {
        var e = error;
    }
})

I dont know how Google Maps API work but after plotting you can sent a message to the container listner which can be listened by your component and submit to apex/database if needed.

Src : https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/container_overview.htm