Qfyilyi

As a start, Javascript is way out of my comfort zone. On my website I want to show a map, however the load time is pretty high and contains a lot of requests. So in order to for come a long page load, why not let the user click a button and than load the javascript. One restriction, the map should be displayed in a specific row and column.

What I have so far, the area and a button:

<div class="row">

   <div class="col-4">

       <input type="button" class="button-class" onclick="myFunc(this)">

           <script type="text/javascript">

             var width='100%';   // the width of the embedded map in pixels or percentage 

              var height='300';   // the height of the embedded map in pixels or percentage 

              var border='1'; // the width of the border around the map (zero means no border) 

              var shownames='true';   // to display ship names on the map (true or false) 

              var latitude='51.7143'; // the latitude of the center of the map, in decimal degrees 

              var longitude='04.0889';    // the longitude of the center of the map, in decimal degrees 

              var zoom='11';  // the zoom level of the map (values between 2 and 17) 

              var maptype='0';    // use 0 for Normal Map, 1 for Satellite, 2 for OpenStreetMap 

              var trackvessel='' //244770624';     MMSI of a vessel (note: vessel will be displayed only if within range of the system) - overrides "zoom" option 

              var fleet='';   // the registered email address of a user-defined fleet (user's default fleet is used) 

              // Read more at http://www.marinetraffic.com/en/p/embed-map#6YXCVvOUaBxYHgoT.99

              function myFunc(e) {

                  if ("https:" == document.location.protocol) {

                      /* secure */

                      var src = (typeof localembed != 'undefined') ? 'https://marinetraffic.local/' : 'https://www.marinetraffic.com/';

                  } else {

                      /* unsecure */

                      var src = (typeof localembed != 'undefined') ? 'http://marinetraffic.local/' : 'http://www.marinetraffic.com/';

                  }



                if ((window.latitude === undefined) && (window.longitude === undefined) && ( (window.fleet !== undefined && window.fleet != "") || (window.fleet_id !== undefined && window.fleet_id != ""))) {

                  window.latitude = 0;

                  window.longitude = 0;

                }



                if (typeof window.mtembedcode != "undefined") {

                  var overridenLatLon = '';

                  if(window.latitude !== undefined && window.latitude != ''  && window.longitude !== undefined && window.longitude != ''){

                    if(window.zoom === undefined){

                      window.zoom = 3;

                    }

                    overridenLatLon = '/zoom:' + ((window.zoom === undefined) ? '' : zoom) + '/centery:' + ((window.latitude === undefined) ? '' : latitude) + '/centerx:' + ((window.longitude === undefined) ? '' : longitude);

                  }

                  document.write(

                    '<iframe name="marinetraffic" id="marinetraffic"' + ' width="' + ((window.width === undefined) ? '550' : width) + '"' + ' height="' + ((window.height === undefined) ? '300' : height) + '"' + ' scrolling="no" frameborder="' + ((window.border === undefined) ? '0' : border) + '"' + ' src="' + src + ((window.language === undefined) ? 'en' : language) + '/ais/customembed' + overridenLatLon + '/mmsi:' + ((window.trackvessel === undefined) ? '0' : trackvessel) + ((window.trackimo !== undefined) ? '/trackimo:' + window.trackimo : '') + '/mtembedcode:'  + window.mtembedcode + '">Browser does not support embedded objects.<br/>Visit directly <a href="http://www.marinetraffic.com/">www.marinetraffic.com</a>' + '</iframe>n'

                  );

                } else {

                  document.write(

                    '<iframe name="marinetraffic" id="marinetraffic"' + ' width="' + ((window.width === undefined) ? '550' : width) + '"' + ' height="' + ((window.height === undefined) ? '300' : height) + '"' + ' scrolling="no" frameborder="' + ((window.border === undefined) ? '0' : border) + '"' + ' src="' + src + ((window.language === undefined) ? 'en' : language) + '/ais/embed' + '/zoom:' + ((window.zoom === undefined) ? '3' : zoom) + '/centery:' + ((window.latitude === undefined) ? '36' : latitude) + '/centerx:' + ((window.longitude === undefined) ? '23' : longitude) + '/maptype:' + ((window.maptype === undefined) ? '4' : maptype) + '/shownames:' + ((window.shownames === undefined) ? 'false' : shownames) + '/mmsi:' + ((window.trackvessel === undefined) ? '0' : trackvessel) + '/shipid:' + ((window.trackshipid === undefined) ? '0' : trackshipid) + '/fleet:' + ((window.fleet === undefined) ? '' : fleet) + '/fleet_id:' + ((window.fleet_id === undefined) ? '' : fleet_id) + '/vtypes:' + ((window.vtypes === undefined) ? '' : vtypes) + '/showmenu:' + ((window.showmenu === undefined) ? '' : showmenu) + '/remember:' + ((window.remember === undefined) ? 'false' : remember) + '">Browser does not support embedded objects.<br/>Visit directly <a href="http://www.marinetraffic.com/">www.marinetraffic.com</a>' + '</iframe>n'

                  );

                }

              }

              // src="{root_url}/assets/src/cmsms_uisge-beatha/js/marineTraffic.js";

            //window.onload = init();

          </script>

   </div>

