- Upgraded Simple Graticule and also add Graticule plugin (Fixes #12).

Author: bhaskarvk

NAMESPACE

@@ -15,6 +15,7 @@ export(addCircleMarkers)
 export(addCircles)
 export(addControl)
 export(addGeoJSON)
+export(addGraticule)
 export(addLabelOnlyMarkers)
 export(addLayersControl)
 export(addLegend)

R/plugin-graticule.R

@@ -0,0 +1,45 @@
+leafletGraticuleDependencies <- function() {
+  list(
+    htmltools::htmlDependency(
+      "leaflet-graticule",
+      "0.1.0",
+      system.file("htmlwidgets/plugins/Leaflet.Graticule", package = "leaflet"),
+      script = c("L.Graticule.js", "Graticule-binding.js")
+    )
+  )
+}
+
+#' Add a Graticule on the map
+#' see \url{https://github.com/turban/Leaflet.Graticule}
+#'
+#' @param map a map widget object
+#' @param interval The spacing in map units between horizontal and vertical lines.
+#' @param style path options for the generated lines. See \link{http://leafletjs.com/reference.html#path-options}
+#' @param layerId the layer id
+#' @param group the name of the group this layer belongs to.
+#' @examples
+#' library(leaflet)
+#'
+#' leaf <- leaflet() %>%
+#'   addTiles() %>%
+#'   addGraticule()
+#'
+#' @export
+addGraticule <- function(
+  map,
+  interval = 20,
+  style = list(color= '#333', weight= 1),
+  layerId = NULL,
+  group=NULL
+) {
+  map$dependencies <- c(map$dependencies, leafletGraticuleDependencies())
+  invokeMethod(
+    map
+    , getMapData(map)
+    , 'addGraticule'
+    , interval
+    , style
+    , layerId
+    , group
+  )
+}

R/plugin-simplegraticule.R

@@ -5,7 +5,7 @@ leafletSimpleGraticuleDependencies <- function() {
       "0.1.0",
       system.file("htmlwidgets/plugins/Leaflet.SimpleGraticule", package = "leaflet"),
       script = c("L.SimpleGraticule.js", "SimpleGraticule-binding.js"),
-      stylesheet = "L.SimpleGraticule.js"
+      stylesheet = "L.SimpleGraticule.css"
     )
   )
 }
