Iframes and IT tips

Our Map of Tomorrow is made to be brought to the places, where the people are: On your website of your local Initiative or your global movement. Therefore to embed an entry, a city or a filtered view (hashtag) is as easy as integrating a youtube-video:

  1. Go to https://kartevonmorgen.org/
  2. Zoom on your region and/or filter for your hashtag
  3. Click on the sharing-button at the left buttom-corner and just copy the html-Code you see
  4. Add it to your webpage as an HTML-Element

done ….

The platform allows to filter by individual categories and embed this selection on your own homepage. In particular, associations and networks can present their locations and projects on their own website and at the same time make them available in a worldwide database and map. An example is the map above this text with all regional pilots

Full map widget with search bar

This is an example of an Iframe:

Große Karte öffnen

This is how the iframe-code looks like:

<div style="text-align: center;">
<iframe style="display: inline-block;  border: none " src=" https://www.kartevonmorgen.org/#/?center=50.992,7.005&zoom=6.32 " width="100%" height="580
"> <a href="https://kartevonmorgen.org/" target="_blank">The map</a> </iframe></div><p style="text-align: right
;"><a href="https://www.kartevonmorgen.org">Open a big map</a></p> 

In This Video Helmut explains how it works:

Most important is the third line (bold). https://www.kartevonmorgen.org/#/?center=50.992,7.005&zoom=6.32 There is the URL that indicates what can be seen on the map. This URL is obtained by simply getting it under https://kartevonmorgen.org and copying the URL over.

Different attributes can be adjusted or omitted (combining all attributes in any order with one &):

URL-CommandBefehl
center=50.7365,10.7336Gives the center of the map
zoom=5Specifies the zoom level of the map
search=kleider
search=%23kleidung
Includes all the term that is in the search line. Where %23 becomes a #, so a keyword is filtered.
– You can just add several word in the searchline and they will be linke as OR connection which means, that you get all entries, where one of the keywords match.
– If you add several tags with # in the searchline, it is an AND connection. That means you get only thos entries, where all tags match.
Mehr…
categories=event,initiative,companyYou can define which of the 3 categories you want to show on your map. (it automatically appears in your URL when modifying the filters in the frontend.)
left=hidehide the left side of results  (here’s an example)
dropdowns=kvmDefines, which dropdown-List (Auswahl-Liste) will be shown when clicking in the searchbar.
fixedTags=refillYou can define a tag in your iframe, that cant be removed by the user. By this give the user the opportunity to search for certain entries, but not loose your focus.
orgTag=eineweltnrwYou can protect your the entries in your iframe of beeing updated, changed or newly added if your order a token by the team of the map to controll your map. (Controlled Maps). Only who has the token, can approve changes under openfairdb.org/clearance
Write us an email to get your token
addentry=initiative
addentry=company
addentry=event
Opens directly the entry mask of the type of entry. Hashtags of the URL are automatically added to the formular. Mehr…
Example: (reihenfolge einhalten!)https://kartevonmorgen.org/#/?center=49.497,6.823&zoom=7.00&categories=event,initiative,company&search=wasser&left=hide&fixedTags=refill
The height can also be adjusted to the screen size: „height: calc(100% – 100px);“
Instead of 100px, you give just what suits you.

Instead of an excerpt with search results, a single entry can also be embed. To do this, the third line simply inserts the URL of the post:

https://kartevonmorgen.org/#/?entry=c5c844f92a4d4e459392197bc6805ee7

To make the whole card a little smaller, for example, So that the lateral results list is not so wide, you can zoom in small the whole part:

