transformap / transformap-viewer

TransforMap.co Source Files

TransforMap works towards an online platform for you to visualize the myriads of alternatives to the dominant economic thinking on a single mapping system.

Getting Started

1. Install DocPad

2. Clone the project and run the server

   git clone https://github.com/transformap/transformap.github.io cd transformap.github.io docpad run

3. Open http://localhost:9778/

4. Start hacking away by modifying the src directory

Editing content with Prose.io

Allow contributors to edit content by adding them as collaborators (Settings > Collaborators) on the repository.

They can they edit the Markdown partials at prose.io/#transformap/transformap.github.io.

Tips for editing using Prose

• Authenticate on Github before making any changes to files using the green button on the bottom right corner of the screen.

• ???

transformap-viewer's Issues

clarify, if Logo, etc. is required on the map, or is actuall involved with the embedding

• We need to talk about the embedding, and then we will see.
• Make appintment with Regina / @species for Implementation conversation with Supertrumpf.

With maps, are part of websites, the imprint is usually not implemented in the map, but are taken as given from the overall site.

Recursive loop on some filter items

currently, when clicking on some categories (e.g. Q20), the "addToFilter" function is stuck in an recursive loop, until the stack size limit is reached.

Header in popups is linked. Link leads to general map overview

The headers in the popup on the very top are linked. The link mis-leads to the general overview (entrance screen of the map) opening in a new window.

There could be 2 possible ways to resolve it IMHO:

1. Take the header-link out of the popup
2. Link the header to the website, if a website is available.

Given time, ressources and more critical issiues, I would opt for 1.

map viewer not working on IE11

The map viewer is not dispayed at the Internet Explorer 11.

We noticed that today at the webinar. One participant used IE11 and could not open the map. Then we tested it with several others, who have IE, but use another standard browser.

---

It might be important for some cohorts, as IE 11 still has a market share of 5% on Desktop. Depending on the complexity of the work, I would postpone the topic until we got the editor up and running?

@species how complex do you see enabiling IE11 to display the map (even with small glitches)?

introduce predefined icon colours, pictograms and design

The colours of the POIs are changing each time I open the window. I don´t really understand that.
I will request the SSEDAS CI-Team if they can provide general colour coding for the map.

mobile version - popup closing button hides behind zoom menu

On my android phone (might also happen in other phones), the "x" closing button for the popup hides behind the zoom "+ - " menu.

As the popup is currently set to stay within the borders of the screen, it always sticks there, and the button cannot be reached. That would technically not matter, as a click outside the popup also closes it, but it seems awkward, if one does not realize that, and tries to hit that "x".

mobile version - menu disappears once the map is in full view without option to go back

On the mobile version with the menu above, there is no option to get the menu back, once the map is in full mode. Scrolling just scrolls the map.

A button (arrow) or sthg. to go back to the menu would be helpful.

do we actually need zoom buttons on the mobile version

Frage: Braucht man auf Handybildschirm Zoom-Buttons überhaupt, das Bild ist sowieso schon so klein, da würde man am Besten alles Unnötige vermeiden.

Gibt es noch Menschen die auf dem Touchscreen über + und - Buttons zoomen, macht das nicht inzwischen jede_r mit Gesten? Vielleicht kann man mal ein paar Teste_rinnen dazu befragen.

Navigation issues with non-fullscreen embedding in partner sites

Menu Icon not intuitive:
Menu not visible, when iframe width is not full screen width on large display (width = 735, for example):

Menu covers whole Map:
The menu entries take up the whole width oft he iframe when opened and compleately cover up the underlying map PLUS there is no „BACK TO MAP“ button visible. Users might be lost in navigation. Idea: maximum menu entry width is around 80% so that part oft he underlying map remains visible and users can go back to map view by clicking on the still visible part oft he map.

"go to website" -button in popups instead of full written http-link

The link of some of the initiatives look quite messy, as they are subsites, and the http... get´s really long.

---

possible solution:

Instead of displaying the full http, put a button "website", and link as hover.

instructions for contributing and deployment needed

