the leaftlet map not reload new coordinate on modal

Question

I created an application that will display some data in a table, in the table there is a button to display the details of the data on that row that is displayed using modal_bootstrap. following picture from table view with modal button in each row: The following is a picture of the modal_bootstrap view: on modal_bootstrap I display a map in tab

the problem is every time I close the modal and try to open modal on other data, a leaflet map on modal_bootstrap still displays the previous map, which should bring up map coordinates according to the data row opened

this is my code in view

    <script type="text/javascript">
        var lat;
        var lon;
        var base_url = '<?php echo base_url();?>';

        $(document).ready(function() {
            $('#rj-table').DataTable({
                "ajax": {
                    url : "<?php echo site_url("main/rj_page") ?>",
                    type : 'GET'
                },
            });
        });

function view_detail(id){
        //Ajax Load data from ajax
        $.ajax({
            url : "<?php echo site_url('main/ajax_view')?>/" + id,
            type: "GET",
            dataType: "JSON",
            success: function(data){
                $('#modal_form').modal('show'); // show bootstrap modal when complete loaded
                show_tab();
                lat = data.latitude;
                lon = data.longitude;
                $('#idrj').html(data.idrumahjaga);
                $('#di').html(data.namaDI);
                $('#jupeng').html(data.namaJP);
                $('#nmrj').html(data.namarumahjaga);
                //$('#petugas').html(lng);
                $('#kec').html(data.kecamatan);
                $('#des').html(data.desa);
                $('#dus').html(data.dusun);
                $('#thp').html(data.tahunpembuatan);
                $('#thr').html(data.th_akhir_renov);

                $('#photo-preview').show(); // show photo preview modal
                if(data.photo){
                    $('#label-photo').text('Change Photo'); // label photo upload
                    $('#tes').html('<img src="'+base_url+'assets/img/'+data.photo+'" class="img-responsive">'); // show photo
                }
                else{
                    $('#label-photo').text('Upload Photo'); // label photo upload
                    $('#photo-preview div').text('(No photo)');
                }
                show_map(lat, lon);
            },
            error: function (jqXHR, textStatus, errorThrown){
                alert('Error get data from ajax');
            }
        });
    }
    function show_map(lat, lon){
        //---map------
        var mymap = new L.map('mapid');
        $('#myTab').on('shown.bs.tab', function (e){
            mymap.invalidateSize();
        });
        mymap.setView([lat, lon], 13);
        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoicmlndW4iLCJhIjoiY2pydzY4ZjYxMDhwZzQ0bTFnbXdldGE2NyJ9.5GY9VdDlGJwr1FUWveAqpA', {
            maxZoom: 18,
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' + '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            id: 'mapbox.streets'
        }).addTo(mymap);
        L.marker([lat, lon]).addTo(mymap);
        var popup = L.popup();
        function onMapClick(e) {
            popup
            .setLatLng(e.latlng)
            .setContent("You clicked the map at " + e.latlng.toString())
            .openOn(mymap);
        }
        mymap.on('click', onMapClick);
        //---------script map--------
    }
    //---- tab on modal----
    function show_tab(){
        $('#myTab a').click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        });
        $(function () {
            $('#myTab a:first').tab('show');
        });
    }
    //---- end tab on modal----
</script>

I think it's correct because I've tried to check the coordinate value of each data by showing it in modal and the result is that each row of data has different coordinates — adjieq, Feb 15 '19 at 06:07
Looks like you every time add a new map to container, so check is you got an exception "Map already initialized"? — Vasyl Moskalov, Feb 15 '19 at 06:37

score 1 · Answer 1 · answered Feb 15 '19 at 06:42

1

I have got the answer here

the solution is:

<div id="pre_map"></div>

and in the ajax success function :

document.getElementById('pre_map').innerHTML = "<div id='mapid' style='width: relative; height: 500px;'></div>";

answered Feb 15 '19 at 06:42

adjieq

99
1
11

the leaftlet map not reload new coordinate on modal

1 Answers1