Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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>
 
html, body, #map {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
 
$(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();
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
ebrelsfordpro
0viewers