2 years ago
#13907
Saliha Alger
Sending lat lng info to the database Bookmark note on map | geodjango | leaflet
How sending lat lng info to the database and bookmark note on map using geodjango and leaflet? With the source code below, I was able to get the display of the department layer but I couldn't get my hands on writing the information on the cards. The script for the note application does not work.Does the script for writing direct to the map have to be inside our_layers (map, options) function or does it have to be separate?
#models.py
class Note(models.Model):
note_heading = models.CharField(max_length=200, null=True, blank=True)
note = models.CharField(max_length=1000, null=True, blank=True)
longitude = models.FloatField(null=True, blank=True)
latitude = models.FloatField(null=True, blank=True)
def __str__(self):
return self.note_heading
#views.py
def note(request):
if(request.method == 'POST'):
note_heading = request.POST.get('note_heading')
note_des = request.POST.get('note_des')
latitude = request.POST.get('latitude')
longitude = request.POST.get('longitude')
note = Note(note_heading=note_heading, note=note_des, latitude=latitude, longitude=longitude)
note.save()
return render(request, 'note.html')
return render(request, 'note.html')
#urls.py
app_name="note"
urlpatterns = [
path('note/', views.note,name="note"),
]
#note.html
<!DOCTYPE html>
{% load static %}
<html lang ="en">
{% load leaflet_tags %}
<head>
{% leaflet_js %}
{% leaflet_css %}
<meta charset="utf-8">
<link rel="stylesheet" href="{% static '/css/bootstrap.min.css' %}">
<link rel="stylesheet" ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{% static 'leaflet-groupedlayercontrol/leaflet.groupedlayercontrol.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'leaflet-groupedlayercontrol/leaflet.groupedlayercontrol.css' %}">
<link rel="stylesheet" href="{% static 'leaflet-groupedlayercontrol/leaflet.groupedlayercontrol.css' %}">
<link rel="stylesheet" href="{% static '/css/leaflet.legend.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/Control.Geocoder.css' %}"/>
<script src="{% static '/js/jquery.min.js'%}"></script>
<script src="{% static '/js/bootstrap.min.js'%}"></script>
<script src="{% static 'js/mousePosition.js' %}"></script>
<script type="text/javascript" src="{% static 'dist/leaflet.ajax.js' %}"> </script>
<script type="text/javascript" src="{% static 'dist/leaflet.ajax.min.js' %}"> </script>
<script type="text/javascript" src="{% static 'leaflet-groupedlayercontrol/leaflet.groupedlayercontrol.min.js' %}"> </script>
<script type="text/javascript" src="{% static 'leaflet-groupedlayercontrol/leaflet.groupedlayercontrol.js' %}"> </script>
<script src="{% static '/js/Control.Geocoder.js' %}"></script>
<style>
.list-popup-content{
with: 300pc;
}
</style>
<title>Map note</title>
<style type="text/css">
#map {height: 800px; width: 100%;}
</style>
</head>
<body>
<div class="card-body">
{% leaflet_map "grmdzmap" callback="our_layers" %}
</div>
<script type="text/javascript">
function our_layers(map,options){
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}{y}{x}.png', {
maxZoom: 19,attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
osm.addTo(map);
map.on('click', function(e){
var latitude = e.latlng.latitude;
var longitude = e.latlng.longitude;
var popup = `<form action="{% url 'note:note' %}" method="POST">
{% csrf_token %}
<div class="form-group">
<label for="note_heading">Note Heading</label>
<input type="text" name="note_heading" class="form-control" placeholder="Enter note heading">
</div>
<input type="hidden" name="latitude" value="$(latitude)">
<input type="hidden" name="longitude" value="$(longitude)">
<div class="form-group">
<label for="note">Note Description</label>
<textarea class="form-control" name="note_des">Enter note her ...</textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>`;
var marker = L.marker([latitude,longitude]).bindPopup(popup)
marker.addTo(map)
console.log(e)
})
}
</script>
django
leaflet
bookmarks
0 Answers
Your Answer