CDE

CDE

pvdz.ee

pvdz.ee

pvdz.ee

The CDE javascript is syntactic sugar that helps creating DHTML easier and faster by creating Custom DOM Elements.

Note: The API driving this demo broke a long time ago. Sorry :)

// Find the object with the highest z-index and click on it!
var ajax;
// show ajax waiting
ajax = CDE.div().bgc('black').c('white').p(3).add(
  CDE.img('img/map/ajax-loader_bw.gif', 'Please wait..').vam(),
  CDE.txt("  Loading data from maxmind.com ...")
).centerFade();
// get your position from a free service
// http://api.hostip.info/?ip -> flawed for my own ip...
CDE.ljs('https://j.maxmind.com/app/geoip.js', function(){
  var img, strUrl, strTxt;
  
  // prevent errors :)
  if (!window.geoip_latitude) window.geoip_latitude = function(){ return 0; };
  if (!window.geoip_longitude) window.geoip_longitude = function(){ return 0; };
  if (!window.geoip_city) window.geoip_city = function(){ return ''; };
  if (!window.geoip_country_name) window.geoip_country_name = function(){ return ''; };

  // construct map url
  strUrl = 'https://maps.google.com/staticmap'+
            '?center='+geoip_latitude()+','+geoip_longitude()+ // center of image
            '&zoom=13'+ // zoom level
            '&size=500x300'+ // size of image
            '&maptype=mobile'+ // maptype; satellite, terrain, hybrid, and mobile
            '&markers='+geoip_latitude()+','+geoip_longitude()+',blues'+ // markers to show on map
            '&key=ABQIAAAAdkIxLG0GJurUuRr3G0yY6BQgKC9JH_3SstU-_r8XJ0-NkIP7ExTYAXGjOznjFNgaEde0ogP25V0kmQ'+ // key for qfox.nl
            '&sensor=false'; // not using a tracker to get location

  // cache the image, else centering fails (because center wont really know the dimension of the image when it's fired)
  img = new Image();
  img.onload = function(){
    ajax.fadeDel(false,true,true);
  
    // create comment (build location on available data)
    strTxt = 'Your approximate position according to the <a href="https://maxmind.com" target="_blank">maxmind.com</a> ip lookup api';
    if (geoip_city()) {
      strTxt += '<br />Location: '+geoip_city();
      if (geoip_country_name()) strTxt += ', '+geoip_country_name();
    } else if (geoip_country_name()) {
      strTxt += '<br />Location: '.geoip_country_name();
    }
    // add image
    CDE.div().add(
      // the static map image
      CDE.img(strUrl, 'You are hopefully here :)').sb('black', 2),
      // "Your position according to maxmind.com"
      CDE.txt(strTxt).abs(5, 5).p(3).bgc('black').c('white').cd().fs(11),
      // close button
      CDE.btn('Close', function(){ CDE.wrap(this.parentNode).fadeDel(false,true,true); }).abs(-5,5)
    ).centerFade();
  };
  img.src = strUrl;
},false,true); // no anti cache suffix (screws up api)