Used template for legend.

Author: akbargumbira

users/static/js/user-map-component.js

@@ -186,7 +186,7 @@ function createUserMenuControl(options) {
  *
  * @returns {object} control
  */
-function createLegendControl(user_icon_path, trainer_icon_path, developer_icon_path){
+function createLegendControl(){
   var control;
   control = L.Control.extend({
     options: {
@@ -195,10 +195,7 @@ function createLegendControl(user_icon_path, trainer_icon_path, developer_icon_p
     onAdd: function () {
       var legend_container = L.DomUtil.create('div',
           'info legend');
-      legend_container.innerHTML += "<h4>Legend</h4>";
-      legend_container.innerHTML += "<img height='25' width='20' src='" +user_icon_path + "'>" + " User<br>";
-      legend_container.innerHTML += "<img height='25' width='20' src='" +trainer_icon_path + "'>" + " Trainer<br>";
-      legend_container.innerHTML += "<img height='25' width='20' src='" +developer_icon_path + "'>" + " Developer";
+      legend_container.innerHTML += $("#legend").html();
 
       //Prevent firing drag and onClickMap event when clicking this control
       var stop = L.DomEvent.stopPropagation;

users/templates/html/base.html

@@ -47,6 +47,7 @@
 {{ user_menu_button | safe }}
 {{ information_modal | safe }}
 {{ data_privacy_content | safe }}
+{{ legend | safe }}
 {{ user_form_template | safe }}
 <!-- endblock of all the template -->
 
@@ -95,11 +96,7 @@
     container: 'body'});
 
   // Create Legend Control:
-  legend_control = createLegendControl(
-      '{{ user_icons.user }}',
-      '{{ user_icons.trainer }}',
-      '{{ user_icons.developer }}'
-  )
+  legend_control = createLegendControl();
   map.addControl(new legend_control);
 </script>
 

users/templates/html/legend.html

@@ -0,0 +1,7 @@
+<script id="legend" type="text/template">
+  <h4>Legend</h4>
+  <img height='25' width='20' src='{{ user_icons.user }}'> User<br>
+  <img height='25' width='20' src='{{ user_icons.trainer }}'> Trainer<br>
+  <img height='25' width='20' src='{{ user_icons.developer }}'> Developer
+</script>
+

users/views.py

@@ -35,6 +35,11 @@ def map_view():
     #noinspection PyUnresolvedReferences
     data_privacy_content = render_template('html/data_privacy.html')
     #noinspection PyUnresolvedReferences
+    legend = render_template(
+        'html/legend.html',
+        user_icons=APP.config['USER_ICONS']
+    )
+    #noinspection PyUnresolvedReferences
     user_form_template = render_template('html/user_form.html')
     user_menu = dict(
         add_user=True,
@@ -56,6 +61,7 @@ def map_view():
         user_icons=APP.config['USER_ICONS'],
         information_modal=information_modal,
         data_privacy_content=data_privacy_content,
+        legend=legend,
         user_form_template=user_form_template,
         user_menu=user_menu,
         user_menu_button=user_menu_button
@@ -198,6 +204,11 @@ def edit_user_view(guid):
     #noinspection PyUnresolvedReferences
     data_privacy_content = render_template('html/data_privacy.html')
     #noinspection PyUnresolvedReferences
+    legend = render_template(
+        'html/legend.html',
+        user_icons=APP.config['USER_ICONS']
+    )
+    #noinspection PyUnresolvedReferences
     user_form_template = render_template('html/user_form.html')
     user_menu = dict(
         edit_user=True,
@@ -221,6 +232,7 @@ def edit_user_view(guid):
         edited_user_popup_content=user_popup_content,
         information_modal=information_modal,
         data_privacy_content=data_privacy_content,
+        legend=legend,
         user_form_template=user_form_template,
         user_menu=user_menu,
         user_menu_button=user_menu_button