For anyone to also start to contribute (as I am eager to do), a how-to (e.g. in a CONTRIBUTING) file is needed:

• link to a how-to install docpad
• which external libraries (bootstrap?) are needed (and how to install them via e.g. npm)
• how to use docpad to get the source code compiled to be able to view the changes in the browser
• how to deploy a branch to transformap.co/transformap-viewer

Stamen Background Terrain does not have street level zoom

Today at the SUSY-Webinar, we noticed, that Stamen Background Terrain does not have street level zoom.

We could:

1. set another default view (Stamen Terrain or Humanitarian e.g.)
2. develop some kind of switch, that changes the map tiles at a certain zoom level

Given current priorities, I would prefer option 1.

taxonomy.json needs update | current version is before opting to Wikipedia style

The currently used version of the taxonomy.json is not the most recent one. In the most recent one, we changed in the menu items all words after the initial one to have small letters instead of capital letters.

Clustering Library for POIs

We need a clustering library (so that the points don't overlap much).
@species recommends PruneCluster.

it offers high performance when applying filters.

topic originated and moved from here: TransforMap/transformap.github.io#24

mobile version - longer popups (image + text) do not scroll

The longer popups do not scroll. It shows either the image, and you can´t scroll down to the text, or shows the text and the lower 30% of the image.

Tiles choice

currently by default the viewer is displaying Stamen Terrain Background. It does a poor job at displaying street (one needs to zoom a lot).
I would suggest to switch to Stamen Terrain instead. Don't expect the lay user to switch tiles.

Cluster-Preview

Wenn man mit dem Mauszeiger über einzelne Punkte geht, sehen wir eine Info zur Organisation / Initiative. Für einen schnellen Überblick wäre es auch schön, eine solche Kurzinfo auch zu bekommen, wenn man mit der Maus über ein Cluster geht, z.B. eine Auflistung der Namen der Organisationen, die sich in diesem Cluster befinden. (Dann müsste man sich nicht jedes Mal reinzoomen, bis alle Cluster in Einzelpunkte aufgebrochen werden, um mir einen Überblick zu verschaffen, was es in einer bestimmten Gegend gibt.) Ist sowas schon vorgesehen oder zu kompliziert?

Die erweiterten Filteroptionen finden wir etwas unübersichtlich und das schon auf dem Computerbildschirm. Auf einem Handybildschirm wird das sicherlich nicht funktionieren, oder?

mobile version - reset filters does not show, if any menu is opened

The reset filter button is just visible, if the side-menu is closed. Once the side-menu is opened, or a type_of_initiative is selected, the button does not show anymore and can therefor not fulfill it´s functionality.

Country-Specific Address display

In some countries, an address is written in the form

• $housenumber $streetname

in others

• $streetname $housenumber.

This should be switchted dependent on the country the POI is in.
Is there somewhere a list of the different address formats worldwide?

Several translation issues

Missing Translation:
• Language names should be translated: „Deutsch“ instead of „German“ (this affects the alphabetical order of the list, as some languages change first letter with translation: Spanish  Español)

suggestion for filter-menu colours to have just one colour for the different elements

Jan and his colleague suggest, that we have just one colour for the different levels of the filter menu.

Worth to consider with someone who is experienced with UI design.

Add description texts to cats/tois, visible on hover

Also display the description texts from wikibase in the filter menu and in the popup.

small island problem

Malta and Cypres mentioned, that they are basically not visible on the map. The problem will be solved, as they can put the zoom level on their map accordingly, and start in the appropriate places.

move types of initiatives, that do not have 2nd level to 3rd level

@keikreutler

I want to emphasize again, how happy I am about the current development, as stated in Taiga : )

The menu structure looks really good, it has some small glitches, but looks very good, even on my smartphone.

---

Issue:
As described here in the Taiga task #305

• Those types of initiatives, that do not have a 2nd level category (sub-category) are mis-represented in the 2nd level of the structure (that one, that downfolds)
• They should open to the right (orange), once the category without sub-category is selected.

transparency in name-preview window make names sometimes unreadable

