maka:leaflet

v3.1.3Published 7 years ago

This package has not had recent updates. Please investigate it's current state before committing to using it in your project.

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

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

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

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

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

    • to start the loading spinner

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

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

Reactive Popups

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

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

GeoJSON

From Arrays

From KML/GPX

From other Formats

License

MIT