1

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> 
2

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.