Get a Sample Project
Download the sampleProject archive, and extract it in the projects directory of Cartoweb3.
Rename the created folder to the name of your project.
Edit the client.ini.in of your project, and modify the mapId parameter value with the name of your project:
mapId = your_project_name
Open the server_conf directory and rename the sampleProject directory to the name of your project.
In this folder, two more files need to be renamed (sampleProject.map and sampleProject.ini) with the name of the new project.
Setup Your Project
In a command line prompt (DOS, shell), launch the cw3setup.php setup script.
<PHP-INTERPRETER> cw3setup.php --install --base-url http://localhost/cartoweb3/htdocs/ --profile development --project <nameOfYourProject>
See http://www.cartoweb.org/doc_head/docbook/xhtml/user.install.html#user.install.main.setup for more info on the installation script.
If no error occured, you should be able to access your project by typing http://localhost/cartoweb3/htdocs/client.php in your browser and selecting your project from the projects drop-down menu.
To make development easier, you can create a shortcut file to access your project directly. Go in cartoweb3/htdocs/ and copy the file demoCW3.php.
Rename the file to any name (usually your project name). Edit the file and replace 'demoCW3' by 'your_project_name'. Your project is now directly available with the URL http://localhost/cartoweb3/htdocs/your_project_name.php . (the URL given above depends on your installation, see the previous comments about cartoclientBaseUrl and --base-url).
As you can see, the project you created is hopelessly empty. Then, we'll load spatial data in it.
Add the following in the mapfile (your_project_name.map) :
LAYER NAME "region" TYPE POLYGON DATA "reg_france" TEMPLATE "ttt" CLASS NAME "region" STYLE COLOR 240 240 240 OUTLINECOLOR 255 165 96 END END METADATA "id_attribute_string" "CODE" END END
And in the layers.ini file (server_conf/your_project_name/) add the following :
layers.region.className = Layer layers.region.label = Régions layers.region.msLayer = region
And add the new layer id in the root layer children list :
layers.root.children = region
For more details on how to fill the layers.ini file, see HowToCreateALayerTree.
Also edit the your_project_name.ini file in a text editor in order to set some initial mapstates such as default selected layers.
Add the following :
mapInfo.initialMapStates.default.layers.region.selected = true
See http://www.cartoweb.org/doc_head/docbook/xhtml/user.config.html#user.config.server.maps_config.initial for more info about initialMapStates.
In your browser, click on the reset_session button and you should now see the France regions.
Move the location.ini file you will find in the sampleFiles folder into the server_conf/your_project_name/ one.
This file defines some parameters such as scales or shortcuts. For more details on how to configure those parameters, see http://cartoweb.org/doc/cw3.2/xhtml/user.location.html
Click on the reset_session button in your browser page. New elements should appear. You should be able to choose a scale and a shortcut.
Your Own Data
After that the next point is to add your own data. You should just have to :
- get your data available, by default in the data folder or somewhere else on your filesystem,
- modify the mapfile extent,
modify the extent defined in the initialMapstates (your_project_name.ini),
add layers definitions in the mapfile (your_project_name.map),
add layers definitions in the layers.ini.
- reset the session in the browser, and get your data displayed.
Let's see how to load a plugin. Edit the client.ini.in file (client_conf/) and add the outline plugin in the list of plugins to load:
loadPlugins = outline
Do the same in the your_project_name.ini file on server-side (server_conf/your_project_name/) but also add the mapOverLay plugin :
mapInfo.loadPlugins = outline, mapOverlay
Move the outline.ini file from sampleFiles to server_conf/your_project_name/.
In the mapfile (your_project_name.map), add the following at the bottom of the layers definition section :
LAYER NAME "cartoweb_point_outline" TYPE POINT CLASS STYLE SYMBOL "circle" COLOR 0 0 205 SIZE 10 END LABEL TYPE TRUETYPE FONT "Vera" SIZE 7 COLOR 0 0 0 OUTLINECOLOR 255 255 255 POSITION lc END END END LAYER NAME "cartoweb_line_outline" TYPE LINE TRANSPARENCY 100 CLASS STYLE OUTLINECOLOR 255 0 0 SYMBOL "line-dashed" SIZE 3 END LABEL TYPE TRUETYPE FONT "Vera" SIZE 7 COLOR 0 0 0 OUTLINECOLOR 255 255 255 ANGLE auto POSITION uc END END END LAYER NAME "cartoweb_polygon_outline" TYPE POLYGON TRANSPARENCY 60 CLASS STYLE COLOR 255 153 0 OUTLINECOLOR 0 0 0 END LABEL TYPE TRUETYPE FONT "Vera" SIZE 7 OUTLINECOLOR 255 255 255 COLOR 0 0 0 POSITION cc END END END
Launch the setup script. This step is compulsary to convert .ini.in files into .ini configuration files read by Cartoweb.
By clicking on the reset_session button in the browser window, you should see new buttons in the toolbar and the corresponding folder in the leftbar.
As done for the outline plugin, add "exportPdf" to the list of plugins to load on both client and server-side.
After launching the setup script and refreshing the application (reset_session), you should be able to test the new functionality as a new folder appeared in the interface. But a warning printed in the pdf file advices you to edit your exportPdf.ini file.
So move exportPdf.ini from sampleFiles to client_conf. Take care that this is a client-side configuration file. Try a new print (no need to reset).
For more information on how to edit your exportPdf.ini file, see http://www.cartoweb.org/doc/cw3.2/xhtml/user.pdf.html.
Templating and Layout
Create a new templates folder in your project directory and move the cartoclient.tpl file from sampleFiles to this new folder.
This file is the main template for CartoWeb.
Refresh the application in your browser (refresh button) and enjoy!
To customize your project even more, you may apply styles sheets. To do so, first create a htdocs folder in your project directory. In this folder, create a new folder named css. Then move cartoweb.css and folders.css from sampleFiles to this new folder.
At this step, you need to launch the setup script so that the new ressources you just created are copied or linked (depending on your OS) in a web reachable folder.
You can now refresh the browser and see the new colors and styles.