https://github.com/mattkrick/meteor-leaflet-maps

Leaflet, now with lazy loading & namespacing!
https://github.com/mattkrick/meteor-leaflet-maps

Last synced: about 1 month ago
JSON representation

Leaflet, now with lazy loading & namespacing!

• Host: GitHub
• URL: https://github.com/mattkrick/meteor-leaflet-maps
• Owner: mattkrick
• License: mit
• Created: 2015-04-04T03:07:17.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2016-05-30T22:28:32.000Z (almost 9 years ago)
• Last Synced: 2025-03-24T05:44:06.896Z (2 months ago)
• Language: JavaScript
• Size: 71.3 KB
• Stars: 6
• Watchers: 5
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
NO LONGER MAINTAINED.

# meteor-leaflet-maps

Leaflet, now with lazy loading & namespacing!

### Reasons to use:

 - Pulls files from the leaflet CDN, or your local copy (faster for dev on local box)

 - Can choose different versions manually (great in case I'm slow to update or if there's a regression)

 - Only loads when you need it

 - Supports multiple maps

 - Gives you a namespace to store markers change the map from a different file, etc.

 - Obviates the need for a `window.onload`

### Credits

 - This is basically a rip-off of DBurles' GoogleMaps, but with a couple perks. That, and it's for leaflet.

### Installation

    $ meteor add mattkrick:leaflet-maps

### Loading Scripts

Loading js & css when you don't need it isn't cool. Now, you can load it the first time it's called.

    Router.onBeforeAction(function() {

      leafletMaps.load({options});

      this.next();

    }, { only: ['routeOne', 'routeTwo'] });

You can check if the script is loaded by typing this in the console: `leafletMaps.isLoaded.get();`

### Options

Options are passed in via an object:

    var options = {version: '0.7.3', local: true, plugins: ['markerCluster']};

    

`version`: optional, defaults to current version of 0.7.3 (for CDN loads only)

`local`: optional, defaults to false. If true, will load your core js & css from "/public/leaflet/"

`plugins` optional, Array. Possible options: 'awesomeMarkers', 'markerCluster'. Feel free to make a PR to add more.

Just drop the required files into the `pluginRoot` & it'll find them & install them after the core loads.

`pluginRoot` optional, defaults to "/public/leaflet/plugins". This is where you put all your plugins js & css files.

     

### Putting it in a template

    {{>leafletMap name="exampleMap" options=leafletOptions}}

`name` is the namespace.

`options` includes, things like your tileLayer, latLng (optional), and zoom (optional)

You can always find your map globally at `leafletMaps.maps.name`.

Your map object has 2 properties. `instance` and `options`.

Make sure the parent Div has a height & width!

#### Creating a helper

Personally, I like to create a global helper so I can use the same basic options for all my maps. It looks like this:

    Template.registerHelper('leafletOptions', function() {

      if (leafletMaps && leafletMaps.isLoaded.get()) { //only necessary if you use an `L` method

        return {

          tileLayer: L.tileLayer('https://{s}.tiles.mapbox.com/v4/{mapId}/{z}/{x}/{y}.png?access_token={token}', {

            attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',

            subdomains: ['a','b','c','d'],

            mapId: 'Username.MapID',

            token: 'IAlwaysThoughtItWasOddToCallAuthorizationKeysTokens'

          }),

          center: [40,-122], //Remember, it's lat, then lng. Doesn't conform to geoJSON standards!

          zoom: 13

        };

      }

    });

### Workin' it

The magic happens inside a `ready` callback. `ready` means the scripts have been downloaded, loaded, and the map template has been rendered.

That means the map fully loads all its tiles, all the time. No race conditions, no ugly `window.onload`, and you can load as many maps as you want.

    Template.spots.onRendered(function() {

      leafletMaps.ready('exampleMap', function (map) {

        Spots.find().observeChanges({

          added: function (id, fields) {

            console.log(fields);

            L.marker(flipCoords(fields.loc.coordinates)).addTo(map.instance);

          }

        });

      });

    });

### Changelog

  0.2.0 Added plugins, local file loading & fixed bug by stopping a computation in an autorun which could recreate a map

  

  0.1.0 Initial

### License

MIT