e-WBD: map visualization

[ErwinKomen]

When one lemma is chosen, add the possibility to get a visualization with a map. The map should show:

• dots for all the dialect entries belonging to the lemma
• colors/codes + index for all dialect entries belonging to one trefwoord

[ErwinKomen]

Needed for this is a translation from Kloeke-code to coordinates.

• I got some of that info. At least for WBD
• I got more information from a database from the Meertens Institute - that needed conversion to WGS84

Implementation

1. Add a button to call for a 'map display'
   1. The most logical place for such a button would be in the Lemma listview, at each of the found lemma's
   2. Perhaps a little icon (of a map) right before the first 'trefwoord'?
2. When the button is clicked, a call is made to view LemmaMapView
   1. This view returns a list called entries with fields:
      1. trefwoord: the trefwoord that determines the icon (gif) for this data point
      2. woord: the dialect word that may pop up when hovering over this data point
      3. stad: the name of the stad (could also be shown, if needed)
      4. point: the coordinates (in WGS84) for this data tpoint
3. The Javascript routine lemma_map (in diadict.js) should now use these data to show a map

Needed

• Which map?
• Pre-load the map and let it show as a modal? (add it to lemma_list.html)

[ErwinKomen]

HvdH heeft twee suggesties:

• de mogelijkheid van kaartweergave inclusief icoontje kun je wellicht op een ander plek geven, bijv. op de hoofdregel links van Bronnen
• Bij de kaartweergave verschijnen de trefwoorden rechts nu op alfabetische volgorde. Ik zou ze sorteren op frequentie met het meest frequente trefwoord bovenaan.

[ErwinKomen]

Okay, the above is implemented now, and there even is a popup showing! Next step:

1. Generalize the interface into a django 'app' part that can easily be attached to existing projects - Ok. This is now done!

[ErwinKomen]

Usage instructions

1. Add the directory mapview
2. In settings.py add 'wbd.mapview', to INSTALLED_APPS
3. In views.py
   1. Import MapView in your views.py
      1. E.g: from wbd.mapview.views import MapView
   2. Add a class to provide mapview information (see example below) based on MapView
   3. Make sure there is a form like LemmaSearchForm below in the example, and that this form is able to deal with is_valid()
4. Add a line to urls.py that makes this view reachable
   1. E.g: url(r'^lemma/map/(?P<pk>\d+)/$', csrf_exempt(LemmaMapView.as_view()), name='lemmamap'),
   2. Possibly add at the top from django.views.decorators.csrf import csrf_exempt
5. In the listview template:
   1. Load the modal form (high above): {% include 'mapview/map_view.html' %}
   2. Provide a button to call ru.mapview.lemma_map(this)

Views example

class LemmaMapView(MapView):
    model = Lemma
    modEntry = Entry
    frmSearch = LemmaSearchForm
    order_by = "trefwoord"
    labelfield = "gloss"

    def initialize(self):
        # Entries with a 'form' value
        self.add_entry('woord', 'str', 'woord', 'woord')
        self.add_entry('stad', 'str', 'dialect__stad', 'dialectCity')
        self.add_entry('kloeke', 'str', 'dialect__nieuw', 'dialectCode')
        self.add_entry('aflevering', 'int', 'aflevering__id', 'aflevering')
        self.add_entry('mijn', 'int', 'mijnlijst__id', 'mijn')

        # Entries without a 'form' value
        self.add_entry('trefwoord', 'str', 'trefwoord__woord')
        self.add_entry('point', 'str', 'dialect__coordinate__point')
        self.add_entry('place', 'str', 'dialect__coordinate__place')

    def get_popup(self, entry):
        """Create a popup from the 'key' values defined in [initialize()]"""

        pop_up = '<p class="h6">{}</p>'.format(entry['woord'])
        pop_up += '<hr style="border: 1px solid green" />'
        pop_up += '<p style="font-size: smaller;"><span style="color: purple;">{}</span> {}</p>'.format(
            entry['kloeke'], entry['stad'])
        return pop_up

Listview template

A button to call the JS routine for the mapview app:

                  <a role="button" class="btn btn-xs" title="Toon trefwoorden op kaart"
                     onclick="ru.mapview.lemma_map(this);"
                     targeturl="{% url 'lemmamap' item.entry.lemma.id %}"
                     targetid="erwin"                     
                      >
                    <i class="far fa-map" style="color: brown;"></i>
                  </a>