Created
May 16, 2014 13:55
-
-
Save tristen/92898701ce57d0c96a05 to your computer and use it in GitHub Desktop.
Firebase all at once
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset=utf-8 /> | |
| <title>Live Collaborative Editing with Firebase</title> | |
| <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' /> | |
| <script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' /> | |
| <style> | |
| body { margin:0; padding:0; } | |
| #map { position:absolute; top:0; bottom:0; width:100%; } | |
| </style> | |
| </head> | |
| <body> | |
| <script type='text/javascript' src='https://cdn.firebase.com/js/client/1.0.6/firebase.js'></script> | |
| <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-label/v0.2.1/leaflet.label.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-label/v0.2.1/leaflet.label.css' rel='stylesheet' /> | |
| <div id='map'></div> | |
| <script> | |
| // Connect to the example firebase. This is a free account, and so it | |
| // will fail if given more than 50 concurrent users. Create an account at | |
| // http://firebaseio.com/ and use your own database if you want to try out | |
| // this example. | |
| var base = new Firebase('https://mapboxexample.firebaseio.com/'), | |
| // generate a random color for the marker, just for fun. | |
| color = '#' + [ | |
| (~~(Math.random() * 16)).toString(16), | |
| (~~(Math.random() * 16)).toString(16), | |
| (~~(Math.random() * 16)).toString(16)].join(''); | |
| map = L.mapbox.map('map', 'examples.map-i86nkdio').setView([0, 0], 3); | |
| // Create the marker that the user drags to add their message to the map | |
| var marker = L.marker([0, 0], { | |
| draggable: true, | |
| icon: L.mapbox.marker.icon({ | |
| 'marker-color': color | |
| }) | |
| // Add a form to that marker that lets them specify a message and click Add | |
| // to add the data. | |
| }) | |
| .bindPopup('<input type="text" id="message" /><br /><button id="add-button">Add</button>') | |
| .addTo(map) | |
| .openPopup(); | |
| // every time the marker is dragged, update the form | |
| marker.on('dragend', function(e) { | |
| marker.openPopup(); | |
| // When the user clicks Add | |
| L.DomEvent.addListener(L.DomUtil.get('add-button'), 'click', function() { | |
| // First, clean the potential-HTML they've added to the value. | |
| var message = L.DomUtil.get('message').value; | |
| // Get the current draggable marker's position and GeoJSON representation | |
| var geojson = marker.toGeoJSON(); | |
| geojson.properties['marker-color'] = color; | |
| geojson.properties.title = message; | |
| // And save it to Firebase | |
| base.push(geojson); | |
| marker.closePopup(); | |
| }); | |
| }); | |
| // with a cap of 200, listen for new markers being added to the map | |
| base.limit(200).on('value', function(snapshot) { | |
| var features = [] | |
| for (var k in snapshot.val()) { | |
| features.push(snapshot.val()[k]); | |
| } | |
| // And for each new marker, add a featureLayer | |
| L.mapbox.featureLayer(features) | |
| .eachLayer(function(l) { | |
| // Which positions markers below the marker you drag, so that | |
| // they don't overlap in the z-index | |
| l.setZIndexOffset(-1000) | |
| // And each marker should have a label with its title. | |
| var geojson = l.toGeoJSON(); | |
| if (geojson && geojson.properties && geojson.properties.title) { | |
| l.bindLabel(L.mapbox.sanitize(geojson.properties.title), { | |
| noHide: true | |
| }); | |
| } | |
| }) | |
| .addTo(map); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment