D3 Examples - Turkey Plopper

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <title>plop</title>
        <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css" />
        <!--[if lte IE 8]>
            <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.4.5/leaflet.ie.css" />
        <![endif]-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.4.5/leaflet.min.js"></script>
        <script src="sha.js"></script>
        <script src="ohauth.js"></script>
        <style>
            body {
                background:magenta;
            }
            #map, #marker-pane {
                position:absolute;
                top:0;
                left:0;
                right:0;
                bottom:0;
            }
            #marker {
                background:magenta;
                position:absolute;
                left:50%;
                top:50%;
                width:40px;
                height:40px;
                border:5px solid #fff;
                margin-left:-25px;
                margin-top:-25px;
                border-radius:50%;
                z-index:999;
                pointer-events:all;
            }
            #marker-pane {
                pointer-events:none;
            }
        </style>
    </head>
    <body>
        <div id='map'></div>
        <div id='marker-pane'>
            <div id='marker'></div>
        </div>
        <script>
            var map = L.map('map').setView([38, -79], 13);
            L.tileLayer('https://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'
            }).addTo(map);
            map.attributionControl.setPrefix('');
​
            var host = 'https://api06.dev.openstreetmap.org',
            baseurl = 'https://api06.dev.openstreetmap.org',
            oauth_secret = 'aMnOOCwExO2XYtRVWJ1bI9QOdqh1cay2UgpbhA6p';
​
            var o = {
                oauth_consumer_key: 'zwQZFivccHkLs3a8Rq5CoS412fE5aPCXDw9DZj7R',
                oauth_signature_method: 'HMAC-SHA1'
            };
​
            function isAuthenticated() {
                return localStorage.oauth_token &&
                    localStorage.oauth_token_secret;
            };
​
            var change = '<osm>' +
              '<changeset>' +
                '<tag k="created_by" v="iD0"/>' +
                '<tag k="comment" v="Adding a turkey"/>' +
              '<\/changeset>' +
            '<\/osm>';
​
​
            var node = '<osmChange version="0.3" generator="Osmosis">' +
            '<create>' +
            '<node version="1" changeset="{changeset}" id="-1" lat="{lat}" lon="{lon}">' +
            '<tag k="created_by" v="iD"/>' +
            '<tag k="turkey" v="true"/>' +
            '<\/node>' +
            '<\/create>' +
            '<\/osmChange>'
​
            function timenonce(o) {
                o.oauth_timestamp = ohauth.timestamp();
                o.oauth_nonce = ohauth.nonce();
                return o;
            }
​
            var oauth = {};
            oauth.xhr = function(options, callback) {
                if (localStorage.oauth_token) {
                    o.oauth_token = localStorage.oauth_token;
                }
                o = timenonce(o);
                var url = apibase + options.path;
                var oauth_token_secret = localStorage.oauth_token_secret;
                o.oauth_signature = ohauth.signature(oauth_secret, oauth_token_secret,
                    ohauth.baseString(options.method, url, o));
                ohauth.xhr(options.method, url, o, options.content, options.options, function(xhr) {
                    if (xhr.responseXML) callback(xhr.responseXML);
                    else callback(xhr.response);
                });
            };
​
            if (location.search && !isAuthenticated()) {
                var search = location.search,
                    oauth_token = ohauth.stringQs(search.slice(1)),
                    url = baseurl + '/oauth/access_token';
                o = timenonce(o);
                o.oauth_token = oauth_token.oauth_token;
                var request_token_secret = localStorage.oauth_request_token_secret;
                o.oauth_signature = ohauth.signature(oauth_secret, request_token_secret,
                    ohauth.baseString('POST', url, o));
                ohauth.xhr('POST', url, o, null, {}, function(xhr) {
                    var access_token = ohauth.stringQs(xhr.response);
                    localStorage.oauth_token = access_token.oauth_token;
                    localStorage.oauth_token_secret = access_token.oauth_token_secret;
                    window.location.reload();
                });
            }
​
            function authenticate(callback) {
                // TODO: deal with changing the api endpoint
                if (isAuthenticated()) return callback();
​
                o = timenonce(o);
                var url = baseurl + '/oauth/request_token';
                o.oauth_signature = ohauth.signature(oauth_secret, '',
                    ohauth.baseString('POST', url, o));
​
                ohauth.xhr('POST', url, o, null, {}, function(xhr) {
                    var token = ohauth.stringQs(xhr.response);
                    localStorage.oauth_request_token_secret = token.oauth_token_secret;
                    var at = baseurl + '/oauth/authorize?';
                    window.location.href = at + ohauth.qsString({
                        oauth_token: token.oauth_token, oauth_callback: location.href
                    });
                });
            };
​
            authenticate(function() {
                document.getElementById('marker').onclick = function() {
                    var c = map.getCenter();
                    var url = host + '/api/0.6/changeset/create';
                    var token_secret = localStorage.oauth_token_secret;
                    o.oauth_token = localStorage.oauth_token;
                    o = timenonce(o);
                    o.oauth_signature = ohauth.signature(oauth_secret, token_secret,
                        ohauth.baseString('PUT', url, o));
                    ohauth.xhr('PUT', url, o, change, { header: { 'Content-Type': 'text/xml' } },
                        function(xhr) {
                            if (!xhr) return;
                            var changeset_id = xhr.response;
                            var url = host + '/api/0.6/changeset/' + changeset_id + '/upload'
                            o.oauth_timestamp = ohauth.timestamp();
                            o.oauth_nonce = ohauth.nonce();
                            o.oauth_signature = ohauth.signature(oauth_secret, token_secret,
                                ohauth.baseString('POST', url, o));
                            node = node.replace('{changeset}', changeset_id).replace('{lat}', c.lat).replace('{lon}', c.lng);
                            ohauth.xhr('POST', url, o, node, { header: { 'Content-Type': 'text/xml' } },
                            function(xhr) {
                                var url = host + '/api/0.6/changeset/' + changeset_id + '/close';
                                o.oauth_timestamp = ohauth.timestamp();
                                o.oauth_nonce = ohauth.nonce();
                                o.oauth_signature = ohauth.signature(oauth_secret, token_secret,
                                    ohauth.baseString('PUT', url, o));
                                ohauth.xhr('PUT', url, o, '', { header: { 'Content-Type': 'text/xml' } },
                                function(xhr) {
                                    location.href = 'https://api06.dev.openstreetmap.org/browse/changeset/' + changeset_id;
                                });
                            });
                    });
                };
            });
        </script>
    </body>
</html>
​
    