The set transparency in the "name-preview window" (for lack of better words), makes it often unreadable, espeicially if the POI is in a crowded area with many POIs.

Full white would be the easiest, I guess, and does the job.

Icons for the main filter categories

@paulovieira from https://github.com/paulovieira/rede-convergir-3 was so nice to share the source of their wonderful free icons with us yesterday in the ETL call.

When we have some time, we could have a look, which would be a good match for the main filter-categories in the SUSY-Map: https://mapicons.mapsmarker.com/

mobile version - placement of buttons in map view

Jan noticed, that the buttons in the map-view on the mobile phone seem to be placed arbitrary.

His suggestions is to put the buttons in the very top at the same hight as the "back to the map"

Unwichtig, aber unserem ästhetischen Empfinden nach schöner möglich ist für den Handybildschirm die Anordnung der Buttons rechts und auch des Filterbuttons links auf der Karte. Die sind weder ganz oben noch richtig zentriert, sondern irgendwo dazwischen. warum nicht jeweils in er unteren oder oberen Ecke? Das wäre, wo wir sie zuerst suchen würden, und wo wir sie als am wenigsten störend empfinden würden. Vermutlich oben, da im Filtermenü das "zurück zur Karte" auch oben steht.

integrate filter translation in susy-icon map

@species, when is the filter translation integrated in the susy-icon branch? Does that happen, or do they converge otherwise?

define headline with Jan

susy-map

Sustainable and Solidarity Economy - Map

colours of POI-Cluster on map

Currently the POI-Cluster colours do not add much information, but distract, as especially the green of the smallest cluster break the colour-pattern.

---

Best change to the colour pattern of www.solidarityeconomy.us

Implement various Logos

Das SUSY-Logo ist schon einmal gut. Ich würde eventuell das Logo der EU hinzunehmen. Richtig schick wäre es, wenn die einzelnen Partner*innen auf „ihren“ Karten, die sich also in ihre Webseiten ihr eigenes Logo einbinden könnten. Also in Dtld. INKOTA, in Österreich Südwind etc. Geht das?

website-integration country middlepoint geocodes

We want to provide the geo-codes of the partner country capitals to provide them to Supertrumpf als starting point for the individual partner sub-sites with the maps

Here is an overview of the geo-codes of capitals:
http://www.nobochamp.de/hauptstaedte.html

website-integration full screen mode / button for full screen mode

For the integration in the various websites, I think it is important to provide a "Full-Screen Button" and "Full Screen Mode", that opens in a new window.

Assumption:

The SSEDAS website, as many websites, that want to implement the map in their site will have 60% or less of the screen for the map. The overview and usability of the map will be strongly influenced and diminished and quality by that.

Solution:

We provide a fullscreen mode on a sub-site or sub-domain, that is just dedicated to that fullscreen mode (without linking back), so if people are annoyed with the tiny window, they can go there with the "full screen mode button", which is not shown in the fullscreen mode itself.

For Mobile:

The full screen mode is the mode of our general operation, so it is also the mode, that is designed for mobile.

So, if someone with a mobile comes to a website, where our map viewer is implemented, then the interface should be very reduced, and provide the fullscreen-button, where they come to the general map, which is mobile-optimized.

Have static json file with geo-data in repo, as fallback, if server goes down

As there is always a chance, that the server with the API goes down for administrative or technical reasons, it might be useful to have a fallback json file with the geo-data, which is updated every quater-year, and where the map interface falls back on, if the request to the API is not answered within a certain time.

That could save a lot of "oh my god, the map is not showing anymore", if some problems with the server arise.

filter menu - food & ... / grow it yourself / community supported agriculture filter does not work

The above mentioned filter does not seem to work. The same type_of_initiative with the same tag is also filtered in "food & ... / buy local / community supported agriculture" there it works and delivers 3 results in germany.

mobile version doesn't work

I tested the link on my mobile device (iphone SE) and it doesn't seem to work. I attach a screenshot with the page appeared after typing the url. Could you please check it?

design: click boxes instead of +/- for the enhanced filter menu

From the feedback from Jan (Inkota), he and his colleage propose to replace the +/- button in the enhanced overview with round or round edged checkboxes.

---

Reviewing the current solution myself, I noticed, that the +/- does not really give more information than a checked or unchecked checkbox, but is visually slightly more noisy and conceived of the +, as well as the - element, which are integrated in the one element of the checked or unchecked box, and therefor probably easier to read and use.

---

Sidenote, currently in firefox browser, the +/- box from "self organization and mutuality" does not fit any more and makes the menu slip from there.

Tile Server policy and agreement

We need to forward the policy of our tile-server providers to SSEDAS, and have an agreement about how to handle possible overusage. Basically that is a voucher for us not to be responsible for such case, and to what extent we take responsibility to bridge communication.

Tile server policies from
OSM tiles: http://wiki.openstreetmap.org/wiki/Tile_usage_policy

@species

Initiative Preview List of Initiatives in Bounding Box

The additional list-view of the initiatives in the bounding box gives a lot of meaning to the user, and delivers information and choices right upfront without the need to click through every item on the map, which in itself just delivers the visual information of the specific icon.

---

Examples:

• with name, short description, link and logo: http://redeconvergir.net/iniciativas#?lat=39.956&lng=-9.064&zoom=8&types=type_001_permaculture&types=type_002_transition
• with name as link (see in the menu to the right "list of POIs): http://demo.transformap.co/#13/47.0749/15.4383

---

It would be great to also provide such a feature. Jan mentioned it in an email, and I also found, that it enhances the user experience a lot.

Providing the list overview of the bounding box items would also solve the problem of the custering for multiple initiatives on one spot, that @species was researching.

---

The menu could be switched

• on desktop with the filter menu via button. Redeconvergir (the example above) do that via popup, which might not be the best solution.
• For mobile, the app happy cow https://www.happycow.net/mobile is a very good example.
  On the left there is an arrow to the filter menu, and on the top right is
  • a button with map-icon, if in list mode
  • a button with list-icon, if in map mode.

mobile version - show map button more prominent

The "show map" button in the mobile version now visually somewhat disappears, as there is 3 more buttons around it.

---

Could it be possible to make it

• bright,
• or more round,
• or give it some kind of glow,
  so that it is more visible to be the key next step of the menu.

Whatever of these options or combination you see best fit and easy to implement.

Weblate - no access

I cannot register to the platform Weblate since I'm not receiving the confirmation e-mail and password from them. I sent them a message with the issue but I got no response.
Can we fix it somehow in order to procceed with the menu translation?
Thanks a lot

Design Issue: Popup scroll bars

Horizontal Scroll Bar in Info Box
it would be nicer not having to scroll horizontally

Filter menu not visible on hd mobile screen iphone6

As I tested the icons on the Iphone6 of my sister, I noticed that the filter menu does not show.

I assume, that is due to the resolution of 1334x750.

try switching blue and turquois in the menu interface

Let´s try to switch the colours of the blue in the menu-interface with the turquois, once it is clicked.

blue:dunkelblau: C95M85Y45K35, #212f4f, R33G47B79
türkis: C40M0Y20K0, #95d5d2, R149G213B210

cluster library settings with less clustering on city-area-level

On city-level there are sometimes 2 initiatives in the same place, and the clustering library makes it required to zoom down (feels like death by zoom) until the biggest zoom scale, to click the "2" cluster and see the individual items.

Could that be de-sensitized?

Eg. Berlin: http://transformap.co/transformap-viewer/#14/52.4726/13.1806

Also in Zaragoza, there is a lot of clustering: http://transformap.co/transformap-viewer/#12/41.6311/-0.8971

---

I wonder, can it be implemented or turned on, that a click on the cluster provides an overview on the POIs it clusters?

Integration into arbitrary sized boxes

It should be able to be integrated into arbitrary sized html elements, and not only into full-screen mode.

zoom levels on touchpad and mouse-scroll too fast (Macbook touchpad - not useable)

The zoom levels are especially with touchpad too fast, and it is almost impossible to reorient in the opening zoom levels.

I tested the map viewer interface with a colleague this weekend, and he could not make use of his macbook touchpad, as he would usually navigate a map. The touchpad was so sensitive to the zoom levels, that he was basically shot between scale 0 and scale 18.

I also notice, when I use the scroll-wheel of my mouse to navigate, that it jumps in steps to high for me to visually follow along. It jumps in steps of 4 from zoom level 0 to 4 to 8, ,12, 16.

---

Solution:
Is it possible to set scroll/touchpad sensitivity back from 4 to 1 zoom-level per interaction?

taxonomy.json is static

Since the TransforMap Base Query Service is running now, we can get taxonomy.json dynamically from there.
Requests can be tested at https://query.base.transformap.co/bigdata/#query

prefix bd: <http://www.bigdata.com/rdf#>
prefix wikibase: <http://wikiba.se/ontology#>
prefix wdt: <http://base.transformap.co/prop/direct/>
prefix wd: <http://base.transformap.co/entity/>

SELECT ?item ?itemLabel ?instance_of ?subclass_of
WHERE { ?item wdt:P8* wd:Q8 .
        ?item wdt:P4 ?instance_of .
        ?item wdt:P8 ?subclass_of
        SERVICE wikibase:label {bd:serviceParam wikibase:language "en" }
}

and then have to be urlencoded for the appropriate query:

curl -H "Accept: application/json" -XGET https://query.base.transformap.co/bigdata/namespce/transformap/sparql?query=prefix%20bd%3A%20%3Chttp%3A%2F%2Fwww.bigdata.com%2Frdf%23%3E%0Aprefix%20wikibase%3A%20%3Chttp%3A%2F%2Fwikiba.se%2Fontology%23%3E%0Aprefix%20wdt%3A%20%3Chttp%3A%2F%2Fbase.transformap.co%2Fprop%2Fdirect%2F%3E%0Aprefix%20wd%3A%20%3Chttp%3A%2F%2Fbase.transformap.co%2Fentity%2F%3E%0A%0ASELECT%20%3Fitem%20%3FitemLabel%20%3Finstance_of%20%3Fsubclass_of%0AWHERE%20%7B%20%3Fitem%20wdt%3AP8*%20wd%3AQ8%20.%0A%20%20%20%20%20%20%20%20%3Fitem%20wdt%3AP4%20%3Finstance_of%20.%0A%20%20%20%20%20%20%20%20%3Fitem%20wdt%3AP8%20%3Fsubclass_of%0A%20%20%20%20%20%20%20%20SERVICE%20wikibase%3Alabel%20%7Bbd%3AserviceParam%20wikibase%3Alanguage%20%22en%22%20%7D%0A%7D%0A

collection of CSS Styling postponed to a designer with visual skills

The following items will be collected, and once we got a dedicated CSS programmer, that can just focus on design, we will start to work on them:

---

Small items:

• Buttons
• Checkbox-Style

---

Minor Bugs:

• In the expert mode of the mobile version, unchecking a category leads from the filter menu to the map, where it should stay in the filter menu until the user choses to go to the map.

---

Overall design enhancement:

• The menu item of initiative filters (orange that opens to the side) is quite disturbing, when the map is implemented in smaller than fullscreen mode on desktop. That can be possibly changed by using a similar structure as in the mobile mode. Solving that problem might as well interlink in conceptualization with issue #37

Implement Susy-Logo and Imprint-Text

• Implement the Logo:

Link to Logo from Website: http://www.solidarityeconomy.eu/fileadmin/_processed_/csm_SUSY-Logo-NegClaim_af33a15210.png

• adding the text-disclaimer:

This website has been produced with the financial assistance of the European Union. The contents of this website are the sole responsibility of the SUSY initiative and can under no circumstances be regarded as reflecting the position of the European Union.

Example screenshot of where to place the items linked here.

• Links for "contact" and "imprint" as in the example screenshot above:

http://at.solidarityeconomy.eu/imprint/
http://at.solidarityeconomy.eu/contact/