Integrate Flash Photoblog-Map into (Joomla) Community Builder
At his homepage, Mark Zeman provides a great World Map written in Flash. According to the license, it can be qualified as "Donation Ware" - you have to donate a small amount to get the Download-link.
With some small modifications, the Flash-map can be used to display the location of users registered at a community site, in my case the CMS Joomla! with the Community Builder component. The map can be seen in action at the usermap of the Round Table of Bretonnia. The following Howto is a small sum-up of my experience to integrate the Flashmap in a Joomla!-installation. Very helpful was the discussion located in the Joombers-Forum, however still some information was missing, especially concerning the new map (version 1.4)
-
Installation:
Install the map in a subfolder of your Joomla-installation, e.g. /map/ on your Webserver. The data-files will then be in /map/mapdata/. Additional layers like lakes and river can be installed into this directory too.
If you want to use Avatars in the GIF-format too, you need an additional script to convert them, imgswfproxy. Just put both files into the Root-directory of your Joomla-installation.
And finally, to create the XML the map reads to create the locations, you need mapxml.php in your /map/ directory. I prepared fhis file, and the two mentioned above in this archive.
Preparations:
In the Joomla-Backend, you need to create the following fields in Community Builder (if they don't exist already). I associated them all to a tab "location".
- city
- country
- lat
- long
Community Builder automatically adds the prefix "cb_" to the fields in the database.
Configuration:
In /imgswfproxy.php, edit the first lines to match the configuration on your server, e.g.:
require("swfimgproxy.inc.php"); $PATH_TO_IMGPROXY="$mosConfig_absolute_path"; $USE_JPEGTRAN=false; // set this to false if you do not have access to jpegtran $PATH_TO_JPEGTRAN="/usr/bin/jpegtran"; $USE_PNG2SWF=false; // set this to false if you do not have access to png2swf $PATH_TO_PNG2SWF="/usr/bin"; $USE_IMAGICK=true; // set this to false if you do not have access to Imagemagick $PATH_TO_IMAGICK="/usr/bin";It worked fine for me, just having access to ImageMagick.
In the file /imgswfproxy.inc.php you need to enter the relative hostname (in most cases localhost should work) and the absolute path of your Joomla-install on the server:
var $host = "localhost"; var $port = "3306"; var $path = "/path/on/server"; var $referer=""; var $header = array(); var $content = ""; var $error="";
Because of some security restrictions in Joomla (I guess), this configuration could not be read from Joomla directly in my case, as it was originally designed to.
Now, up to the configuration of the Map itself. Move /map/config.xml into the top level directory of the Joomla installation. Otherwise, the map will not find the configuration when included in Joomla and you will only see a black world. It took me some time to figure that out!
In the config, edit at least the first two lines to:mapxmlurl="map/mapxml.php" mapdatadir="map/mapdata/"
(or where else you installed the map files to)
Integration:
In Joomla you need to create a new static content item to contain the map. To do so, disable any WYSIWYG-Editor for you in the Backend, else the inclusion of the swf-file will be ignored.
Insert the following code, as example:
<div style="border: 1px solid brown; width: 700px;"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="map" align="middle" height="400" width="700"> <param name="allowScriptAccess" value="always"> <param name="movie" value="map/map.swf"> <param name="quality" value="best"> <param name="bgcolor" value="#ffffff"> <embed src="map/map.swf" quality="best" bgcolor="#ffffff" name="map" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="center" height="400" width="700"> </object> </div> <div class="small">Flash photoblog world map by <a href="http://www.allthegoodness.com/projects/map/" target="_blank">Mark Zeman </a></div>
Finally, you can insert a link under the map to help the users finding their latitude and longitude on the globe, this Geocoder proved to be very useful!