js/syp.js

   1 /* Copyright (c) 2009 Arnaud Renevier, Inc, published under the modified BSD
   2  * license. */
   3
   4 OpenLayers.Control.SypAttribution = OpenLayers.Class (OpenLayers.Control.Attribution, {
   5     updateAttribution: function() {
   6         var attributions = [SypStrings.propulsedByLink];
   7         if (this.map && this.map.layers) {
   8             for(var i=0, len=this.map.layers.length; i<len; i++) {
   9                 var layer = this.map.layers[i];
  10                 if (layer.attribution && layer.getVisibility()) {
  11                     attributions.push( layer.attribution );
  12                 }
  13             }
  14             this.div.innerHTML = attributions.join(this.separator);
  15         }
  16     }
  17 });
  18
  19 var SYP = {
  20     Settings: {
  21         MARKER_ICON: "openlayers/img/marker-blue.png",
  22         MARKER_ICON_HEIGHT: 25,
  23         MARKER_SELECT_ICON: "openlayers/img/marker-green.png",
  24         MARKER_SELECT_ICON_HEIGHT: 25
  25     },
  26
  27     map: null,
  28     baseLayer: null,
  29     dataLayer: null,
  30     selectControl: null,
  31
  32     init: function() {
  33         this.map = new OpenLayers.Map("map", {
  34             controls:[
  35                 new OpenLayers.Control.Navigation(),
  36                 new OpenLayers.Control.PanZoom(),
  37                 new OpenLayers.Control.Permalink(),
  38                 new OpenLayers.Control.SypAttribution()
  39             ],
  40             projection: new OpenLayers.Projection("EPSG:900913"),
  41             displayProjection: new OpenLayers.Projection("EPSG:4326")
  42         } );
  43
  44         this.baseLayer = this.createBaseLayer();
  45         this.dataLayer = this.createDataLayer();
  46         this.map.addLayers([this.baseLayer, this.dataLayer]);
  47
  48         this.selectControl = this.createSelectControl();
  49         this.map.addControl(this.selectControl);
  50         this.selectControl.activate();
  51
  52         if (!this.map.getCenter()) {
  53             var centerBounds = new OpenLayers.Bounds();
  54
  55             var mapProj = this.map.getProjectionObject();
  56             var sypOrigProj = new OpenLayers.Projection("EPSG:4326");
  57
  58             var bottomLeft = new OpenLayers.LonLat(sypOrig[0],sypOrig[1]);
  59             bottomLeft = bottomLeft.transform(sypOrigProj, mapProj);
  60             var topRight = new OpenLayers.LonLat(sypOrig[2],sypOrig[3])
  61             topRight = topRight.transform(sypOrigProj, mapProj);
  62
  63             centerBounds.extend(bottomLeft);
  64             centerBounds.extend(topRight);
  65             this.map.zoomToExtent(centerBounds);
  66         }
  67     },
  68
  69     createBaseLayer: function() {
  70         return new OpenLayers.Layer.OSM("OSM");
  71     },
  72
  73     createDataLayer: function(map) {
  74         var styleMap = new OpenLayers.StyleMap (
  75                         {"default": {
  76                             externalGraphic: this.Settings.MARKER_ICON,
  77                             graphicHeight: this.Settings.MARKER_ICON_HEIGHT
  78                                             || 32
  79                                     },
  80                          "select": {
  81                             externalGraphic: this.Settings.MARKER_SELECT_ICON,
  82                             graphicHeight: this.Settings.MARKER_SELECT_ICON_HEIGHT
  83                                             || 32
  84                                   }
  85                      });
  86
  87         var layer = new OpenLayers.Layer.GML("KML", "items.php",
  88            {
  89             styleMap: styleMap,
  90             format: OpenLayers.Format.KML,
  91             projection: this.map.displayProjection,
  92             eventListeners: { scope: this,
  93                               loadend: this.checkForFeatures
  94                             }
  95            });
  96
  97         return layer;
  98     },
  99
 100     createSelectControl: function() {
 101         var control = new OpenLayers.Control.SelectFeature(
 102                                             this.dataLayer, {
 103                                                onSelect: this.onFeatureSelect,
 104                                                onUnselect: this.onFeatureUnselect,
 105                                                toggle: true,
 106                                                clickout: false
 107                                                             });
 108         return control;
 109     },
 110
 111     checkForFeatures: function() {
 112         var features = this.dataLayer.features;
 113         if (features.length == 0) {
 114             var message = SypStrings.noImageRegistered;
 115             this.Utils.displayUserMessage(message, "warn");
 116         }
 117     },
 118
 119     createPopup: function(position, contentHTML) {
 120         var popup = new OpenLayers.Popup.Anchored("popup",
 121                                                   position,
 122                                                   null,
 123                                                   contentHTML,
 124                                                   null,
 125                                                   true);
 126         popup.autoSize = true;
 127         popup.backgroundColor = ""; // deal with it in css
 128         popup.border = ""; // deal with it in css
 129         popup.closeOnMove = true;
 130         return popup;
 131     },
 132
 133     onFeatureUnselect: function (feature) {
 134         var map = feature.layer.map;
 135         var permaControl = map.getControlsByClass("OpenLayers.Control.Permalink");
 136         if (permaControl[0]) {
 137             permaControl[0].div.style.display = "";
 138         }
 139         if (!feature.popup) {
 140             this.map.events.unregister("movestart", this, this._unselect);
 141             return;
 142         }
 143         popup = feature.popup;
 144         if (popup.visible()) {
 145             popup.hide();
 146         }
 147     },
 148
 149     onFeatureSelect: function(feature) {
 150         var map = feature.layer.map;
 151         var permaControl = map.getControlsByClass("OpenLayers.Control.Permalink");
 152         if (permaControl[0]) {
 153             permaControl[0].div.style.display = "none";
 154         }
 155         var popup = feature.popup;
 156
 157         var brCorner = SYP.Utils.brCorner(map, 8);
 158
 159         // we cannot reuse popup; we need to recreate it in order for IE
 160         // expressions to work. Otherwise, we get a 0x0 image on second view.
 161         if (popup) {
 162             popup.destroy();
 163         }
 164         var contentHTML;
 165         if (feature.attributes.name) {
 166             contentHTML = "<h2>" +
 167                           feature.attributes.name +
 168                           "</h2>" +
 169                           feature.attributes.description;
 170         } else {
 171             contentHTML = feature.attributes.description;
 172         }
 173         if (!contentHTML || !contentHTML.length) {
 174             this.map.events.register("movestart", this, this._unselect = function () { this.unselect(feature)});
 175             return;
 176         }
 177         popup = SYP.createPopup(brCorner, contentHTML);
 178         var control = this;
 179         popup.hide = function () {
 180             OpenLayers.Element.hide(this.div);
 181             control.unselect(feature);
 182         };
 183         map.addPopup(popup);
 184         feature.popup = popup;
 185     },
 186
 187     Utils: {
 188         brCorner: function(map, margin) {
 189             var bounds = map.calculateBounds();
 190             var corner = new OpenLayers.LonLat(bounds.right, bounds.bottom);
 191             var cornerAsPx = map.getPixelFromLonLat(corner);
 192             cornerAsPx = cornerAsPx.add( -margin, -margin);
 193             corner = map.getLonLatFromPixel(cornerAsPx);
 194             return corner;
 195         },
 196         displayUserMessage: function(message, status) {
 197             var div = document.getElementById('message');
 198             while (div.firstChild)
 199                 div.removeChild(div.firstChild);
 200             var textNode = document.createTextNode(message);
 201             switch (status) {
 202                 case "error":
 203                     div.style.color = "red";
 204                     break;
 205                 case "warn":
 206                     div.style.color = "#FF8C00";
 207                     break;
 208                 case "success":
 209                     div.style.color = "green";
 210                     break;
 211                 default:
 212                     div.style.color = "black";
 213                     break;
 214             }
 215             div.style.display = "block";
 216             div.appendChild(textNode);
 217         }
 218     }
 219 };
 220
 221 // if possible, determine language with HTTP_ACCEPT_LANGUAGE instead of
 222 // navigator.language
 223 if (OpenLayers.Lang[SypStrings.language]) {
 224     OpenLayers.Lang.setCode(SypStrings.language);
 225 }
 226
 227 // avoid alerts
 228 OpenLayers.Console.userError = function(error) {
 229     SYP.Utils.displayUserMessage(error, "error");
 230 }
 231
 232 // sometimes, especially when cache is clear, firefox does not compute
 233 // correctly popup size. That's because at the end of getRenderedDimensions,
 234 // dimensions of image is not known. So, we work around that problem by setting
 235 // image width and image height. That way, dimensions of image are set in
 236 // innerHTML, and are therefore known in getRenderedDimensions
 237 OpenLayers.Popup.Anchored.prototype.registerImageListeners = function() {
 238     var onImgLoad = function() {
 239         this.img.width =  this.img.width;
 240         this.img.height =  this.img.height;
 241         this.popup.updateSize();
 242         OpenLayers.Event.stopObserving(
 243             this.img, "load", this.img._onImageLoad
 244         );
 245     };
 246
 247     var images = this.contentDiv.getElementsByTagName("img");
 248     for (var i = 0, len = images.length; i < len; i++) {
 249         var img = images[i];
 250         if (img.width == 0 || img.height == 0) {
 251
 252             var context = {
 253                 'popup': this,
 254                 'img': img
 255             };
 256
 257             img._onImgLoad = OpenLayers.Function.bind(onImgLoad, context);
 258
 259             OpenLayers.Event.observe(img, 'load', img._onImgLoad);
 260         }
 261     }
 262 }