/meteor-leaflet

Leaflet.js for Meteor.js

Primary LanguageCSS

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('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