how to use Custom Forms and add layer, ... to map widget?

[pyTechLife]

hi
how can create a Custom Forms ? i read the doc but can't figure out how is that works!
my forms :

class MyMapWidget(LeafletWidget):
    geometry_field_class = 'locationofuser'

class NewreportForm(forms.ModelForm):
    class Meta:
        model = Reports
        fields = ('name', 'locationofuser',
                  )
        widgets = {'locationofuser': MyMapWidget(),     
                   }

template :

    <div class="col-md-12 mb-3">
      <h6 class="card-header text-right bg-dark text-light">location</h6>
        {{ form.locationofuser }}
<script type="text/javascript">
locationofuser = L.GeometryField.extend({
    addTo: function (map) {
        L.GeometryField.prototype.addTo.call(this, map);
// start
        L.geoJSON(json__2, {
            style: function (feature) {
                return feature.properties && feature.properties.style;
            },
            onEachFeature: onEachFeature,
            pointToLayer: function (feature, latlng) {
                return L.circleMarker(latlng, {
                    radius: 8,
                    fillColor: "#ff7800",
                    color: "#000",
                    weight: 1,
                    opacity: 1,
                    fillOpacity: 0.8
                });
            }
        }).addTo(map);

        var filecontrol = map.filecontrol = L.Control.fileLayerLoad();
        map.addControl(filecontrol);
    }
});
</script>

[Gagaro]

Try adding the form media:

{{ form.media }}

CF https://docs.djangoproject.com/en/3.0/topics/forms/media/#media-on-forms