leaflet_helper 0.0.7 → 0.0.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ff792cd61366c579ade93b826b7fc0102747b683
-  data.tar.gz: 5a0752f2db7fb3c7e54185f2c6a260a6ac3b731e
+  metadata.gz: 488d8a802796c5734cffa8de7c511710eee778bb
+  data.tar.gz: 1ad0b5f48e8b9ece129e03fbdfb0330a1c911dbd
 SHA512:
-  metadata.gz: bd17fda3735424b865e735903708c2fa5149221927fdc151bce5da526b1e49e5658cda1211f10a0c97811b525f4a83033cde7688c5af87d6930e01fc8f6e8b73
-  data.tar.gz: 84aaec46fac3bf5d900255a9cf887f0e2e943fb14c6130ee70d27fd4bab3a78ed3e63853bd1dd83bd115e42e10562f4a9d2e31ee215a639cbc38d8c0ffacdbdd
+  metadata.gz: fdfc4ee014f893b856320347f885dddeba516ae74c9c73084eeb9c2314e6b3d928d7ed092625727dcd49b85d5cec6b145d4af4b7985d0151b7316d21c130e749
+  data.tar.gz: b18c32e4dbd453d0debe4ac1f847bd28caed3db760795150ae16bd035ce6f1ecb2478fdf5d1520d19483274a12bc219dc2e4b9924127b5e979b019bbae5ae34f

data/README.md

@@ -8,22 +8,27 @@ do this:
   gem which leaflet_helper
 ```
 
-The `cd` to the root directory of the gem.  There you will find a subdirectory named `example` in
+Then `cd` to the root directory of the gem.  There you will find a subdirectory named `example` in
 which there is a simple Sinatra-based web application that demonstrates how to use this gem.
 
 ## Recent Changes
 
-### v0.0.7
+### v0.0.9 - working
+
+* working on custom icons and icon coloring and other bells and cat calls
+
+### v0.0.8 - released
+
+* Added basic clusters using the leaflet plugin markercluster
+* refactored some code
+
+### v0.0.7 - released
 
 * Added StringTemplate class
   Reused the regex from @redpist easy_template gem
   
 * Fixed typo in ManageMarkers#remove - fat fingered a p[ when all I wanted was a [
 
-### v0.0.6 - released
-
-* Added ManageMarkers class
-  A singleton class that manages an array of hash markers to be applied on top of a map
 
 ## Installation
 
@@ -61,17 +66,32 @@ the 'layout.haml' file might look like this:
 ```ruby
   %html
     %head
-      = LeafletHelper::L.init
+      = LeafletHelper::L.init(options)
 ```
 
 #### options
 
-The 'options' is a hash.  It is unused.
+The 'options' is a hash.  It defaults to:
+
+```ruby
+    {
+      openstreetmap:  true,       # either Open Street Maps or
+      mapbox:         false,      # Mapbox.com is used as the map tile provider; not both
+      markers:        false,      # set to true to make use of markers on top of maps
+      cluster:        false,      # set to true to load the markercluster plugin
+      latitude:       AREA51.latitude,  # default map center
+      longitude:      AREA51.longitude, # default map center
+      zoom:           9,
+      min_zoom:       2,
+      max_zoom:       22
+    }
+
+```
 
 
 ### LeafletHelper::L.place_map_here(id='map', options={})
 
-The 'place_map_here' method is used to insert the HTML "<div>" tag into the
+The 'place_map_here' method is used to insert the HTML `<div>` tag into the
 body of a webpage.  This is the HTML container which will host the map image
 managed by the LeafletJS library.  If is possible to have several map images
 displayed on the same webpage; HOWEVER, each map image MUST have a different
@@ -89,19 +109,19 @@ Defaults:
 
 ```ruby
 o = {
-  style: "width: 800px; height: 400px"
+  style: "width: 1200px; height: 400px"
 }.merge(options)
 ```
 
 Of course you could just use some CSS to add anything you want.  But if you
-are an inline kinda programmer then the options are for you.
+are an inline kinda UI/UX newbie then the options are for you.
 
 ### LeafletHelper::L.show_map(id="map", options={})
 
 This method is used at the end of the body component of the HTML webpage.  Why? you
 ask.  Because thats how we did it in the old days to make sure that the entire webpage
 was loaded before doing stuff on it.  You hotshot javascripters know how its done
-the "right" way.  I'm sure you have a pull-request already to go to help out us
+the "right" way.  I'm sure you have a pull-request ready to go to help out us
 old back-end geezers.
 
 This method generates javascript source code that also includes the same javascript that
@@ -118,184 +138,25 @@ library.
 Defaults:
 
 ```ruby
