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"
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
This indicates where the jqvmap should be rendered.