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