0

I've setup a Flask server with a simple form. I'd like to add a map so that users can select by region. I found JQVMap and have been trying to get this example to work with Flask.

I downloaded the dist directory.
Stuck it in my static Flask directory.
And have used the code below.

Using this html to do a referential import:

<link href="{{ url_for('static', filename='dist/jqvmap.css') }}" media="screen" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<script type="text/javascript" src="{{ url_for('static', filename='dist/jquery.vmap.js') }}"></script>

<script type="text/javascript" src="{{ url_for('static', filename='dist/maps/jquery.vmap.usa.counties.js') }}"
    charset="utf-8"></script>

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery('#vmap').vectorMap({
            map: 'usa_counties_en',
            enableZoom: true,
            showTooltip: true,
            hoverColor: '#C9DFAF',
            onRegionClick: function (event, code, region) {
                event.preventDefault();
            }
        });
    });
</script>

This is the python driving it:

@app.route('/map/', methods=['GET', 'POST'])
def mapLoc():
    return render_template('map.html')

Connecting to the page gives me html codes 200 or 304 on all of the file fetches.
The webpage doesn't render anything.
The console throws an error:
"TypeError: jQuery(...).vectorMap is not a function"

C1ARK
  • 1

1 Answers1

0

I am unable to reproduce the "TypeError: jQuery(...).vectorMap is not a function" nor the 200/304 HTTP response codes. (make sure you're using the correct path in your script tags?). However, nothing is rendered because your template does not include the lines

<body>
  <div id="vmap" style="width: 900px; height: 600px;"></div>
</body>

This indicates where the jqvmap should be rendered.

bweber13
  • 360
  • 4
  • 13