· 6 years ago · Feb 13, 2020, 11:04 AM
1<!DOCTYPE html>
2<!-- saved from url=(0043)https://jsfiddle.net/api/post/library/pure/ -->
3<html slick-uniqueid="3"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4
5 <meta name="description" content="Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.">
6 <meta name="keywords" content="online javascript editor, testing javascript online, online ide, online code editor, html, css, coffeescript, scss online editor">
7 <meta name="author" content="JSFiddle">
8 <meta name="copyright" content="share alike">
9
10 <meta name="robots" content="index, follow">
11 <meta name="googlebot" content="index, follow">
12
13 <meta name="apple-mobile-web-app-capable" content="yes">
14 <meta name="apple-touch-fullscreen" content="yes">
15 <meta name="viewport" content="width=device-width, initial-scale=1">
16 <meta name="theme-color" content="#0084ff">
17
18 <script src="./KML Feature Details - JSFiddle_files/xml.js"></script><script src="./KML Feature Details - JSFiddle_files/css.js"></script><script src="./KML Feature Details - JSFiddle_files/htmlmixed.js"></script><script src="./KML Feature Details - JSFiddle_files/javascript.js"></script><script async="" src="./KML Feature Details - JSFiddle_files/tracker.js" id="fathom-script"></script><script>
19 var EditorConfig = {
20 shell: false,
21 paths: {
22 favorite: "/_make_favourite/",
23 media: "/mooshellmedia/",
24 addResource: "/_add_external_resource/",
25 render: "",
26 saveSettings: "/_editor_options/",
27 fork: "/_save/?is_forking",
28 save: "/_save/",
29 loadDependencies: "/_get_dependencies/{lib_id}/",
30 // exampleURL: "",
31 },
32 values: {
33 html: "<div id=\"map\"><\/div>\n<div id=\"content-window\"><\/div>\n<!-- Replace the value of the key parameter with your own API key. -->\n<script async defer\nsrc=\"https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap\">\n<\/script>",
34 js: "function initMap() {\n var map = new google.maps.Map(document.getElementById(\'map\'), {\n zoom: 12,\n center: {lat: 37.06, lng: -95.68}\n });\n\n var kmlLayer = new google.maps.KmlLayer({\n url: \'http://googlemaps.github.io/kml-samples/kml/Placemark/placemark.kml\',\n suppressInfoWindows: true,\n map: map\n });\n\n kmlLayer.addListener(\'click\', function(kmlEvent) {\n var text = kmlEvent.featureData.description;\n showInContentWindow(text);\n });\n\n function showInContentWindow(text) {\n var sidediv = document.getElementById(\'content-window\');\n sidediv.innerHTML = text;\n }\n}",
35 css: "html, body {\n height: 100%;\n margin: 0;\n padding: 0;\n}\n#map {\n float: left;\n height: 425px;\n width: 79%;\n}\n#content-window {\n float: left;\n font-family: \'Roboto\',\'sans-serif\';\n height: 100%;\n line-height: 30px;\n padding-left: 10px;\n width: 19%;\n}"
36 },
37 fiddle: {
38 id: "",
39 slug: "",
40 boilerplate: false,
41 // TODO: Missing
42 // {% if preload_resources %}
43 // resources: {{ preload_resources|safe }}
44 // {% else %}
45 // resources: []
46 // {% endif %}
47 },
48 panels: {
49 html: "html",
50 js: "javascript",
51 css: "css"
52 },
53 user: {
54 id: "None",
55 username: ""
56 },
57 showHelloBar: false,
58 currentUser: false,
59 isAuthor: false,
60 features: {
61 toggleSidebar: false
62 }
63 }
64
65 // translations
66 const I18n = {
67 editor: {
68 panels: {
69 result: "Result",
70 drag_to_reorder: "Drag tabs to reorder",
71 tidy: "Tidy"
72 },
73 sidebar: {
74 toggle_sidebar: "Toggle sidebar"
75 },
76 }
77 }
78
79 const EditorUISettings = {
80 // options that user can change
81 layout: 1, // TODO: implement
82 darkTheme: true, // TODO: implement
83 tabSize: 2,
84 matchBrackets: true,
85 lineNumbers: true,
86 lineWrapping: true,
87 keyMap: "default",
88 autoCloseTags: true,
89 autoCloseBrackets: true,
90 indentWithTabs: false,
91 codeLinting: true,
92 autoRun: EditorConfig.currentUser ? false : false,
93 autoRunValid: EditorConfig.currentUser ? true : false,
94 autoSave: EditorConfig.currentUser ? true : false,
95 clearConsole: false,
96 fontSize: 1,
97 matchTags: false,
98 foldGutter: true,
99 reduceHelloBar: false,
100 codeHints: false,
101 }
102 </script>
103
104 <style id="skeleton-theme-inline">*,body,button,html,input,select,textarea{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:#39464e;text-decoration:none}a:hover{text-decoration:underline}input,select,textarea{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}select{cursor:pointer}blockquote,body,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}abbr,acronym{border:0}::-webkit-input-placeholder{color:#62666b}:-moz-placeholder,::-moz-placeholder{color:#62666b}:-ms-input-placeholder{color:#62666b}.icon{stroke:inherit}a:active,a:focus,button::-moz-focus-inner,button:focus,input[type=button]::-moz-focus-inner,input[type=file]>input[type=button]::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner,select::-moz-focus-inner{outline:none!important}select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}.checkboxCont{cursor:pointer}.checkboxCont .checkbox{position:relative;background:rgba(0,0,0,.1);display:inline-block;vertical-align:middle;border-radius:14px;width:24px;height:14px;margin-right:5px;top:-2px;transition:all .15s}.checkboxCont .checkbox:after{content:"";border-radius:12px;position:absolute;top:1px;left:1px;width:12px;height:12px;background:#fff;display:block;transition:left .15s;box-shadow:0 2px 4px 0 rgba(0,0,0,.2),0 0 1px 0 rgba(0,0,0,.21)}.checkboxCont input[type=checkbox]{display:none}.checkboxCont input[type=checkbox]:checked+.checkbox{background:#0084ff}.checkboxCont input[type=checkbox]:checked+.checkbox:after{left:11px}.checkboxCont input[type=checkbox]:disabled+.checkbox{background:rgba(0,0,0,.1)}.checkboxCont input[type=checkbox]:disabled+.checkbox:after{opacity:.5}.checkboxCont small{color:rgba(0,0,0,.3);font-size:inherit}.proBadgeSelf{display:none}.proBadge .proBadgeSelf{display:inline-block;background:#f5ac24;color:#1d2127;padding:0 3px;height:13px;border-radius:2px;line-height:13px;font-size:9px;font-weight:bold;overflow:hidden;position:relative;bottom:-2px;left:3px;text-transform:uppercase}.proBadge .proBadgeSelf:hover{text-decoration:none;background:#f8c86d}#sidebar .proBadgeSelf{color:#1d2127}.groupsList{overflow:auto;max-height:150px;margin-top:10px}.groupsList .privateGroup{height:10px;display:inline-block;padding:2px;border-radius:2px;background:inherit;vertical-align:bottom}.groupsList .privateGroup g{stroke:#8e9194}.groupsList li{margin-bottom:5px}.groupsList li input,.groupsList li span{display:inline-block}.groupsList li span{color:inherit;max-width:140px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;vertical-align:bottom;margin-left:5px}.groupsList label{font-size:13px;cursor:pointer}a{outline:none}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";background:#21262d;padding:0;margin:0;font-size:14px;color:#39464e}#progressbar{height:3px;position:absolute;top:60px;left:0;right:0;z-index:110;pointer-events:none}header{height:60px;background:#1d2127;box-shadow:0 0 5px rgba(29,33,39,0);z-index:100;width:100vw}header .title{position:absolute;top:-9000em}header h1{position:absolute;top:14px;left:10px;z-index:800;transition:all .15s}header h1 a{display:block}header h1 svg{transition:all .15s;position:relative;height:33px;width:46px;stroke:#0084ff}#app-updates{float:left;position:relative;width:20px}#app-updates .bodyCont{opacity:1;transition:all .1s;transform:translateY(0);margin-left:10px;overflow:hidden;height:60px;width:300px}#app-updates .body{color:#fbfbfb;transition:all .1s;background:transparent;padding:14px;border-radius:3px;line-height:1.45em;font-size:13px;position:relative;top:6px;width:300px}#app-updates strong{font-weight:700}#app-updates h3{text-overflow:ellipsis;width:100%;white-space:nowrap;overflow:hidden}#app-updates p{margin-top:10px}#app-updates .updateActions,#app-updates p{pointer-events:none;opacity:0}#app-updates .updateActions{margin-top:12px;text-align:right}#app-updates .updateActions a{color:#8e9194;font-size:12px;padding:3px 6px;border:1px solid transparent;border-radius:4px}#app-updates .updateActions a:hover{border:1px solid hsla(210,3%,57%,.2);text-decoration:none}#app-updates .badge{background:#64b448;color:#fff;font-size:11px;padding:3px 6px;border-radius:3px;margin-right:5px;font-weight:400}#app-updates.hidden .bodyCont,#app-updates:hover .bodyCont{overflow:visible}#app-updates.hidden .body,#app-updates:hover .body{background:#fff;color:#21262d;box-shadow:0 0 1px rgba(57,70,78,.15),0 20px 55px -8px rgba(57,70,78,.25)}#app-updates.hidden h3,#app-updates:hover h3{text-overflow:inherit;white-space:normal;overflow:auto;font-weight:700}#app-updates.hidden .updateActions,#app-updates.hidden p,#app-updates:hover .updateActions,#app-updates:hover p{pointer-events:auto;opacity:1}#app-updates.hidden{transform:translateY(20px)}#app-updates-highlighter,#app-updates.hidden,#app-updates.hidden .updateActions,#app-updates.hidden p{pointer-events:none;opacity:0}#app-updates-highlighter{position:absolute;border:3px solid #64b448;border-radius:5px;transition:all .1s;transform:scale(1.05);z-index:1000}#app-updates-highlighter.show{opacity:1;transform:scale(1)}#layout-container{position:relative;display:grid;grid-template-columns:210px 1fr;grid-template-areas:"sidebar content"}#show-result{height:100vh}#content{grid-area:content;position:relative}#sidebar{grid-area:sidebar;padding:0;margin:0;font-size:12px;border-right:1px solid #2e333a;background:#21262d;display:flex;flex-direction:column;color:#cfd0d2;box-shadow:0 0 0 rgba(0,0,0,.5);position:relative}#sidebar #s-cont{flex-grow:1;opacity:0;pointer-events:none}#sidebar .userSidebar .userProfile{display:grid;font-size:14px;grid-template-columns:40px 1fr;grid-column-gap:12px}#sidebar .userSidebar .userProfile .profileDetails{display:flex;flex-direction:column;justify-content:center}#sidebar .userSidebar .userProfile .avatar{position:relative}#sidebar .userSidebar .userProfile a{color:#fbfbfb;display:block;font-weight:700}#sidebar .userSidebar .userProfile img{overflow:hidden;border-radius:4px;box-shadow:0 0 0 1px #1d2127,0 0 0 3px #e9e9ea;position:relative;top:1px;left:1px}#sidebar .userSidebar .userProfile .company{font-weight:400;margin-top:4px;color:#8e9194;font-size:12px}#sidebar .userSidebar .userDetails{clear:both;padding-top:6px;color:#fbfbfb}#sidebar .userSidebar .userDetails a{color:#fbfbfb}#sidebar .userSidebar .userDetails li{margin-top:3px}#sidebar .userSidebar.proProfile .userProfile img,#sidebar .userSidebar.teamProfile .userProfile img{box-shadow:0 0 0 1px #1d2127,0 0 0 3px #f5ac24}#sidebar .userSidebar.proProfile .avatar:after,#sidebar .userSidebar.teamProfile .avatar:after{content:"PRO";display:inline-block;background:#f5ac24;color:#1d2127;padding:0 2px;height:13px;border-radius:2px;line-height:13px;font-size:9px;font-weight:bold;overflow:hidden;position:absolute;top:31px;right:-4px;pointer-events:none}#sidebar .userSidebar.teamProfile .userProfile img{box-shadow:0 0 0 1px #1d2127,0 0 0 3px #ff79b5}#sidebar .userSidebar.teamProfile .avatar:after{content:"TEAM";background:#ff79b5}#sidebar .userSidebar.segment{margin:0 20px}#sidebar .userSidebar.body{position:relative;top:4px}#sidebar #toggle-sidebar{position:absolute;right:-10px;top:calc(100vh - 110px);width:15px;height:40px;background:#1d2127;border:1px solid #2e333a;z-index:100;border-radius:2px;display:flex;justify-content:center}#sidebar #toggle-sidebar svg{height:inherit;width:inherit}#sidebar #toggle-sidebar g{stroke:#64676c}#sidebar #toggle-sidebar:hover{border:1px solid #0084ff}#sidebar #toggle-sidebar:hover g{stroke:#e9e9ea}#sidebar #toggle-sidebar:hover:after{content:attr(data-title);display:block;background:#0084ff;color:#fff;border-radius:3px;padding:4px 8px;position:absolute;top:calc(50% - 11px);left:22px;z-index:20;white-space:nowrap}#actions{height:60px;font-size:13px;position:relative;z-index:300;margin-left:70px;opacity:0;pointer-events:none;display:grid;grid-template-columns:auto auto}#actions svg{position:relative;height:16px;left:-1px}#actions svg.rightIcon{margin-right:0;margin-left:6px}#actions .actionCont{display:flex}#actions .right{justify-content:flex-end;padding-right:10px}#actions .actionItem{position:relative;margin-right:1px}#actions .actionItem.visible{display:block}#actions .actionItem.hidden{display:none}#actions .actionItem .aiButton,#actions .actionItem .aiButton span,#actions .dropdown .actionItem a.aiButton{height:60px}#actions .actionItem a.aiButton{display:flex;outline:none;text-decoration:none;padding:0 7px;align-items:center;justify-content:center;color:#fbfbfb}#actions .actionItem a.aiButton.selected,#actions .actionItem a.aiButton:hover{box-shadow:inset 0 -1px 0 #0084ff}#actions .actionItem a.aiButton.applyDraft{color:#f36e65}#actions .actionItem a.aiButton.disabled{opacity:.3;pointer-events:none}#actions img{overflow:hidden;border-radius:3px;box-shadow:0 0 0 1px #1d2127,0 0 0 2px #e9e9ea}#actions img.proProfile{box-shadow:0 0 0 1px #1d2127,0 0 0 2px #f5ac24}#actions img.teamProfile{box-shadow:0 0 0 1px #1d2127,0 0 0 2px #ff79b5}#actions .actionItem a.aiButton span{font-size:.9em}#actions .noIcon a.aiButton span{padding:0 0 0 6px;margin-right:0}#actions .actionItem #mobile.aiButton span{margin-right:0}#actions .actionItem a.aiButton span.selected{color:#555;background:#fff}#actions .dropdown .dropdownCont li{line-height:26px}.dropdownCont{position:absolute;z-index:9000;opacity:1;transform:translateY(0);transition:opacity .12s,transform .12s;will-change:opacity,transform}.dropdownCont .dcWrapper{background-color:#fff;width:300px;padding:15px;margin:0;font-size:13px;box-shadow:0 0 1px rgba(57,70,78,.15),0 20px 55px -8px rgba(57,70,78,.25);border-radius:5px;max-height:calc(100vh - 100px);overflow:auto}.dropdownCont .dcWrapper.menu{width:200px;padding:12px 0}.dropdownCont .dcWrapper.menu li{line-height:22px;padding:0 15px 6px}.dropdownCont .dcWrapper.menu li a{color:#39464e;position:relative}.dropdownCont .dcWrapper.menu li.other{border-top:1px solid #ebeef0;padding:6px 15px 0}.dropdownCont .dcWrapper.menu li.other+.other{border-top:none}.dropdownCont .dcWrapper.menu li.other a{color:#abb9c2}.dropdownCont .dcWrapper:before{top:-11px;border-bottom:10px solid rgba(57,70,78,.15)}.dropdownCont .dcWrapper:after,.dropdownCont .dcWrapper:before{display:block;position:absolute;right:20px;vertical-align:middle;content:"";border-left:8px solid transparent;border-right:8px solid transparent;border-style:none double solid;width:0;height:0}.dropdownCont .dcWrapper:after{top:-10px;border-bottom:10px solid #fff}.dropdownCont.center .dcWrapper:after,.dropdownCont.center .dcWrapper:before{left:50%;margin-left:-4px}.dropdownCont.hidden{opacity:0;transform:translateY(10px);pointer-events:none}.twitterCont{padding:10px;display:block;border-top:1px solid #2e333a}#sidebar #keep-us-running{width:300px;color:#fff;padding:10px 15px;position:absolute;bottom:-100px;left:10px;cursor:pointer;pointer-events:none;opacity:0;transition:all .3s;border-radius:5px;background:#1d2127;z-index:5}#sidebar #keep-us-running.color_1{border:3px solid #0084ff}#sidebar #keep-us-running.color_2{border:3px solid #9f78d7}#sidebar #keep-us-running.color_3{border:3px solid #deae51}#sidebar #keep-us-running.color_4{border:3px solid #64b448}#sidebar #keep-us-running.color_5{border:3px solid #de7373}#sidebar #keep-us-running p{font-size:13px;line-height:17px;margin:4px 0}#sidebar #keep-us-running.show{pointer-events:auto;opacity:1;bottom:10px}#sidebar #carbonads{text-align:center}#sidebar #carbonads .carbon-text{clear:both;display:block;padding:10px 0 0;color:#cfd0d2;font-size:12px;line-height:1.5em}#sidebar #carbonads .carbon-poweredby{display:block;color:#8e9194;font-size:.9em;padding:10px 0 0}#hello-bar{max-height:0;background:#0084ff;transition:max-height .15s;overflow:hidden;position:relative;will-change:height;pointer-events:auto;z-index:120}#hello-bar .hbBody{box-sizing:border-box;height:100%;padding:20px 0 20px 150px;color:#fbfbfb;display:grid;grid-template-columns:minmax(200px,1.5fr) minmax(200px,1fr) minmax(200px,1fr);grid-gap:10px}#hello-bar .closeHb{position:absolute;top:65px;left:15px;font-size:13px}#hello-bar .closeHb svg{height:16px;vertical-align:middle}#hello-bar a{color:#fbfbfb}#hello-bar h3{font-weight:600;margin-bottom:15px}#hello-bar li{font-size:13px;line-height:1.42em}#hello-bar .upgradeToPro{display:block;width:80%;padding:10px 9px;border-radius:4px;transition:all .15s;background:#f7be55;color:#21262d;box-shadow:0 4px 4px rgba(0,0,0,.1);margin-top:20px;font-weight:600}#hello-bar .upgradeToPro:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 6px 6px -2px rgba(0,0,0,.2)}#hello-bar .articles li{list-style:disc;margin-left:14px}#hello-bar .articles li span{color:hsla(0,0%,100%,.45);font-size:12px;margin-left:4px}#hello-bar .articles li:last-child{margin-top:10px;font-weight:600;list-style:none;margin-left:0}#hello-bar ul.boilerplates li{margin:0 10px 10px 0;display:inline-flex}#hello-bar ul.boilerplates a{display:block;padding:7px 9px;border-radius:4px;transition:all .15s;background:#fff;color:#21262d;box-shadow:0 4px 4px rgba(0,0,0,.1)}#hello-bar ul.boilerplates a:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 6px 6px -2px rgba(0,0,0,.2)}#hello-bar ul.boilerplates a span{background:#64b448;color:#fff;font-size:11px;padding:3px 6px;border-radius:3px;margin-left:5px;font-weight:400}#hello-bar .bpAction{display:block;clear:both;padding-top:5px;font-size:13px}#hello-bar .bpAction svg{width:13px;margin-right:2px}#hello-bar .bpAction.hidden{display:none}body.fullyLoaded #actions,body.fullyLoaded #sidebar #s-cont{opacity:1;pointer-events:auto}body.fullyLoaded #loader{display:none}body.fullyLoaded #loader .loader,body.fullyLoaded #loader .shadow{animation:none}body.noSupport #no-support{display:block}body.noSupport #loader{display:none}body.noSupport #loader .loader,body.noSupport #loader .shadow{animation:none}body.hiddenSidebar #layout-container{grid-template-columns:0 1fr}body.hiddenSidebar #sidebar{display:none}body.hiddenSidebar #sidebar #toggle-sidebar{right:-17px}body.hiddenSidebar #sidebar #toggle-sidebar svg{transform:rotate(180deg)}.windowSettings{pointer-events:none;opacity:0;will-change:opacity,transform}#loader,#no-support{position:absolute;top:calc(50vh - 30px);left:calc(50% - 60px)}#loader .loader,#no-support .loader{width:120px;height:120px;z-index:100;animation:jump .8s ease-in infinite}#loader .loader path,#no-support .loader path{stroke:#fff}#loader .loader .cloud,#no-support .loader .cloud{fill:#0084ff}#loader .shadow,#no-support .shadow{position:absolute;z-index:-1;top:80px;left:0;display:block;border-radius:100%;height:20px;width:120px;background:#000;opacity:.3;animation:scale-shadow .8s ease-in infinite}@keyframes jump{0%{transform:translateY(0) scale(1.15,.8)}20%{transform:translateY(-35px) scaleY(1.1)}50%{transform:translateY(-50px) scale(1)}80%{transform:translateY(-35px) scale(1)}to{transform:translateY(0) scale(1.15,.8)}}@keyframes scale-shadow{0%{opacity:.3;transform:scale(1)}50%{opacity:.2;transform:scale(.5)}to{opacity:.3;transform:scale(1)}}#no-support{position:absolute;top:calc(50vh - 30px);left:calc(50% - 60px);display:none;color:#fff;text-align:center;font-size:18px}#flash-messages{position:absolute;top:20px;left:0;right:0;z-index:100;display:flex;justify-content:center;transition:all .2s}#flash-messages.hidden{pointer-events:none;opacity:0;transform:translateY(-10px) scale(.95)}#flash-messages li{box-shadow:0 10px 10px rgba(0,0,0,.05);padding:0 30px;height:60px;display:flex;color:#cfd0d2;border-radius:100px;font-weight:500;cursor:pointer;align-items:center;background:#303742}#flash-messages svg{height:30px;margin-right:20px}#flash-messages .success svg{stroke:#64b448}#flash-messages .error svg{stroke:#f36e65}</style>
105
106 <!-- <link id="skeleton-theme" rel="stylesheet" type="text/css" href="/css/dist-skeleton-dark.css?cd929fabb1741ef9451c7a2bfb30f2ea38557e67"> -->
107
108 <!--
109 <link rel="stylesheet" type="text/css" href="/css/light.css?cd929fabb1741ef9451c7a2bfb30f2ea38557e67">
110 -->
111
112 <!-- <script>
113 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
114 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
115 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
116 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
117
118 var GA_LOCAL_STORAGE_KEY = 'ga:clientId';
119 if (window.localStorage) {
120 ga('create', 'UA-366077-13', {
121 'storage': 'none',
122 'clientId': localStorage.getItem(GA_LOCAL_STORAGE_KEY)
123 });
124 ga(function(tracker) {
125 localStorage.setItem(GA_LOCAL_STORAGE_KEY, tracker.get('clientId'));
126 });
127 ga('send', 'pageview', '/api/post/[framework]/[framework_version]/'); // where `url_structure` is for example `/[user]/[fiddle]/[revision]/embedded/js,css/`
128 }
129 </script> -->
130
131 <!-- Fathom - simple website analytics -->
132 <script>
133 (function(f, a, t, h, o, m){
134 a[h]=a[h]||function(){
135 (a[h].q=a[h].q||[]).push(arguments)
136 };
137 o=f.createElement('script'),
138 m=f.getElementsByTagName('script')[0];
139 o.async=1; o.src=t; o.id='fathom-script';
140 m.parentNode.insertBefore(o,m)
141 })(document, window, '//jsfiddle.usesfathom.com/tracker.js', 'fathom');
142 fathom('trackPageview');
143 </script>
144 <!-- / Fathom -->
145
146
147 <link rel="icon" href="https://jsfiddle.net/img/favicon.png">
148
149 <title>KML Feature Details - JSFiddle</title>
150 <script id="_carbonads_projs" type="text/javascript" src="./KML Feature Details - JSFiddle_files/CKYIEKQ7.json"></script><script src="./KML Feature Details - JSFiddle_files/_dist-linters.js" type="text/javascript"></script></head>
151 <body data-skeleton-url="/css/dist-skeleton-dark.css?cd929fabb1741ef9451c7a2bfb30f2ea38557e67" class="gridMode_grid_1 fullyLoaded">
152 <div id="hello-bar">
153 <a class="closeHb" href="https://jsfiddle.net/api/post/library/pure/#">
154 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>Close
155 </a>
156
157 <div class="hbBody">
158 <section>
159 <h3>Start with a boilerplate:</h3>
160 <ul class="boilerplates">
161 <!-- <li><a href="/">Empty</a></li> -->
162 <li><a href="https://jsfiddle.net/boilerplate/jquery">jQuery</a></li>
163 <li><a href="https://jsfiddle.net/boilerplate/vue">Vue</a></li>
164 <li><a href="https://jsfiddle.net/boilerplate/react-jsx">React</a></li>
165 <li><a href="https://jsfiddle.net/boilerplate/react-jsx">React + JSX</a></li>
166 <li><a href="https://jsfiddle.net/boilerplate/preact">Preact</a></li>
167 <li><a href="https://jsfiddle.net/boilerplate/typescript">TypeScript</a></li>
168 <li><a href="https://jsfiddle.net/boilerplate/coffeescript">CoffeeScript</a></li>
169 <li><a href="https://jsfiddle.net/boilerplate/scss">SCSS</a></li>
170 <li><a href="https://jsfiddle.net/boilerplate/responsive-css-grid">CSS Grid</a></li>
171 <li><a href="https://jsfiddle.net/boilerplate/bootstrap">Bootstrap</a></li>
172 <li><a href="https://jsfiddle.net/boilerplate/postcss">PostCSS</a></li>
173 </ul>
174 <div class="bpAction hidden">
175 <svg version="1.1" viewBox="0 0 24 24">
176 <g stroke-linecap="round" stroke-width="1.4" stroke="#fff" fill="none" stroke-linejoin="round">
177 <path d="M17.94,17.94l-4.93766e-08,3.76374e-08c-1.70941,1.303 -3.79089,2.02486 -5.94,2.06c-7,0 -11,-8 -11,-8l-3.63017e-07,6.76516e-07c1.24389,-2.3181 2.96914,-4.34339 5.06,-5.94m3.84,-1.82l-5.75178e-07,1.34634e-07c0.688332,-0.161121 1.39306,-0.241661 2.1,-0.24c7,0 11,8 11,8l4.63472e-07,-8.67058e-07c-0.60702,1.13561 -1.33094,2.20473 -2.16,3.19m-6.72,-1.07l1.53825e-07,-1.65082e-07c-1.12951,1.21217 -3.02783,1.27918 -4.24,0.149667c-1.21217,-1.12951 -1.27918,-3.02783 -0.149667,-4.24c0.0481128,-0.0516337 0.0980326,-0.101554 0.149666,-0.149666"></path>
178 <path d="M1,1l22,22"></path>
179 </g>
180 </svg>
181 <a href="https://jsfiddle.net/api/post/library/pure/#">Show boilerplate bar less often?</a>
182 </div>
183 </section>
184
185 <section>
186 <h3>Links:</h3>
187 <ul>
188 <li>?? <a href="https://trello.com/b/LakLkQBW/jsfiddle-roadmap" target="_blank" rel="noopener">Roadmap</a> (vote for features)</li>
189 <li>? <a href="https://github.com/jsfiddle/jsfiddle-issues/issues" target="_blank" rel="noopener">Bug tracker</a></li>
190 <!-- <li>☁️ <a href="https://jsfiddle.net/about" target="_blank" rel="noopener">About</a></li> -->
191 <li>? <a href="https://docs.jsfiddle.net/" target="_blank" rel="noopener">Docs</a></li>
192 <li>? <a href="http://status.jsfiddle.net/" target="_blank" rel="noopener">Service status</a></li>
193 </ul>
194 <a class="upgradeToPro" href="https://jsfiddle.net/pro" target="_blank">Upgrade to PRO</a>
195 </section>
196
197 <section>
198 <h3>JSFiddle is for:</h3>
199 <ul class="articles">
200 <!-- <li><a href="https://julian.is/article/css-grid-at-scale/?utm_source=jsfiddle&utm_medium=editor" target="_blank">Adopting CSS Grid at scale</a> <span>via julian.is</span></li>
201 <li><a href="https://changelog.com/news/show-mdn-browser-compatibility-data-on-the-command-line-NRR2/?utm_source=jsfiddle&utm_medium=editor" target="_blank">Show MDN browser compatibility data on the command line</a> <span>via changelog.com</span></li>
202 <li>? <a href="https://trello.com/b/VVZC5uQY/jsfiddle-links-inbox" target="_blank">Suggest a link</a></li> -->
203 <li><a href="https://docs.jsfiddle.net/use-cases/demos-for-products-or-libraries" target="_blank" rel="noopener">Demos for docs</a></li>
204 <li><a href="https://docs.jsfiddle.net/use-cases/bug-reporting-test-case-for-github-issues" target="_blank" rel="noopener">Bug reporting (test-case) for Github Issues</a></li>
205 <li><a href="https://docs.jsfiddle.net/use-cases/answers-on-stack-overflow" target="_blank" rel="noopener">Presenting code answers on Stack Overflow</a></li>
206 <li><a href="https://docs.jsfiddle.net/use-cases/live-code-collaboration" target="_blank" rel="noopener">Live code collaboration</a></li>
207 <li><a href="https://docs.jsfiddle.net/use-cases/code-snippets-hosting" target="_blank" rel="noopener">Code snippets hosting</a></li>
208 <li>... or just your humble code playground ✌?</li>
209 </ul>
210 </section>
211 </div>
212</div>
213
214
215 <!-- <h1>Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.</h1> -->
216 <!-- <h2>online javascript editor, testing javascript online, online ide, online code editor, html, css, coffeescript, scss online editor</h2> -->
217 <form method="post" id="show-result" target="result" action="https://fiddle.jshell.net/_display/">
218 <input type="hidden" name="csrfmiddlewaretoken" value="WiZxOWC8c0GyOb307wQ/TxK9GofZjidAH0F/xQymbpHOirlO3DsQMm4qUPDHarjXQxMlOhryM+fbfTYuZto6rQ==">
219<input type="hidden" name="authenticity_token" value="WiZxOWC8c0GyOb307wQ/TxK9GofZjidAH0F/xQymbpHOirlO3DsQMm4qUPDHarjXQxMlOhryM+fbfTYuZto6rQ==">
220
221 <header>
222 <h1>
223 <span class="title">JSFiddle</span>
224 <div class="changelog-badge">
225 <a title="JSFiddle" href="https://jsfiddle.net/">
226 <svg width="46px" height="33px" viewBox="0 0 46 33">
227 <g class="asd" stroke-width="1.6" fill="none" fill-rule="evenodd">
228 <path d="M23.4888889,20.543316 C21.4404656,18.4187374 19.0750303,15.6666667 16.4832014,15.6666667 C13.8721947,15.6666667 11.7555556,17.6366138 11.7555556,20.0666667 C11.7555556,22.4967196 13.8721947,24.4666667 16.4832014,24.4666667 C18.8347252,24.4666667 19.9845474,23.0125628 20.6429148,22.312473" id="Oval-1" stroke-linecap="round"></path>
229 <path d="M22.5111111,19.5900174 C24.5595344,21.7145959 26.9249697,24.4666667 29.5167986,24.4666667 C32.1278053,24.4666667 34.2444444,22.4967196 34.2444444,20.0666667 C34.2444444,17.6366138 32.1278053,15.6666667 29.5167986,15.6666667 C27.1652748,15.6666667 26.0154526,17.1207706 25.3570852,17.8208603" id="Oval-1-Copy" stroke-linecap="round"></path>
230 <path d="M45,22.7331459 C45,19.1499462 42.7950446,16.079593 39.6628004,14.7835315 C39.6774469,14.5246474 39.7003932,14.2674038 39.7003932,14.0035978 C39.7003932,6.82243304 33.8412885,1 26.611593,1 C21.3985635,1 16.9102123,4.03409627 14.8051788,8.41527616 C13.7828502,7.62878013 12.503719,7.15547161 11.1134367,7.15547161 C7.77825654,7.15547161 5.07450503,9.84159999 5.07450503,13.1544315 C5.07450503,13.7760488 5.16938207,14.3779791 5.3477444,14.9418479 C2.74863428,16.4787471 1,19.2867709 1,22.5105187 C1,27.3287502 4.89630545,31.2367856 9.72803666,31.31094 L36.3341301,31.3109406 C41.1201312,31.3406346 45,27.4870665 45,22.7331459 L45,22.7331459 Z" stroke-linejoin="round"></path>
231 </g>
232 </svg>
233 </a>
234 </div>
235 </h1>
236 <div id="actions">
237 <nav class="actionCont">
238 <div class="actionItem">
239 <a class="aiButton" id="run" title="Run (Command/Ctrl + Enter)" href="https://jsfiddle.net/api/post/library/pure/#run">
240 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-play"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
241 Run</a>
242 </div>
243
244 <!-- Logged in users don't need the info popup on saving/updating/forking -->
245 <div class="actionItem dropdown ">
246 <a class="aiButton dropdownTrigger" title="Save (Command/Ctrl + S)" href="https://jsfiddle.net/api/post/library/pure/#save" data-popover-trigger="saveInfo">
247 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-upload-cloud"><polyline points="16 16 12 12 8 16"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline points="16 16 12 12 8 16"></polyline></svg>
248 Save</a>
249 </div>
250
251 <div class="actionItem dropdown hidden">
252 <a class="aiButton dropdownTrigger" title="Fork" href="https://jsfiddle.net/api/post/library/pure/#fork" data-popover-trigger="forkInfo">
253 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shuffle"><polyline points="16 3 21 3 21 8"></polyline><line x1="4" y1="20" x2="21" y2="3"></line><polyline points="21 16 21 21 16 21"></polyline><line x1="15" y1="15" x2="21" y2="21"></line><line x1="4" y1="4" x2="9" y2="9"></line></svg>
254 Fork</a>
255 </div>
256
257 <div class="actionItem hidden ">
258 <a class="aiButton" id="mark_favourite" title="Set as base" href="https://jsfiddle.net/api/post/library/pure/#set-as-base">
259 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7" y2="7"></line></svg>
260 Set as base</a>
261 </div>
262
263 <div class="actionItem ">
264 <a class="aiButton" id="collaborate" title="Collaborate" href="https://jsfiddle.net/api/post/library/pure/#collaborate">
265 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
266 Collaborate</a>
267 </div>
268
269 <div class="actionItem dropdown hidden ">
270 <a class="aiButton dropdownTrigger" id="share" title="Embed" href="https://jsfiddle.net/api/post/library/pure/#embed" data-popover-trigger="embed">
271 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
272 Embed</a>
273 </div> <!-- /actionItem -->
274
275 <div id="app-updates" class="hidden"><div class="bodyCont"><div class="body"><strong class="badge">Update</strong> Tidy action per panel<p>Tidying action is now a part of the code panel (right top, after hovering the panel) instead of being a global action tidying all three panels at once.</p><div class="updateActions"><a href="https://jsfiddle.net/api/post/library/pure/" class="previous">Previous update</a><a href="https://jsfiddle.net/api/post/library/pure/" class="dismiss">Got it</a></div></div></div></div>
276
277<script>
278 var updates = [
279 {
280 id: 17,
281 badge: "Update",
282 title: "Tidy action per panel",
283 body: "Tidying action is now a part of the code panel (right top, after hovering the panel) instead of being a global action tidying all three panels at once.",
284 },
285 {
286 id: 16,
287 badge: "Update",
288 title: "Persistent editor settings + dark UI",
289 body: "Editor settings are now stored as a part of your profile, so they're stay the same across different browsers. Anonymous' users settings will persist only for a browser session. The light theme has been retired since it was used by a low percentage of the userbase.",
290 },
291 {
292 id: 15,
293 badge: "New",
294 title: "Interface in different languages",
295 body: "JSFiddle now speaks English, Polish, Japanese and Hindi! We'll be adding more languages soon.",
296 }
297 ]
298
299 var UpdatesWidget = function(options){
300 if (updates.length <= 0) return false
301
302 var selectedItem = 0
303 var currentUpdate = updates[selectedItem]
304 var lastSeenId = window.localStorage.getItem("last_seen_update")
305 var template = {}
306
307 var element = {
308 updates: document.querySelector("#app-updates"),
309 highlighter: document.createElement("div")
310 }
311
312 // generic template for the widget
313 template.title = "<strong class='badge'>#{badge}</strong> #{title}"
314 template.body = "<p>#{body}</p>"
315 template.actions = "<div class='updateActions'><a href='' class='previous'>Previous update</a><a href='' class='dismiss'>Got it</a></div>"
316 template.full = template.title + template.body + template.actions
317 template.body = "<div class='body'>" + template.full + "</div>"
318 template.update = "<div class='bodyCont'>" + template.body + "</div>"
319
320 // inject the highlighter
321 element.highlighter.id = "app-updates-highlighter"
322 document.body.appendChild(element.highlighter)
323
324 var dismissUpdate = function(event){
325 event.preventDefault()
326 event.stopPropagation()
327
328 window.localStorage.setItem("last_seen_update", currentUpdate.id)
329 element.updates.classList.add("hidden")
330
331 Track.ui("Update dismissed")
332 }
333
334 var showHighlighter = function(event){
335 event.preventDefault()
336 event.stopPropagation()
337
338 var target = document.querySelector(currentUpdate.highlight.target)
339 var rect = target.getBoundingClientRect()
340 var visible = !element.updates.classList.contains("hidden")
341
342 element.highlighter.style.top = rect.top + "px"
343 element.highlighter.style.left = rect.left + "px"
344 element.highlighter.style.width = rect.width + "px"
345 element.highlighter.style.height = rect.height + "px"
346
347 // only highlight before updater is dismissed
348 if (visible){
349 element.highlighter.classList.add("show")
350 }
351 }
352
353 var hideHighlighter = function(event){
354 element.highlighter.classList.remove("show")
355 }
356
357 var setUpdate = function(event){
358
359 if (event){
360 event.preventDefault()
361 event.stopPropagation()
362
363 selectedItem = selectedItem + 1
364
365 } else {
366 selectedItem = 0
367 }
368
369 currentUpdate = updates[selectedItem]
370
371 // update the title
372 var update = template.update
373 .replace("#{badge}", currentUpdate.badge)
374 .replace("#{title}", currentUpdate.title)
375 .replace("#{body}", currentUpdate.body)
376
377 element.updates.innerHTML = update
378
379 // dismiss update and save ID for future reference
380 var dismiss = document.querySelector(".updateActions .dismiss")
381 dismiss.addEventListener("click", dismissUpdate)
382
383 var previous = document.querySelector(".updateActions .previous")
384 previous.addEventListener("click", setUpdate)
385 }
386
387 setUpdate()
388
389 // manage highlighter
390 if (currentUpdate.highlight){
391 element.updates.addEventListener("mouseover", showHighlighter)
392 element.updates.addEventListener("mouseout", hideHighlighter)
393 }
394
395 // remove hidden class if user hasn't seen the latest update
396 if (parseInt(lastSeenId) !== currentUpdate.id){
397 element.updates.classList.remove("hidden")
398 }
399 }
400
401 window.addEventListener("DOMContentLoaded", UpdatesWidget)
402</script>
403
404 </nav>
405
406 <ul class="actionCont dropdown right">
407 <li class="actionItem hidden draftTriggerCont">
408 <a class="aiButton dropdownTrigger applyDraft" href="https://jsfiddle.net/api/post/library/pure/#" data-popover-trigger="draft">Unsaved draft</a>
409 </li> <!-- /actionItem -->
410
411 <li class="actionItem">
412 <a class="aiButton dropdownTrigger" href="https://jsfiddle.net/api/post/library/pure/#" title="Editor settings" data-popover-trigger="editor-settings">
413 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sliders"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
414 Settings
415 </a>
416 </li> <!-- /actionItem -->
417
418 <li class="actionItem"><a class="aiButton" href="https://jsfiddle.net/user/login/">Sign in</a></li>
419
420
421</ul>
422
423<div class="dropdownCont hidden" data-popover-ref="draft" data-popover-position="left">
424 <div class="dcWrapper diffCont">
425 <h4>Diff between the <strong>saved</strong> and <strong>locally drafted</strong> fiddle:</h4>
426 <div class="diffPanels">
427 <div class="diffWrap" id="diff-html"></div>
428 <div class="diffWrap" id="diff-js"></div>
429 <div class="diffWrap" id="diff-css"></div>
430 </div> <!-- /diffCont -->
431 <p><a class="apply" href="https://jsfiddle.net/api/post/library/pure/#" id="apply-draft">Apply local draft version</a> or <a href="https://jsfiddle.net/api/post/library/pure/#" id="discard-draft">discard it</a></p>
432 </div> <!-- /dcWrapper -->
433</div> <!-- /dropdownCont -->
434
435<div class="dropdownCont hidden" data-popover-ref="editor-settings" data-popover-position="left">
436 <div class="dcWrapper editorSettings">
437 <div id="editor-options">
438 <h3>Editor layout</h3>
439 <div id="layout">
440 <!-- HACK: for some reason the first input always gets the value of the last active
441 grid mode, for that reason a hack is to create an invisible first input -->
442 <input style="display: none;" name="layout" type="radio" value="grid_invisible_hack">
443 <label>
444 <input name="layout" type="radio" value="1" checked="">
445 <span class="gridMode grid_1"></span>
446 Classic
447 </label>
448 <label>
449 <input name="layout" type="radio" value="2">
450 <span class="gridMode grid_2"></span>
451 Columns
452 </label>
453 <label>
454 <input name="layout" type="radio" value="3">
455 <span class="gridMode grid_3"></span>
456 Bottom results
457 </label>
458 <label>
459 <input name="layout" type="radio" value="4">
460 <span class="gridMode grid_4"></span>
461 Right results
462 </label>
463 <label>
464 <input name="layout" type="radio" value="5">
465 <span class="gridMode grid_5"></span>
466 Tabs (columns)
467 </label>
468 <label>
469 <input name="layout" type="radio" value="6">
470 <span class="gridMode grid_6"></span>
471 Tabs (rows)
472 </label>
473 </div>
474
475 <h3>General</h3>
476 <div class="fieldsCont">
477 <!-- <p>
478 <label class="checkboxCont">
479 <input type="checkbox" name="darkTheme" checked>
480 <span class="checkbox"></span>
481 Dark theme
482 </label>
483 </p> -->
484 <p>
485 <label class="checkboxCont">
486 <input type="checkbox" name="lineNumbers" checked="">
487 <span class="checkbox"></span>
488 Line numbers
489 </label>
490 </p>
491 <p>
492 <label class="checkboxCont">
493 <input type="checkbox" name="lineWrapping" checked="">
494 <span class="checkbox"></span>
495 Wrap lines
496 </label>
497 </p>
498 <p>
499 <label class="checkboxCont">
500 <input type="checkbox" name="indentWithTabs">
501 <span class="checkbox"></span>
502 Indent with tabs
503 </label>
504 </p>
505 <p>
506 <label class="checkboxCont">
507 <input type="checkbox" name="codeHints">
508 <span class="checkbox"></span>
509 Code hinting (autocomplete) <small>(beta)</small>
510 </label>
511 </p>
512 </div> <!-- /fieldsCont -->
513
514 <div class="selectPairs">
515 <div class="selectPair">
516 <span class="label">Indent size:</span>
517 <div class="selectCont">
518 <select name="indentUnit">
519 <option value="2">2 spaces</option>
520 <option value="3">3 spaces</option>
521 <option value="4">4 spaces</option>
522 </select>
523 </div>
524 </div> <!-- /selectPair -->
525
526 <div class="selectPair">
527 <span class="label">Key map:</span>
528 <div class="selectCont">
529 <select name="keyMap">
530 <option value="default">Default</option>
531 <option value="sublime">Sublime Text</option>
532 <!-- <option value="vim">VIM</option> -->
533 <option value="emacs">EMACS</option>
534 </select>
535 </div>
536 </div> <!-- /selectPair -->
537
538 <div class="selectPair">
539 <span class="label">Font size:</span>
540 <div class="selectCont">
541 <select name="fontSize">
542 <option value="1">Default</option>
543 <option value="2">Big</option>
544 <option value="3">Bigger</option>
545 <option value="4">Jabba</option>
546 </select>
547 </div>
548 </div> <!-- /selectPair -->
549 </div> <!-- /selectPairs -->
550
551 <h3>Behavior</h3>
552 <div class="fieldsCont">
553 <p>
554 <label class="checkboxCont disabled" data-title="Log in to use auto-running">
555 <input type="checkbox" name="autoRun" disabled="">
556 <span class="checkbox"></span>
557 Auto-run code
558 </label>
559 </p>
560 <p>
561 <label class="checkboxCont disabled" data-title="Log in to use auto-running">
562 <input type="checkbox" name="autoRunValid" disabled="">
563 <span class="checkbox"></span>
564 Only auto-run code that validates
565 </label>
566 </p>
567 <p>
568 <label class="checkboxCont disabled" data-title="Log in to use auto-saving">
569 <input type="checkbox" name="autoSave" disabled="">
570 <span class="checkbox"></span>
571 Auto-save code (bumps the version)
572 </label>
573 </p>
574 <p>
575 <label class="checkboxCont">
576 <input type="checkbox" name="autoCloseTags" checked="">
577 <span class="checkbox"></span>
578 Auto-close HTML tags
579 </label>
580 </p>
581 <p>
582 <label class="checkboxCont">
583 <input type="checkbox" name="autoCloseBrackets" checked="">
584 <span class="checkbox"></span>
585 Auto-close brackets
586 </label>
587 </p>
588 <p>
589 <label class="checkboxCont">
590 <input type="checkbox" name="clearConsole">
591 <span class="checkbox"></span>
592 Clear console on run
593 </label>
594 </p>
595 <p>
596 <label class="checkboxCont">
597 <input type="checkbox" name="codeLinting" checked="">
598 <span class="checkbox"></span>
599 Live code validation
600 </label>
601 </p>
602 <p>
603 <label class="checkboxCont">
604 <input type="checkbox" name="matchTags">
605 <span class="checkbox"></span>
606 Highlight matching tags
607 </label>
608 </p>
609 </div> <!-- /fieldsCont -->
610
611 <h3>Boilerplates</h3>
612 <div class="fieldsCont">
613 <p>
614 <label class="checkboxCont">
615 <input type="checkbox" name="reduceHelloBar">
616 <span class="checkbox"></span>
617 Show boilerplates bar less often
618 </label>
619 </p>
620 </div> <!-- /fieldsCont -->
621 </div> <!-- /editor-options -->
622 </div> <!-- /dcWrapper -->
623</div> <!-- /dropdownCont -->
624
625</div>
626
627<div class="dropdownCont center hidden" data-popover-ref="saveInfo">
628 <div class="dcWrapper info">
629 <p><strong>Save anonymous (public) fiddle?</strong></p>
630 <p>- Be sure not to include <strong>personal data</strong><br>- Do not include <strong>copyrighted material</strong></p>
631 <p class="warning"><strong>Log in</strong> if you'd like to <strong>delete this fiddle</strong> in the future.</p>
632 <button id="save">Save</button>
633 </div>
634</div>
635
636<div class="dropdownCont center hidden" data-popover-ref="forkInfo">
637 <div class="dcWrapper info">
638 <p><strong>Fork anonymous (public) fiddle?</strong></p>
639 <p>- Be sure not to include <strong>personal data</strong><br>- Do not include <strong>copyrighted material</strong></p>
640 <p class="warning"><strong>Log in</strong> if you'd like to <strong>delete this fiddle</strong> in the future.</p>
641 <button id="fork">Fork</button>
642 </div>
643</div>
644
645<div class="dropdownCont center hidden" data-popover-ref="embed">
646 <div class="dcWrapper embed">
647
648 <div id="creator">
649 <section>
650 <h3>Tabs:</h3>
651 <div class="inlineFields">
652 <label class="inputCont_checkbox checkboxCont">
653 <input type="checkbox" name="tabs" value="js" checked="">
654 <span class="checkbox"><i class="bts bt-check"></i></span> JavaScript
655 </label>
656 <label class="inputCont_checkbox checkboxCont">
657 <input type="checkbox" name="tabs" value="html" checked="">
658 <span class="checkbox"><i class="bts bt-check"></i></span> HTML
659 </label>
660 <label class="inputCont_checkbox checkboxCont">
661 <input type="checkbox" name="tabs" value="css" checked="">
662 <span class="checkbox"><i class="bts bt-check"></i></span> CSS
663 </label>
664 <label class="inputCont_checkbox checkboxCont">
665 <input type="checkbox" name="tabs" value="result" checked="">
666 <span class="checkbox"><i class="bts bt-check"></i></span> Result
667 </label>
668 </div> <!-- /inlineFields -->
669 </section>
670
671 <section class="noborder">
672 <h3>Visual:</h3>
673 <div class="inlineFields">
674 <label class="inputCont_checkbox checkboxCont">
675 <input type="radio" name="skin" value="light" checked="">
676 <span class="radio"></span> Light
677 </label>
678 <label class="inputCont_checkbox checkboxCont">
679 <input type="radio" name="skin" value="dark">
680 <span class="radio"></span> Dark
681 </label>
682 </div> <!-- /inlineFields -->
683 <label class="inputCont_text">
684 <input type="text" name="accentColor" maxlength="7" placeholder="Accent color">
685 </label>
686 <label class="inputCont_text">
687 <input type="text" name="fontColor" maxlength="7" placeholder="Font color">
688 </label>
689 <label class="inputCont_text">
690 <input type="text" name="menuColor" maxlength="7" placeholder="Menu background">
691 </label>
692 <label class="inputCont_text">
693 <input type="text" name="bodyColor" maxlength="7" placeholder="Code background">
694 </label>
695 </section>
696
697 <section class="noborder">
698 <h3>
699 Embed snippet
700 <a href="https://jsfiddle.net/api/post/library/pure/#" class="codeTypeToggle">Prefer iframe?</a>:
701 </h3>
702 <div class="embedCodeWrap">
703<textarea class="embedCode" id="share_embedded_dropdown" data-view="embed" data-pattern-value="<script async src="{embedSrc}"></script>"><script async src="{embedSrc}"></script>
704</textarea>
705 </div> <!-- /embedCodeWrap -->
706
707 <div class="embedCodeWrap hidden">
708<textarea class="embedCode" data-view="embedded" data-pattern-value="<iframe width="100%" height="300" src="{embedSrc}" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>"><iframe width="100%" height="300" src="{embedSrc}" allowfullscreen allowpaymentrequest frameborder="0"></iframe>
709</textarea>
710 <p><strong>No autoresizing</strong> to fit the code</p><p><strong>Render blocking</strong> of the parent page</p>
711 </div> <!-- /embedCodeWrap -->
712 </section>
713 </div> <!-- /creator -->
714
715 <div id="preview"></div> <!-- /preview -->
716 </div> <!-- /dcWrapper -->
717</div> <!-- /dropdownCont -->
718
719 <div id="progressbar"><div class="pb"></div></div>
720 </header>
721
722 <main id="layout-container">
723 <div id="sidebar">
724 <section id="s-cont">
725
726 <div class="sidebarItem opened">
727 <h3 class="toggler" title="">
728 Fiddle meta
729 </h3>
730 <div class="body">
731 <p>
732 <input type="text" name="title" maxlength="255" value="KML Feature Details" placeholder="Untitled fiddle">
733 </p>
734 <p>
735 <textarea rows="10" cols="40" name="description" placeholder="No description"></textarea>
736 </p>
737
738 </div> <!-- /body -->
739</div> <!-- /sidebarItem -->
740
741
742 <script type="text/javascript">
743 var resources = []
744</script>
745
746<div class="sidebarItem">
747 <h3 class="toggler ">
748 Resources <strong class="resourcesLabel">URL</strong> <strong class="resourcesLabel">cdnjs</strong>
749 <em id="resource-counter" class="hidden">0</em>
750 </h3>
751
752 <div class="body">
753 <ul id="external_resources_list">
754 </ul>
755
756 <div id="external-resources-form">
757 <input id="external_resource" type="text" name="q" value="" placeholder="JavaScript/CSS URL" autocomplete="off">
758 <a id="add_external_resource" class="submit" href="https://jsfiddle.net/api/post/library/pure/#" title="Add resource">
759 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
760 </a>
761 </div>
762 <input type="hidden" value="" id="external_resources_id" name="add_external_resources">
763
764 <ul class="resourcesInfo">
765 <li>Paste a direct CSS/JS URL</li>
766 <li>Type a library name to fetch from CDNJS</li>
767 </ul>
768 </div> <!-- /body -->
769</div> <!-- /sidebarItem -->
770
771 <div class="sidebarItem">
772 <h3 class="toggler">
773 Async requests
774 </h3>
775 <div class="body">
776 <p><code>/echo</code> simulates Async calls:<br>
777 JSON: <code>/echo/json/</code><br>
778 JSONP: <code>//jsfiddle.net/echo/jsonp/</code><br>
779 HTML: <code>/echo/html/</code><br>
780 XML: <code>/echo/xml/</code>
781 </p>
782 <p>See <a href="https://jsfiddle.gitbook.io/help/async-requests" target="_new">docs</a> for more info.</p>
783 </div> <!-- /body -->
784</div> <!-- /sidebarItem -->
785
786 <div class="sidebarItem">
787 <h3 class="toggler">
788 Other (links, license)
789 </h3>
790 <div class="body">
791 <p class="maintainers">Created and maintained by <a title="Piotr's twitter" href="http://twitter.com/zalun" target="_blank" rel="noopener">Piotr</a> and <a title="UX and UI Designer" href="http://twitter.com/oskar" target="_blank" rel="noopener">Oskar</a>.</p>
792 <p>Hosted on <a href="https://m.do.co/c/52e7a0ad196d" target="_blank" rel="noopener"><strong>DigitalOcean</strong></a></p>
793 <p><strong></strong></p>
794 <p>All code belongs to the poster and no license is enforced. JSFiddle or its authors are not responsible or liable for any loss or damage of any kind during the usage of provided code.</p>
795 <p><strong>Links</strong></p>
796 <p>
797 <a href="https://github.com/jsfiddle/jsfiddle-issues/issues" target="_blank" rel="noopener">Bug tracker</a><br>
798 <a href="https://trello.com/b/LakLkQBW/jsfiddle-roadmap" target="_blank" rel="noopener">Roadmap</a> (vote for features)<br>
799 <a href="https://jsfiddle.net/about" target="_blank" rel="noopener">About</a><br>
800 <a href="https://docs.jsfiddle.net/" target="_blank" rel="noopener">Docs</a><br>
801 <a href="http://status.jsfiddle.net/" target="_blank" rel="noopener">Service status</a>
802 </p>
803 </div> <!-- /body -->
804</div> <!-- /sidebarItem -->
805
806<style media="screen">
807 .maintainers {
808 position: absolute;
809 top: -900em;
810 left: -900em;
811 }
812</style>
813
814
815 </section>
816 <section id="s-bottom">
817 <div class="twitterCont">
818 <!-- <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=jsfiddlenet" id="_carbonads_js"></script> -->
819 <script async="" type="text/javascript" src="./KML Feature Details - JSFiddle_files/carbon.js" id="_carbonads_js"></script><div id="carbonads"><span><span class="carbon-wrap"><a href="https://srv.carbonads.net/ads/click/x/GTND42QYC6SDT2QWFT7LYKQMFTYIV2QYCE7ICZ3JCWAD423UCWADK27KC6BIEKQMFTADTK3EHJNCLSIZ?segment=placement:jsfiddlenet;" class="carbon-img" target="_blank" rel="noopener sponsored"><img src="./KML Feature Details - JSFiddle_files/1547651789-slack-carbon-white_2x.png" alt="ads via Carbon" border="0" style="max-width: 130px;"></a><a href="https://srv.carbonads.net/ads/click/x/GTND42QYC6SDT2QWFT7LYKQMFTYIV2QYCE7ICZ3JCWAD423UCWADK27KC6BIEKQMFTADTK3EHJNCLSIZ?segment=placement:jsfiddlenet;" class="carbon-text" target="_blank" rel="noopener sponsored">Bring your team together with Slack, the collaboration hub for work.</a></span><a href="http://carbonads.net/?utm_source=jsfiddlenet&utm_medium=ad_via_link&utm_campaign=in_unit&utm_term=carbon" class="carbon-poweredby" target="_blank" rel="noopener sponsored">ads via Carbon</a><img src="./KML Feature Details - JSFiddle_files/B21259774.231406603" border="0" height="1" width="1" alt="ads via Carbon" style="display: none;"></span></div>
820</div>
821
822<div id="keep-us-running">
823 <p>Help keep us running.</p>
824 <p>If you don't mind tech-related ads (no tracking or remarketing), and want to keep us running, whitelist JSFiddle in your blocker.</p>
825 <p>Thank you! ✌??❤️</p>
826</div>
827
828 </section>
829 </div> <!-- #sidebar -->
830 <div id="content">
831 <input type="hidden" id="id_version" name="version" value="">
832<input type="hidden" id="id_slug" name="slug" value="">
833
834<div id="editor">
835 <div class="panel-v left" style="width: calc(50% - 0.5px);">
836 <div class="panel-h panel" style="height: calc(50% - 0.5px);">
837 <textarea id="id_code_html" name="code_html" style="display: none;"></textarea>
838
839 <div class="windowLabelCont">
840 <a href="https://jsfiddle.net/api/post/library/pure/#" class="windowLabel" data-panel="html" data-popover-trigger="html">
841 <span class="label">HTML</span>
842 <svg width="8" height="7" viewBox="-0.019531 -52.792969 30.039062 25.195312">
843 <path d="M29.941406 -52.500000C29.785156 -52.656250 29.589844 -52.753906 29.355469 -52.792969L0.644531 -52.792969C0.410156 -52.753906 0.214844 -52.656250 0.058594 -52.500000C-0.019531 -52.265625 0.000000 -52.050781 0.117188 -51.855469L14.472656 -27.890625C14.628906 -27.734375 14.804688 -27.636719 15.000000 -27.597656C15.234375 -27.636719 15.410156 -27.734375 15.527344 -27.890625L29.882812 -51.855469C30.000000 -52.089844 30.019531 -52.304688 29.941406 -52.500000ZM29.941406 -52.500000"></path>
844 </svg>
845 </a>
846 <a href="https://jsfiddle.net/api/post/library/pure/#" class="panelTidy" data-panel="html">
847 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-left"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg> Tidy</a>
848 </div>
849 <div class="CodeMirror cm-s-default CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 4px; left: 62px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0"></textarea></div><div class="CodeMirror-vscrollbar" tabindex="-1" cm-not-content="true" style="width: 18px; pointer-events: none;"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-hscrollbar" tabindex="-1" cm-not-content="true" style="height: 18px; pointer-events: none;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 58px; margin-bottom: 0px; border-right-width: 30px; min-height: 136px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>6</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-cursors"><div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 16px;"> </div></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -58px; width: 58px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">div</span> <span class="cm-attribute">id</span>=<span class="cm-string">"map"</span><span class="cm-tag cm-bracket">></</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">div</span> <span class="cm-attribute">id</span>=<span class="cm-string">"content-window"</span><span class="cm-tag cm-bracket">></</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment"><!-- Replace the value of the key parameter with your own API key. --></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">script</span> <span class="cm-attribute">async</span> <span class="cm-attribute">defer</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">5</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-attribute">src</span>=<span class="cm-string">"https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">6</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"></</span><span class="cm-tag">script</span><span class="cm-tag cm-bracket">></span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; border-bottom: 0px solid transparent; top: 136px;"></div><div class="CodeMirror-gutters" style="height: 166px; left: 0px;"><div class="CodeMirror-gutter CodeMirror-lint-markers"></div><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 34px;"></div><div class="CodeMirror-gutter CodeMirror-foldgutter"></div></div></div></div></div>
850 <div class="gutter gutter-vertical" style="height: 1px;"></div><div class="panel-h panel" style="height: calc(50% - 0.5px);">
851 <textarea id="id_code_js" name="code_js" style="display: none;"></textarea>
852
853 <div class="windowLabelCont">
854 <a href="https://jsfiddle.net/api/post/library/pure/#" class="windowLabel" data-panel="js" data-popover-trigger="js">
855 <span class="label">JavaScript + No-Library (pure JS)</span>
856 <svg width="8" height="7" viewBox="-0.019531 -52.792969 30.039062 25.195312">
857 <path d="M29.941406 -52.500000C29.785156 -52.656250 29.589844 -52.753906 29.355469 -52.792969L0.644531 -52.792969C0.410156 -52.753906 0.214844 -52.656250 0.058594 -52.500000C-0.019531 -52.265625 0.000000 -52.050781 0.117188 -51.855469L14.472656 -27.890625C14.628906 -27.734375 14.804688 -27.636719 15.000000 -27.597656C15.234375 -27.636719 15.410156 -27.734375 15.527344 -27.890625L29.882812 -51.855469C30.000000 -52.089844 30.019531 -52.304688 29.941406 -52.500000ZM29.941406 -52.500000"></path>
858 </svg>
859 </a>
860 <a href="https://jsfiddle.net/api/post/library/pure/#" class="panelTidy" data-panel="js">
861 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-left"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg> Tidy</a>
862 </div>
863 <div class="CodeMirror cm-s-default CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 52px; left: 321.312px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0"></textarea></div><div class="CodeMirror-vscrollbar" tabindex="-1" cm-not-content="true" style="display: block; bottom: 0px; width: 18px; pointer-events: none;"><div style="min-width: 1px; height: 376px;"></div></div><div class="CodeMirror-hscrollbar" tabindex="-1" cm-not-content="true" style="height: 18px; pointer-events: none;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 58px; margin-bottom: 0px; border-right-width: 30px; min-height: 376px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre class="CodeMirror-line-like"><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-cursors" style="visibility: hidden;"><div class="CodeMirror-cursor" style="left: 263.312px; top: 48px; height: 16px;"> </div></div><div class="CodeMirror-code" role="presentation" style=""><div class="" style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">1</div><div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;"><div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div></div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">function</span> <span class="cm-def">initMap</span>() {</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">2</div><div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;"><div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div></div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-keyword">var</span> <span class="cm-def">map</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">google</span>.<span class="cm-property">maps</span>.<span class="cm-property">Map</span>(<span class="cm-variable">document</span>.<span class="cm-property">getElementById</span>(<span class="cm-string">'map'</span>), {</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">zoom</span>: <span class="cm-number">12</span>,</span></pre></div><div style="position: relative;" class="CodeMirror-activeline"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -58px; width: 58px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">center</span>: <span class=" CodeMirror-matchingbracket">{</span><span class="cm-property">lat</span>: <span class="cm-number">52.367</span>, <span class="cm-property">lng</span>: <span class="cm-number">4.900</span><span class=" CodeMirror-matchingbracket">}</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">5</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> });</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">6</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">7</div><div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;"><div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div></div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-keyword">var</span> <span class="cm-def">kmlLayer</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">google</span>.<span class="cm-property">maps</span>.<span class="cm-property">KmlLayer</span>({</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">8</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">url</span>: <span class="cm-string">'http://googlemaps.github.io/kml-samples/kml/Placemark/placemark.kml'</span>,</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">9</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">suppressInfoWindows</span>: <span class="cm-atom">true</span>,</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">10</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">map</span>: <span class="cm-variable-2">map</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">11</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> });</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">12</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">13</div><div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;"><div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div></div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable-2">kmlLayer</span>.<span class="cm-property">addListener</span>(<span class="cm-string">'click'</span>, <span class="cm-keyword">function</span>(<span class="cm-def">kmlEvent</span>) {</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">14</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-keyword">var</span> <span class="cm-def">text</span> <span class="cm-operator">=</span> <span class="cm-variable-2">kmlEvent</span>.<span class="cm-property">featureData</span>.<span class="cm-property">description</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">15</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">showInContentWindow</span>(<span class="cm-variable-2">text</span>);</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">16</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> });</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">17</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">18</div><div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;"><div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div></div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-keyword">function</span> <span class="cm-def">showInContentWindow</span>(<span class="cm-def">text</span>) {</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">19</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-keyword">var</span> <span class="cm-def">sidediv</span> <span class="cm-operator">=</span> <span class="cm-variable">document</span>.<span class="cm-property">getElementById</span>(<span class="cm-string">'content-window'</span>);</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">20</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable-2">sidediv</span>.<span class="cm-property">innerHTML</span> <span class="cm-operator">=</span> <span class="cm-variable-2">text</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">21</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> }</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">22</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; border-bottom: 0px solid transparent; top: 376px;"></div><div class="CodeMirror-gutters" style="height: 406px; left: 0px;"><div class="CodeMirror-gutter CodeMirror-lint-markers"></div><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 34px;"></div><div class="CodeMirror-gutter CodeMirror-foldgutter"></div></div></div></div></div>
864 </div>
865 <div class="gutter gutter-horizontal" style="width: 1px;"></div><div class="panel-v right" style="width: calc(50% - 0.5px);">
866 <div class="panel-h panel" style="height: calc(50% - 0.5px);">
867 <textarea id="id_code_css" name="code_css" style="display: none;"></textarea>
868
869 <div class="windowLabelCont">
870 <a href="https://jsfiddle.net/api/post/library/pure/#" class="windowLabel" data-panel="css" data-popover-trigger="css">
871 <span class="label">CSS</span>
872 <svg width="8" height="7" viewBox="-0.019531 -52.792969 30.039062 25.195312">
873 <path d="M29.941406 -52.500000C29.785156 -52.656250 29.589844 -52.753906 29.355469 -52.792969L0.644531 -52.792969C0.410156 -52.753906 0.214844 -52.656250 0.058594 -52.500000C-0.019531 -52.265625 0.000000 -52.050781 0.117188 -51.855469L14.472656 -27.890625C14.628906 -27.734375 14.804688 -27.636719 15.000000 -27.597656C15.234375 -27.636719 15.410156 -27.734375 15.527344 -27.890625L29.882812 -51.855469C30.000000 -52.089844 30.019531 -52.304688 29.941406 -52.500000ZM29.941406 -52.500000"></path>
874 </svg>
875 </a>
876 <a href="https://jsfiddle.net/api/post/library/pure/#" class="panelTidy" data-panel="css">
877 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-left"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg> Tidy</a>
878 </div>
879 <div class="CodeMirror cm-s-default CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 4px; left: 62px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0"></textarea></div><div class="CodeMirror-vscrollbar" tabindex="-1" cm-not-content="true" style="display: block; bottom: 0px; width: 18px; pointer-events: none;"><div style="min-width: 1px; height: 296px;"></div></div><div class="CodeMirror-hscrollbar" tabindex="-1" cm-not-content="true" style="height: 18px; pointer-events: none;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 58px; margin-bottom: 0px; border-right-width: 30px; min-height: 296px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>18</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-cursors"><div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 16px;"> </div></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -58px; width: 58px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">html</span>, <span class="cm-tag">body</span> {</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">height</span>: <span class="cm-number">100%</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">margin</span>: <span class="cm-number">0</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">padding</span>: <span class="cm-number">0</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">5</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">6</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">#map</span> {</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">7</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">float</span>: <span class="cm-atom">left</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">8</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">height</span>: <span class="cm-number">425px</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">9</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">width</span>: <span class="cm-number">79%</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">10</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">11</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">#content-window</span> {</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">12</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">float</span>: <span class="cm-atom">left</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">13</div><div class="CodeMirror-gutter-elt" style="left: 0px; width: 16px;"><div class="CodeMirror-lint-marker-warning"></div></div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">font-family</span>: <span class="cm-string">'Roboto'</span>,<span class="cm-string CodeMirror-lint-mark-warning">'</span><span class="cm-string">sans-serif'</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">14</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">height</span>: <span class="cm-number">100%</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">15</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">line-height</span>: <span class="cm-number">30px</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">16</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">padding-left</span>: <span class="cm-number">10px</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">17</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">width</span>: <span class="cm-number">19%</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -58px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">18</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; border-bottom: 0px solid transparent; top: 296px;"></div><div class="CodeMirror-gutters" style="height: 326px; left: 0px;"><div class="CodeMirror-gutter CodeMirror-lint-markers"></div><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 34px;"></div><div class="CodeMirror-gutter CodeMirror-foldgutter"></div></div></div></div></div>
880 <div class="gutter gutter-vertical" style="height: 1px;"></div><div class="panel-h panel resultsPanel" style="height: calc(50% - 0.5px);">
881
882 <iframe name="result" allow="midi *; geolocation *; microphone *; camera *; encrypted-media *;" sandbox="allow-modals allow-forms allow-scripts allow-same-origin allow-popups allow-top-navigation-by-user-activation" allowfullscreen="" allowpaymentrequest="" frameborder="0" src="./KML Feature Details - JSFiddle_files/saved_resource(1).html">
883 </iframe>
884
885 <div class="windowLabelCont">
886 <span class="windowLabel hidden">
887 Result
888 </span>
889 <em class="size hidden">535px</em>
890 </div>
891 </div>
892 </div></div>
893
894<div class="windowSettings html hidden" data-panel="html" data-popover-ref="html">
895 <h3>Language</h3>
896<div class="selectCont">
897 <select name="panel_html" class="panelChoice" id="panel_html_choice" data-panel_id="id_code_html" data-panel="html">
898 <option data-mime-type="text/html" value="0" selected="">HTML</option>
899 <option data-mime-type="text/x-haml" value="1">HAML</option>
900 </select>
901 <label>
902 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
903 </label>
904</div> <!-- /selectCont -->
905
906<h3>Doctype</h3>
907<div class="selectCont">
908 <select name="doctype">
909 <option id="dtd_XHTML 1.0 Strict" value="1">XHTML 1.0 Strict</option>
910 <option id="dtd_XHTML 1.0 Transitional" value="2">XHTML 1.0 Transitional</option>
911 <option selected="" id="dtd_HTML 5" value="3">HTML 5</option>
912 <option id="dtd_HTML 4.01 Strict" value="4">HTML 4.01 Strict</option>
913 <option id="dtd_HTML 4.01 Transitional" value="5">HTML 4.01 Transitional</option>
914 <option id="dtd_HTML 4.01 Frameset" value="6">HTML 4.01 Frameset</option>
915 </select>
916 <label>
917 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
918 </label>
919</div>
920
921<h3>Body tag</h3>
922<p>
923 <label>
924 <input id="id_body_tag" type="text" name="body_tag" maxlength="255" value="">
925 </label>
926</p>
927
928</div> <!-- /windowSettings -->
929
930<div class="windowSettings js hidden" data-panel="js" data-popover-ref="js">
931 <h3>Language</h3>
932<div class="selectCont">
933 <select name="panel_js" class="panelChoice" id="panel_js_choice" data-panel_id="id_code_js" data-panel="js">
934 <option data-mime-type="text/javascript" value="0" selected="">JavaScript</option>
935 <option data-mime-type="text/coffeescript" value="1">CoffeeScript</option>
936 <option data-mime-type="application/javascript" value="2">JavaScript 1.7</option>
937 <option data-mime-type="text/jsx" value="3">Babel + JSX</option>
938 <option data-mime-type="text/typescript" value="4">TypeScript</option>
939 <option data-mime-type="text/coffeescript" value="5">CoffeeScript 2</option>
940 <option data-mime-type="text/javascript" value="6">Vue</option>
941 <option data-mime-type="text/jsx" value="7">React</option>
942 <option data-mime-type="text/jsx" value="8">Preact</option>
943 </select>
944 <label>
945 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
946 </label>
947</div> <!-- /selectCont -->
948
949<h3>Frameworks & Extensions</h3>
950<div class="panelExtrasChoice">
951 <div class="selectCont">
952 <select name="js_lib" id="js_lib">
953 <optgroup label="AngularJS">
954 <option value="137">AngularJS 1.1.1</option>
955 <option value="180">AngularJS 1.2.1</option>
956 <option value="283">AngularJS 1.4.8</option>
957 <option value="281">AngularJS 2.0.0-alpha.47</option>
958 </optgroup><optgroup label="Bonsai">
959 <option value="120">Bonsai 0.4.1</option>
960 </optgroup><optgroup label="Brick">
961 <option value="176">Brick edge</option>
962 </optgroup><optgroup label="CreateJS">
963 <option value="170">CreateJS 2013.09.25</option>
964 <option value="279">CreateJS 2015.05.21</option>
965 </optgroup><optgroup label="D3">
966 <option value="134">D3 3.x</option>
967 <option value="386">D3 4.13.0</option>
968 <option value="397">D3 5.9.2</option>
969 </optgroup><optgroup label="Dojo">
970 <option value="87">Dojo (nightly)</option>
971 <option value="372">Dojo 1.4.8</option>
972 <option value="370">Dojo 1.5.6</option>
973 <option value="368">Dojo 1.6.5</option>
974 <option value="366">Dojo 1.7.12</option>
975 <option value="364">Dojo 1.8.14</option>
976 <option value="362">Dojo 1.9.11</option>
977 <option value="360">Dojo 1.10.8</option>
978 <option value="358">Dojo 1.11.4</option>
979 <option value="356">Dojo 1.12.2</option>
980 </optgroup><optgroup label="Ember">
981 <option value="190">Ember (latest)</option>
982 </optgroup><optgroup label="Enyo">
983 <option value="115">Enyo (nightly)</option>
984 <option value="116">Enyo 2.0.1</option>
985 <option value="121">Enyo 2.1</option>
986 <option value="145">Enyo 2.2.0</option>
987 <option value="214">Enyo 2.4.0</option>
988 <option value="238">Enyo 2.5.1</option>
989 <option value="299">Enyo 2.7.0</option>
990 </optgroup><optgroup label="ExtJS">
991 <option value="23">ExtJS 3.1.0</option>
992 <option value="109">ExtJS 3.4.0</option>
993 <option value="107">ExtJS 4.1.0</option>
994 <option value="80">ExtJS 4.1.1</option>
995 <option value="147">ExtJS 4.2.0</option>
996 <option value="258">ExtJS 5.0.0</option>
997 <option value="256">ExtJS 5.1.0</option>
998 <option value="338">ExtJS 6.2.0</option>
999 </optgroup><optgroup label="FabricJS">
1000 <option value="250">FabricJS 1.5.0</option>
1001 <option value="342">FabricJS 1.7.7</option>
1002 <option value="378">FabricJS 1.7.15</option>
1003 <option value="380">FabricJS 1.7.20</option>
1004 </optgroup><optgroup label="Glow">
1005 </optgroup><optgroup label="Inferno">
1006 <option value="336">Inferno 1.0.0-beta9</option>
1007 </optgroup><optgroup label="JSBlocks">
1008 <option value="252">JSBlocks (edge)</option>
1009 </optgroup><optgroup label="KineticJS">
1010 <option value="124">KineticJS 4.0.5</option>
1011 <option value="139">KineticJS 4.3.1</option>
1012 </optgroup><optgroup label="Knockout.js">
1013 <option value="104">Knockout.js 2.0.0</option>
1014 <option value="117">Knockout.js 2.1.0</option>
1015 <option value="122">Knockout.js 2.2.1</option>
1016 <option value="163">Knockout.js 2.3.0</option>
1017 <option value="172">Knockout.js 3.0.0</option>
1018 <option value="388">Knockout.js 3.4.2</option>
1019 </optgroup><optgroup label="Lo-Dash">
1020 <option value="167">Lo-Dash 2.2.1</option>
1021 </optgroup><optgroup label="Minified">
1022 <option value="164">Minified 1.0 beta1</option>
1023 </optgroup><optgroup label="MithrilJS">
1024 <option value="273">MithrilJS 0.2.0</option>
1025 <option value="390">MithrilJS 1.1.6</option>
1026 </optgroup><optgroup label="Mootools">
1027 <option value="59">Mootools (nightly)</option>
1028 <option value="62">Mootools 1.3.2</option>
1029 <option value="63">Mootools 1.3.2 (compat)</option>
1030 <option value="95">Mootools 1.4.5</option>
1031 <option value="96">Mootools 1.4.5 (compat)</option>
1032 <option value="216">Mootools 1.5.1</option>
1033 <option value="263">Mootools 1.5.2</option>
1034 <option value="329">Mootools 1.5.2 (compat)</option>
1035 <option value="325">Mootools 1.6.0</option>
1036 <option value="327">Mootools 1.6.0 (compat)</option>
1037 </optgroup><optgroup label="No-Library">
1038 <option value="11" selected="">No-Library (pure JS)</option>
1039 </optgroup><optgroup label="OpenUI5">
1040 <option value="271">OpenUI5 (latest, mobile)</option>
1041 </optgroup><optgroup label="Paper.js">
1042 <option value="158">Paper.js 0.22</option>
1043 </optgroup><optgroup label="Pixi">
1044 <option value="315">Pixi 3.0.11</option>
1045 <option value="331">Pixi 4.0.0</option>
1046 </optgroup><optgroup label="Processing.js">
1047 <option value="67">Processing.js 1.2.3</option>
1048 <option value="81">Processing.js 1.3.6</option>
1049 <option value="135">Processing.js 1.4.1</option>
1050 <option value="206">Processing.js 1.4.7</option>
1051 </optgroup><optgroup label="Prototype">
1052 <option value="4">Prototype 1.6.1.0</option>
1053 <option value="265">Prototype 1.7.3</option>
1054 </optgroup><optgroup label="RactiveJS">
1055 <option value="287">RactiveJS 0.7.3</option>
1056 </optgroup><optgroup label="Raphael">
1057 <option value="30">Raphael 1.4</option>
1058 <option value="36">Raphael 1.5.2</option>
1059 <option value="76">Raphael 2.1.0</option>
1060 </optgroup><optgroup label="React">
1061 <option value="159">React 0.3.2</option>
1062 <option value="166">React 0.4.0</option>
1063 <option value="184">React 0.8.0</option>
1064 <option value="192">React 0.9.0</option>
1065 <option value="285">React 0.14.3</option>
1066 </optgroup><optgroup label="RightJS">
1067 <option value="45">RightJS 2.1.1</option>
1068 <option value="136">RightJS 2.3.1</option>
1069 </optgroup><optgroup label="Riot">
1070 <option value="382">Riot 3.7.4</option>
1071 </optgroup><optgroup label="Shipyard">
1072 <option value="99">Shipyard (nightly)</option>
1073 <option value="105">Shipyard 0.2</option>
1074 </optgroup><optgroup label="Thorax">
1075 <option value="143">Thorax 2.0.0rc3</option>
1076 <option value="174">Thorax 2.0.0rc6</option>
1077 </optgroup><optgroup label="Three.js">
1078 <option value="82">Three.js r54</option>
1079 <option value="399">Three.js 105</option>
1080 </optgroup><optgroup label="Underscore">
1081 <option value="111">Underscore 1.3.3</option>
1082 <option value="133">Underscore 1.4.3</option>
1083 <option value="160">Underscore 1.4.4</option>
1084 <option value="267">Underscore 1.8.3</option>
1085 </optgroup><optgroup label="Vue">
1086 <option value="236">Vue (edge)</option>
1087 <option value="289">Vue 1.0.12</option>
1088 <option value="344">Vue 2.2.1</option>
1089 </optgroup><optgroup label="WebApp Install">
1090 <option value="142">WebApp Install 0.1</option>
1091 </optgroup><optgroup label="XTK">
1092 <option value="106">XTK edge</option>
1093 </optgroup><optgroup label="YUI">
1094 <option value="9">YUI 2.8.0r4</option>
1095 <option value="102">YUI 3.5.0</option>
1096 <option value="118">YUI 3.6.0</option>
1097 <option value="123">YUI 3.7.3</option>
1098 <option value="130">YUI 3.8.0</option>
1099 <option value="153">YUI 3.10.1</option>
1100 <option value="182">YUI 3.14.0</option>
1101 <option value="204">YUI 3.16.0</option>
1102 <option value="230">YUI 3.17.2</option>
1103 </optgroup><optgroup label="Zepto">
1104 <option value="90">Zepto 1.0rc1</option>
1105 </optgroup><optgroup label="jQuery">
1106 <option value="46">jQuery (edge)</option>
1107 <option value="131">jQuery 1.9.1</option>
1108 <option value="248">jQuery 2.1.3</option>
1109 <option value="319">jQuery 2.2.4</option>
1110 <option value="376">jQuery 3.2.1</option>
1111 <option value="384">jQuery 3.3.1</option>
1112 <option value="401">jQuery 3.4.1</option>
1113 </optgroup><optgroup label="jQuery Slim">
1114 <option value="407">jQuery Slim 3.2.1</option>
1115 <option value="405">jQuery Slim 3.3.1</option>
1116 <option value="403">jQuery Slim 3.4.1</option>
1117 </optgroup><optgroup label="jTypes">
1118 <option value="165">jTypes 2.1.0</option>
1119 </optgroup><optgroup label="qooxdoo">
1120 <option value="127">qooxdoo 2.0.3</option>
1121 <option value="126">qooxdoo 2.1</option>
1122 </optgroup><optgroup label="svg.js">
1123 <option value="395">svg.js 2.6.5</option>
1124 <option value="393">svg.js 2.7.1</option>
1125 <option value="391">svg.js 3.0.5</option>
1126 </optgroup></select>
1127 <label>
1128 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
1129 </label>
1130 </div>
1131
1132 <ul id="js_dependency">
1133
1134 </ul>
1135</div>
1136
1137<h3>Load type</h3>
1138<div class="selectCont">
1139 <select name="js_wrap" id="id_js_wrap">
1140 <option value="l">On Load</option>
1141 <option value="d">On DOM Ready</option>
1142 <option value="h">No wrap - bottom of <head></option>
1143 <option value="b" selected="">No wrap - bottom of <body></option>
1144 </select>
1145 <label>
1146 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
1147 </label>
1148</div>
1149
1150<h3>Framework <script> attribute</h3>
1151<p class="libraryTagAttributes">
1152 <label>
1153 <input id="id_js_lib_option" type="text" name="js_lib_option" maxlength="255" placeholder="ie. data-type=""" value="">
1154 </label>
1155</p>
1156
1157</div> <!-- /windowSettings -->
1158
1159<div class="windowSettings css hidden" data-panel="css" data-popover-ref="css">
1160 <h3>Language</h3>
1161<div class="selectCont">
1162 <select name="panel_css" class="panelChoice" id="panel_css_choice" data-panel_id="id_code_css" data-panel="css">
1163 <option data-mime-type="text/css" value="0" selected="">CSS</option>
1164 <option data-mime-type="text/x-scss" value="1">SCSS</option>
1165 <option data-mime-type="text/x-sass" value="2">SASS</option>
1166 <option data-mime-type="text/css" value="4">PostCSS (Stage 0+)</option>
1167 </select>
1168 <label>
1169 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
1170 </label>
1171</div> <!-- /selectCont -->
1172
1173<h3>Options</h3>
1174<p id="normalize_check">
1175 <label class="checkboxCont">
1176 <input type="checkbox" name="normalize_css" id="id_normalize_css" value="1">
1177 <span class="checkbox"><i class="bts bt-check"></i></span> Normalized CSS
1178 </label>
1179</p>
1180
1181</div> <!-- /windowSettings -->
1182
1183<div id="problem-banner"></div>
1184
1185
1186 </div> <!-- #content -->
1187
1188
1189 </main> <!-- #layout-container -->
1190
1191 <div id="loader">
1192 <svg class="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46 33">
1193 <g stroke-width="1" fill="none" fill-rule="evenodd">
1194 <path class="cloud" d="M45,22.7331459 C45,19.1499462 42.7950446,16.079593 39.6628004,14.7835315 C39.6774469,14.5246474 39.7003932,14.2674038 39.7003932,14.0035978 C39.7003932,6.82243304 33.8412885,1 26.611593,1 C21.3985635,1 16.9102123,4.03409627 14.8051788,8.41527616 C13.7828502,7.62878013 12.503719,7.15547161 11.1134367,7.15547161 C7.77825654,7.15547161 5.07450503,9.84159999 5.07450503,13.1544315 C5.07450503,13.7760488 5.16938207,14.3779791 5.3477444,14.9418479 C2.74863428,16.4787471 1,19.2867709 1,22.5105187 C1,27.3287502 4.89630545,31.2367856 9.72803666,31.31094 L36.3341301,31.3109406 C41.1201312,31.3406346 45,27.4870665 45,22.7331459 L45,22.7331459 Z" stroke-linejoin="round"></path>
1195
1196 <path class="loop" d="M25.3570852,17.8208603
1197 C26.0154526,17.1207706 27.1652748,15.6666667 29.5167986,15.6666667
1198 C32.1278053,15.6666667 34.2444444,17.6366138 34.2444444,20.0666667
1199 C34.2444444,22.4967196 32.1278053,24.4666667 29.5167986,24.4666667
1200 C26.9249697,24.4666667 24.5595344,21.7145959 23.4888889,20.543316
1201 C21.4404656,18.4187374 19.0750303,15.6666667 16.4832014,15.6666667
1202 C13.8721947,15.6666667 11.7555556,17.6366138 11.7555556,20.0666667
1203 C11.7555556,22.4967196 13.8721947,24.4666667 16.4832014,24.4666667
1204 C18.8347252,24.4666667 19.9845474,23.0125628 20.6429148,22.312473
1205 L25.3570852,17.8208603" stroke-linecap="round"></path>
1206 </g>
1207 </svg>
1208 <span class="shadow"></span>
1209 </div>
1210
1211 <div id="no-support">IE is no longer supported ?</div>
1212 </form>
1213
1214 <script>
1215 window.addEventListener("DOMContentLoaded", function(){
1216 var loadEditor = function(){
1217 var csrfToken = Cookie.read("csrftoken")
1218
1219 Layout.skin = "light"
1220
1221 $extend(Layout, new Events())
1222
1223 Actions = new EditorActions({
1224 example_id: EditorConfig.fiddle.id
1225 })
1226
1227
1228 Layout.render()
1229
1230 Layout.updateFromMirror()
1231 document.querySelector("#run").fireEvent("click")
1232
1233 // all fully loaded
1234 document.body.classList.add("fullyLoaded")
1235 }
1236
1237 var themeHref = "/css/dist-editor-dark.css?cd929fabb1741ef9451c7a2bfb30f2ea38557e67"
1238 var script = document.createElement("script")
1239 script.src = "/js/_dist-editor.js?cd929fabb1741ef9451c7a2bfb30f2ea38557e67"
1240
1241 var styleEditor = document.createElement("link")
1242 styleEditor.rel = "stylesheet"
1243 styleEditor.type = "text/css"
1244 styleEditor.id = "editor-theme"
1245 styleEditor.href = themeHref
1246 document.body.appendChild(styleEditor)
1247
1248 // Check if browser is supported
1249 if (window.navigator.userAgent.indexOf("Trident/") > 0){
1250 if (confirm("IE is not supported.\n\nLaunch fiddle in read-only mode?")){
1251 document.location.href = document.location.href + "embedded/result,css,html,js"
1252 } else {
1253 document.body.classList.add("noSupport")
1254 }
1255 } else {
1256 script.onload = loadEditor
1257 styleEditor.onload = function(){
1258 document.body.appendChild(script)
1259 }
1260 }
1261 })
1262 </script>
1263
1264
1265
1266
1267<div id="app-updates-highlighter"></div><link rel="stylesheet" type="text/css" id="editor-theme" href="./KML Feature Details - JSFiddle_files/dist-editor-dark.css"><script src="./KML Feature Details - JSFiddle_files/_dist-editor.js"></script><div class="autocomplete-suggestions " style="left: 0px; top: 1px; width: 0px;"></div></body></html>