leaflet-edit-osm.js
A Leaflet plugin that allows to add an unobtrusive open in OSM Edit link
For a working example see demo
Initally based on the work of Tom MacWright
How to use
-
include CSS & JavaScript
<head> ... <style> html, body, #map { height: 100%; width: 100%; padding: 0; margin: 0; } </style> <!-- Leaflet (JS/CSS) --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script> <!-- Leaflet-Edit-OSM --> <link rel="stylesheet" href="https://unpkg.com/@raruto/leaflet-edit-osm/@latest/leaflet-edit-osm.css" /> <script src="https://unpkg.com/@raruto/leaflet-edit-osm/@latest/leaflet-edit-osm.js"></script> ... </head>
-
choose a div container used for the slippy map
<body> ... <div id="map"></div> ... </body>
-
create your first simple “leaflet-pegman slippy map
<script> var map = L.map('map'); map.setView(new L.LatLng(45, 9.5), 5); var OpenStreetMap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: 'Map data: © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>', }); OpenStreetMap.addTo(map); var editInOSMControl = new L.Control.EditInOSM({ position: 'bottomright', // position of control inside the map editor: false, // open link with a default editor ("id", "potlatch2" or "remote") }); editInOSMControl.addTo(map); </script>
Related: Leaflet-UI presets
Compatibile with: leaflet@1.3.4,