0

For my final project, I am creating a flask web mapping application, which with user input displays different things on a map.

At the moment, when they input a place name via a form, my python geocodes this and displays a marker on the map.

@app.route("/geocode", methods=["GET", "POST"])
def geocode():
    if request.method == "POST":

        # geocoding function not displayed as its quite long
      
        return render_template('index.html',apikey=api_key,latitude=latitude,longitude=longitude,geocode=geocode)

    else:
        return render_template('index.html')

index.html runs this Javascript to display the map - using the latitude and longitude passed from "/geocode".

    var lat = {{latitude}}     // 53.483837
    var long = {{longitude}}     // -2.225899

    // map function not displayed as it is long

    // Add the marker to the map:
    map.addObject(marker);

After this, the user submits another form, run another flask route called "/chargepoints", returning a python list of points within a certain distance.

Now I want to repeat the same javascript map function, but this time adding extra Javascript to add a number of points to the map.

  // ADD THE CHARGEPOINTS TO THE MAP
    var coords = {{radius_coordinates}};

However when I do this, the map doesn't load, and when I use the Web Inspector, my coordinates look like this

 var coords = [['53.792614', '-1.789202'], ['53.792561', '-1.789223'], ['53.770554', '-1.751224'], ['53.712614', '-1.746287']

And I get the error - Uncaught SyntaxError: expected expression, got '&'

2
  • Does the page reload on submission? – Vsjain Mar 4 at 13:57
  • Yes it reloads, but at the moment the map stays the same, I am unsure on how to add the chargepoints to the map on submission. – Stuey17 Mar 4 at 15:41
0

There are two possible methods to tackle this problem. The first method is to use a marker. Make a new variable, and if it has a specified value, the chargepoints route has been used. A second method is to turn chargepoints into an API route and use a fetch request of POST method to submit the form. The response will contain the coordinates which you can then add to the map. I would highly recommend using the first method, as it is simple to understand and implement.

Hope this helps. If it does then please check the tickmark.

2
  • Thanks for this! I chose to use the marker method, however I have a new problem! I've edited the post :) – Stuey17 Mar 8 at 17:40
  • If you have a new problem, you should start a new question, not edit your original one. Each question can only have one answer and it will be far less confusing to keep separate issues separate. – Robert S. Pratt Mar 8 at 19:57

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .