Skip to content
Leaflet.js for Meteor.js
CSS JavaScript
Latest commit 88a622f @bevanhunt Merge pull request #65 from bevanhunt/change-to-0.7.7
upgrade to leaflet 0.7.7

README.md

Leaflet for Meteor

Purpose

To provide a Meteor package to quickly build real-time cross-platform map apps.

Meteor Package

  • bevanhunt:meteor-leaflet
  • Leaflet Version: 0.7.7 = bevanhunt:meteor-leaflet 2.0.0
  • Leaflet Version: 1.0.0-beta2 = bevanhunt:meteor-leaflet 1.3.1

Demo

Meteor Leafet Demo | GitHub | Demo

Packaged Libraries

Roadmap

Roadmap

Usage

  • add this package to your Meteor project

      meteor add bevanhunt:leaflet
  • add a map div to html

      <div id='map'></div>
  • add a style for map to css

      #map {
        min-height: 350px;
        min-width: 100%;
      }
  • in Javascript client-side code define Leaflet map with default image path

      if (Meteor.isClient) {
        L.Icon.Default.imagePath = 'packages/bevanhunt_leaflet/images';
        var map = L.map('map');
      }
  • in Javascript client-side code use a free tile provider [optional] - View Map Choices

      if (Meteor.isClient) {
        L.tileLayer.provider('Thunderforest.Outdoors').addTo(map);
      }
  • in Javascript client-side code use Leaflet Spin [optional]

    • to start the loading spinner

        if (Meteor.isClient) {
          map.spin(true);
        }
    • to stop the loading spinner

        if (Meteor.isClient) {
          map.spin(false);
        }

Reactive Popups

  • in Javascript client-side to create Reactive Popups - more info on Blaze.renderWithData.

      if (Meteor.isClient) {
        // add marker to map
        var marker = L.marker([50.5, 30.5]).addTo(map);
        // wrapping node for bindPopup
        var containerNode = document.createElement('div');
        // Which template to use for the popup? Some data for it, and attach it to node
        Blaze.renderWithData(Template.popup, dataContext, containerNode);
        // Finally bind the containerNode to the popup
        marker.bindPopup(containerNode).openPopup();
      }

GeoJSON

From Arrays

From KML/GPX

From other Formats

Featured Blog Posts

License

MIT

Something went wrong with that request. Please try again.