1

I'm using DOM to create a custom Leaflet control that opens a bootstrap modal with a form. There are two DOM created buttons on the left the of the map. Each button should be linked to their own modal that contains their own custom form. I'm having an issue where both buttons it will open the same modal. Then when clicked again both modals will open at the same time. I can't seem to figure out what is going on. I have changed modal ID's and everything that pertains to them. The way the buttons are working is like they both have a common function that is calling them same modal but for some reason firing the second modal.

Can someone please take a look at the code?

Working DEMO: http://198.71.58.116:85/hurleyforms/pecomap/wfs.html

Code for the first modal

L.MarkerControl = L.Control.extend({

    options: {
        position: 'topleft',
        url: 'http://echostorm.mynetgear.com:8080/geoserver/usa/ows',
        userName: 'wfspost',
        password: 'createfeature'
    },

    map: null,
    marker: null,
    binded: false,


    onAdd: function (map) {

        this.map = map;

        var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar leaflet-toggle'),
            // link = L.DomUtil.create('a', 'glyphicon glyphicon-map-marker', container);
            link = L.DomUtil.create('a', 'glyphicon glyphicon-eye-open', container);

        link.href = '#';
        link.title = 'Create a new visual report';

        link.innerHTML = '';
        L.DomEvent.on(link, 'click', L.DomEvent.stop)
                  .on(link, 'click', L.bind(this.startCreating, this));

        map.on("editable:drawing:commit", L.bind(this.onMarkerAdd, this));                    

        return container;
    },

    startCreating: function() {
        this.marker = this.map.editTools.startMarker();     
    },

    onMarkerAdd: function(e) {
        this.nearestFeature = null;
        this.findNearestPoints(e.layer.getLatLng());
    },

    onFormClosed: function() {
        if (this.marker!=null) {
            this.map.editTools.featuresLayer.removeLayer(this.marker);
            this.marker = null;
        }
    },

    findNearestPoints: function(latlng) {

         var defaultParameters = {
            service: 'WFS',
            version: '1.0.0',
            request: 'GetFeature',
            typeName: 'usa:within5mi',
            maxFeatures: 5,
            outputFormat: 'text/javascript', 
            format_options: 'callback: nearestPoints',
            srsName: 'EPSG:4326',
            viewparams: 'radius:802;lon:'+latlng.lng+';lat:'+latlng.lat,

        };

        var parameters = L.Util.extend(defaultParameters);

        $.ajax({
            jsonp: false,
            url: this.options.url + L.Util.getParamString(parameters),
            dataType: 'jsonp',
            jsonpCallback: 'nearestPoints',
            success: L.bind(this.handleNearestPoints, this)
        });         
    },


    handleNearestPoints: function(data) {           
        this.clearModal();
        this.setModalDate();

        if (data && data.type=="FeatureCollection"
            && data.features && data.features.length
            && data.features.length > 0) {
            this.fillModal(data.features[0]);
        }

        this.openPopup();
    },

    formatDate: function(date) {
        var day = date.getDate();
        return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+(day < 10 ?     
       "0"+day : day);
    },

    clearModal: function() {
        $('#eventDataModal').find('input').each(
            function() {
                $(this).val("");
            }
        );

        $('#eventDataModal').find('textarea').each(
            function() {
                $(this).val("");
            }
        );
    },

    setModalDate: function() {
        $("#form-patrolDate").val(this.formatDate(new Date()));
    },

    fillModal: function(feature) {
        var props = feature.properties;

        $("#form-region").val(props["Region"]);
        $("#form-circuitID").val(props["Circuit_ID"]);
        $("#form-circuitName").val(props["Circuit_Name"]);
        $("#form-vendor").val(props["Vendor"]);
        $("#form-quad").val(props["Quad"]);

    },

    openPopup: function() {
        this.bindEvents();
        $('#eventDataModal').modal('toggle');
    },

    bindEvents: function() {
        if (!this.binded) {
            $('#eventDataModal').on('hidden.bs.modal',                        
            L.bind(this.onFormClosed, this));
            $("#saveEventDataModal").on('click', L.bind(this.onSave, this))
            this.binded = true;
        }
    },

    onSave: function() {
        var properties = this.getFormData(),
            request = this.wfsBody("usa", "usa:pecotest", "geom",                    
            properties);
            console.log(request);
            this.makeRequest(request);          
    },

    makeRequest: function(body) {

        $.ajax({
            method: "POST",
            crossDomain: true,
            url: this.options.url,
            contentType: "text/xml",
            dataType: "text",
            data: body,
            headers: {
                "Authorization": "Basic " + btoa(this.options.userName + ":"    
                + this.options.password)
            },
            jsonpCallback: 'datasave',
            success: L.bind(this.onDataSave, this),
            failure: function(r){console.log("AJAX                                   
            Failure!");console.log(r);}
        });                 
    },

    onDataSave: function(data) {
        console.log(data);
    },

    getFormData: function() {
        var result = {};

        $('#eventDataModal').find('input').each(
            function() {
                if (this.type=="checkbox") {
                    result[this.name] = this.checked ? "Yes" : "No";    
                } else {
                    result[this.name]=$(this).val();
                }
            }
        );

        $('#eventDataModal').find('textarea').each(
            function() {
                result[this.name]=$(this).val();
            }
        );

        return result;
    },

    wfsBody: function(namesapce, typeName, geometryField, properties) {
        var xml;
        xml ='<wfs:Transaction service="WFS" version="1.0.0"';
        xml += ' xmlns:wfs="http://www.opengis.net/wfs"';
        xml += ' xmlns:usa="http://census.gov"';
        xml += ' xmlns:gml="http://www.opengis.net/gml">\n';
        xml += '   <wfs:Insert>\n';
        xml += '      <'+typeName+'>\n';
        xml += '        <usa:'+geometryField+'>\n';
        xml += this.marker.toGML()+"\n";
        xml += '        </usa:'+geometryField+'>\n';

        for (var k in properties) {
            if (properties.hasOwnProperty(k)) {
                xml += "<"+namesapce+":"+k+">";
                xml += properties[k];
                xml += "</"+namesapce+":"+k+">\n";
            }
        }

        xml += '      </'+typeName+'>\n';
        xml += '   </wfs:Insert>\n';
        xml += '</wfs:Transaction>\n';

        return xml;
    }

});

L.Marker.include({
    toGML: function(){
    var latlng = this.getLatLng(),
        xml;

    xml = '<gml:Point srsName="EPSG:4326"><gml:coordinates cs=","                   
    decimal="." ts=" ">';
    xml += latlng.lng + ',' + latlng.lat;
    xml += '</gml:coordinates></gml:Point>';

    return xml;
 }
});

Code for the second modal

L.MarkerControlB = L.Control.extend({

    options: {
        position: 'topleft',
        url: 'http://echostorm.mynetgear.com:8080/geoserver/usa/ows',
        userName: 'wfspost',
        password: 'createfeature'
    },

    map: null,
    marker: null,
    binded: false,


    onAdd: function (map) {

        this.map = map;

        var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar   
        leaflet-toggle'),
            // link = L.DomUtil.create('a', 'glyphicon glyphicon-map-          
               marker', container);
            link = L.DomUtil.create('a', 'glyphicon glyphicon-fire',               
               container);

        link.href = '#';
        link.title = 'Create a new thermal report';

        link.innerHTML = '';
        L.DomEvent.on(link, 'click', L.DomEvent.stop)
                  .on(link, 'click', L.bind(this.startCreating, this));

        map.on("editable:drawing:commit", L.bind(this.onMarkerAdd, this));                    

        return container;
    },

    startCreating: function() {
        this.marker = this.map.editTools.startMarker();     
    },

    onMarkerAdd: function(e) {
        this.nearestFeature = null;
        this.findNearestPoints(e.layer.getLatLng());
    },

    onFormClosed: function() {
        if (this.marker!=null) {
            this.map.editTools.featuresLayer.removeLayer(this.marker);
            this.marker = null;
        }
    },

    findNearestPoints: function(latlng) {

         var defaultParameters = {
            service: 'WFS',
            version: '1.0.0',
            request: 'GetFeature',
            typeName: 'usa:within5mi',
            maxFeatures: 5,
            outputFormat: 'text/javascript', 
            format_options: 'callback: nearestPoints',
            srsName: 'EPSG:4326',
            viewparams: 'radius:802;lon:'+latlng.lng+';lat:'+latlng.lat,

        };

        var parameters = L.Util.extend(defaultParameters);

        $.ajax({
            jsonp: false,
            url: this.options.url + L.Util.getParamString(parameters),
            dataType: 'jsonp',
            jsonpCallback: 'nearestPoints',
            success: L.bind(this.handleNearestPoints, this)
        });         
    },


    handleNearestPoints: function(data) {           
        this.clearModal();
        this.setModalDate();

        if (data && data.type=="FeatureCollection"
            && data.features && data.features.length
            && data.features.length > 0) {
            this.fillModal(data.features[0]);
        }

        this.openPopup();
    },

    formatDate: function(date) {
        var day = date.getDate();
        return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+(day < 10 ?        
        "0"+day : day);
    },

    clearModal: function() {
        $('#eventDataModalB').find('input').each(
            function() {
                $(this).val("");
            }
        );

        $('#eventDataModalB').find('textarea').each(
            function() {
                $(this).val("");
            }
        );
    },

    setModalDate: function() {
        $("#form-patrolDateB").val(this.formatDate(new Date()));
    },

    fillModal: function(feature) {
        var props = feature.properties;

        $("#form-regionB").val(props["Region"]);
        $("#form-circuitIDB").val(props["Circuit_ID"]);
        $("#form-circuitNameB").val(props["Circuit_Name"]);
        $("#form-vendorB").val(props["Vendor"]);
        $("#form-quadB").val(props["Quad"]);

    },

    openPopup: function() {
        this.bindEvents();
        $('#eventDataModalB').modal('toggle');
    },

    bindEvents: function() {
        if (!this.binded) {
            $('#eventDataModalB').on('hidden.bs.modal',                         
            L.bind(this.onFormClosed, this));
            $("#saveEventDataModalB").on('click', L.bind(this.onSave, this))
            this.binded = true;
        }
    },

    onSave: function() {
        var properties = this.getFormData(),
            request = this.wfsBody("usa", "usa:pecotest", "geom",                
            properties);
            console.log(request);
            this.makeRequest(request);          
    },

    makeRequest: function(body) {

        $.ajax({
            method: "POST",
            crossDomain: true,
            url: this.options.url,
            contentType: "text/xml",
            dataType: "text",
            data: body,
            headers: {
                "Authorization": "Basic " + btoa(this.options.userName + ":"    
                + this.options.password)
            },
            jsonpCallback: 'datasave',
            success: L.bind(this.onDataSave, this),
            failure: function(r){console.log("AJAX                                
            Failure!");console.log(r);}
        });                 
    },

    onDataSave: function(data) {
        console.log(data);
    },

    getFormData: function() {
        var result = {};

        $('#eventDataModalB').find('input').each(
            function() {
                if (this.type=="checkbox") {
                    result[this.name] = this.checked ? "Yes" : "No";    
                } else {
                    result[this.name]=$(this).val();
                }
            }
        );

        $('#eventDataModalB').find('textarea').each(
            function() {
                result[this.name]=$(this).val();
            }
        );

        return result;
    },

    wfsBody: function(namesapce, typeName, geometryField, properties) {
        var xml;
        xml ='<wfs:Transaction service="WFS" version="1.0.0"';
        xml += ' xmlns:wfs="http://www.opengis.net/wfs"';
        xml += ' xmlns:usa="http://census.gov"';
        xml += ' xmlns:gml="http://www.opengis.net/gml">\n';
        xml += '   <wfs:Insert>\n';
        xml += '      <'+typeName+'>\n';
        xml += '        <usa:'+geometryField+'>\n';
        xml += this.marker.toGML()+"\n";
        xml += '        </usa:'+geometryField+'>\n';

        for (var k in properties) {
            if (properties.hasOwnProperty(k)) {
                xml += "<"+namesapce+":"+k+">";
                xml += properties[k];
                xml += "</"+namesapce+":"+k+">\n";
            }
        }

        xml += '      </'+typeName+'>\n';
        xml += '   </wfs:Insert>\n';
        xml += '</wfs:Transaction>\n';

        return xml;
    }

});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.