Mapbender3 comes with application templates you can use. But usually you want to use your own template with your own corporate design. This document will show you how to create a Workshop DemoBundle for demonstration purposes.
There are 4 steps you have to follow on the way to your own template.
Notice: We already prepared a Workshop/DemoBundle that you can use as a template. You can download it here:
User bundles are stored in the src-directory.
This is how the structure can look like:
src/Workshop/DemoBundle
/Resources
/public
demo_fullscreen.css
demo_theme.css
/imgage
workshop.ico
workshop_logo.png
print.png
...
/views
/Template
fullscreen_demo.html.twig
/Template
DemoFullscreen.php
The file WorkshopDemoBundle.php creates the namespace for the bundle and refers to the template.
<?php
namespace Workshop\DemoBundle;
use Mapbender\CoreBundle\Component\MapbenderBundle;
class DemoFullscreen extends MapbenderBundle
{
...
}
public static function getTitle()
{
return 'DemoFullscreen';
}
...
->render('WorkshopDemoBundle:Template:demo_fullscreen.html.twig',
In our example the template file is called FullscreenDemo.php. You find it at src/Workshop/DemoBundle/Template/FullscreenDemo.php.
In the template file you define the name of your template, the regions that you want to provide and refer to a twig file.
You find the twig-files at the following path:
The easiest way to create your own twig file is to copy an existing twig, save it under a new name and change the content like colors.
cd mapbender/src/Workshop/DemoBundle/Resources/views/Template
use an existing template and copy it to fullscreen_demo.html.twig
The css-files are located in application/mapbender/src/Mapbender/CoreBundle/Resources/public/css. Create your own css file and edit the content.
cd fom/src/FOM/CoreBundle/Resources/public/css/frontend
# css for frame (container position)
copy the file fullscreen.css to src/Workshop/DemoBundle/Resources/public/demo_fullscreen.css
# css for colors, fonts, icons
copy the file mapbender3_theme.css to src/Workshop/DemoBundle/Resources/public/demo_theme.css
To register your template you have to create a file at
cd mapbender/src/Mapbender/CoreBundle/Template
cp Fullscreen.php mapbender/src/Workshop/DemoBundle/Template/DemoFullscreen.php
Add the fully qualified Template class name to your Bundles setup class getTemplates function:
public function getAssets($type)
{
parent::getAssets($type);
$assets = array(
'css' => array('@WorkshopDemoBundle/Resources/public/css/demo_theme_demo.css,@WorkshopDemo/Resources/public/css/demo_fullscreen.css'),
'js' => array(),
);
return $assets[$type];
}
public function render($format = 'html', $html = true, $css = true,
$js = true)
{
$templating = $this->container->get('templating');
return $templating
->render('WorkshopDemoBundle:Template:demo_fullscreen.html.twig',
array(
'html' => $html,
'css' => $css,
'js' => $js,
'application' => $this->application));
}
Edit your twig-file and refer to the new css-files
<link rel="stylesheet" href="{{ asset('bundles/workshopdemo/css/demo_theme.css') }}">
<link rel="stylesheet" href="{{ asset('bundles/workshopdemo/css/demo_fullscreen.css') }}">
Now you can use the template in mapbender.yml where you can configure applications.
You find the mapbender.yml at:
"template: Workshop\DemoBundle\Template\DemoFullscreen"
When you create a new application through the Mapbender3 administration you have to choose a template you want to use.
Before your new template will show up you have to register your bundle in the file app/AppKernel.php
class AppKernel extends Kernel
{
public function registerBundles()
{
$bundles = array(
// Standard Symfony2 bundles
new Symfony\Bundle\FrameworkBundle\FrameworkBundle(),
....
// Extra bundles required by Mapbender3/OWSProxy3
new FOS\JsRoutingBundle\FOSJsRoutingBundle(),
// FoM bundles
new FOM\CoreBundle\FOMCoreBundle(),
...
// Mapbender3 bundles
new Mapbender\CoreBundle\MapbenderCoreBundle(),
...
new Workshop\DemoBundle\WorkshopDemoBundle(),
);
Update the web-directory. Each bundle has it’s own assets - CSS files, JavaScript files, images and more - but these need to be copied into the public web folder:
app/console assets:install web
Alternatively, as a developer, you might want to use the symlink switch on that command to symlink instead of copy. This will make editing assets inside the bundle directories way easier.
app/console assets:install web --symlink --relative
Now your template should show up in the list.
You have to edit the following files, if want to change the design
Notice: In demo_fullscreen.css the beginning of the file is concerned for browser specific css. Do not edit this part. The part you can edit starts at row 430.
The logo (default is the Mapbender3 logo) can be changed in the parameters.yml. Which causes a global change.
server_logo: bundles/workshopdemo/image/workshop_logo.png
Or in the twig file:
<img class="logo" height="40" alt="Workshop Logo" src="{{ asset('bundles/workshopdemo/imgage/workshop_logo.png')}}" />
{% block title %}Workshop - {{ application.title }}{% endblock %}
{% block favicon %}{{ asset('bundles/workshopdemo/imgage/workshop.ico') }}{% endblock %}
Mapbender3 uses Fonts from the FontAwesome collection have a look at your demo_theme.css (or mapbender3_theme.css)
@font-face {
font-family: 'FontAwesome';
src: url("../../bundles/fomcore/images/icons/fontawesome-webfont.eot?v=3.0.1");
src: url("../../bundles/fomcore/images/icons/fontawesome-webfont.eot?#iefix&v=3.0.1") format("embedded-opentype"), url("../../bundles/fomcore/images/icons/fontawesome-webfont.woff?v=3.0.1") format("woff"), url("../../bundles/fomcore/images/icons/fontawesome-webfont.ttf?v=3.0.1") format("truetype");
font-weight: normal;
font-style: normal; }
In the file demo_theme.css the font images are refered like this:
.iconPrint:before {
content: "\f02f";
If you want to use an image you could place the image in your bundle and refer to it like this
.iconPrint:before {
content:url("imgage/print.png");}