Custom dimensions of the map (#3)

geeservermap/main.py

@@ -9,15 +9,23 @@
 
 # load_dotenv()  # Load environment variable from .env
 PORT = 8018
+WIDTH = 800
+HEIGHT = 600
 
 parser = argparse.ArgumentParser()
-parser.add_argument('--port', default=PORT, help='port')
+parser.add_argument('--port', default=PORT, help=f'Port in which the app will run. Defaults to {PORT}')
+parser.add_argument("--width", default=WIDTH, help=f"Width of the map's pane. Defaults to {WIDTH} px")
+parser.add_argument("--height", default=HEIGHT, help=f"Height of the map's pane. Defaults to {HEIGHT} px")
 
 app = Flask(__name__)
 
-@app.route("/")
-def map():
-    return render_template('map.html')
+
+def register_map(width, height):
+    """Register the index endpoint, allowing the user to pass a height and width"""
+    @app.route("/")
+    def map():
+        return render_template('map.html', width=width, height=height)
+
 
 @app.route('/add_layer', methods=['GET'])
 def add_layer():
@@ -34,17 +42,21 @@ def add_layer():
     MESSAGES[job_id] = layer
     return jsonify({'job_id': job_id})
 
+
 @app.route('/get_message', methods=['GET'])
 def get_message():
     job_id = request.args.get('id', type=str)
     return MESSAGES.get(job_id)
 
+
 @app.route('/messages')
 def messages():
     return jsonify(MESSAGES)
 
+
 def run():
     args = parser.parse_args()
     port = args.port
+    register_map(width=args.width, height=args.height)
     # webbrowser.open(f'http://localhost:{port}')
     app.run(debug=True, port=port)

geeservermap/templates/layout.html

@@ -39,12 +39,8 @@
 		    color: #444;
 		}
 
-		#map {
-		  width: 800px;
-		  height:600px;
-		  padding:0px;
-		  margin:0px;
-		  }
+		{% block mapcss %}{% endblock %}
+
 		.leaflet-container {
 			height: 400px;
 			width: 600px;

geeservermap/templates/map.html

@@ -1,4 +1,14 @@
 {% extends "layout.html" %}
+
+{% block mapcss %}
+    #map {
+	  width: {{ width }}px;
+	  height: {{ height }}px;
+	  padding: 0px;
+	  margin: 0px;
+    }
+{% endblock mapcss %}
+
 {% block map %}
     <div id="map"></div>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>