<iframe style="display: inline-block; zoom: 0.7; -moz-transform:scale(0.7); -moz-transform-origin: 0 0; -o-transform: scale(0.7); -o-transform-origin: 0 0; -webkit-transform: scale(0.7); -webkit-transform-origin: 0 0;" style="display: inline-block; zoom: 0.7; -moz-transform:scale(0.7); -moz-transform-origin: 0 0; -o-transform: scale(0.7); -o-transform-origin: 0 0; -webkit-transform: scale(0.7); -webkit-transform-origin: 0 0;"></iframe style="display: inline-block; zoom: 0.7; -moz-transform:scale(0.7); -moz-transform-origin: 0 0; -o-transform: scale(0.7); -o-transform-origin: 0 0; -webkit-transform: scale(0.7); -webkit-transform-origin: 0 0;">

So you replace the „style“ attribute in the iframe with the content above.

Businesscard widget

To show only the contact information without a card, it is best to take this widget and pack into the second line the ID you get from the URL of the corresponding entry:

<iframe src=" https://kartevonmorgen.org/businesscard.html#/?entry=4c20979fe0754e74875afa4308d73ce7 " width="200px" height="300px"></iframe> 

Map Widget

And conversely, if you just want to view the card without a „business card,“ you take this widget and of course exchange all the bold printed URLs again:

<iframe src=" https://kartevonmorgen.org/map.html#/?entry=4c20979fe0754e74875afa4308d73ce7 &zoom=9.00" width="400px" height="300px"
><a href="https://www.kartevonmorgen.org/#/?entry= 4c20979fe0754e74875afa4308d73ce7 " target="_blank">The map</a></iframe>

In addition to „entry,“ the map widget can also indicate „center,“ „zoom“ and/or „search.“

Here’s an example of what both look like side by side.

Only view widget

Designed for the regional meetings of the Pioneers of Change Online Summit, this widget hides search and filtering options. I.e. The user can only navigate through the map, but cannot change filters and not add new entries. (Entries can be edited, however)

<div style="text-align: center;">
<iframe style="display: inline-block;" src=" https://kartevonmorgen.org/mapAndEntryList.html#/?center=49.815,8.833&zoom=7.00 " width="100%" height="58
0"> <a href="https://kartevonmorgen.org/" target="_blank">The map</a></iframe></div><p style="text-align: right
;"><a href="https://www.kartevonmorgen.org">Open a big map</a></p>

Enhanced search function

The search text field is parsed according to the following rules:

{„type“:“block“,“srcClientIds“:[„a8dce8d9-d6e2-455f-a22d-ee569125eea4″],“srcRootClientId“:“932cdee8-bd5e-41ed-882f-6c2eb245dfb9″}

Subscribe to a region

Regional pilots (but also all users) have the option to log in on the landingpage and subscribe to a map section in order to be informed directly by e-mail via changes, e.g. In their city.

On the home page www.kartevonmorgen.org you click login at the top right. After that, you can register and subscribe to the excerpt. The steps will be explained to you on the page.

The username must not contain any points! Only one region can be subscribed to per account. However, multiple accounts with different usernames can be created per one email address. The function is still quite simple but fully functional.

Download der Karten-Einträge

To create printed maps but also for lots of other occasions you need to have a csv-Download.

To prevent spam, not everybody can just download everything, but with a profound intrest, we send our partners a link to download your part.

Just write us a mail if you need some data with the following points

  • who are you
  • which region is relevant to you (Screenshot of the map)
  • what topic or hashtag do you need.

We send you a link for your download. The Format is csv-file Unicode (UTF-8) and Comma-separated. We suggest to use Libre Office to open, because Excel creates errorws in the linebreaks of the description. We can configure the csv file as followed:

  • Regional: bbox= … (bbox=46.377,5.537,54.92,17.27 )
  • thematic: &tags= … (Komma-separierte List von Tags) for Events only one tag: &tag= …
  • Terms: &text= …
  • Event start and end point &start_min=1579564800 (Unixtimestamp you can calculate here: https://www.epochconverter.com/)

Admins are able to export more than other users. (created_by + email + phone),

Rolecreated_byemail/phone
Guest/User (No export at all!)
Scout (without token)✔️
Scout (with token)✔️ (owned events)
❌ (other events)
✔️
Admin✔️✔️

❌ = exported field is empty