docs/edit.html - main - githubmirror/Leaflet

docs/edit.html
104 строки5 KB
Simon Legner
Rename `Map` to `LeafletMap` and keep `Map` as alias (#9892)
11 ноя 2025, 21:28
11 ноя 2025, 21:282e9b617
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Leaflet edit</title>
    </head>
    <body>
        <script>

            const config = {
                provider: 'plunker',
                title: 'Leaflet',
                description: "Leaflet example",
                html: '<div id="map"></div>',
                cssFile: 'https://cdn.jsdelivr.net/npm/leaflet/dist/leaflet.css',
                css: 'body {\n\tmargin: 0;\n}\nhtml, body, #map {\n\theight: 100%\n}',
                jsFile: 'https://cdn.jsdelivr.net/npm/leaflet/dist/leaflet-src.js',
                js: "import {LeafletMap, TileLayer, Marker} from 'leaflet';\n\nconst map = new LeafletMap('map', {\n\tcenter: [0, 0],\n\tzoom: 0\n});\n\nnew TileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {\n\t'attribution': 'Map data © <a href=\"https://openstreetmap.org\">OpenStreetMap</a> contributors'\n}).addTo(map);\n\nnew Marker(map.getCenter()).addTo(map);"
            };

            const hash = location.hash.substring(1);

            if (hash) {
                hash.split(';').forEach((str) => {
                    const arg = str.split(':');
                    config[arg[0]] = arg[1];
                });
            }

            if (config.version) {
                config.cssFile = `https://cdn.jsdelivr.net/npm/leaflet@${config.version}/dist/leaflet.css`
                config.jsFile = `https://cdn.jsdelivr.net/npm/leaflet@${config.version}/dist/leaflet-src.js`
            }

            function createForm (action) {
                const form = document.createElement('form');
                form.setAttribute('method', 'post');
                form.setAttribute('action', action);
                form.createInput = function (name, value) {
                    const input = document.createElement('input');
                    input.setAttribute('type', 'hidden');
                    input.setAttribute('name', name);
                    input.setAttribute('value', value);
                    this.appendChild(input);
                };
                document.body.appendChild(form);
                return form;
            }

            let form;

            if (config.provider === 'plunker') {
                form = createForm('https://plnkr.co/edit/?p=preview');
                form.createInput('description', config.description);
                form.createInput('files[index.html]', `<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<title>Leaflet</title>\n\t\t<meta charset="utf-8" />\n\t\t<meta name="viewport" content="width=device-width, initial-scale=1.0" />\n\t\t<link type="text/css" rel="stylesheet" href="${config.cssFile}" />\n\t\t<link type="text/css" rel="stylesheet" href="style.css" />\n\t</head>\n\t<body>\n\t\t${config.html}\n\t\t<script type="importmap">\n\t\t\t{\n\t\t\t\t"imports": {\n\t\t\t\t\t"leaflet": "${config.jsFile}"\n\t\t\t\t}\n\t\t\t}\n\t\t<\/script>\n\t\t<script type="module" src="script.js"><\/script>\n\t</body>\n</html>`);
                form.createInput('files[style.css]', config.css);
                form.createInput('files[script.js]', config.js);
                form.createInput('tags[0]', 'leaflet');
                form.createInput('tags[1]', 'map');
                form.createInput('tags[2]', 'gis');
                form.createInput('private', false);
            }

            if (config.provider === 'codepen') {
                form = createForm('https://codepen.io/pen/define');
                form.createInput('data', JSON.stringify({
                    title: config.title,
                    description: config.description,
                    private: false,
                    tags: ["leaflet", "map", "gis"],
                    editors: "001",
                    layout: "top",
                    head: '<meta name="viewport" content="width=device-width, initial-scale=1.0">',
                    html: config.html,
                    css: config.css,
                    css_external: config.cssFile,
                    js: config.js,
                    js_external: config.jsFile
                }));
            }

            if (config.provider === 'jsfiddle') {
                form = createForm('http://jsfiddle.net/api/post/library/pure/');
                form.createInput('title', config.title);
                form.createInput('description', config.description);
                form.createInput('resources', `${config.cssFile},${config.jsFile}`);
                form.createInput('html', config.html);
                form.createInput('css', config.css);
                form.createInput('js', config.js);
                form.createInput('panel_html', 0);
                form.createInput('panel_css', 0);
                form.createInput('panel_js', 0);
                form.createInput('dtd', 'html');
                form.createInput('normalize_css', 'no');
                form.createInput('wrap', 'b');
            }

            if (form instanceof HTMLFormElement) {
                form.submit();
            }

        </script>
    </body>
</html>