Custom DRF browsable API interface for InBBoxFilter of django-rest-framework-gis

from rest_framework_gis.filters import InBBoxFilter
from django_filters.rest_framework import DjangoFilterBackend


class InBBoxHTMLMixin:
    template = """
    {% load i18n %}
    <style type="text/css">
    #geofilter input[type="text"]{
        width: 100px;
    }
    </style>
    <h2>{% trans "BBox filter" %}</h2>
    <form id="geofilter" action="" method="get">
        <p>
            <input type="text" id="gf-lat1" placeholder="min lat">
            <input type="text" id="gf-lon1" placeholder="min lon">
        </p>
        <p>
            <input type="text" id="gf-lat2" placeholder="max lat">
            <input type="text" id="gf-lon2" placeholder="max lon">
        </p>
        <input id="gf-result" type="hidden" name="{{bbox_param}}">
        <button type="submit" class="btn btn-primary">{% trans "Submit" %}
        </button>
    </form>
    <script language="JavaScript">
    (function() {
        document.getElementById("geofilter").onsubmit = function(){
            var result = document.getElementById("gf-result");
            var box = [
                document.getElementById("gf-lat1").value,
                document.getElementById("gf-lon1").value,
                document.getElementById("gf-lat2").value,
                document.getElementById("gf-lon2").value
            ];
            if(!box.every(function(i){ return i.length }))
                return false;
            result.value = box.join(",");
        }
    })();
    </script>
    """

    def to_html(self, request, queryset, view):
        return template_render(
            Template(self.template), {'bbox_param': self.bbox_param}, request
        )


class CustomBBoxFilter(InBBoxHTMLMixin, InBBoxFilter):
    bbox_param = 'position_bbox'

class CustomViewSet(ModelViewSet):
    filter_backends = (CustomBBoxFilter, DjangoFilterBackend,)