Embedding the Elafent App

The documentation below provides an outline and examples of how the Elafent app can be embedded in your website.

Initializing the Elafent App

Usage example

    // Initialize the Elafent App on the "elafent-react-root" DIV with your Authentication token.
    
    ElafentApp.init({
        token : "{{AUTHENTICATION_TOKEN}}"
    });

Example HTML

The following steps will need to be applied in your content management system. This will be different across various systems.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         /* Step 1: In your CSS, you should provide a height (required) for the Elafent "DIV" element which is referred to in Step 2 as the "id" attribute. The name should be "elafent-react-root". A width can optionally be specified depending on your parent CSS behaviour. The z-index property specifies the z-order of a positioned element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one. You may want to bring the map to the front in fullscreen mode by setting a higher z-index value. */

        #elafent-react-root {
            height: 500px;
            width: 500px;
        }
        #elafent-react-root.embedded-fullscreen {
              z-index: 9999999999;
        }
    </style>
</head>
<body>
    <p>Your HTML page content goes here.</p>
    
    <!-- Step 2: At the desired location in the page, insert the Elafent React root into the body of the HTML as an empty DIV element (or similar) having an "id" with value "elafent-react-root" -->
    <div id="elafent-react-root"></div>
    
    <!-- Step 3: Load the following JavaScript just before the closing HTML body tag -->
    <script type="text/javascript" src="https://app.elafent.com/elafent.polyfill.js" defer></script>
    <script type="text/javascript" src="https://app.elafent.com/elafent.app.js" defer></script>

    <!-- Step 4: Replace AUTHENTICATION_TOKEN with the authentication token provided for your workspace. -->
    <script type="text/javascript" defer>
        document.addEventListener("DOMContentLoaded", function(){
            ElafentApp.init({
                token : "{{AUTHENTICATION_TOKEN}}"
            });
            
            // Step 5 (Optional): You may override the styles within the Elafent app with your own CSS.
            ElafentApp.setCss('\
                #elafent-container { font-family : Times } \
            ')

            // Step 6 (Optional): You may add event handlers for the events documented under the Events section, earlier in this documentation.
            ElafentApp.events.on('searchQuery', function (event) {
                console.log(JSON.stringify(event));
            })
        });
    </script>
</body>
</html>

Override the CSS

Usage example

    // Override the font used in the Elafent app.
    
    ElafentApp.setCss('\
        #elafent-container { font-family : Times } 
    ')

Events

Examples

An example that responds to every event and puts the output to the console.

    
    ElafentApp.events.onAny(function (name, event) {
        console.log(`Analytics: ${name} ${JSON.stringify(event)}`);
    });

An example to send the searchQuery event to Google Tag Manager.

    
    ElafentApp.events.on('searchQuery', function (event) {
        window.dataLayer.push({
            "event" : "elafentEvent"
            , "action" : event.name
            , "label" : event.data.searchTerm
        });
    });

Supported Events

The following events are supported:

Event Event Object
copyTextToClipboard { name : "copyTextToClipboard", data : { text : value }}
selectFeature { name : "selectFeature", data : { feature : feature }}
resetMap { name : "resetMap", data : {}}
switchBaseMap { name : "switchBaseMap", data : { url : value , type : value , options : value }}
goToFeature { name : "goToFeature", data : { feature : feature }}
toggleLayer { name : "toggleLayer", data : { layer : value , isSelected : value }}
clearAllFilters { name : "clearAllFilters", data : {}}
selectAllFilters { name : "selectAllFilters", data : {}}
useMyLocation { name : "useMyLocation", data : { position : value , address : value }}
searchQuery { name : "searchQuery", data : { searchTerm : value , latLng : value }}
switchView { name : "switchView", data : { view : value }}

Note:

  • The feature object returned for selectFeature and goToFeature is a GeoJSON feature object.