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         var popup = feature.popup;
 140         if (popup.visible()) {
 141             popup.hide();
 142         }
 143     },
 144
 145     onFeatureSelect: function(feature) {
 146         var map = feature.layer.map;
 147         var permaControl = map.getControlsByClass("OpenLayers.Control.Permalink");
 148         if (permaControl[0]) {
 149             permaControl[0].div.style.display = "none";
 150         }
 151         var popup = feature.popup;
 152
 153         var brCorner = SYP.Utils.brCorner(map, 8);
 154
 155         // we cannot reuse popup; we need to recreate it in order for IE
 156         // expressions to work. Otherwise, we get a 0x0 image on second view.
 157         if (popup) {
 158             popup.destroy();
 159         }
 160         var contentHTML;
 161         if (feature.attributes.name) {
 162             contentHTML = "<h2>" +
 163                           feature.attributes.name +
 164                           "</h2>" +
 165                           feature.attributes.description;
 166         } else {
 167             contentHTML = feature.attributes.description;
 168         }
 169         popup = SYP.createPopup(brCorner, contentHTML);
 170         var control = this;
 171         popup.hide = function () {
 172             OpenLayers.Element.hide(this.div);
 173             control.unselect(feature);
 174         };
 175         map.addPopup(popup);
 176         feature.popup = popup;
 177     },
 178
 179     Utils: {
 180         brCorner: function(map, margin) {
 181             var bounds = map.calculateBounds();
 182             var corner = new OpenLayers.LonLat(bounds.right, bounds.bottom);
 183             var cornerAsPx = map.getPixelFromLonLat(corner);
 184             cornerAsPx = cornerAsPx.add( -margin, -margin);
 185             corner = map.getLonLatFromPixel(cornerAsPx);
 186             return corner;
 187         },
 188         displayUserMessage: function(message, status) {
 189             var div = document.getElementById('message');
 190             while (div.firstChild)
 191                 div.removeChild(div.firstChild);
 192             var textNode = document.createTextNode(message);
 193             switch (status) {
 194                 case "error":
 195                     div.style.color = "red";
 196                     break;
 197                 case "warn":
 198                     div.style.color = "#FF8C00";
 199                     break;
 200                 case "success":
 201                     div.style.color = "green";
 202                     break;
 203                 default:
 204                     div.style.color = "black";
 205                     break;
 206             }
 207             div.style.display = "block";
 208             div.appendChild(textNode);
 209         }
 210     }
 211 };
 212
 213 // if possible, determine language with HTTP_ACCEPT_LANGUAGE instead of
 214 // navigator.language
 215 if (OpenLayers.Lang[SypStrings.language]) {
 216     OpenLayers.Lang.setCode(SypStrings.language);
 217 }
 218
 219 // avoid alerts
 220 OpenLayers.Console.userError = function(error) {
 221     SYP.Utils.displayUserMessage(error, "error");
 222 }