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>

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]))
                image: new{
                    radius: 12,
                    stroke: new{
                        color: '#ffffff',
                        width: 3,
                    fill: new{
                        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: '',
                            tileSize: 512,
                            crossOrigin: 'anonymous',
                            attributions: [],
                view: map_view
            map.on('click', function(evt){
                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);
                window.marker_need_save = true;

        $(document).ready(function () {
                rowHeight: 100

Outside of the editor, or just by removing its id, the map works fine.
The problem comes when it is inside the

<div id="customForm">

Thanks for the help


  • 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:  ""

    The problem is that as I see in the information of the supported data types,
    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


    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.


  • 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.