js/syp.js

   1 /* Copyright (c) 2009 Arnaud Renevier, Inc, published under the modified BSD
   2  * license. */
   3
   4 var SYP = {
   5     Settings: {
   6         MARKER_ICON: "openlayers/img/marker-blue.png",
   7         MARKER_ICON_HEIGHT: 25,
   8         MARKER_SELECT_ICON: "openlayers/img/marker-green.png",
   9         MARKER_SELECT_ICON_HEIGHT: 25
  10     },
  11
  12     map: null,
  13     baseLayer: null,
  14     dataLayer: null,
  15     selectControl: null,
  16
  17     init: function() {
  18         this.map = new OpenLayers.Map("map", {
  19             controls:[
  20                 new OpenLayers.Control.Navigation(),
  21                 new OpenLayers.Control.PanZoom(),
  22                 new OpenLayers.Control.Permalink(),
  23                 new OpenLayers.Control.Attribution()
  24             ],
  25             projection: new OpenLayers.Projection("EPSG:900913"),
  26             displayProjection: new OpenLayers.Projection("EPSG:4326")
  27         } );
  28
  29         this.baseLayer = this.createBaseLayer();
  30         this.dataLayer = this.createDataLayer();
  31         this.map.addLayers([this.baseLayer, this.dataLayer]);
  32
  33         this.selectControl = this.createSelectControl();
  34         this.map.addControl(this.selectControl);
  35         this.selectControl.activate();
  36
  37         if (!this.map.getCenter()) {
  38             var centerBounds = new OpenLayers.Bounds();
  39
  40             var mapProj = this.map.getProjectionObject();
  41             var sypOrigProj = new OpenLayers.Projection("EPSG:4326");
  42
  43             var bottomLeft = new OpenLayers.LonLat(sypOrig[0],sypOrig[1]);
  44             bottomLeft = bottomLeft.transform(sypOrigProj, mapProj);
  45             var topRight = new OpenLayers.LonLat(sypOrig[2],sypOrig[3])
  46             topRight = topRight.transform(sypOrigProj, mapProj);
  47
  48             centerBounds.extend(bottomLeft);
  49             centerBounds.extend(topRight);
  50             this.map.zoomToExtent(centerBounds);
  51         }
  52     },
  53
  54     createBaseLayer: function() {
  55         return new OpenLayers.Layer.OSM("OSM");
  56     },
  57
  58     createDataLayer: function(map) {
  59         var styleMap = new OpenLayers.StyleMap (
  60                         {"default": {
  61                             externalGraphic: this.Settings.MARKER_ICON,
  62                             graphicHeight: this.Settings.MARKER_ICON_HEIGHT
  63                                             || 32
  64                                     },
  65                          "select": {
  66                             externalGraphic: this.Settings.MARKER_SELECT_ICON,
  67                             graphicHeight: this.Settings.MARKER_SELECT_ICON_HEIGHT
  68                                             || 32
  69                                   }
  70                      });
  71
  72         var layer = new OpenLayers.Layer.GML("KML", "items.php",
  73            {
  74             styleMap: styleMap,
  75             format: OpenLayers.Format.KML,
  76             projection: this.map.displayProjection,
  77             eventListeners: { scope: this,
  78                               loadend: this.checkForFeatures
  79                             }
  80            });
  81
  82         return layer;
  83     },
  84
  85     createSelectControl: function() {
  86         var control = new OpenLayers.Control.SelectFeature(
  87                                             this.dataLayer, {
  88                                                onSelect: this.onFeatureSelect,
  89                                                onUnselect: this.onFeatureUnselect,
  90                                                toggle: true,
  91                                                clickout: false
  92                                                             });
  93         return control;
  94     },
  95
  96     checkForFeatures: function() {
  97         var features = this.dataLayer.features;
  98         if (features.length == 0) {
  99             var message = "Il n'y a aucune photo enregistrée sur le site.";
 100             this.Utils.displayUserMessage(message, "warn");
 101         }
 102     },
 103
 104     createPopup: function(position, contentHTML) {
 105         var popup = new OpenLayers.Popup.Anchored("popup",
 106                                                   position,
 107                                                   null,
 108                                                   contentHTML,
 109                                                   null,
 110                                                   true);
 111         popup.autoSize = true;
 112         popup.backgroundColor = ""; // deal with it in css
 113         popup.border = ""; // deal with it in css
 114         popup.closeOnMove = true;
 115         return popup;
 116     },
 117
 118     onFeatureUnselect: function (feature) {
 119         var popup = feature.popup;
 120         if (popup.visible()) {
 121             popup.hide();
 122         }
 123     },
 124
 125     onFeatureSelect: function(feature) {
 126         var map = feature.layer.map;
 127         var popup = feature.popup;
 128
 129         var brCorner = SYP.Utils.brCorner(map, 8);
 130
 131         // we cannot reuse popup; we need to recreate it in order for IE
 132         // expressions to work. Otherwise, we get a 0x0 image on second view.
 133         if (popup) {
 134             popup.destroy();
 135         }
 136         var contentHTML;
 137         if (feature.attributes.name) {
 138             contentHTML = "<h2>" +
 139                           feature.attributes.name +
 140                           "</h2>" +
 141                           feature.attributes.description;
 142         } else {
 143             contentHTML = feature.attributes.description;
 144         }
 145         popup = SYP.createPopup(brCorner, contentHTML);
 146         var control = this;
 147         popup.hide = function () {
 148             OpenLayers.Element.hide(this.div);
 149             control.unselect(feature);
 150         };
 151         map.addPopup(popup);
 152         feature.popup = popup;
 153     },
 154
 155     Utils: {
 156         brCorner: function(map, margin) {
 157             var bounds = map.calculateBounds();
 158             var corner = new OpenLayers.LonLat(bounds.right, bounds.bottom);
 159             var cornerAsPx = map.getPixelFromLonLat(corner);
 160             cornerAsPx = cornerAsPx.add( -margin, -margin);
 161             corner = map.getLonLatFromPixel(cornerAsPx);
 162             return corner;
 163         },
 164         displayUserMessage: function(message, status) {
 165             var div = document.getElementById('message');
 166             while (div.firstChild)
 167                 div.removeChild(div.firstChild);
 168             var textNode = document.createTextNode(message);
 169             switch (status) {
 170                 case "error":
 171                     div.style.color = "red";
 172                     break;
 173                 case "warn":
 174                     div.style.color = "#FF8C00";
 175                     break;
 176                 case "success":
 177                     div.style.color = "green";
 178                     break;
 179                 default:
 180                     div.style.color = "black";
 181                     break;
 182             }
 183             div.style.display = "block";
 184             div.appendChild(textNode);
 185         }
 186     }
 187 };
 188
 189 // avoid alerts
 190 OpenLayers.Console.userError = function(error) {
 191     SYP.Utils.displayUserMessage(error, "error");
 192 }