raoul/mapmakr
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Switch to using a simple modal dialog for name entry, so that we can expand it later

Browse Source
This commit is contained in:
Raoul Snyman 2023-04-12 13:58:49 -07:00
parent 704d52805f
commit 94d56354d6
4 changed files with 55 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
mapmakr/database.py
View File

@ -8,5 +8,6 @@ _engine = None
def get_engine():
global _engine
if not _engine:
_engine = create_engine(settings.database_uri, echo=settings.database_echo)
_engine = create_engine(settings.database_uri, echo=settings.database_echo,
connect_args=settings.database_options)
return _engine

1
mapmakr/settings.py
View File

@ -4,6 +4,7 @@ from pydantic import BaseSettings
class Settings(BaseSettings):
database_uri: str = 'sqlite:///mapmakr.sqlite'
database_echo: bool = False
database_options: dict = {'check_same_thread': False}
site_title: str = 'mapmakr'

80
mapmakr/static/js/mapmakr.js
View File

@ -1,4 +1,4 @@
let map, drawnItems, drawControl;
let map, drawnItems, drawControl, currentLayer;
function reload_map() {
@ -53,9 +53,9 @@ function setup_map() {
refreshButton.button.style.fontSize = '18px';
map.addControl(refreshButton);
const helpButton = new L.easyButton('icon ion-help-circled', function() {open("about.html");});
helpButton.button.style.fontSize = '18px';
map.addControl(helpButton);
// const helpButton = new L.easyButton('icon ion-help-circled', function() {open("about.html");});
// helpButton.button.style.fontSize = '18px';
// map.addControl(helpButton);
const controlSearch = new L.Control.Search({layer: drawnItems, propertyName: 'id', initial: false, zoom: 12});
map.addControl(controlSearch);
@ -85,45 +85,15 @@ function setup_map() {
return;
}
let name = prompt("Marker name:", "");
if (name) {
layer.options.id = null;
layer.options.title = name;
layer.bindPopup(name);
drawnItems.addLayer(layer);
let requestOptions = {
method: "POST",
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify({
"name": name,
"latitude": layer.getLatLng()["lat"],
"longitude": layer.getLatLng()["lng"],
"options": {}
})
};
fetch("/marker", requestOptions).then(() => reload_map());
}
currentLayer = layer;
$("#edit-form").modal();
});
map.on('draw:edited', function (e) {
e.layers.eachLayer(layer => {
let type = layer.layerType, id = layer.options.id;
let requestOptions = {
method: "PATCH",
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify({
"name": layer.options.name,
"latitude": layer.getLatLng()["lat"],
"longitude": layer.getLatLng()["lng"]
})
};
fetch("/marker/" + id, requestOptions).then(() => reload_map());
currentLayer = layer;
$("#edit-form").modal();
});
});
@ -133,4 +103,38 @@ function setup_map() {
fetch("/marker/" + id, {method: "DELETE"}).then(() => reload_map());
});
});
$("#marker-save").on("click", (event) => {
event.preventDefault();
let name = $("#marker-name").val();
const markerAttributes = {
"name": name,
"latitude": currentLayer.getLatLng()["lat"],
"longitude": currentLayer.getLatLng()["lng"],
"options": {}
};
if (name) {
currentLayer.options.title = name;
currentLayer.bindPopup(name);
drawnItems.addLayer(currentLayer);
let requestOptions = {
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify(markerAttributes)
};
console.log(currentLayer);
if (currentLayer.options.id) {
requestOptions["method"] = "PATCH";
fetch("/marker/" + currentLayer.options.id, requestOptions).then(() => reload_map());
}
else {
requestOptions["method"] = "POST";
fetch("/marker", requestOptions).then(() => reload_map());
}
}
$.modal.close();
return false;
});
}

10
mapmakr/templates/index.html
View File

@ -7,6 +7,7 @@
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<link rel="stylesheet" href="{{ url_for('static', path='/3rdparty/leaflet-search.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', path='/3rdparty/leaflet-easybutton.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', path='/3rdparty/leaflet-label.css') }}" />
@ -15,9 +16,18 @@
</head>
<body>
<div id="mapmakr" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
<form id="edit-form" class="modal">
<div class="form-control">
<label for="marker-name">Name:</label>
<input id="marker-name" name="marker-name" />
</div>
<button type="submit" id="marker-save">Save</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<script src="{{ url_for('static', path='/3rdparty/leaflet-search.js') }}"></script>
<script src="{{ url_for('static', path='/3rdparty/leaflet-easybutton.js') }}"></script>
<script src="{{ url_for('static', path='/3rdparty/leaflet-label.js') }}"></script>