Giter VIP home page Giter VIP logo

meteor-leaflet's Introduction

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

meteor-leaflet's People

Contributors

bevanhunt avatar appshore avatar bitdeli-chef avatar handtrix avatar kyleking avatar lucfranken avatar

Watchers

James Cloos avatar Randell S. Hynes avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.