CartoGraf is an interactive web-based mapping application to enhance learning in history and geography classes in high schools. CartoGraf is mainly based on
Maps,
Drawings,
PluginAppFrame and
Trackers. It is a great example of how to use profiles in a general purpose app (Tiki) to make a very specific application.
As of June 2012, it is in Beta. You can play with the demo at:
http://demo.tiki.org/cartograf/ (password is at:
http://demo.tiki.org/)
To get your own copy of CartoGraf
- Download and Install
Tiki9 As of 2012-07-10, you need to get branches/10x (future Tiki10.0) for the latest and greatest goodies :-) (Use the Daily Build of from SVN)
- Apply the CartoGraf profile
- Follow the profile Setup instructions
We hope you like it and please do join the community!
Note: rewrite rules are essential for this profile
Work in Progress...
(Do not use Kaltura wikiplugin as it is not enabled in default install when viewing the profile before apply)
Pages included by this profile
Using:
General Preferences
YAML
instructions: Setup
preferences:
feature_sefurl: y
allowRegister: y
browsertitle: CartoGraf Project
tracker_refresh_itemlink_detail: y
geo_always_load_openlayers: y
url_after_validation: Account_Validated
feature_jquery_ui_theme: start
feature_left_column: n
tracker_clone_item: y
toolbar_trackers: bold,list,numlist,wikiplugin_youtube
fgal_tracker_existing_search: y
fgal_elfinder_feature: y
layout_add_body_group_class: y
useGroupHome: y
Temporary
YAML
preferences:
validateUsers: n
feature_antibot: n
Limit username pattern
CartoGraf relies heavily on
Unified Search (Zend_Search_Lucene). Because of this, a username jean-marc won't work (but jean_marc is OK). Since hypens are often used in emails, you can't use CartoGraf with the pref "Use email as username" (login_is_email). Space and quote should also not be permitted.
YAML
preferences:
username_pattern: /^[_a-zA-Z0-9]*$/
login_is_email: n
Permissions
YAML
permissions:
Anonymous:
allow:
- search
- view_trackers
- tracker_view_attachments
Registered:
allow:
- attach_trackers
- create_tracker_items
- add_object
- remove_object
- upload_files
- view_file_gallery
Users
YAML
objects:
-
type: users
data:
name: $profilerequest:Test User 1 Login Name:$demo$
email: $profilerequest:User 1 Email (optional):$ $
groups: [ $profilerequest:Groups User 1 should be assigned (for more groups separate them by comma):$Registered$ ]
Look & Feel
YAML
preferences:
style: CartoGraf.css
feature_fixed_width: n
jquery_ui_selectmenu: y
feature_page_title: n
feature_sitelogo: y
wiki_edit_plugin: n
sitelogo_src: styles/CartoGraf/logo.gif
YAML
objects:
-
type: menu
ref: CartoGraf_Top_menu
data:
name: Top
description: A menu containing the base navigation of the site
collapse: none
items:
-
name: Home
url: ((HomePage))
-
name: Partners
url: ((Partners))
-
name: Help
url: ((Help))
-
name: Setup
url: ((Setup))
permissions: [ admin ]
-
type: menu
ref: CartoGraf_RightEdge_menu
data:
name: RightEdge
description:
collapse: none
items:
-
name: Register
url: tiki-register.php
-
name: Demo
url: ((Demo))
-
name: Contact
url: ((Contact))
Modules
YAML
preferences:
modseparateanon: y
objects:
-
type: module
ref: LiveHeaderMap_module
data:
position: top
order: 0
name: LiveHeaderMap
groups: [ Anonymous, Registered ]
params:
nopage: Map
custom: <div id="TheLiveHeaderMap" style="height:188px"></div>
-
type: module
ref: LocationSearch_module
data:
position: top
order: 49 #ensure the map location search is assigned as last module
name: map_search_location
groups: [ Registered ]
params:
legacy_mode: search_box
show_search_button: y
show_go_button: n
show_edit_button: n
default_button: search
page: Map
nobox: y
style: "float: right; margin-right: 15px" #most of the params ignored as the module is not standard and does have no module div rendered but just the form tag (TODO: fix in Tiki)
-
type: module
ref: TopMenu_module
data:
position: top
order: 1
name: menu
groups: [ Anonymous, Registered ]
params:
id: $CartoGraf_Top_menu
type:horiz
css:y
menu_id:TopMenu
translate:y
nobox:y
decorations:n
notitle:y
style: "float: left; margin-left: 350px"
-
type: module
ref: RightEdgeMenu_module
data:
position: right
order: 1
name: menu
groups: [ Anonymous ]
params:
id: $CartoGraf_RightEdge_menu
menu_id: RightEdgeMenu
nobox: y
nopage: Map
Features
YAML
preferences:
feature_wiki: y
feature_articles: n
feature_mytiki: n
feature_trackers: y
geo_tilesets: [mapquest_street, mapquest_aerial, google_street, google_satellite, google_physical, google_hybrid, blank]
geo_google_streetview: y
geo_google_streetview_overlay: y
wikiplugin_appframe: y
wikiplugin_list: y
feature_search: y
feature_wiki_argvariable: y
trackerfield_geographicfeature: y
fgal_upload_from_source: y
Drawing
YAML
preferences:
feature_draw: y
feature_draw_hide_buttons: ellipse_cx, tool_ellipse_cy, tool_ellipse_rx, tool_ellipse_ry, rect_width_tool, rect_height_tool, cornerRadiusLabel, tool_eyedropper, view_grid, tool_angle, tool_blur, tool_position, xy_panel, marker_panel, tool_reorient, rulers, tool_source, tool_zoom, tool_eyedropper, view_grid, tool_wireframe, line_panel, main_button
Trackers
Points of interest
YAML
objects:
-
type: tracker
ref: pointsOfInterest
data:
name: Points of interest
allow: [creator_modification, creator_deletion]
show: list_modification_date
section_format: tab
-
type: tracker_option
data:
tracker: $pointsOfInterest
name: popup_fields
value: "$profileobject:poiImage$,$profileobject:poiDescription$,$profileobject:poiFinder$"
-
type: tracker_field
ref: poiName
data:
order: 10
name: Name
type: text_field
tracker: $pointsOfInterest
flags: [ mandatory, list, title, link, searchable ]
-
type: tracker_field
ref: poiDescription
data:
order: 20
name: Description
type: text_area
options: "1,,12"
tracker: $pointsOfInterest
flags: [ ]
-
type: tracker_field
ref: poiIcon
data:
order: 30
name: Icon
type: icon
tracker: $pointsOfInterest
flags: [ list ]
options: "$profileobject:iconContainer$"
-
type: tracker_field
ref: poiCoordinates
data:
order: 40
name: Coordinates
type: header
tracker: $pointsOfInterest
-
type: tracker_field
ref: poiLocation
data:
order: 50
name: Location
type: map
options: "1"
tracker: $pointsOfInterest
flags: [ mandatory ]
-
type: tracker_field
ref: poiAttachments
data:
order: 60
name: Attachments
type: header
tracker: $pointsOfInterest
-
type: tracker_field
ref: poiImage
data:
order: 70
name: Image
type: files
options: "$profileobject:imageContainer$,image/*,1,1,,,1,n,0"
tracker: $pointsOfInterest
flags: [ ]
-
type: tracker_field
ref: poiDetails
data:
order: 80
name: Details
type: header
tracker: $pointsOfInterest
-
type: tracker_field
ref: poiMap
data:
order: 90
name: Map
type: item_link
options: "$profileobject:maps$,$profileobject:mapName$,0,,opc,,,,0,0,exact,one,0,$profileobject:mapShareCode$"
tracker: $pointsOfInterest
flags: [ mandatory, list, title, searchable ]
permname: map
visible: immutable
-
type: tracker_field
ref: poiFinder
data:
order: 100
name: Finder
type: user
options: "1"
tracker: $pointsOfInterest
flags: [ mandatory, list ]
permname: finder
visible: immutable
Zones
This is both for polygons and paths
YAML
objects:
-
type: tracker
ref: zones
data:
name: Zones
allow: [creator_modification, creator_deletion]
show: list_modification_date
section_format: tab
-
type: tracker_option
data:
tracker: $zones
name: popup_fields
value: "$profileobject:zoneImage$,$profileobject:zoneDescription$,$profileobject:zoneFinder$"
-
type: tracker_field
ref: zoneName
data:
order: 10
name: Name
type: text_field
tracker: $zones
flags: [ list, title, link, searchable ]
-
type: tracker_field
ref: zoneDescription
data:
order: 20
name: Description
type: text_area
options: "1,,12"
tracker: $zones
flags: [ ]
-
type: tracker_field
ref: zoneAttachments
data:
order: 30
name: Attachments
type: header
tracker: $zones
-
type: tracker_field
ref: zoneImage
data:
order: 40
name: Image
type: files
options: "$profileobject:imageContainer$,image/*,1,1,,,1,n,0"
tracker: $zones
flags: [ ]
-
type: tracker_field
ref: zoneDetails
data:
order: 50
name: Details
type: header
tracker: $zones
-
type: tracker_field
ref: zoneMap
data:
order: 60
name: Map
type: item_link
options: "$profileobject:maps$,$profileobject:mapName$,0,,opc,,,,0,0,exact,one,0,$profileobject:mapShareCode$"
tracker: $zones
flags: [ mandatory, list, title, searchable ]
permname: map
visible: immutable
-
type: tracker_field
ref: zoneFinder
data:
order: 70
name: Finder
type: user
options: "1"
tracker: $zones
flags: [ mandatory, list ]
permname: finder
visible: immutable
-
type: tracker_field
ref: zoneFeature
data:
order: 80
name: Zone
type: geographic_feature
options: ""
tracker: $zones
flags: [ mandatory ]
Maps
YAML
objects:
-
type: tracker
ref: maps
data:
name: Maps
allow: [creator_modification, creator_deletion]
show: list_modification_date
section_format: tab
-
type: tracker_option
data:
tracker: $maps
name: popup_fields
value: "$profileobject:mapDescription$"
-
type: tracker_field
ref: mapName
data:
name: Name
type: text_field
tracker: $maps
order: 10
flags: [ mandatory, list, title, link, searchable ]
-
type: tracker_field
ref: mapDescription
data:
name: Instructions
type: text_area
options: "1,,15"
tracker: $maps
order: 20
flags: [ searchable ]
-
type: tracker_field
ref: mapShareCode
data:
name: Share Code
type: text_field
tracker: $maps
flags: [ list ]
options: "0,10,,,15
order: 30
permname: shareCode
-
type: tracker_field
ref: mapDetailsHeader
data:
name: Change Base location
type: header
tracker: $maps
order: 40
-
type: tracker_field
ref: mapBaseLocation
data:
name: Base Location
type: map
tracker: $maps
order: 50
flags: [ mandatory ]
-
type: tracker_field
ref: mapOwner
data:
name: Owner
type: user
options: "1"
tracker: $maps
order: 60
flags: [ mandatory, list ]
permname: owner
visible: immutable
Legends
YAML
objects:
-
type: tracker
ref: legend
data:
name: Legend
allow: [creator_modification, creator_deletion]
show: list_modification_date
-
type: tracker_field
ref: legendIcon
data:
name: Icon
type: icon
tracker: $legend
flags: [ mandatory, list ]
order: 10
options: "$profileobject:iconContainer$"
-
type: tracker_field
ref: legendText
data:
name: Text
type: text_field
tracker: $legend
order: 20
flags: [ mandatory, list, title, link, searchable ]
-
type: tracker_field
ref: legendMap
data:
name: Map
type: item_link
options: "$profileobject:maps$,$profileobject:mapName$,0,,opc,,,,0,0,exact,one,0,$profileobject:mapShareCode$"
tracker: $legend
flags: [ mandatory, list, title, searchable ]
permname: map
order: 30
visible: immutable
-
type: tracker_field
ref: legendFinder
data:
name: Finder
type: user
options: "1"
tracker: $legend
order: 40
flags: [ mandatory, list ]
permname: finder
visible: immutable
File Galleries
YAML
objects:
-
type: file_gallery
ref: iconContainer
data:
parent: 1
name: Icons
description: Icons available for selection in the map.
owner: admin
archives: 5
flags: []
column: [ icon, name, created, creator, files ]
init_files:
- http://profiles.tiki.org/pics/icons/plugin.png
-
type: file_gallery
ref: imageContainer
data:
parent: 1
name: Image Uploads
description: Images uploaded by students
owner: admin
archives: -1
flags: [ public, visible ]
column: [ icon, name, created, creator, files ]
-
type: file_gallery
ref: imageBank
data:
parent: 1
name: Image Bank
description: Images uploaded by site admins, for use by teachers and students
owner: admin
archives: -1
flags: [ visible ]
column: [ icon, name, created, creator, files ]
Wiki Pages
YAML
objects:
-
type: wiki_page
ref: home_page
data:
name: HomePage
content: wikicontent:CartoGraf_HomePage
-
type: wiki_page
ref: cartograf_setup
data:
name: Setup
description: Post-Profile Setup Instructions
lang: en
content: wikicontent:CartoGraf_Setup
-
type: wiki_page
ref: cartograf_help
data:
name: Help
description: Help
lang: en
content: wikicontent:CartoGraf_Help
-
type: wiki_page
ref: account_validated_page
data:
name: Account_Validated
description: Account Validated
lang: en
content: wikicontent:CartoGraf_NewAccountValidationIncludedPage
-
type: wiki_page
ref: demo_page
data:
name: Demo
lang: en
content: wikicontent:CartoGraf_Demo
-
type: wiki_page
ref: partners_page
data:
name: Partners
lang: en
content: wikicontent:CartoGraf_Partners
-
type: wiki_page
ref: contact_page
data:
name: Contact
lang: en
content: wikicontent:CartoGraf_Contact
Application Frame Pages
YAML
objects:
-
type: wiki_page
ref: map_page
data:
name: Map
content: wikicontent:CartoGraf_Map
-
type: wiki_page
ref: mapcanvas_share_page
data:
name: MapCanvasShare
content: wikicontent:CartoGraf_MapCanvasShare
-
type: wiki_page
ref: mapcanvas_solo_page
data:
name: MapCanvasSolo
content: wikicontent:CartoGraf_MapCanvasSolo
-
type: wiki_page
ref: mapselector_page
data:
name: MapSelector
content: wikicontent:CartoGraf_MapSelector
Developer notes
- When you apply the profile, you may see "Preference set: geo_tilesets=Array" in the response. This is a cosmetic error. The preference is set correctly.
1-liner to re-install a fresh Tiki with profile
php installer/shell.php install; sh setup.sh fix; php lib/search/shell.php rebuild; php lib/profilelib/shell.php install CartoGraf; php lib/profilelib/shell.php install Screencast ; sh setup.sh fix; php lib/search/shell.php rebuild; sh setup.sh fix
Todos
Marc
How could we have?
- A way to have Max disk space per user 20Megs chaque
- When a map is deleted, associated markers, zones and legends should as well.
- Have a web service to delete users (because they are deleted in another system)
- When a user is deleted, so are the maps (and from the maps, the markers, zones and legends as well
- A way to start a drawing when there is no image in the background?
Image bank
- Clarify use case: It is forked/copied because we don't want the SVG overlay.
- The current file search has problems
- Doesn't work for Street View images
- If one person draws on them, that drawing appears for all
- There is no visual browse
- What are permissions?
- Site admins add pictures
- All registered users can copy them to their accounts
luci
- Can we use a wiki page for footer instead of credits.tpl, for easier management ?
- Partners link could be part of this footer page instead of the top
-
Add <a href="MyMaps">{tr}My Maps{/tr}</a> in the top-right "Map" module slide-in — done
-
Replace http://demo.tiki.org/cartograf/styles/CartoGraf/img/btnOutils_1.png with something that looks like an "edit" button like what you would have in any other software. The user should get that this is to edit the marker. — done
-
Attribution like Google Maps: http://wiki.openstreetmap.org/wiki/MapQuest#MapQuest-hosted_map_tiles — done
-
Replace this with an image which is packaged in the theme
#LiveHeaderMap {background: url("http://profiles.tiki.org/tiki-download_wiki_attachment.php?attId=65") center -130px repeat-x;}
— done
-
Please move up right-hand pop-out sliders to be higher on the page, as when they open up, we need all the space we can get
-
Make all buttons/links look good
-
Map module
-
Description link
-
Edit link
-
My Maps link (recently created)
-
Join map button (you see this when someone emails you share code)
-
Duplicate map button (you see this when someone emails you share code)
-
Share module
- — done
-
Hide the right-hand button/link to tiki-register.php when user is Registered. — done
Jonny and/or Robert
- UI of file field type for trackers
-
Integrate http://elfinder.org/ as a file browser / picker Done
- Can you add a way to restrict to certain file galleries (ex.: Gallery #3 and children)
- Should be done r43770 (jb)
- Please set the profile to pick from the "Image Bank" file gallery and children (ml)
- The image should be copied (forked) as if it was an image from an external site. Copied from File Gallery "ref: imageBank" (populated by site admins) to "ref: imageContainer" (Images uploaded by students)
- Since this is the less common use case, another option to use/link would make a lot of sense
- Don't really follow this one - guess it needs to be some sort of option on tracker Files field... discuss (jb)
- Or maybe it should be "forked" when someone draws on it? (so part of svg-edit)
- Ok, let's discuss with Robert (ml)
- 2012-11=09 discussion with CartoGraf team
SVG-edit / Files in trackers: Duplicate Map (to be discussed)
- Plan A: Background image is the same for all dups (save disk space, and like StreetView). SVG drawing be duplicated, and thus, editable and independant
- Plan B: Background image is duplicated (Thus, uses more disk space) SVG drawing be duplicated, and thus, editable and independant
- Plan C: Background image is the same for all dups (save disk space, and like StreetView). SVG drawing doesn't not follow, but user can recreate
Jonny
-
Looks like I broke "Join" when I renamed to collaborate fixed
-
Map slideout : change CSS of "My Maps" (which now links to HomePage) to be like in screenshot I emailed you (I did color, now needs top right position) fixed
-
Layer selector: fix at the bottom or move to the top done
- But there is still vertical scroll
- Merge MyMaps into HomePage and fix all references in the profile. ( a test of this is active on demo.tiki.org/cartograf)
- We just show alternate content to anonymous users (general info about project and registration link)
- One top menu disappears (yay!)
- As of 2012-11-25 merge was done, text/box title is incorrect
-
When join a map, copy name and instructions (ideally in the background). They are viewable/editable if the user desires Looks good now
-
Dupe and join buttons need perm check Looks good now
-
After adding a PoI/StreetView you fill form, but after you should be in pan/zoom mode Done
-
When click shared map code, view with opened tab
-
Bookmarkable slide-out of right hand sliders and/or some wizard-like pop-ups to explain to the user how it works (start using http://framindmap.org/framindmap.html to see what I mean). So we can link/document to how to create a map (now you need to know to open the slider) Done
- text areas now have a height, which works in system tracker interface, but not via the end user interface to create maps
-
works via tiki-view_tracker.php but not in end-user interface with latest svn up and refresh of templates (but seemed to work for a while). If you need tpl changes, attach them to this wiki page Done - was set to fixed height in the css, i changed it to min-height (guessing that was what was meant) (jb)
- Add a tracker setting to make tracker management via tiki-view_tracker.php accessible only to tiki_p_admin_trackers for that tracker (or a similar strategy to reach this objective)
- For example, if you now click in top-right map slideout box, and then "description", you have a clickable link to tiki-view_tracker.php Another example is in print mode. Perhaps we could should make a template in wiki pages for this? (à la Pretty Tracker with Template to display an item wiki:pageName for a wiki page or tpl:tplName for a template
- Would have to be in trunk now, or wait until after 10.0 release? (jb)
- Can be in trunk and we'll backport for this specific project (or apply for a backport to 10.x)
-
Hide background wiki page while map loads (fraction of a second of ugliness)
-
The site requires IE9 (which is required for SVG-edit): can we have some sort of bubble, overlay, topline or something to warn users they have to upgrade their browser? Related: https://dev.tiki.org/item2710 resolved. There is now a file styles/CartoGraf/custom.js
- Add a "duplicate map" (which is to duplication your own map) link/button in the map slideout box.
-
Ideally, it asks for name of new map, if not, it calls it ABC-copy done
-
Ideally a delete map button as well
- How can it also delete the related data (zones and PoIs) (see with LPH )
-
Move edit button inside description infobox done
-
Option for infobox (description popup) to be div rather than table layout done
- Can we have lang/**/custom.js ? which would be cleaner than what we have at CartoGraf_languages
- For zooms to be higher level like here: http://openlayers.org/dev/examples/google.html (Street/Hybrid/Satellite)
Only if easy
- Ideally, in tracker file/image upload, make the image visible after upload (right now, it's just the text of the name of the file)
- Again, now in trunk or after 10.0? (jb)
- If easy, jQuery pop-up make smaller when there is not a lot of content (better for small screens) . For example, when you delete an item.
LP
-
Add a way for a user to delete his own map done by Jonny
- What about PoIs/Zones that are in the other trackers?
- At the end, make a French language profile for content and the top-level icons
- When site is in French, SVG-edit is as well
Robert
-
Sometimes, SVG-edit starts without a background canvas. Any idea why? fixed for Chrome
Testing with 2 registered users
Sharing
Joining
- Test: Registered user should only be able to draw on own pictures? bug or feature?
- Can user A join a map of user B?
Duplicating
- Can user A duplicate/fork a map of user B? (but not join)
- In which case, all the elements are independant, and can be deleted. If map
Phase 2
Where will future development take place?
As of now, it's a combination of files attached to the current page, and a SVN repo on Jonny's server. This was OK for phase 1, but will need to change.
The options are:
- GitHub
- Pros: nice UI
- Cons: not FOSS, and Git instead of SVN
- Mods
- Pros: can designed for this
- Cons: not maintained
- A new SourceForge.net project, with Allura
- Pros: Allura is FOSS, clear distinction so good marketing
- Cons: extra maintenance (who will do it?)
- on profiles.tiki.org with PluginArchiveBuilder
- Pros: web-based commits
- Cons: not a real SCM
- Fossil: http://fossil-scm.org/index.html/doc/trunk/www/fossil-v-git.wiki which is like Github-in-a-box
- Pros: Simple
- Cons: Not well-known
- elsewhere
2012-11-25: Louis-Philippe is devising a system for Citadel Rock, so we will likely use this when it's ready.
SVG-edit UI
-
This has been requested from Mark MacKay because he already has commit access to SVG-edit and a lot of experience with it Will be commited any day now
SVG-edit
jCapture-applet
Export and sharing
- Evaluate how to share map data between two cartograf applications or with other mapping apps
elFinder
- elFinder: Perhaps thumbnails could be bigger than now, so as to not have to preview each image
- Tried, would need complex css changes to stop layout breaking up badly
- Ok, leave as is, then for phase 1 and we re-investigate for phase 2
Other ideas
- tracker logging in profile?
- A way to delete old/inactive users and all their data (including tracker data)
- See if there would be a way to not limit usernames to A-Z, 0-9 and _ (underscore) which is because we are using Zend_Search_Lucene
- Login box pop-up confusion. You mouse-over and click so you see box and then page refreshes...
- A started profile with realistic course data
- More videos
- More docs
- A microsite would be nice but need to think of maintainability
TimeMap