[GIS] ol is not defined Error while trying to use Openlayers 3 in Smarty template

openlayers

I'm trying to integrate an Openlayers 3 map into an Smarty-template.
The parts of the code work fine when used in a single html-(php)-page. When I integrate this code in the Smaty template, the sites displays without a map and in Firebug I get an 'ReferenceError: ol is not defined'.
All the libraries are loaded correctly and I verified, that the order of the loaded files is the same as in my working single file.

Here parts of the Smarty-Template (I left the Smarty part away, but if needed, I could provide also the entire code).
The css – files as well as the .js-files are loaded via href / src, so they are not enclosed by {literal} {/literal}. This shouldn't be the problem, since in the original Smarty-code also other css- or .js-files are implemented that way.

I use a similar architecture with the google maps api, which work with no probs, but I wan't to change to OpenLayers. I don't see, why OL isn't accessible?
The Errors I get relays to the ol-objects defined in the ol3-layerswitcher.js as well as in the mapOL.js. 

<!DOCTYPE html>
<html>
<head>

// other head-tags and Smarty-code 

    {* ------------------- Add js- and css-files for map-display ----------------------- *}     

    <link rel="stylesheet" href="./_css/ol.css" type="text/css">
    <script src="./_js/ol.js" type="text/javascript"></script>    
    <script  src="./_js/jquery-1.12.4.min.js" type="text/javascript"></script>
    <link href="./_css/fa/css/font-awesome.min.css" rel="stylesheet">
    <script src="./_js/ol3-layerswitcher.js" type="text/javascript"></script>    
    <link href="./_css/ol3-layerswitcher.css" rel="stylesheet">

    <link href="./css/custom.css" rel="stylesheet"> 
    <link href="./css/map.css" rel="stylesheet">       

    {* ------------------- End Add js- and css-files for map-display ----------------------- *} 

</head>

{* ------------------- Body starts here ----------------------- *} 
<body>
<nav>
// Navigation code from Smarty
</nav>

 {* -------------- Add map div -------------------------- *} 

        <div id="map" class="map"></div> 
        <script src="./_js/mapOL.js" type="text/javascript"></script>

 {* -------------- End Add map div ---------------------- *}

// other code from Smarty

</body>
</html>

Best Answer

After analyzing the code and trying to get it to work, I found out, that there was a problem with the require.js, when it was loaded first. This library controlls the loading and access to other js-libraries and it seemed to block the OpenLayers-library. I changed my code so that Openlayers and other map-related scripts are loaded before require.js. Now everything works fine.

Here the relevant code in the head-section of my Smarty-template:

<!DOCTYPE html>
<html{if $common->getDirection()} dir="{$common->getDirection()}"{/if}>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1">
    {if $common->getContentEncoding()}
        <meta charset="{$common->getContentEncoding()}">
    {/if}
    {$common->getCustomHead()}
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    {if $common}
        <title>{$common->getTitle()}</title>
    {else}
        <title>Error</title>
    {/if}

    <link rel="stylesheet" type="text/css" href="{$StyleFile|default:'components/assets/css/main.css'}" />
    <script type="text/javascript" src="components/js/require-config.js"></script>

    {* ------------------- Add js- and css-files for map-display ----------------------- *}     

    <link rel="stylesheet" href="./_css/ol.css" type="text/css" />
    <script type="text/javascript" src="./_js/ol.js"></script>    
    <script type="text/javascript" src="./_js/jquery-1.12.4.min.js"></script>
    <link href="./_css/fa/css/font-awesome.min.css" rel="stylesheet" />
    <script type="text/javascript" src="./_js/ol3-layerswitcher.js"></script>    
    <link href="./_css/ol3-layerswitcher.css" rel="stylesheet" />

    <link href="./css/custom.css" rel="stylesheet" /> 
    <link href="./css/map.css" rel="stylesheet" />       
    <link href="./_css/custom.css" rel="stylesheet" />

    {* ------------------- End Add js- and css-files for map-display ----------------------- *} 

    {* ------------------- code block that loads require.js ----------------------- *}        
    {if $common->getMainScript()}
        <script type="text/javascript" data-main="{$common->getMainScript()}" src="components/js/libs/require.js"></script>
    {else}
        <script type="text/javascript" src="components/js/libs/require.js"></script>
    {/if}
    {* ------------------- End of code block that loads require.js ----------------------- *}
{$HeadBlock} 
</head>
Related Question