Search code examples
leafletxsltforms

Leaflet freezes on zoom when it's in an XSLTForms XML file


I'm working with XSLTForms and I need to add a Leaflet map. But something with that library doesn't work. I have the following code in a .xml file (as each xform I have) but when I zoom the map (by double click or click in the zoom button) it freezes.

The _zoomIn: function is still triggered when freezed but it doesn't make the expected visual changes.

This is the simple xforms example:

<?xml-stylesheet href="xsltforms/xsltforms.xsl" type="text/xsl"?>
<?xsltforms-options debug="no" lang="en"?>

<html   xmlns="http://www.w3.org/1999/xhtml" 
        xmlns:xf="http://www.w3.org/2002/xforms"
        xmlns:ev="http://www.w3.org/2001/xml-events">
    <head>
        <link type="text/css" rel="stylesheet" href="res/leaflet-0.8-dev/leaflet.css"/> 
        <link type="text/css" rel="stylesheet" href="res/style.css"/>
        <script type="text/javascript" src="res/jquery-ui/jquery-1.11.2.min.js"></script>
        <script type="text/javascript" src="res/leaflet-0.8-dev/leaflet.js"></script>

        <script type="text/javascript">
            function showOutdoorMap(id){
                var map = L.map(id);
                L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
                    id: 'examples.map-i875mjb7'
                }).addTo(map);
                map.locate({setView: true});
            }
        </script>
    </head>
    <body onload="showOutdoorMap('map')">
        <fieldset>
            <label class="header">Demo:</label>
            <div id="map" style='width:100%; height:250px;'/>
        </fieldset>
    </body>
</html>

Solution

  • The solution was comment a line in the setView: function (center, zoom, options), allowing the _resetView method to refresh:

    if (animated) {
        clearTimeout(this._sizeTimer);
        /*return this;*/
    }
    

    I also had to comment this line in order to drag and drop with no problems:

    /*if (L.DomUtil.hasClass(this._element, 'leaflet-zoom-anim')) { return; }*/