Longitude Latitude on Flask WTF Forms

Viewed 1009

I am trying to get the Flask WTF form to read longitude and latitude, but I can't find the proper form field for it. I found some examples where FloatField is used successfully, but the example are really old and I presume there have been changes in the WTF forms.

Here is the Form class I am using:

class GetFieldForm(Form):
    field_name = StringField(Designation')
    field_latitude = FloatField(u'Latitude', default=-30, validators=[InputRequired()], description='48.182601')
    field_longitude = FloatField(u'Longitude', default=150,
                                 validators=[InputRequired()], description='11.304939')
    submit = SubmitField(u'Signup')

Passing the values from the form to the Google Maps:

@frontend.route('/demo')
def demo():
        field_form = GetFieldForm()
        if field_form.validate_on_submit():
            flash('Hello, {}. You have successfully signed up'
                  .format(escape(field_form.name.data)))

            field_latitude = field_form.field_latitude.data
            field_longitude = field_form.field_longitude.data
            mymap = Map(
                identifier="view-side",
                lat=field_latitude,
                lng=field_longitude,
                zoom=18,
                style="height:720px;width:720px;margin:0;",  # hardcoded!
                markers=[(field_latitude, field_longitude)],
                maptype='SATELLITE'
            )

            return render_template('demo.html', mymap=mymap, field_form=field_form)

With the following Jinja2 template:

<div class="container-fluid">

            <div class="row-fluid">

                <div id="map" class="col-md-7">
                    {{mymap.html}}
                </div>

               <div class="col-md-5">
                   <div class="panel panel-default">
                <!-- Panel Title -->
                <div class="panel-heading">
                    <h2 class="panel-title text-center">Locate Your Field  <span class="glyphicon glyphicon-map-marker"></span></h2>

                 <div class="panel-body">
                 {% if request.args.get('legacy') -%}
                   {{wtf.quick_form(field_form, novalidate=True)}}
                 {%- else -%}
                   {{field_form|render_form()}}
                 {%- endif %}
                     </div>
               </div>
            </div>
        </div>

The problem is, that the form doesn't allow me to pass longitude and latitude as floats: enter image description here

Versions I am using:

Flask 0.12

Flask-WTF 0.14.2

Flask-GoogleMaps https://github.com/rochacbruno/Flask-GoogleMaps

EDIT: Got a hint that I the error may have something to do with FLASK-Bootstrap>

The problem is Flask-Bootstrap, that you seem to be using. https://github.com/mbr/flask-bootstrap/blob/master/flask_bootstrap/forms.py#L97-L99 It overrides the float type to use "number" as input type, which is not quite right there, since "number" in html5 is limited to integers if the step argument is not provided. So you have to set the step attribute on your input field, though I don't know how to do that with Flask-Bootstrap. Preferably something like step="0.000001" should suffice.

But how would I pass the step parameter is beyond me...

1 Answers
Related