Leaflet for Meteor

Purpose

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

Meteor Package

• bevanhunt:meteor-leaflet

Demo

Meteor Leafet Demo | GitHub

Packaged Libraries

• Leaflet: 1.3.4
• Leaflet Providers: 1.5.0
• Leaflet MarkerCluster: 1.4.1
• Leaflet Spin: 1.1.0
• Spin.js: 2.3.2

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

• meteor-leaflet-demo geojson branch is an example array conversion app using the geojson npm package.

From KML/GPX

• meteor-leaflet-demo KML branch is a example KML conversion app using the togeojson npm package.

From other Formats

• Orge Web Service can be used for straight conversion.

Featured Blog Posts

• GeoSpatital Indexing in Meteor

• RealTime Maps in Meteor - use bevanhunt:leaflet not mrt:leaflet

• Animate with D3 and Leaflet (not Meteor specific)

License

MIT