Permalink
Browse files

first

  • Loading branch information...
0 parents commit d65bacc9abf06ba07866213089aa0411c8c147ba Bevan Hunt committed Nov 4, 2012
@@ -0,0 +1,2 @@
+local
+meteorite
@@ -0,0 +1,10 @@
+# Meteor packages used by this project, one per line.
+#
+# 'meteor add' and 'meteor remove' will edit this file for you,
+# but you can also edit it by hand.
+
+insecure
+preserve-inputs
+coffeescript
+leaflet
+jquery
@@ -0,0 +1 @@
+config.coffee
@@ -0,0 +1,58 @@
+# create marker collection
+Meteor.subscribe('markers')
+Markers = new Meteor.Collection('markers')
+
+# resize the layout
+window.resize = (t) ->
+ w = window.innerWidth
+ h = window.innerHeight
+ top = t.find('#map').offsetTop
+ c = w - 40
+ m = (h-top) - 60
+ t.find('#container').style.width = "#{c}px"
+ t.find('#map').style.height = "#{m}px"
+
+Template.map.rendered = ->
+ # resize on load
+ window.resize(@)
+
+ # resize on resize of window
+ $(window).resize =>
+ window.resize(@)
+
+ # create default image path
+ L.Icon.Default.imagePath = '../../leaflet'
+
+ # create a map in the map div, set the view to a given place and zoom
+ window.map = L.map 'map',
+ doubleClickZoom: false
+ .setView([49.25044, -123.137], 13)
+
+ # add a CloudMade tile layer with style #997 - use your own cloudmade api key
+ L.tileLayer "http://{s}.tile.cloudmade.com/#{window.cloudmade}/997/256/{z}/{x}/{y}.png",
+ attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
+ .addTo(window.map)
+
+ # click on the map and will insert the latlng into the markers collection
+ window.map.on 'dblclick', (e) ->
+ Markers.insert
+ latlng: e.latlng
+
+ # watch the markers collection
+ query = Markers.find({})
+ query.observe
+ # when new marker - then add to map and when on click then remove
+ added: (mark) ->
+ marker = L.marker(mark.latlng)
+ .addTo(window.map)
+ .on 'click', (e) ->
+ Markers.remove({latlng: @._latlng})
+ # when removing marker - loop through all layers on the map and remove the matching layer (marker)
+ # matching based on matching lat/lon
+ removed: (mark) ->
+ layers = window.map._layers
+ for key, val of layers
+ if !val._latlng
+ else
+ if val._latlng.lat is mark.latlng.lat and val._latlng.lng is mark.latlng.lng
+ window.map.removeLayer(val)
@@ -0,0 +1,19 @@
+<head>
+ <title>Leaflet Meteor Example</title>
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+</head>
+
+<body>
+ {{> map}}
+</body>
+
+<template name="map">
+ {{#constant}}
+ <div id="container" class="container" style="width: 600px; margin: 0 auto;">
+ <h1 style="margin-top: 0; margin-bottom: 10px; text-align: center;">Leaflet Real-time</h1>
+ <div id="map" class="map" style="height: 300px; border: solid 1px black;"></div>
+ <div class="notice" style="margin-top: 10px; text-align: center;">Double-click on map creates a marker</div>
+ <div class="notice" style="margin-top: 5px; text-align: center;">Click on a marker to delete it</div>
+ </div>
+ {{/constant}}
+</template>
@@ -0,0 +1,20 @@
+@media all and (max-width: 480px) {
+ /* styles for iPhone/Android landscape (and really narrow browser windows) */
+ .notice {
+ font-size: 11px;
+ }
+}
+
+@media all and (max-width: 320px) {
+ /* styles for iPhone/Android portrait */
+ .notice {
+ font-size: 11px;
+ }
+}
+
+@media all and (max-width: 240px) {
+ /* styles for smaller devices */
+ .notice{
+ font-size: 11px;
+ }
+}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,13 @@
+# Leaflet for Meteor Demo
+
+## How to install
+1. npm install -g meteorite (if not already installed)
+2. git clone https://github.com/bevanhunt/meteor-leaflet-demo
+3. cd meteor-leaflet-demo
+4. replace window.cloudmade variable in client.coffee with your own cloudmade API key
+5. mrt
+6. open browser to http://localhost:3000
+7. double-click map to add markers - click the marker to delete it
+
+## Demo
+http://leaflet.meteor.com
@@ -0,0 +1,6 @@
+# marker collection
+Markers = new Meteor.Collection('markers')
+Meteor.publish 'markers', -> Markers.find()
+
+# startup - populate markers?
+Meteor.startup ->
@@ -0,0 +1,9 @@
+{
+ "meteor": {
+ "git": "https://github.com/meteor/meteor.git",
+ "branch": "master"
+ },
+ "packages": {
+ "leaflet": {}
+ }
+}
@@ -0,0 +1,31 @@
+{
+ "meteor": {
+ "git": "https://github.com/meteor/meteor.git",
+ "branch": "master",
+ "commit": "68dafc94c5f1eb6cf2350ee74e9f65130f665bc5"
+ },
+ "dependencies": {
+ "basePackages": {
+ "leaflet": {},
+ "bootstrap.less": {},
+ "sugar": {}
+ },
+ "packages": {
+ "leaflet": {
+ "git": "https://github.com/bevanhunt/meteor-leaflet.git",
+ "tag": "v0.1.3",
+ "commit": "3d54f29d5946b2f1aa504bb2bbe03b7a7bd135bc"
+ },
+ "bootstrap.less": {
+ "git": "https://github.com/lvbreda/meteor_bootstrapless",
+ "tag": "v2.1.0",
+ "commit": "05dab8a4f07ef0f457fd4af4ea897c9d72129a2b"
+ },
+ "sugar": {
+ "git": "https://github.com/bevanhunt/meteor-sugar.git",
+ "tag": "v0.0.9",
+ "commit": "751a4465e0a7d7e4e800e794ca1e6a449e15e63d"
+ }
+ }
+ }
+}

0 comments on commit d65bacc

Please sign in to comment.