16 files changed, 46 insertions, 3 deletions

diff --git a/web/i/pin-green-big.png b/web/i/pin-green-big.png
index 16d73230a..69815463e 100644
--- a/web/i/pin-green-big.png
+++ b/web/i/pin-green-big.png
diff --git a/web/i/pin-green-mini.png b/web/i/pin-green-mini.png
new file mode 100644
index 000000000..32d57a807
--- /dev/null
+++ b/web/i/pin-green-mini.png
diff --git a/web/i/pin-green-small.png b/web/i/pin-green-small.png
new file mode 100644
index 000000000..4813ceb58
--- /dev/null
+++ b/web/i/pin-green-small.png
diff --git a/web/i/pin-green.png b/web/i/pin-green.png
index 47a0a6cc1..597bfc6b7 100644
--- a/web/i/pin-green.png
+++ b/web/i/pin-green.png
diff --git a/web/i/pin-grey-mini.png b/web/i/pin-grey-mini.png
new file mode 100644
index 000000000..152b0a60f
--- /dev/null
+++ b/web/i/pin-grey-mini.png
diff --git a/web/i/pin-grey-small.png b/web/i/pin-grey-small.png
new file mode 100644
index 000000000..14b1f9b03
--- /dev/null
+++ b/web/i/pin-grey-small.png
diff --git a/web/i/pin-red-big.png b/web/i/pin-red-big.png
index 2d970b9e2..fb51b6c78 100644
--- a/web/i/pin-red-big.png
+++ b/web/i/pin-red-big.png
diff --git a/web/i/pin-red-mini.png b/web/i/pin-red-mini.png
new file mode 100644
index 000000000..d91aac979
--- /dev/null
+++ b/web/i/pin-red-mini.png
diff --git a/web/i/pin-red-small.png b/web/i/pin-red-small.png
new file mode 100644
index 000000000..a0e8fb0d2
--- /dev/null
+++ b/web/i/pin-red-small.png
diff --git a/web/i/pin-red.png b/web/i/pin-red.png
index 298f4d3f6..882446a22 100644
--- a/web/i/pin-red.png
+++ b/web/i/pin-red.png
diff --git a/web/i/pin-shadow-small.png b/web/i/pin-shadow-small.png
new file mode 100644
index 000000000..911e3a66c
--- /dev/null
+++ b/web/i/pin-shadow-small.png
diff --git a/web/i/pin-yellow-big.png b/web/i/pin-yellow-big.png
index d1642d644..cfae00afc 100644
--- a/web/i/pin-yellow-big.png
+++ b/web/i/pin-yellow-big.png
diff --git a/web/i/pin-yellow-mini.png b/web/i/pin-yellow-mini.png
new file mode 100644
index 000000000..8181bce96
--- /dev/null
+++ b/web/i/pin-yellow-mini.png
diff --git a/web/i/pin-yellow-small.png b/web/i/pin-yellow-small.png
new file mode 100644
index 000000000..53cfb654a
--- /dev/null
+++ b/web/i/pin-yellow-small.png
diff --git a/web/i/pin-yellow.png b/web/i/pin-yellow.png
index 196cb0f5f..67ccc546a 100644
--- a/web/i/pin-yellow.png
+++ b/web/i/pin-yellow.png
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index 3088cc764..c227a366e 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -69,6 +69,7 @@ function fixmystreet_zoomToBounds(bounds) {
 
 function fms_markers_list(pins, transform) {
     var markers = [];
+    var size = fms_marker_size_for_zoom(fixmystreet.map.getZoom() + fixmystreet.zoomOffset);
     for (var i=0; i<pins.length; i++) {
         var pin = pins[i];
         var loc = new OpenLayers.Geometry.Point(pin[1], pin[0]);
@@ -81,7 +82,7 @@ function fms_markers_list(pins, transform) {
         }
         var marker = new OpenLayers.Feature.Vector(loc, {
             colour: pin[2],
-            size: pin[5] || 'normal',
+            size: pin[5] || size,
             id: pin[3],
             title: pin[4] || ''
         });
@@ -90,6 +91,24 @@ function fms_markers_list(pins, transform) {
     return markers;
 }
 
+function fms_marker_size_for_zoom(zoom) {
+    if (zoom >= 15) {
+        return 'normal';
+    } else if (zoom >= 13) {
+        return 'small';
+    } else {
+        return 'mini';
+    }
+}
+
+function fms_markers_resize() {
+    var size = fms_marker_size_for_zoom(fixmystreet.map.getZoom() + fixmystreet.zoomOffset);
+    for (var i = 0; i < fixmystreet.markers.features.length; i++) {
+        fixmystreet.markers.features[i].attributes.size = size;
+    }
+    fixmystreet.markers.redraw();
+}
+
 function fixmystreet_onload() {
     if ( fixmystreet.area.length ) {
         for (var i=0; i<fixmystreet.area.length; i++) {
@@ -131,7 +150,8 @@ function fixmystreet_onload() {
             backgroundWidth: 60,
             backgroundHeight: 30,
             backgroundXOffset: -7,
-            backgroundYOffset: -30
+            backgroundYOffset: -30,
+            popupYOffset: -40
         },
         'big': {
             externalGraphic: fixmystreet.pin_prefix + "pin-${colour}-big.png",
@@ -144,6 +164,27 @@ function fixmystreet_onload() {
             backgroundHeight: 40,
             backgroundXOffset: -10,
             backgroundYOffset: -35
+        },
+        'small': {
+            externalGraphic: fixmystreet.pin_prefix + "pin-${colour}-small.png",
+            graphicWidth: 24,
+            graphicHeight: 32,
+            graphicXOffset: -12,
+            graphicYOffset: -32,
+            backgroundGraphic: fixmystreet.pin_prefix + "pin-shadow-small.png",
+            backgroundWidth: 30,
+            backgroundHeight: 15,
+            backgroundXOffset: -4,
+            backgroundYOffset: -15,
+            popupYOffset: -20
+        },
+        'mini': {
+            externalGraphic: fixmystreet.pin_prefix + "pin-${colour}-mini.png",
+            graphicWidth: 16,
+            graphicHeight: 20,
+            graphicXOffset: -8,
+            graphicYOffset: -20,
+            popupYOffset: -10
         }
     });
     var pin_layer_options = {
@@ -186,17 +227,19 @@ function fixmystreet_onload() {
         fixmystreet.markers.events.register( 'featureselected', fixmystreet.markers, function(evt) {
             var feature = evt.feature;
             selectedFeature = feature;
+            var popupYOffset = feature.layer.styleMap.createSymbolizer(feature).popupYOffset || -40;
             var popup = new OpenLayers.Popup.FramedCloud("popup",
                 feature.geometry.getBounds().getCenterLonLat(),
                 null,
                 feature.attributes.title + "<br><a href=/report/" + feature.attributes.id + ">" + translation_strings.more_details + "</a>",
-                { size: new OpenLayers.Size(0,0), offset: new OpenLayers.Pixel(0,-40) },
+                { size: new OpenLayers.Size(0, 0), offset: new OpenLayers.Pixel(0, popupYOffset) },
                 true, onPopupClose);
             feature.popup = popup;
             fixmystreet.map.addPopup(popup);
         });
         fixmystreet.map.addControl( fixmystreet.select_feature );
         fixmystreet.select_feature.activate();
+        fixmystreet.map.events.register( 'zoomend', null, fms_markers_resize );
     } else if (fixmystreet.page == 'new') {
         fixmystreet_activate_drag();
     }