1.1.2

- divIcons instead of icons - add classes on hover events - add classes to indicate which edge of the screen - top, left, right, bottom
raywalker-it · Apr 14, 2014 · 2c2c7b5 · 2c2c7b5
1 parent 66b4c33
commit 2c2c7b5
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -1,12 +1,10 @@
 Leaflet EdgeMarker for Greenpeace Mapping
 =========================================
 
-Leaflet EdgeMarker is a [Leaflet](http://leafletjs.com/) plugin which allows you to indicate Markers, 
-Circles and CircleMarkers that are outside of the current view by displaying CircleMarkers at the edges of the map.
+Leaflet EdgeMarker is a [Leaflet](http://leafletjs.com/) plugin to show off-screen markers on the edge of the map
 
 This fork of Gerald Pape's original plugin was created to add:
 
- * transitions on map move
- * superimposed icons on the edge markers
- * installation via Bower
- * building via Grunt
+ * L.divIcons instead of L.icons for customisation in CSS
+ * installation via [Bower](http://bower.io)
+ * build and quality control with [Grunt](http://gruntjs.com)
diff --git a/leaflet.edgeMarker-raywalker.js b/leaflet.edgeMarker-raywalker.js
@@ -1,9 +1,7 @@
 /**
- *
- * @version 1.1.1
+ * @version 1.1.2
  * @source https://github.com/funkygibbing/Leaflet.EdgeMarker
  * @param {type} L
- * @returns {undefined}
  */
 (function(L, $) {
     'use strict';
@@ -16,6 +14,7 @@
             fillColor: 'white',
             fillOpacity: 1,
             className: 'edgeMarker',
+            wrapperClassName: 'edgeMarkerCircle',
             transitionClass: 'quickFadeOut'
         },
         timer: false,
@@ -45,6 +44,7 @@
 
                 if (typeof this._borderMarkerLayer !== 'undefined') {
                     $('.' + this.options.className).addClass(this.options.transitionClass);
+                    $('.' + this.options.wrapperClassName).addClass(this.options.transitionClass);
                 }
 
                 if (timer) {
@@ -95,14 +95,16 @@
 
             $.each(features, function(i, feature) {
                 var f = feature.feature;
-
+                if (typeof f === 'undefined') {
+                    return;
+                }
                 if (typeof f.properties.edgeMarker !== "undefined") {
 
                     var icon = $.extend(true, {className: that.options.className + 'edgeMarker'}, f.properties.edgeMarker),
                         latlng = feature.getLatLng(),
                         currentMarkerPosition = that._map.latLngToContainerPoint(latlng),
                         mapPixelBounds = that._map.getSize(),
-                        divClassName = that.options.className + ' edgeMarkerCircle';
+                        divClassName = 'edgeMarkerCircle';
 
                     icon.className += ' edgeMarker';
 
@@ -119,53 +121,59 @@
                         if (currentMarkerPosition.y < 0) {
                             y = 0;
                             icon.iconAnchor[1] = icon.iconAnchor[1] - y_offset;
-                            divClassName += ' edge-top';
+                            divClassName += ' edgetop';
                         } else if (currentMarkerPosition.y > mapPixelBounds.y) {
                             y = mapPixelBounds.y;
                             icon.iconAnchor[1] = icon.iconAnchor[1] + y_offset;
-                            divClassName += ' edge-bottom';
+                            divClassName += ' edgebottom';
                         }
 
                         if (currentMarkerPosition.x > mapPixelBounds.x) {
                             x = mapPixelBounds.x;
                             icon.iconAnchor[0] = icon.iconAnchor[0] + x_offset;
-                            divClassName += ' edge-right';
+                            divClassName += ' edgeright';
                         } else if (currentMarkerPosition.x < 0) {
                             x = 0;
                             icon.iconAnchor[0] = icon.iconAnchor[0] - x_offset;
-                            divClassName += ' edge-left';
+                            divClassName += ' edgeleft';
                         }
 
                         if (typeof f.properties.icon === 'object') {
-                            markerDiv = L.marker(that._map.containerPointToLatLng([x, y]), {icon: L.divIcon({className: divClassName,
-                                    iconSize: [that.options.radius * 2, that.options.radius * 2]})}).addTo(that._borderMarkerLayer);
+                            markerDiv = L.marker(that._map.containerPointToLatLng([x, y]), {
+                                icon: L.divIcon({
+                                    className: divClassName,
+                                    iconSize: [that.options.radius * 2, that.options.radius * 2],
+                                    html: '<div class="outer"><div class="icon ' + icon.className+ '"></div></div>'
+                                })
+                            }).addTo(that._borderMarkerLayer);
 
-                            markerIcon = L.marker(that._map.containerPointToLatLng([x, y]), {icon: L.divIcon(icon)})
-                                .addTo(that._borderMarkerLayer);
+                            markerDiv.on('click', function() {
+                                that._map.panTo(latlng, {animate: true});
+                            });
 
                         } else {
                             markerIcon = L.circleMarker(that._map.containerPointToLatLng([x, y]), that.options)
                                 .addTo(that._borderMarkerLayer);
-                        }
-
-                        markerIcon.on('click', function(e) {
-                            that._map.panTo(latlng, {animate: true});
-                        });
 
-                        if (markerDiv) {
-                            markerDiv.on('click', function() {
+                            markerIcon.on('click', function(e) {
                                 that._map.panTo(latlng, {animate: true});
                             });
                         }
-
                     }
                 }
-
             });
+
             if (!this._map.hasLayer(this._borderMarkerLayer)) {
                 this._borderMarkerLayer.addTo(this._map);
             }
+
+            $('.' + this.options.className).on('mouseenter', function() {
+                $(this).addClass('over');
+            }).on('mouseleave', function() {
+                $(this).removeClass('over');
+            });
         }
+
     });
 
     L.edgeMarker = function(options) {

diff --git a/leaflet.edgeMarker-raywalker.min.js b/leaflet.edgeMarker-raywalker.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Leaflet.EdgeMarker-raywalker",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Leaflet EdgeMarker is a [Leaflet](http://leafletjs.com/) plugin which allows you to indicate Markers, Circles and CircleMarkers that are outside of the current view by displaying CircleMarkers at the edges of the map.  Modified for use in Greenpace Mapping projects.",
   "main": "leaflet.edgeMarker-raywalker.js",
   "repository": {