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
- Leaflet: 1.0.3
- Leaflet Providers: 1.1.16
- Leaflet MarkerCluster: 1.0.2
- Leaflet Spin: 1.1.0
- Spin.js: 2.3.2
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
- 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
-
RealTime Maps in Meteor - use bevanhunt:leaflet not mrt:leaflet
-
Animate with D3 and Leaflet (not Meteor specific)
License
MIT