Created
December 11, 2015 04:28
-
-
Save anonymous/bc59cf0afcb3ac258773 to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/yudenugugu
This file contains hidden or 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> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /> | |
| <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| #map { | |
| height: 800px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| // MyMap Class | |
| // | |
| // | |
| // | |
| // Properties | |
| // ------------------------------------------------------------------------------------------- | |
| // All new MyMap objects get these upon instantiation | |
| function MyMap() { | |
| this.map = {}; // stash a leaflet map object here once we initialize | |
| this.zoomLevel = 9; | |
| this.center = [34.050, -118.250]; | |
| this.tiles = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'; | |
| this.attr = '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'; | |
| // this.bind('init'); | |
| // this.bind('addTiles'); | |
| // this.bind('addMarker'); | |
| this.init(); | |
| this.addTiles(); | |
| // this.addMarker([34.050, -118.250]); | |
| } | |
| // Methods | |
| // ------------------------------------------------------------------------------------------- | |
| MyMap.prototype = { | |
| // an example of a "bind" function... | |
| bind: function(method) { | |
| var fn = this[method], | |
| self = this; | |
| this[method] = function() { | |
| return fn.apply(self, arguments); | |
| }; | |
| return this; | |
| }, | |
| addTiles: function() { | |
| L.tileLayer(this.tiles, {attribution: this.attr}).addTo(this.map); | |
| }, | |
| addMarker: function(latlng) { | |
| // expect latlng to be an array | |
| L.marker(latlng).addTo(this.map).bindPopup('A pretty CSS3 popup.<br> Easily customizable.'); | |
| }, | |
| init: function() { | |
| this.map = L.map('map').setView(this.center, this.zoomLevel); | |
| } | |
| }; | |
| var map = new MyMap(); | |
| // This method can be called publicly: | |
| map.addMarker([34.050, -118.250]); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">#map { | |
| height: 800px; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">// MyMap Class | |
| // | |
| // | |
| // | |
| // Properties | |
| // ------------------------------------------------------------------------------------------- | |
| // All new MyMap objects get these upon instantiation | |
| function MyMap() { | |
| this.map = {}; // stash a leaflet map object here once we initialize | |
| this.zoomLevel = 9; | |
| this.center = [34.050, -118.250]; | |
| this.tiles = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'; | |
| this.attr = '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'; | |
| // this.bind('init'); | |
| // this.bind('addTiles'); | |
| // this.bind('addMarker'); | |
| this.init(); | |
| this.addTiles(); | |
| // this.addMarker([34.050, -118.250]); | |
| } | |
| // Methods | |
| // ------------------------------------------------------------------------------------------- | |
| MyMap.prototype = { | |
| // an example of a "bind" function... | |
| bind: function(method) { | |
| var fn = this[method], | |
| self = this; | |
| this[method] = function() { | |
| return fn.apply(self, arguments); | |
| }; | |
| return this; | |
| }, | |
| addTiles: function() { | |
| L.tileLayer(this.tiles, {attribution: this.attr}).addTo(this.map); | |
| }, | |
| addMarker: function(latlng) { | |
| // expect latlng to be an array | |
| L.marker(latlng).addTo(this.map).bindPopup('A pretty CSS3 popup.<br> Easily customizable.'); | |
| }, | |
| init: function() { | |
| this.map = L.map('map').setView(this.center, this.zoomLevel); | |
| } | |
| }; | |
| var map = new MyMap(); | |
| // This method can be called publicly: | |
| map.addMarker([34.050, -118.250]); | |
| </script></body> | |
| </html> |
This file contains hidden or 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
| #map { | |
| height: 800px; | |
| } |
This file contains hidden or 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
| // MyMap Class | |
| // | |
| // | |
| // | |
| // Properties | |
| // ------------------------------------------------------------------------------------------- | |
| // All new MyMap objects get these upon instantiation | |
| function MyMap() { | |
| this.map = {}; // stash a leaflet map object here once we initialize | |
| this.zoomLevel = 9; | |
| this.center = [34.050, -118.250]; | |
| this.tiles = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'; | |
| this.attr = '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'; | |
| // this.bind('init'); | |
| // this.bind('addTiles'); | |
| // this.bind('addMarker'); | |
| this.init(); | |
| this.addTiles(); | |
| // this.addMarker([34.050, -118.250]); | |
| } | |
| // Methods | |
| // ------------------------------------------------------------------------------------------- | |
| MyMap.prototype = { | |
| // an example of a "bind" function... | |
| bind: function(method) { | |
| var fn = this[method], | |
| self = this; | |
| this[method] = function() { | |
| return fn.apply(self, arguments); | |
| }; | |
| return this; | |
| }, | |
| addTiles: function() { | |
| L.tileLayer(this.tiles, {attribution: this.attr}).addTo(this.map); | |
| }, | |
| addMarker: function(latlng) { | |
| // expect latlng to be an array | |
| L.marker(latlng).addTo(this.map).bindPopup('A pretty CSS3 popup.<br> Easily customizable.'); | |
| }, | |
| init: function() { | |
| this.map = L.map('map').setView(this.center, this.zoomLevel); | |
| } | |
| }; | |
| var map = new MyMap(); | |
| // This method can be called publicly: | |
| map.addMarker([34.050, -118.250]); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment