Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Leaflet for Meteor

Purpose

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

Meteor Package

Demo

Meteor Leafet Demo | GitHub

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('Stamen.Watercolor').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