@@ -17,12 +17,15 @@ leafletSimpleGraticuleDependencies <- function() {
 #' @param interval The spacing in map units between horizontal and vertical lines.
 #' @param showOriginLabel  true Whether or not to show '(0,0)' at the origin.
 #' @param redraw on which map event to redraw the graticule. On move is default but moveend can be smoother.
+#' @param hidden hide on start
+#' @param zoomIntervals use different intervals in different zoom levels. If not specified, all zoom levels use value in interval option.
+
 #' @param layerId the layer id
 #' @param group the name of the group this layer belongs to.
 #' @examples
 #' library(leaflet)
 #'
-#' leaf <- leaflet() %>%
+#' leaflet() %>%
 #'   addTiles() %>%
 #'   addSimpleGraticule()
 #'
@@ -32,6 +35,8 @@ addSimpleGraticule <- function(
   interval = 20,
   showOriginLabel = TRUE,
   redraw = 'move',
+  hidden = FALSE,
+  zoomIntervals = list(),
   layerId = NULL,
   group=NULL
 ) {
@@ -43,6 +48,8 @@ addSimpleGraticule <- function(
     , interval
     , showOriginLabel
     , redraw
+    , hidden
+    , zoomIntervals
     , layerId
     , group
   )

inst/examples/graticule.R

@@ -0,0 +1,16 @@
+library(leaflet)
+# Default
+l <- leaflet() %>% addTiles() %>% setView(0,0,1)
+
+l %>% addGraticule()
+
+# Custom Params
+l %>% addGraticule(interval = 40, style = list(color='#FF0000', weight=1))
+
+# on a toggleable Layer
+l %>%
+  addGraticule(group="graticule") %>%
+  addLayersControl(
+    overlayGroups = c("graticule"),
+    options = layersControlOptions(collapsed = FALSE)
+  )

inst/examples/simpleGraticule.R

@@ -1,12 +1,14 @@
 library(leaflet)
 # Default
-leaflet() %>% addTiles() %>% addSimpleGraticule()
+l <- leaflet() %>% addTiles() %>% setView(0,0,1)
+
+l %>% addSimpleGraticule()
 
 # Custom Params
-leaflet() %>% addTiles() %>% addSimpleGraticule(interval = 40, showOriginLabel = F)
+l %>% addSimpleGraticule(interval = 40, showOriginLabel = F)
 
 # Custom Resolution + Custom Date and on a toggleable Layer
-leaflet() %>% addTiles() %>%
+l %>%
   addSimpleGraticule(interval=40,
                 showOriginLabel = F,
                 group="graticule") %>%

inst/htmlwidgets/plugins/Leaflet.Graticule/Graticule-binding.js

@@ -0,0 +1,10 @@
+  LeafletWidget.methods.addGraticule = function(interval, style, layerId, group) {
+    (function() {
+      this.layerManager.addLayer(
+        L.graticule({
+          interval: interval,
+          style: style
+        }),
+        'shape', layerId, group);
+    }).call(this);
+  };

inst/htmlwidgets/plugins/Leaflet.Graticule/L.Graticule.js

@@ -0,0 +1,104 @@
+/*
+ Graticule plugin for Leaflet powered maps.
+*/
+L.Graticule = L.GeoJSON.extend({
+
+    options: {
+        style: {
+            color: '#333',
+            weight: 1
+        },
+        interval: 20
+    },
+
+    initialize: function (options) {
+        L.Util.setOptions(this, options);
+        this._layers = {};
+
+        if (this.options.sphere) {
+            this.addData(this._getFrame());
+        } else {
+            this.addData(this._getGraticule());
+        }
+    },
+
+    _getFrame: function() {
+        return { "type": "Polygon",
+          "coordinates": [
+              this._getMeridian(-180).concat(this._getMeridian(180).reverse())
+          ]
+        };
+    },
+
+    _getGraticule: function () {
+        var features = [], interval = this.options.interval;
+
+        // Meridians
+        for (var lng = 0; lng <= 180; lng = lng + interval) {
+            features.push(this._getFeature(this._getMeridian(lng), {
+                "name": (lng) ? lng.toString() + "° E" : "Prime meridian"
+            }));
+            if (lng !== 0) {
+                features.push(this._getFeature(this._getMeridian(-lng), {
+                    "name": lng.toString() + "° W"
+                }));
+            }
+        }
+
+        // Parallels
+        for (var lat = 0; lat <= 90; lat = lat + interval) {
+            features.push(this._getFeature(this._getParallel(lat), {
+                "name": (lat) ? lat.toString() + "° N" : "Equator"
+            }));
+            if (lat !== 0) {
+                features.push(this._getFeature(this._getParallel(-lat), {
+                    "name": lat.toString() + "° S"
+                }));
+            }
+        }
+
+        return {
+            "type": "FeatureCollection",
+            "features": features
+        };
+    },
+
+    _getMeridian: function (lng) {
+        lng = this._lngFix(lng);
+        var coords = [];
+        for (var lat = -90; lat <= 90; lat++) {
+            coords.push([lng, lat]);
+        }
+        return coords;
+    },
+
+    _getParallel: function (lat) {
+        var coords = [];
+        for (var lng = -180; lng <= 180; lng++) {
+            coords.push([this._lngFix(lng), lat]);
+        }
+        return coords;
+    },
+
+    _getFeature: function (coords, prop) {
+        return {
+            "type": "Feature",
+            "geometry": {
+                "type": "LineString",
+                "coordinates": coords
+            },
+            "properties": prop
+        };
+    },
+
+    _lngFix: function (lng) {
+        if (lng >= 180) return 179.999999;
+        if (lng <= -180) return -179.999999;
+        return lng;
+    }
+
+});
+
+L.graticule = function (options) {
+    return new L.Graticule(options);
+};

inst/htmlwidgets/plugins/Leaflet.SimpleGraticule/L.SimpleGraticule.js

@@ -8,15 +8,17 @@ L.SimpleGraticule = L.LayerGroup.extend({
         interval: 20,
         showOriginLabel: true,
         redraw: 'move',
-        hidden: false
+        hidden: false,
+        zoomIntervals : []
     },
 
     lineStyle: {
         stroke: true,
         color: '#111',
         opacity: 0.6,
         weight: 1,
-        clickable: false
+        interactive: false,
+        clickable: false //legacy support
     },
 
     initialize: function(options) {
@@ -54,6 +56,16 @@ L.SimpleGraticule = L.LayerGroup.extend({
         this.clearLayers();
 
         if (!this.options.hidden) {
+
+            var currentZoom = this._map.getZoom();
+
+            for(var i = 0 ; i < this.options.zoomIntervals.length ; i++) {
+                if(currentZoom >= this.options.zoomIntervals[i].start && currentZoom <= this.options.zoomIntervals[i].end){
+                    this.options.interval = this.options.zoomIntervals[i].interval;
+                    break;
+                }
+            }
+
             this.constructLines(this.getMins(), this.getLineCounts());
 
             if (this.options.showOriginLabel) {
@@ -128,7 +140,8 @@ L.SimpleGraticule = L.LayerGroup.extend({
         }
 
         return L.marker(latLng, {
-            clickable: false,
+            interactive: false,
+            clickable: false, //legacy support
             icon: L.divIcon({
                 iconSize: [0, 0],
                 className: 'leaflet-grid-label',
@@ -139,7 +152,8 @@ L.SimpleGraticule = L.LayerGroup.extend({
 
     addOriginLabel: function() {
         return L.marker([0, 0], {
-            clickable: false,
+            interactive: false,
+            clickable: false, //legacy support
             icon: L.divIcon({
                 iconSize: [0, 0],
                 className: 'leaflet-grid-label',

inst/htmlwidgets/plugins/Leaflet.SimpleGraticule/SimpleGraticule-binding.js

@@ -1,10 +1,13 @@
-  LeafletWidget.methods.addSimpleGraticule = function(interval, showOriginLabel, redraw, layerId, group) {
+  LeafletWidget.methods.addSimpleGraticule = function(interval, showOriginLabel,
+  redraw, hidden, zoomIntervals, layerId, group) {
     (function() {
       this.layerManager.addLayer(
         L.simpleGraticule({
           interval: interval,
           showOriginLabel: showOriginLabel,
-          redraw: redraw
+          redraw: redraw,
+          hidden: hidden,
+          zoomIntervals: zoomIntervals
         }),
         'shape', layerId, group);
     }).call(this);