Applying Joomla template to Geodata viewer

EasySDI Map is delivered with the minimum css defined to have a nice render in the default Joomla! template Beez.

If you want to use your own template or refine the default rendering, you need to do some CSS tweaking.

The Geodata viewer is render in div defined like this :

<div id="sdimapcontainer" class="cls-sdimapcontainer"></div>

The default css class definition have been added to a css file embedded in the component Map to be available right after the installation.


Basically, the main class is

.cls-sdimapcontainer {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    text-align: left;

What you have to know before changind this css is that the changes made in this file will be applied to all the Geodata viewers in your site, no matter the template actually used in the Joomla page.
As the Geodata viewer can be used in many contexts inside a unique site (with many renders expected), the use of multiple templates is highly probable.

So we recommand to define the css classes applied to the Geodata viewer in each template used by your site.
You juste have to define the style of the class cls-sdimapcontainer, or even of the element sdimapcontainer, in the most appropriate css file of each template and do the tweaking to get the render you need.