</div>

This will open the map in the same window without leaving the website as is.

For the expert probably pretty simple to solve.... Someone willing to help me out?

If you are going to be changing your scripts around, I'd suggest organizing your scripts into files outside of your html and investigating using prototypes. I load almost 100 different html, js, and css fragments so have some utilities that do most of the legwork for me. That said, if you are just wanting to do a simple script add, you can do it like this:

Inside your button click event handler do the following.

with jQuery: (recommended unless project is quite simple)

var script = document.createElement('script');

script.src = '{root_url}/assets/src/cmsms_uisge-beatha/js/marineTraffic.js';

script.type = 'text/javascript';

$('head')[0].appendChild(script);

without jQuery:

var script = document.createElement('script');

script.src = '{root_url}/assets/src/cmsms_uisge-beatha/js/marineTraffic.js';

script.type = 'text/javascript';

document.getElementsByTagName('head')[0].appendChild(script);

The script will be added and executed. If this your own script file, an alternative would be to just wrap the code in a function and only call that function during the button click handler.

this function loads external script, just add this to your condition

function loadScript(url, callback) {

            var script = document.createElement("script")

            script.type = "text/javascript";

            if (script.readyState) {  //IE

                script.onreadystatechange = function () {

                    if (script.readyState == "loaded" ||

                            script.readyState == "complete") {

                        script.onreadystatechange = null;

                        callback();

                    }

                };

            } else {

                script.onload = function () {

                    callback();

                };

            }

            script.src = url;

            document.getElementsByTagName("head")[0].appendChild(script);

        }

here is use example

loadScript("[SCRIPT_URL]", function () { 

    //do something after script loads

});

Put the script in a separate .js file. Removed the function myFunc from the script. Next changed the code between the script-tags:

<input type="button" class="button-class" onclick="myFunc(this)">

<script type="text/javascript">

function myFunc(e) {

 var script = document.createElement('script');

 script.src = 'http://localhost/assets/src/cmsms_uisge-beatha/js/marineTraffic.js';

 script.type = 'text/javascript';

 $('head')[0].appendChild(script);

}

</script>

Marinetraffic.js

var width='100%';   // the width of the embedded map in pixels or percentage 

var height='300';   // the height of the embedded map in pixels or percentage 

var border='1'; // the width of the border around the map (zero means no border) 

var shownames='true';   // to display ship names on the map (true or false) 

var latitude='51.7143'; // the latitude of the center of the map, in decimal degrees 

var longitude='04.0889';    // the longitude of the center of the map, in decimal degrees 

var zoom='11';  // the zoom level of the map (values between 2 and 17) 

var maptype='0';    // use 0 for Normal Map, 1 for Satellite, 2 for OpenStreetMap 

