Created
April 6, 2015 16:53
-
-
Save ebrelsford/1bf14a02f8d913cd320c to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/sucefe
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> | |
| <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> | |
| <!-- | |
| Load the MapPaint plugin. | |
| Under the Installation heading here: | |
| https://github.com/SINTEF-9012/Leaflet.MapPaint#installation | |
| we are told to download this code or get it through bower. | |
| Either would work, but since we are using JS Bin it would be | |
| nice to keep the code online rather than installing it. So we | |
| found the code we need (under the /dist folder in the MapPaint | |
| repo: https://github.com/SINTEF-9012/Leaflet.MapPaint/tree/master/dist), | |
| copied the URLs and pasted them into RawGit (https://rawgit.com/) | |
| to get online versions of that code. | |
| --> | |
| <link rel="stylesheet" href="https://rawgit.com/SINTEF-9012/Leaflet.MapPaint/master/dist/MapPaint.css" /> | |
| <script src="https://rawgit.com/SINTEF-9012/Leaflet.MapPaint/master/dist/MapPaint.js"></script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| html, body, #map { | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script id="jsbin-javascript"> | |
| $(document).ready(function () { | |
| // Typical Leaflet setup | |
| var map = L.map('map').setView([40.731649,-73.977814], 10); | |
| L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', { | |
| attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.', | |
| maxZoom: 18 | |
| }).addTo(map); | |
| // | |
| // Enable MapPaint. We got this from: | |
| // https://github.com/SINTEF-9012/Leaflet.MapPaint | |
| // | |
| // under the Usage heading. | |
| // | |
| map.MapPaint.enable(); | |
| }); | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"><\/script> | |
| <\!-- | |
| Load the MapPaint plugin. | |
| Under the Installation heading here: | |
| https://github.com/SINTEF-9012/Leaflet.MapPaint#installation | |
| we are told to download this code or get it through bower. | |
| Either would work, but since we are using JS Bin it would be | |
| nice to keep the code online rather than installing it. So we | |
| found the code we need (under the /dist folder in the MapPaint | |
| repo: https://github.com/SINTEF-9012/Leaflet.MapPaint/tree/master/dist), | |
| copied the URLs and pasted them into RawGit (https://rawgit.com/) | |
| to get online versions of that code. | |
| --> | |
| <link rel="stylesheet" href="https://rawgit.com/SINTEF-9012/Leaflet.MapPaint/master/dist/MapPaint.css" /> | |
| <script src="https://rawgit.com/SINTEF-9012/Leaflet.MapPaint/master/dist/MapPaint.js"><\/script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| </body> | |
| </html></script> | |
| <script id="jsbin-source-css" type="text/css">html, body, #map { | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">$(document).ready(function () { | |
| // Typical Leaflet setup | |
| var map = L.map('map').setView([40.731649,-73.977814], 10); | |
| L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', { | |
| attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.', | |
| maxZoom: 18 | |
| }).addTo(map); | |
| // | |
| // Enable MapPaint. We got this from: | |
| // https://github.com/SINTEF-9012/Leaflet.MapPaint | |
| // | |
| // under the Usage heading. | |
| // | |
| map.MapPaint.enable(); | |
| });</script></body> | |
| </html> |
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
| html, body, #map { | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| } |
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
| $(document).ready(function () { | |
| // Typical Leaflet setup | |
| var map = L.map('map').setView([40.731649,-73.977814], 10); | |
| L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', { | |
| attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.', | |
| maxZoom: 18 | |
| }).addTo(map); | |
| // | |
| // Enable MapPaint. We got this from: | |
| // https://github.com/SINTEF-9012/Leaflet.MapPaint | |
| // | |
| // under the Usage heading. | |
| // | |
| map.MapPaint.enable(); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment