I have markers in a list, I am trying to read markers in the list from my database to show pop up information but it's not working. I am using jinja to print the list from python into html, i just get an internal server error message. I am using oracle and cgi-bin
var markers= L.markerClusterGroup({
});
{% for item in markers %}
var marker{{ item[0] }} = L.marker({{ item[3:] }});
var popup{{ item[0] }} = $('<div />');
popup{{ item[0] }}.html("<br>{{ item[1] }}<br>£{{ item[2] }<br<button>Run to this place</button>");
markers.addLayer(marker{{ item[0] }}.bindPopup(popup{{ item[0] }}[0]));
map.addLayer(markers)
{% endfor %}
Related
I've used the 11ty/eleventy-base-blog template and have things working well - but I am trying to display the tags nicely within my post.njk file.
At the top of my post (.md) file I have this:
tags: ['Tag 1', 'Tag 2']
Within _includes/layouts/postslist.njk I'm using the following code:
{% for tag in post.data.tags %}
{%- if collections.tagList.indexOf(tag) != -1 -%}
{% set tagUrl %}/tags/{{ tag }}/{% endset %}
<span class="tag">{{ tag }}</span>
{%- endif -%}
{% endfor %}
This template is then used in the index.njk file (my homepage) using this code:
{% set postslist = collections.posts | head(-3) %}
{% set postslistCounter = collections.posts | length %}
{% include "postslist.njk" %}
The output of this is:
<span class="tag">Tag 1</span>
<span class="tag">Tag 2</span>
However, if I use {{ tags }} in my post.njk file I get the following output:
posts,Tag 1,Tag 2
I have also tried using the same code from the 'postslist.njk' file and putting it in my 'post.njk' file but that doesn't work.
How can I display the tags on my post in separated 'span' tags and also remove the 'posts' tag?
If you want me to open up my git repo then let me know.
Thanks!
Why is the posts tag in your tags?
In the starter template you're using (11ty/eleventy-base-blog), the posts/ directory includes a directory data file (posts.json), which gets applied too all files in that directory – i.e. to all posts. Since the .eleventy.js config file uses the Data Deep Merge option, the tags you set in each post get merged with the posts tag. This is why the tags of your post are ['posts', 'Tag 1', 'Tag 2'].
You can solve this in multiple ways. Either use two different frontmatter fields for collection and display purposes, or just filter out the posts tag when displaying the tags of a post.
How to output a list of tags?
If you just do {{ tags }}, you're telling Nunjucks to output an array, so it has to figure out how to convert an array to a string. Apparently, the default behaviour in this case is to simply join them with commas. You can make this more explicit (and include a space after the comma while you're at it):
{{ posts | join(', ') }}
Or, if you want to wrap the items in HTML tags, you can use a loop, optionally with a joiner:
{% set comma = joiner() %}
{% for tag in tags -%}
{% if tag !== 'posts' %}
{{ comma() }} <span class="tag">{{ tag }}</span>
{% endif %}
{%- endfor %}
It works in ![django default admin site form] (https://imgur.com/IxwVldn) but not on .
i tried passing attributes on leafletwidget, load leaflet_tags . it's not working or as i am new, could't use them properly.
create.html
{% extends 'index.html' %}
{% load leaflet_tags %}
{% leaflet_js plugins="forms" %}
{% leaflet_css plugins="forms" %}
{% load static %}
{% block content %}
<form method="POST"> {% csrf_token %}
{{ form.as_p }}
<button type="submit" value="Save">Save</button>
</form>
{% endblock %}
view.py
class AdminForm(forms.ModelForm):
class Meta:
model = Outlet
fields = ['display_name', 'location']
widgets = {'location': LeafletWidget()}
models.py
location = geomodel.PointField()
want to load map on my create form
Leaflet has a greate documentation / Quick Start Guide at:
https://leafletjs.com/examples/quick-start/
or simply build upon this *.html snippet (it uses the openstreetmap tile server instead of the MapBox tile server):
{% extends 'index.html' %}
{% block content %}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<div id="mapid" class="w-100 h-100">
<script>
var zoom = 10
var lat = 51.11
var lon = 9.85
var mymap = L.map('mapid').setView([ lat, lon, {{world_border.lon}}], zoom);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap',
//maxZoom: 15,
subdomains: ['a','b','c']
}).addTo(mymap);
var marker = L.marker([ lat, lon ]).addTo(mymap);
</script>
</div>
{% endblock %}
It should look like this
https://i.stack.imgur.com/gq8r4.png
As in the leaflet Quick Start Guide, you may also use mapbox tile server, looks nicer, but costs (if you exceed more than 25'000 hits per day) and you need to sign in and get a token. But it looks quite nice.
See https://leafletjs.com/examples/quick-start/example.html
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'your.mapbox.access.token'
}).addTo(mymap);
I'm trying flask nad there is a simple task to submit a form.
Page is showing a one picture and a form, if form was submitted correctly, picture should be changed, if not - be the same.
I can't understand the mechanism of how to show only one object on a page and get another after form submitting.
Tried to use iterator over the list of images is folder "static", but my implementation was not working correctly.
Please provide me a feedback how to do it in rigth way?
Now I have the simple view:
#app.route("/", methods=["GET", "POST"])
def start_view():
picture = None
form = InputForm(csrf_enabled=False)
if form.validate_on_submit():
picture = form.picture.data
form.picture.data = ""
return render_template('04-2.html', form=form, picture=picture)
class InputForm(Form):
picture = StringField('What is on a picture?', validators[DataRequired()])
submit = SubmitField('Submit')
And a simple template:
<body>
<form method="POST">
{{ form.picture.label }} {{ form.picture }}
{{ form.submit() }}
</form>
{% if form.errors %}
<span style="color: red">{{ form.error }}</span>
{% endif %}
</body>
Thank you!
Your form doesnt contain any pictures. It has a StringField and a SubmitField. If you want to see any image you need to have an <img> tag in your HTML pointing to the image location in your server
your view should look like:
from Flask import session
# in order to use sessions you have to use a secret key for your app
app.secret_key = 'some secret key'
#app.route("/", methods=["GET", "POST"])
def start_view():
img_list = ['filename1', 'filename2', 'filename3']
# if this is not the first form submission
if session.has_key('current'):
# if we reach the end of the list show the first image again
if int(session['current']) == len(img_list) - 1:
session['current'] = 0
# move to next image
else:
session['current'] = int(session['current']) + 1
else:
session['current'] = 0
picture = 'first_image_filename' # this should be the img on load
form = InputForm(csrf_enabled=False)
if form.validate_on_submit():
picture = img_list[int(session['current'])] # the filename of the next image
form.picture.data = ""
return render_template('04-2.html', form=form, picture=picture)
so template should look like:
<body>
<form method="POST">
{{ form.picture.label }} {{ form.picture }}
<img src="{{url_for('static', filename='img/' + picture)}}"
{{ form.submit() }}
</form>
{% if form.errors %}
<span style="color: red">{{ form.error }}</span>
{% endif %}
</body>
Why it doesn't show counter when the var permalink = {{ shop.url }}{{ product.url }} , but it show when insert url ..example: var permalink = google.com
{% capture permalinkURL %}{{ shop.url }}{{ product.url }}{% endcapture %}
</span>
<script>
var permalink = '{{ permalinkURL }}';
var getFacebookCount = function () {
$.getJSON('http://graph.facebook.com/?ids='+permalink+'&callback=?';, function(data){
var facebookShares = data[permalink].shares;
$('.facebook .share-count').text(facebookShares);
});
};
getFacebookCount();
</script>
I think you may be missing part of the Facebook code in the anchor. Try this.
Facebook<span class="share-count">0</span>
I am doing a form with symfony2 and twig, form who get infos from BDD.
I want to customize render in function of some informations.
If my data chanson is empty, I want to show input to set it.
If my data is not empty I want to show a paragraphe who shows data, and a link for modify the value and show the input.
I try something like that :
{% if form_widget(session.chanson).attrvalue!='' %}
<p>{{form_widget(session.chanson).attrvalue}} <a>modify</a></p>
{% else %}
<p>{{ form_label(session.chanson,"Chanson : ") }}
{{ form_errors(session.chanson) }}
{{ form_widget(session.chanson) }}</p>
{% endif %}
It's not working. I try with value instead of attrvalue, it's not working neither.
Here is what symfony say : Item "attrvalue" for "<input type="text" id="form_chanson" name="form[chanson]" required="required" value="La Rage" />" does not exist in CDUserBundle:Prof:edit_session.html.twig at line 19
Did someone know the issue ?
Thank you,
You could check if the app.session.chanson variable is empty instead using:
{% if app.session.chanson %}
<p>{{ app.session.chanson }} modify</p>
{% else %}
<p>{{ form_label(app.session.chanson,"Chanson : ") }}
{{ form_errors(app.session.chanson) }}
{{ form_widget(app.session.chanson) }}</p>
{% endif %}
You then need to plug the action you want on the modify link.
Also note that if your object chanson is stored in a session, the right way to access it in your twig template is by using the app.session object.