var trackvessel='' //244770624';     MMSI of a vessel (note: vessel will be displayed only if within range of the system) - overrides "zoom" option 

var fleet='';   // the registered email address of a user-defined fleet (user's default fleet is used) 

// Read more at http://www.marinetraffic.com/en/p/embed-map#6YXCVvOUaBxYHgoT.99

(function() {



    if ("https:" == document.location.protocol) {

        /* secure */

        var src = 'https://www.marinetraffic.com/';

    } else {

        /* unsecure */

        var src = 'http://www.marinetraffic.com/';

    }



    if ((window.latitude === undefined) && (window.longitude === undefined) && ( (window.fleet !== undefined && window.fleet != "") || (window.fleet_id !== undefined && window.fleet_id != ""))) {

        window.latitude = 0;

        window.longitude = 0;

    }



    if (typeof window.mtembedcode != "undefined") {

        var overridenLatLon = '';

        if(window.latitude !== undefined && window.latitude != ''  && window.longitude !== undefined && window.longitude != ''){

            if(window.zoom === undefined){

                window.zoom = 3;

            }

            overridenLatLon = '/zoom:' + ((window.zoom === undefined) ? '' : zoom) + '/centery:' + ((window.latitude === undefined) ? '' : latitude) + '/centerx:' + ((window.longitude === undefined) ? '' : longitude);

        }

        document.write(

            '<iframe name="marinetraffic" id="marinetraffic"' + ' width="' + ((window.width === undefined) ? '550' : width) + '"' + ' height="' + ((window.height === undefined) ? '300' : height) + '"' + ' scrolling="no" frameborder="' + ((window.border === undefined) ? '0' : border) + '"' + ' src="' + src + ((window.language === undefined) ? 'en' : language) + '/ais/customembed' + overridenLatLon + '/mmsi:' + ((window.trackvessel === undefined) ? '0' : trackvessel) + ((window.trackimo !== undefined) ? '/trackimo:' + window.trackimo : '') + '/mtembedcode:'  + window.mtembedcode + '">Browser does not support embedded objects.<br/>Visit directly <a href="http://www.marinetraffic.com/">www.marinetraffic.com</a>' + '</iframe>n'

        );

    } else {

        document.write(

            '<iframe name="marinetraffic" id="marinetraffic"' + ' width="' + ((window.width === undefined) ? '550' : width) + '"' + ' height="' + ((window.height === undefined) ? '300' : height) + '"' + ' scrolling="no" frameborder="' + ((window.border === undefined) ? '0' : border) + '"' + ' src="' + src + ((window.language === undefined) ? 'en' : language) + '/ais/embed' + '/zoom:' + ((window.zoom === undefined) ? '3' : zoom) + '/centery:' + ((window.latitude === undefined) ? '36' : latitude) + '/centerx:' + ((window.longitude === undefined) ? '23' : longitude) + '/maptype:' + ((window.maptype === undefined) ? '4' : maptype) + '/shownames:' + ((window.shownames === undefined) ? 'false' : shownames) + '/mmsi:' + ((window.trackvessel === undefined) ? '0' : trackvessel) + '/shipid:' + ((window.trackshipid === undefined) ? '0' : trackshipid) + '/fleet:' + ((window.fleet === undefined) ? '' : fleet) + '/fleet_id:' + ((window.fleet_id === undefined) ? '' : fleet_id) + '/vtypes:' + ((window.vtypes === undefined) ? '' : vtypes) + '/showmenu:' + ((window.showmenu === undefined) ? '' : showmenu) + '/remember:' + ((window.remember === undefined) ? 'false' : remember) + '">Browser does not support embedded objects.<br/>Visit directly <a href="http://www.marinetraffic.com/">www.marinetraffic.com</a>' + '</iframe>n'

        );

    }

})()



  //

  // EOF

  //

This leaves me a warning in the FireFox developer log:

A call to document.write() from an asynchronously-loaded external
script was ignored.

Any thoughts?