How to display the name of the wilaya and the name of the municipality on the map instead of displaying their id?
The code below displays the wilaya id and the commune id instead of displaying the wilaya name and the commune name.
How to solve this problem
#models.py wilaya
class Wilaya(models.Model):
id = models.BigIntegerField()
name = models.CharField(max_length=75)``
geom = models.MultiPolygonField(srid=4326)
matricule=models.BigIntegerField(primary_key=True,null=False)
def __str__(self):
return self.name
#models.py commune
class Commune(models.Model):
id = models.BigIntegerField()
name = models.CharField(max_length=75)
geom = models.MultiPolygonField(srid=4326)
wilaya=models.ForeignKey(Wilaya,on_delete=models.DO_NOTHING,null=True)
def __str__(self):
return self.name
#models.py even
class Even(models.Model):
name = models.CharField(max_length=20, default='Even')
date = models.DateField(null=True, blank=True)
wilaya=models.ForeignKey(Wilaya,on_delete=models.DO_NOTHING,null=True,blank=True
commune=models.ForeignKey(Wilaya,on_delete=models.DO_NOTHING,null=True,blank=True
geom = models.PointField(srid=4326, null=True, blank=True,)
def __str__(self):
return self.name
#map.html
var even = new L.GeoJSON.AJAX("{% url 'even' %}", {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
icon: L.icon({
iconUrl: "/static/img/icons/red.png",
iconSize: [28, 32],
iconAnchor: [12, 28],
popupAnchor: [0, -25]
}),
title: feature.properties.name,
riseOnHover: true
});
},
onEachFeature: function (feature, layer) {
var content = "<table class='table table-striped table-bordered table-
condensed'>" + "<tr><th>Name</th><td>" + feature.properties.name + "</td>
</tr>" + "<tr><th>Date</th><td>" + feature.properties.date + "</td></tr>
</th></table>" + "<details><summary>" + "See more details"+"</summary>
<table class='table table-striped table-bordered table-condensed'>" + "
</td></tr>" + "<tr><th>Commune</th><td>" + feature.properties.commune + "
</td></tr>" + "<tr><th>Wilaya</th><td>" + feature.properties.wilaya + "
</td></tr>" + "</table></details>";
layer.on({
click: function (e) {
layer.bindPopup(content).openPopup(e.latlng);
}
});
}
}).addTo(map);