Problem trying to embed a map in a custom Datatable editor

jalape

Good morning to all,
I have a problem trying to embed a map in a custom Datatable editor. I have created a form and apply the template property: '#customForm' The map is built with the object:

            <div id="map_marker" class="map_marker"></div>
            <div class="mt-2 text-center " style="width: 100%;">
                Latitude: <b><span id="lat">0</span></b> -
                Longitude: <b><span id="lon">0</span></b><br>
                <i>click on map to change marker's position</i>
            </div>

And the javascript function:

    (function($) {
        var marker_pos, map_view, map;

        window.id_marker = 0;
        window.lon_marker = '0';
        window.lat_marker = '0';
   

        // Para ADD MARKER
        window.initialize_map_marker = function (lon,lat) {
            marker_pos = new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.fromLonLat([lon,lat]))
            });
            marker_pos.setStyle(new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 12,
                    stroke: new ol.style.Stroke({
                        color: '#ffffff',
                        width: 3,
                    }),
                    fill: new ol.style.Fill({
                        color: '#f44336',
                        weight: 1
                    })
                })
            }));
            var vectorSource = new ol.source.Vector({
                features: [marker_pos]
            });

            var vectorLayer = new ol.layer.Vector({
                source: vectorSource
            });

            if(lat=='0') {
                var zoom = 1;
            } else {
                var zoom = 16;
            }

            map_view = new ol.View({
                center: ol.proj.fromLonLat([lon,lat]),
                zoom: zoom
            });
            map = new ol.Map({
                target: 'map_marker',
                controls : ol.control.defaults({
                    attribution : false,
                    zoom : false,
                }),
                layers: [
                    new ol.layer.Tile({
                        preload: Infinity,
                        source: new ol.source.TileJSON({
                            url: 'https://api.maptiler.com/maps/basic/tiles.json?key=OVZjfS5pSwpIb54ikvLw',
                            tileSize: 512,
                            crossOrigin: 'anonymous',
                            attributions: [],
                        })
                    })
                ,vectorLayer],
                view: map_view
            });
            map.on('click', function(evt){
                marker_pos.getGeometry().setCoordinates(evt.coordinate);
                var lat_lon = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
                window.lon_marker = parseFloat(lat_lon[0]).toFixed(6);
                window.lat_marker = parseFloat(lat_lon[1]).toFixed(6);
                $('#lon').html(window.lon_marker);
                $('#lat').html(window.lat_marker);
                $('#longitude_edit').val(window.lon_marker);
                $('#latitude_edit').val(window.lat_marker);
                window.marker_need_save = true;
            });
        };

        $(document).ready(function () {
            initialize_map_marker(window.lon_marker,window.lat_marker);
            $("#image_gallery").justifiedGallery({
                rowHeight: 100
            });
        });
    })(jQuery);

Outside of the editor, or just by removing its id, the map works fine. https://javierlasen.es/mapa/login/Admin/Marker/
The problem comes when it is inside the

<div id="customForm">

Thanks for the help

jalape

I think I have found where the problem is, I just need to know how to fix it.
The id of the fields of the Datatable editor, must be put in the fields-array of the Editor function. Example:

            {
                id: "latitude_edit",
                label: "Latitud:",
                name:  "sml_markers.lat"
            },

The problem is that as I see in the information of the supported data types https://editor.datatables.net/reference/field/,
Unable to have a field from a container div:

<div id= "map_marker" class="map_marker"></div>

allan

Hi,

The way to do this is actually with a field type plug-in.

You probably could do what you are looking for - don't include your div in your custom template to start with, append it to the Editor form when the displayOrder event is triggered.

However, I would very much recommend making it into a proper field type plug-in (this example might help you get started), so it has full integration with Editor.

If you have any questions about that, let me know.

Allan

jalape

Thank you very much for answering Allan,
In the end, the solution was simple: it was necessary to enclose the entire Datatable and Datatable Editor function within:

$(document).ready(function() {}

Now it works and has given me the opportunity to explore more about Editor customization. Congratulations on the job and thank you.