Problem trying to embed a map in a custom Datatable editor

Problem trying to embed a map in a custom Datatable editor

jalapejalape Posts: 114Questions: 1Answers: 1

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

Replies

  • jalapejalape Posts: 114Questions: 1Answers: 1

    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>
    
  • allanallan Posts: 54,900Questions: 1Answers: 8,605 Site admin

    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

  • jalapejalape Posts: 114Questions: 1Answers: 1

    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.

Sign In or Register to comment.