-o = {
-    latitude:   AREA51.latitude,
-    longitude:  AREA51.longitude,
-    zoom:       9,
-    min_zoom:   2,
-    max_zoom:   22
-  }.merge(options)
-```
-
-These options are primarily for the 'setView' LeafletJS method.  That method
-establishes the location (latitude, longitude) at which the map is cenered.  It
-also establishs the current 'zoom' value and the minimum and maximum values for
-which the zoom value can take.
-
-
-### LeafletHelper::L.set_view(id='map', options={})
-
-The javascript source code that this method generates moves an existing map
-image to be centered at a specific latitude and longitude with a given zoom level.
-
-#### id
-
-Yep, its a string that uniquely identifies the HTML `<div>` component
-that holds the generated map graphic managed by the LeafletJS javascript
-library.
-
-#### options
-
-Defaults:
-
-```ruby
-o = {
-    latitude:   AREA51.latitude,
-    longitude:  AREA51.longitude,
-    zoom:       9
-  }.merge(options)
-```
-
-### LeafletHelper::L.add_openstreetmap_layer(id="map", options={})
-
-The LeafletJS library by itself has no dataset - no roads, streets features etc.  In
-order to see that kind of stuff a "tile" layer - a zoomable set of images - needs to be
-added.  The most common and easiest to use free open source creative commons licensed
-dataset is from the Open Street Map project.
-
-This method adds the Open Street Map dataset tiles as a layer on the LeafletJS-managed
-map image.
-
-Other tile datasets are available such as those from the mapbox.com project.  (See bolow)
-
-#### id
-
-Yep, its a string that uniquely identifies the HTML `<div>` component
-that holds the generated map graphic managed by the LeafletJS javascript
-library.
-
-#### options
-
-Defaults:
-
-```ruby
-o = {
-    latitude:   AREA51.latitude,
-    longitude:  AREA51.longitude,
-    zoom:       9,
-    min_zoom:   2,
-    max_zoom:   22 
-  }.merge(options)
+        o = @@defaults.merge({
+                    id:         id,
+                    map_name:   get_map_name(id),
+                    route:      "#{id}/markers"
+                  }.merge(options))
 ```
 
 
-### LeafletHelper::L.add_mapbox_layer(id="map", options={})
-
-As mentioned above in the discussion about Open Street Map, LeafletJS does not come
-with image tiles.  These must be provided from somewhere else.  The Open Street Map has a
-good set of vector-oriented images of streets and areas.  It has no actual images
-such as provided by satilites.  These kinds of images can be obtained via the
-Mapbox.com project.
+## System Environment Variables
 
-In order to use Mapbox images you must have an account on mapbox.com.  There is a nice
-developer friendly zero dollar plan.  Other plans for commerical use are reasoniblity priced.
+If you are going to use `mapbox.com` as a map tile provider you will need an account on that service.
 
-With an account on mapbox.com you have access to their image tiles for use with the LeafletJS
-library.
-
-The following system environment variables can be used with this capability:
-
-```
-MAPBOX_URL
-MAPBOX_USER
-MAPBOX_STYLE_ID
-MAPBOX_ACCESS_TOKEN
-```
-
-You can either provide the full URL for you mapbox project's images or you can
-provide just the pieces that make up the URL - the user, style_id and access_token.
-
-#### id
-
-Yep, its a string that uniquely identifies the HTML `<div>` component
-that holds the generated map graphic managed by the LeafletJS javascript
-library.
-
-#### options
-
-Defaults:
-
-```ruby
-o = {            
-    url:          ENV['MAPBOX_URL']           || "https://api.mapbox.com/styles/v1/{mbUser}/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
-    mapbox_user:  ENV['MAPBOX_USER']          || "your.mapbox.user.account",
-    style_id:     ENV['MAPBOX_STYLE_ID']      || "your.mapbox.project.id",
-    access_token: ENV['MAPBOX_ACCESS_TOKEN']  || "your.mapbox.access.token",
-    attribution:  'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
-    zoom:          9,
-    min_zoom:      2,
-    max_zoom:      22 
-  }.merge(options)
-```
-
-
-### LeafletHelper::L.add_support_for_markers(id="map", options={})
-
-While being able to show a map image on a webpage, zoom it and move it around (called panning),
-it is much more fun if you can put actionable markers on top of the map.  That is what this
-method does.  It injects the javascript code that makes the callback to get the "markers"
-for display upon the map.  The callback is generated everytime the map image changes either by
-zoom or by pan.
-
-The markers are provided as a JSON object.  The object is an array of hashes.  Each hash defines one marker.
-
-
-
-#### id
-
-Yep, its a string that uniquely identifies the HTML `<div>` component
-that holds the generated map graphic managed by the LeafletJS javascript
-library.
-
-The only option that is necessary is the 'route' - the place to do an HTTP GET
-to receive a JSON string of markers.
-
-#### options
-
-Defaults:
-
-```ruby
-o = {
-    route:     "#{id}/markers"
-  }.merge(options)
-```
-
-Note that the 'route' default is setup to easily match a Sinatra block like:
-
-```ruby
-get '/:map_id/markers' do |map_id|
-  content-type :json
-  $array_of_marker_hashes[map_id].to_json
-end
-```
-
-For now a marker hash looks like this:
-
-```ruby
-{
-  "name":     "Area 51",
-  "lon":      AREA51.longitude,
-  "lat":      AREA51.latitude,
-  "details":  "A good place to buy used flying saucers."
-}
-```
+The following system environment variables are used in loading your sceen from mapbox.com:
 
-The marker when clicked shows a popup window on the map image.  The "name" component is at
-the top of the popup in an `<h3>` wrapper.  The "lat" and "lon" elements allow LeafletJS to
-place the marker at the correct location on the map image.
+* MAPBOX_URL
+* MAPBOX_USER
+* MAPBOX_STYLE_ID
+* MAPBOX_ACCESS_TOKEN
 
-The "details" component can be any combination of HTML that you want.  In one applicaton I have
-that makes use of the LeafletHelper library I show thumbnails of images as part of the popup.
 
 ## Development
 

data/example/Gemfile

@@ -12,4 +12,3 @@ gem 'sinatra', require: 'sinatra/base'  # Classy web-development dressed in a DS
 gem 'sinatra-partial'                   # A sinatra extension for render partials.
 gem 'haml'                              # An elegant, structured (X)HTML/XML templating engine.
 gem 'puma'                              # Puma is a simple, fast, threaded, and highly concurrent HTTP 1.1 server for Ruby/Rack application
-

data/example/Gemfile.lock

@@ -3,7 +3,7 @@ GEM
   specs:
     haml (4.0.7)
       tilt
-    leaflet_helper (0.0.6)
+    leaflet_helper (0.0.8)
     puma (3.4.0)
     rack (1.6.4)
     rack-protection (1.5.3)

data/example/app.rb

@@ -7,7 +7,7 @@
 
 require 'leaflet_helper'
 
-$markers = Hash.new(LeafletHelper::ManageMarkers.new)
+$markers = LeafletHelper::ManageMarkers.new
 
 module TestData
 
@@ -50,6 +50,19 @@ module TestData
 
 end # module TestData
 
+# Generate a consistent set of test markers
+$markers.clear
+30.times do |x|
+  code_word = TestData.get_random_codeword
+  location  = TestData.get_random_location
+  $markers.add id: code_word,
+    lat:    location['lat'],
+    lon:    location['lon'],
+    html:   <<~EOS
+      <h3>Crash ##{x}</h3>
+      <p>During #{code_word} rehearsals, programmer error resulted in an unexpected hard landing at this location</p>
+    EOS
+end
 
 
 require 'pathname'
@@ -112,19 +125,7 @@ module APP
     # changed a new set of markers is generated.
     get '/:map_id/markers' do |map_id|
       content_type :json
-      $markers[map_id].clear
-      (rand(10)+1).times do |x|
-        code_word = TestData.get_random_codeword
-        location  = TestData.get_random_location
-        $markers[map_id].add id: code_word,
-          lat:    location['lat'],
-          lon:    location['lon'],
-          html:   <<~EOS
-            <h3>Crash ##{x}</h3>
-            <p>During #{code_word} rehearsals, programmer error resulted in an unexpected hard landing at this location</p>
-          EOS
-      end
-      $markers[map_id].to_json
+      $markers.to_json
     end
 
 

data/example/views/layout.haml

@@ -3,7 +3,9 @@
 %html
   %head
     %title Application by VanHoozer
-    = LeafletHelper::L.init
+    = LeafletHelper::L.init({ openstreetmap: true, mapbox: false, markers: true, cluster: true })
+
+
   %body
 
     #logo_header
@@ -18,8 +20,4 @@
     #footer
       = partial :footer
 
-    - map_id = 'my_wonderful_map'
-    - map_options = { latitude: 37.235, longitude: -115.811111, min_zoom: 2, max_zoom: 18}
-    = LeafletHelper::L.show_map(map_id, map_options)
-    = LeafletHelper::L.add_openstreetmap_layer(map_id, map_options)
-    = LeafletHelper::L.add_support_for_markers(map_id, route: "#{map_id}/markers")
+    = LeafletHelper::L.show_map('my_wonderful_map', { route: "my_wonderful_map/markers" })

data/leaflet_helper.gemspec

@@ -4,7 +4,7 @@ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
 
 Gem::Specification.new do |spec|
   spec.name          = "leaflet_helper"
-  spec.version       = '0.0.7'
+  spec.version       = '0.0.8'
   spec.authors       = ["Dewayne VanHoozer"]
   spec.email         = ["dvanhoozer@gmail.com"]
 

data/lib/leaflet_helper/l.rb

@@ -0,0 +1,163 @@
+# l.rb
+# class L wraps the LeafletJS junk.  Why L? because in
+# javashit the LeafletJS uses L for its namespace.
+
+module LeafletHelper
+  class L
+    VERSION   = '0.7.7'       # of leaflet.js
+    JS        = "http://cdn.leafletjs.com/leaflet/v#{VERSION}/leaflet.js"
+    CSS       = "http://cdn.leafletjs.com/leaflet/v#{VERSION}/leaflet.css"
+
+    MarkerClusterJS   = "https://raw.githubusercontent.com/Leaflet/Leaflet.markercluster/leaflet-0.7/dist/leaflet.markercluster.js"
+    MarkerClusterCSS  = "https://raw.githubusercontent.com/Leaflet/Leaflet.markercluster/leaflet-0.7/dist/MarkerCluster.css"
+
+    # FIXME: Needs to be isolated between maps in a multi-map application.
+    #        experiments/maps shows the problem
+    @@defaults  = {   # the options from L#init
+      openstreetmap:  true,
+      mapbox:         false,
+      markers:        false,
+      cluster:        false,
+      latitude:       AREA51.latitude,
+      longitude:      AREA51.longitude,
+      zoom:           9,
+      min_zoom:       2,
+      max_zoom:       22
+    }
+
+
+    class << self
+
+      # intended for the the head section of a web page
+      def init(options={})
+        @@defaults.merge! options
+        return U.pull_in 'head.html.erb', @@defaults
+      end # def init
+
+
+      # intended for the body of a web page
+      # can support multiple maps on a page; each
+      # map must have a unique id
+      def place_map_here(id='map', options={})
+        o = {
+              style: "width: 1200px; height: 400px"
+            }.merge(options)
+
+        div_options = ""
+
+        o.each_pair do |k,v|
+          div_options += " #{k.to_s}=" + '"' + v + '"'
+        end
+
+        return U.pull_in 'map_div.html.erb', {id: id, parameters: div_options}
+      end # def place_map_here(id='map')
+
+
+      # Intended for the body at the bottom
+      # see the example for, er uh, an example
+      def show_map(id="map", options={})
+        o = @@defaults.merge({
+                    id:         id,
+                    map_name:   get_map_name(id),
+                    route:      "#{id}/markers"
+                  }.merge(options))
+
+        script = "<script>\n"
+        script += U.pull_in 'show_map.js.erb', o
+        script += set_view(id, o)
+
+        # SMELL: why can't you have both OSM and Mapbox?
+        script += add_openstreetmap_layer(id, o)  if openstreetmap? && !mapbox?
+        script += add_mapbox_layer(id, o)         if mapbox?        && !openstreetmap?
+        script += add_support_for_markers(id, o)  if markers?
+
+        script += "</script>\n"
+
+        return script
+      end # def show_map(id="map", options={})
+
+
+      # Center an existing map to a specific location
+      def set_view(id='map', options={})
+        o = @@defaults.merge({
+                    id:         id,
+                    map_name:   get_map_name(id)
+                  }.merge(options))
+
+        return U.pull_in 'set_view.js.erb', o
+      end # def set_view(id='map', options={})
+
+
+      # The default tile provider is Open Street Map project
+      def add_openstreetmap_layer(id="map", options={})
+        @@defaults[:openstreetmap] = true
+        o = @@defaults.merge({
+                    id:               id,
+                    map_name:         get_map_name(id),
+                    osm_url:          'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+                    osm_attribution:  'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
+                  }.merge(options))
+
+        return U.pull_in 'add_openstreetmap_layer.js.erb', o
+      end # def add_openstreetmap_layer(id="map", options={})
+
+
+      # NOTE: To use mapbox you must have an account
+      def add_mapbox_layer(id="map", options={})
+        o = @@defaults.merge({
+                    id:                   id,
+                    map_name:             get_map_name(id),
+                    mapbox_url:           ENV['MAPBOX_URL']           || "https://api.mapbox.com/styles/v1/{mbUser}/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
+                    mapbox_user:          ENV['MAPBOX_USER']          || "your.mapbox.user.account",
+                    mapbox_style_id:      ENV['MAPBOX_STYLE_ID']      || "your.mapbox.project.id",
+                    mapbox_access_token:  ENV['MAPBOX_ACCESS_TOKEN']  || "your.mapbox.access.token",
+                    mapbox_attribution:   'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
+                  }.merge(options))
+
+        return U.pull_in 'add_mapbox_layer.js.erb', o
+      end # def add_mapbox_layer(id="map", options={})
+
+
+      # Allows for the generation of markers on top of the map
+      def add_support_for_markers(id="map", options={})
+        o = @@defaults.merge({
+                    id:        id,
+                    map_name:  get_map_name(id),
+                    route:     "#{id}/markers"
+                  }.merge(options))
+
+        return U.pull_in 'marker_support.js.erb', o
+      end # def add_support_for_markers(map_id, map_options) 
+
+
+      # The Javascript container that has the map for this id
+      def get_map_name(id="map")
+        return "lh_#{id}"
+      end
+
+
+      def openstreetmap?
+        @@defaults[:openstreetmap]
+      end
+
+      def mapbox?
+        @@defaults[:mapbox]
+      end
+
+      def markers?
+        @@defaults[:markers]
+      end
+
+      def cluster?
+        @@defaults[:cluster]
+      end
+
+      # LeafletHelper::U needs access to the L's class variable
+      def defaults
+        @@defaults
+      end
+
+    end # class << self
+  end # class L
+end # module LeafletHelper
+

data/lib/leaflet_helper/u.rb

@@ -0,0 +1,23 @@
+# u.rb
+# This is a utility class
+
+module LeafletHelper
+  class U
+    class << self
+
+      # insert HTML/JS or whatever from a file in the lib/templates directory
+      # use ERB to pre-process the file using local binding
+      def pull_in(template_name, options={})
+        options.each { |k,v| instance_variable_set("@#{k}", v) }
+        @file_name = LeafletHelper::TEMPLATES + template_name
+        return ERB.new(@file_name.read, 0, '>').result(binding)
+      end # def pull_in(template_name, options={})
+
+      # provide ERB in #pull_in with visibility into class L
+      def cluster?
+        LeafletHelper::L.defaults[:cluster]
+      end # def cluster?
+
+    end # class << self
+  end # class U
+end # module LeafletHelper

data/lib/leaflet_helper.rb

@@ -2,308 +2,32 @@
 #
 # If you are a front-end developer and a Javascript guru this will 
 # make you laught.  If you are a back-end big-data AI do-er of amazing
-# things then this library might be of some use to you.  I allows you 
+# things then this library might be of some use to you.  It allows you 
 # to but maps onto a web-page using simple frameworks.  No more NodeJS
 # or Rails.  Use some simple sinatra-based haml pages and voila you got maps.
 #
 # Makes use of these system environment variables when using
-# using the method add_mapbox_layer:
+# the method Mapbox.com as a tile provider:
 #
 #   MAPBOX_URL
 #   MAPBOX_USER
 #   MAPBOX_STYLE_ID
 #   MAPBOX_ACCESS_TOKEN
 
-# TODO: refactor
+require 'erb'
+require 'pathname'
 
 # Just as good a default as any other ...
 AREA51 = Struct.new('Location', :latitude, :longitude).new
 AREA51.latitude   = 37.235
 AREA51.longitude  = -115.811111
 
-require 'leaflet_helper/string_template'
-require 'leaflet_helper/manage_markers'
+require 'leaflet_helper/string_template'  # Lets do simple string templates
+require 'leaflet_helper/manage_markers'   # Lets keep track of some markers
+require 'leaflet_helper/l'                # wrapper class for LeafletJS
+require 'leaflet_helper/u'                # a utility class
 
 
 module LeafletHelper
-  class L
-    VERSION   = '0.7.7'       # of leaflet.js
-    JS        = "http://cdn.leafletjs.com/leaflet/v#{VERSION}/leaflet.js"
-    CSS       = "http://cdn.leafletjs.com/leaflet/v#{VERSION}/leaflet.css"
-
-    # TODO: Why are these desired?
-    @@map_ids   = []            # the div ids of all of the maps
-
-    class << self
-
-      # intended for the the head section
-      def init(options={})
-        o = {
-              author:   "@madbomber"
-            }.merge(options)
-
-        leaflet_script = <<~EOS
-          <!-- Leaflet -->
-          <script src="#{JS}"></script>
-          <link rel="stylesheet" href="#{CSS}">
-        EOS
-
-        return leaflet_script
-      end # def init
-
-
-      # intended for the body of a web page
-      # can support multiple maps on a page; each
-      # map must have a unique id
-      def place_map_here(id='map', options={})
-        @@map_ids << id unless @@map_ids.include?(id)
-
-        o = {
-          style: "width: 800px; height: 400px"
-        }.merge(options)
-
-        div_options = ""
-
-        o.each_pair do |k,v|
-          div_options += " #{k.to_s}=" + '"' + v + '"'
-        end
-
-        return <<~EOS
-          <div id="#{id}"#{div_options}></div>
-        EOS
-      end # def place_map_here(id='map')
-
-
-      # Intended for the body at the bottom
-      def show_map(id="map", options={})
-        o = {
-            latitude:   AREA51.latitude,
-            longitude:  AREA51.longitude,
-            zoom:       9,
-            min_zoom:   2,
-            max_zoom:   22
-          }.merge(options)
-
-        var_name = get_var_name(id)
-
-        leaflet_script = <<~EOS
-          <script>
-
-            var #{var_name};
-
-            // SMELL: These 3 vars are only used with markers so why are they here?
-            var ajaxRequestFor#{id}; 
-            var plotlistFor#{id};
-            var plotlayersFor#{id} = [];
-
-            // set up the map
-            #{var_name} = new L.Map('#{id}');
-
-            // SMELL: Maybe the app is not ready to set the view.  There is
-            //        a ruby method #set_view that does this.
-            // start the map at a given location and zoom level
-            #{var_name}.setView(new L.LatLng(#{o[:latitude]}, #{o[:longitude]}), #{o[:zoom]});
-          
-          </script>
-        EOS
-
-        return leaflet_script
-      end # def show_map(id="map", options={})
-
-
-      # Center an existing map to a specific location
-      def set_view(id='map', options={})
-        o = {
-            latitude:   AREA51.latitude,
-            longitude:  AREA51.longitude,
-            zoom:       9
-          }.merge(options)
-
-        var_name = get_var_name(id)
-
-        leaflet_script = <<~EOS
-          <script>
-            // center the map to a given location and zoom level
-            #{var_name}.setView(new L.LatLng(#{o[:latitude]}, #{o[:longitude]}), #{o[:zoom]});
-          </script>
-        EOS
-
-        return leaflet_script
-
-      end # def set_view(id='map', options={})
-
-
-      # Intended for the body at the bottom
-      # SMELL: why the bottom?  Because that's the way we did it in the old days
-      #        so that the entire web page would have been loaded by then.
-      def add_openstreetmap_layer(id="map", options={})
-        o = {
-            latitude:   AREA51.latitude,
-            longitude:  AREA51.longitude,
-            zoom:       9,
-            min_zoom:   2,
-            max_zoom:   22 
-          }.merge(options)
-
-        var_name = get_var_name(id)
-
-        leaflet_script = <<~EOS
-          <script>
-
-            // create the tile layer with correct attribution
-            var osmUrl    ='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
-            var osmAttrib ='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
-            var osm       = new L.TileLayer(osmUrl, {minZoom: #{o[:min_zoom]}, maxZoom: #{o[:max_zoom]}, attribution: osmAttrib});   
-            
-            osm.addTo(#{var_name});
-
-          </script>
-        EOS
-
-        return leaflet_script
-      end # def add_openstreetmap_layer(id="map", options={})
-
-
-      # Intended for the body at the bottom
-      # To use mapbox you must have an account
-      def add_mapbox_layer(id="map", options={})
-        o = {            
-            url:          ENV['MAPBOX_URL']           || "https://api.mapbox.com/styles/v1/{mbUser}/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
-            mapbox_user:  ENV['MAPBOX_USER']          || "your.mapbox.user.account",
-            style_id:     ENV['MAPBOX_STYLE_ID']      || "your.mapbox.project.id",
-            access_token: ENV['MAPBOX_ACCESS_TOKEN']  || "your.mapbox.access.token",
-            attribution:  'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
-            zoom:          9,
-            min_zoom:      2,
-            max_zoom:      22 
-          }.merge(options)
-
-        var_name = get_var_name(id)
-
-        leaflet_script = <<~EOS
-          <script>
-
-            // create the tile layer with correct attribution
-            L.tileLayer('#{o[:url]}', {
-                mbUser:       '#{o[:mapbox_user]}',
-                attribution:  '#{o[:attribution]}',
-                minZoom:      #{o[:min_zoom]},
-                maxZoom:      #{o[:max_zoom]},
-                id:           '#{o[:style_id]}',
-                accessToken:  '#{o[:access_token]}'
-            }).addTo(#{var_name});
-
-          </script>
-        EOS
-
-        return leaflet_script
-      end # def add_mapbox_layer(id="map", options={})
-
-
-      # Allows for the generation of markers on top of the map
-      def add_support_for_markers(id="map", options={})
-        o = {
-            route:     "#{id}/markers"
-          }.merge(options)
-
-        var_name = get_var_name(id)
-
-        leaflet_script = <<~EOS
-          <script>
-
-            // set up AJAX request
-            ajaxRequestFor#{id} = getXmlHttpObjectFor#{id}();
-
-            if (ajaxRequestFor#{id} == null) {
-              alert ("This browser does not support HTTP Request - can not show markers");
-              // return;
-            }
-
-            function getXmlHttpObjectFor#{id}() {
-              if (window.XMLHttpRequest) { return new XMLHttpRequest(); }
-              if (window.ActiveXObject)  { return new ActiveXObject("Microsoft.XMLHTTP"); }
-              return null;
-            }
-
-
-            getMarkersFor#{id}();
-            #{var_name}.on('moveend', on#{id}Move);
-
-            function on#{id}Move(e) { getMarkersFor#{id}(); }
-
-
-            // request the marker info for the current bounds
-            function getMarkersFor#{id}() {
-
-              // TODO: Currently the displayed map bounds is not being used
-              //       to get the new set of markers.  This could be ugly for
-              //       lots of markers.  Need a way to insert the bounds into the route.
-              var bounds  = #{var_name}.getBounds();
-              var minll   = bounds.getSouthWest();
-              var maxll   = bounds.getNorthEast();
-
-              // this is the place from which the markers JSON array is obtained
-              var route = '#{o[:route]}';
-
-              ajaxRequestFor#{id}.onreadystatechange =  stateChangedFor#{id};
-              ajaxRequestFor#{id}.open('GET', route, true);
-              ajaxRequestFor#{id}.send(null);
-            }
-
-
-            // The map changed so get new markers
-            function stateChangedFor#{id}() {
-
-              // if AJAX returned a list of markers, add them to the map
-              if (ajaxRequestFor#{id}.readyState == 4) {
-
-                // use the info here that was returned
-                if (ajaxRequestFor#{id}.status == 200) {
-                  plotlist = eval("(" + ajaxRequestFor#{id}.responseText + ")");
-                  removeMarkersFrom#{id}();
-
-                  for (i=0; i<plotlist.length; i++) {
-                    var plotll    = new L.LatLng(plotlist[i].lat, plotlist[i].lon, true);
-                    var plotmark  = new L.Marker(plotll);
-                    plotmark.data = plotlist[i];
-
-                    #{var_name}.addLayer(plotmark);
-                    plotmark.bindPopup(plotlist[i].html);
-                    plotlayersFor#{id}.push(plotmark);
-                  } // for
-
-                } // if (ajaxRequestFor#{id}.status == 200)
-
-              } // if (ajaxRequestFor#{id}.readyState == 4)
-
-            } // function stateChangedFor#{id}()
-
-
-            // remove all of the markers from the map
-            function removeMarkersFrom#{id}() {
-              for (i=0; i<plotlayersFor#{id}.length; i++) {
-                #{var_name}.removeLayer(plotlayersFor#{id}[i]);
-              }
-              plotlayersFor#{id} = [];
-            }
-
-          </script>
-        EOS
-
-        return leaflet_script
-      end # def add_support_for_markers(map_id, map_options) 
-
-
-      # The "var name" is the Javascript container that has the map
-      def get_var_name(id="map")
-        return "lh_#{id}"
-      end
-
-
-      def comment(a_string='####################################################')
-        return "<!-- #{a_string}  -->"
-      end
-
-    end # class << self
-  end # class L
+  TEMPLATES = Pathname.new(__FILE__).parent + 'templates'
 end # module LeafletHelper

data/lib/templates/add_mapbox_layer.js.erb

@@ -0,0 +1,14 @@
+<!-- begin <%= @file_name %> -->
+  
+  L.tileLayer(
+    '<%= @url %>', 
+    {
+      mbUser:       '<%= @mapbox_user %>',
+      attribution:  '<%= @mapbox_attribution %>',
+      minZoom:      <%= @min_zoom %>,
+      maxZoom:      <%= @max_zoom %>,
+      id:           '<%= @mapbox_style_id %>',
+      accessToken:  '<%= @mapbox_access_token %>'
+    }).addTo(<%= @map_name %>);
+  
+<!-- end <%= @file_name %> -->

data/lib/templates/add_openstreetmap_layer.js.erb

@@ -0,0 +1,11 @@
+<!-- begin <%= @file_name %> -->
+  
+  L.tileLayer(
+    '<%= @osm_url %>', 
+    {
+      minZoom:      <%= @min_zoom %>, 
+      maxZoom:      <%= @max_zoom %>, 
+      attribution:  '<%= @osm_attribution %>'
+    }).addTo(<%= @map_name %>);
+
+<!-- end <%= @file_name %> -->

data/lib/templates/head.html.erb

@@ -0,0 +1,13 @@
+<!-- begin <%= @file_name %> -->
+
+<!-- Leaflet -->
+<script src="<%= LeafletHelper::L::JS %>"></script>
+<link rel="stylesheet" href="<%= LeafletHelper::L::CSS %>">
+
+<% if @cluster %>
+  <!-- Leaflet.markercluster -->
+  <script src="<%= LeafletHelper::L::MarkerClusterJS %>"></script>
+  <link rel="stylesheet" href="<%= LeafletHelper::L::MarkerClusterCSS %>">
+<% end %>
+
+<!-- end <%= @file_name %> -->

data/lib/templates/map_div.html.erb

@@ -0,0 +1,3 @@
+<!-- begin <%= @file_name %> -->
+<div id="<%= @id %>" <%= @parameters %>></div>
+<!-- end <%= @file_name %> -->

data/lib/templates/marker_support.js.erb

@@ -0,0 +1,100 @@
+<!-- begin <%= @file_name %> -->
+
+// set up AJAX request
+ajaxRequestFor<%= @id %> = getXmlHttpObjectFor<%= @id %>();
+
+if (ajaxRequestFor<%= @id %> == null) {
+  alert ("This browser too old - can not show markers");
+  // return;
+}
+
+function getXmlHttpObjectFor<%= @id %>() {
+  if (window.XMLHttpRequest) { return new XMLHttpRequest(); }
+  if (window.ActiveXObject)  { return new ActiveXObject("Microsoft.XMLHTTP"); }
+  return null;
+}
+
+
+getMarkersFor<%= @id %>();
+<%= @map_name %>.on('moveend', on<%= @id %>Move);
+
+function on<%= @id %>Move(e) { getMarkersFor<%= @id %>(); }
+
+
+// request the marker info for the current bounds
+function getMarkersFor<%= @id %>() {
+
+  // TODO: Currently the displayed map bounds is not being used
+  //       to get the new set of markers.  This could be ugly for
+  //       lots of markers.  Need a way to insert the bounds into the route.
+
+  var bounds  = <%= @map_name %>.getBounds();
+  var minll   = bounds.getSouthWest();
+  var maxll   = bounds.getNorthEast();
+
+  // this is the place from which the markers JSON array is obtained
+  var route = '<%= @route %>';
+
+  ajaxRequestFor<%= @id %>.onreadystatechange = stateChangedFor<%= @id %>;
+  ajaxRequestFor<%= @id %>.open('GET', route, true);
+  ajaxRequestFor<%= @id %>.send(null);
+}
+
+
+// The map changed so get new markers
+function stateChangedFor<%= @id %>() {
+
+  // if AJAX returned a list of markers, add them to the map
+  if (ajaxRequestFor<%= @id %>.readyState == 4) {
+
+  <% if cluster? %>
+    var markersFor<%= @id %> = L.markerClusterGroup();
+  <% end %>
+
+    // use the info here that was returned
+    if (ajaxRequestFor<%= @id %>.status == 200) {
+      plotlist = eval("(" + ajaxRequestFor<%= @id %>.responseText + ")");
+      removeMarkersFrom<%= @id %>();
+
+      for (i=0; i<plotlist.length; i++) {
+        var plotll    = new L.LatLng(plotlist[i].lat, plotlist[i].lon, true);
+        var plotmark  = new L.Marker(plotll);
+        plotmark.data = plotlist[i];
+
+        // SMELL: Is each marker in a different layer?  Wouldn't it
+        //        be better to have all markers in the same layer?
+        //        With all markers in the same layer we could then do ...
+        //          markerLayer.add(markers).addTo(map);
+        //          map.fitBounds(markerLayer.getBounds());
+
+        plotmark.bindPopup(plotlist[i].html);
+
+      <% if cluster? %>
+        markersFor<%= @id %>.addLayer(plotmark);
+      <% else %>
+        <%= @map_name %>.addLayer(plotmark);
+        plotlayersFor<%= @id %>.push(plotmark);
+       <% end %>
+
+      } // for
+
+    <% if cluster? %>
+      <%= @map_name %>.addLayer(markersFor<%= @id %>);
+    <% end %>
+
+    } // if (ajaxRequestFor<%= @id %>.status == 200)
+
+  } // if (ajaxRequestFor<%= @id %>.readyState == 4)
+
+} // function stateChangedFor<%= @id %>()
+
+
+// remove all of the markers from the map
+function removeMarkersFrom<%= @id %>() {
+  for (i=0; i<plotlayersFor<%= @id %>.length; i++) {
+    <%= @map_name %>.removeLayer(plotlayersFor<%= @id %>[i]);
+  }
+  plotlayersFor<%= @id %> = [];
+}
+
+<!-- end <%= @file_name %> -->

data/lib/templates/set_view.js.erb

@@ -0,0 +1,11 @@
+<!-- begin <%= @file_name %> -->
+
+  <%= @map_name %>.setView(new 
+    L.LatLng(
+      <%= @latitude %>, 
+      <%= @longitude %>
+    ), 
+    <%= @zoom %>
+  );
+
+<!-- end <%= @file_name %> -->

data/lib/templates/show_map.js.erb

@@ -0,0 +1,11 @@
+<!-- begin <%= @file_name %> -->
+
+  var <%= @map_name %> = new L.Map('<%= @id %>');
+
+  // SMELL: These 3 vars are only used with markers so why are they here?
+  var ajaxRequestFor<%= @id %>; 
+  var plotlistFor<%= @id %>;
+  var plotlayersFor<%= @id %> = [];
+
+<!-- end <%= @file_name %> -->
+

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: leaflet_helper
 version: !ruby/object:Gem::Version
-  version: 0.0.7
+  version: 0.0.8
 platform: ruby
 authors:
 - Dewayne VanHoozer
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-06-12 00:00:00.000000000 Z
+date: 2016-06-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -77,8 +77,17 @@ files:
 - example/views/layout.haml
 - leaflet_helper.gemspec
 - lib/leaflet_helper.rb
+- lib/leaflet_helper/l.rb
 - lib/leaflet_helper/manage_markers.rb
 - lib/leaflet_helper/string_template.rb
+- lib/leaflet_helper/u.rb
+- lib/templates/add_mapbox_layer.js.erb
+- lib/templates/add_openstreetmap_layer.js.erb
+- lib/templates/head.html.erb
+- lib/templates/map_div.html.erb
+- lib/templates/marker_support.js.erb
+- lib/templates/set_view.js.erb
+- lib/templates/show_map.js.erb
 homepage: http://github.com/MadBomber/leaflet_helper
 licenses:
 - You want it?  Its yours!