1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
|
<!DOCTYPE html>
<html>
<head>
<title>Test Page of CKEditor Leaflet Maps</title>
<script src="http://localhost/ckeditor/ckeditor.js"></script>
<style>
#cke_my_editor {
max-width: 1000px;
}
h4,
h5 {
font-family: sans-serif;
}
h4 {
color: rgb(117, 117, 117);
}
h5 {
color: rgb(212, 78, 211);
margin-bottom: 0px;
margin-top: -10px;
}
#languages {
margin-bottom: 20px;
margin-top: 3px;
}
#github-banner {
height: 149px;
width: 149px;
overflow: hidden;
padding: 0;
margin: 0;
position: fixed;
top: 0;
right: 0;
z-index: 99999;
}
#github-banner a {
display: block;
width: 190px;
font-size: 14px;
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT",
"Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma,
Geneva, "Helvetica Neue", Helvetica, Arial, sans serif;
background-color: #333;
color: #FFF;
word-spacing: 2px;
text-decoration: none;
padding: 5px 15px 5px 25px;
position: relative;
left: 20px;
top: -37px;
text-align: center;
-moz-transform-origin: 0 0;
-moz-transform: rotate(45deg);
-moz-box-shadow: 1px 1px 5px 1px #666;
-webkit-transform-origin: 0 0;
-webkit-transform: rotate(45deg);
-webkit-box-shadow: 1px 1px 5px 1px #666;
-ms-transform-origin: 0 0;
-ms-transform: rotate(45deg);
-ms-box-shadow: 1px 1px 5px 1px #666;
transform-origin: 0 0;
transform: rotate(45deg);
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
background-image: linear-gradient(bottom, #534E41 3%, #9E9B96 5%, #64625A 7%, #5C5A55 93%, #9E9B96 95%, #534E41 97%);
background-image: -o-linear-gradient(bottom, #534E41 3%, #9E9B96 5%, #64625A 7%, #5C5A55 93%, #9E9B96 95%, #534E41 97%);
background-image: -moz-linear-gradient(bottom, #534E41 3%, #9E9B96 5%, #64625A 7%, #5C5A55 93%, #9E9B96 95%, #534E41 97%);
background-image: -webkit-linear-gradient(bottom, #534E41 3%, #9E9B96 5%, #64625A 7%, #5C5A55 93%, #9E9B96 95%, #534E41 97%);
background-image: -ms-linear-gradient(bottom, #534E41 3%, #9E9B96 5%, #64625A 7%, #5C5A55 93%, #9E9B96 95%, #534E41 97%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.03, #534E41), color-stop(0.05, #9E9B96), color-stop(0.07, #64625A), color-stop(0.93, #5C5A55), color-stop(0.95, #9E9B96), color-stop(0.97, #534E41));
}
</style>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
</head>
<body>
<div id="github-banner"><a href="https://github.com/ranelpadon/ckeditor-leaflet" target="_blank">Fork me on
GitHub</a></div>
<form>
<h4>CKEditor Leaflet Maps Demo (scroll down the page to see the various examples)</h4>
<h5>Choose the language/translation to be used by the toolbar/plugins:</h5>
<script>
CKEDITOR_LANGS = [
{
code: 'eu',
name: 'Basque'
},
{
code: 'en',
name: 'English'
},
{
code: 'de',
name: 'German'
},
{
code: 'ru',
name: 'Russian'
},
];
document.write('<select disabled="disabled" id="languages" onchange="createEditor(this.value);">');
// Get the language list from the languages.js file.
for (var i = 0; i < CKEDITOR_LANGS.length; i++) {
document.write(
'<option value="' + CKEDITOR_LANGS[i].code + '">' + CKEDITOR_LANGS[i].name + '</option>'
);
}
document.write('</select>');
</script>
<div>
<textarea name="my_editor" id="my_editor" rows="5" cols="20">
<p>This is the <strong>House of Maps</strong> powered by <strong>CKEditor</strong>.</p>
<div id="leaflet_div-1" class="leaflet_div align-left" data-lat="14.6496465" data-lon="121.0474325" data-width="600" data-height="600" data-zoom="15" data-tile="OpenStreetMap.HOT" data-minimap="on" data-alignment="left" data-popup-text="Eye of Quezon Circle" data-responsive="">
<iframe scrolling="no" id="leaflet_iframe-1" class="leaflet_iframe" width="600px" height="600px" frameborder="0" allowtransparency="true" src="../scripts/mapParser.html?lat=14.6508560&lon=121.0491228&zoom=15&tile=OpenStreetMap.HOT&minimap=on&text=Eye%20of%20Quezon%20Circle">
</iframe>
</div>
<p>If you <strong>hover</strong> the mouse on the map, you will see the map's handle bar (cross hair) in the <strong>upper left corner</strong>
and you could double-click that to view or edit the map properties.</p>
<div id="leaflet_div-2" class="leaflet_div cke_widget_element align-left" data-lat="16.4023332" data-lon="120.5960071" data-width="300" data-height="300" data-zoom="7" data-tile="Esri.WorldTopoMap" data-minimap="off" data-alignment="left" data-popup-text="" data-responsive="">
<iframe scrolling="no" id="leaflet_iframe-2" class="leaflet_iframe" width="300px" height="300px" frameborder="0" allowtransparency="true" src="../scripts/mapParser.html?lat=16.4023332&lon=120.5960071&width=300&height=300&zoom=7&tile=Esri.WorldTopoMap&minimap=off&text="></iframe>
</div>
<p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />A sample of Aerial Map Tile, aligned to the right.</p>
<div id="leaflet_div-3" class="leaflet_div cke_widget_element align-right" data-lat="-25.274398" data-lon="133.775136" data-width="190" data-height="200" data-zoom="2" data-tile="MapQuestOpen.Aerial" data-minimap="off" data-alignment="right" data-popup-text="" data-responsive="">
<iframe scrolling="no" id="leaflet_iframe-3" class="leaflet_iframe" width="190px" height="200px" frameborder="0" allowtransparency="true" src="../scripts/mapParser.html?lat=-25.274398&lon=133.775136&width=200&height=200&zoom=2&tile=MapQuestOpen.Aerial&minimap=off&text="></iframe>
</div>
<p>Words in the middle of nowhere.<br /><br /><br /><br /><br /><br /><br /><br /></p>
<br />
<p>A sample of a centered map.</p>
<div id="leaflet_div-1399746577201" class="leaflet_div cke_widget_element align-center" data-lat="29.646923" data-lon="91.117212" data-width="800" data-height="400" data-zoom="6" data-tile="Esri.NatGeoWorldMap" data-minimap="off" data-alignment="center" data-popup-text="" data-responsive="">
<iframe scrolling="no" id="leaflet_iframe-1399746577201" class="leaflet_iframe" width="800px" height="400px" frameborder="0" allowtransparency="true" src="../scripts/mapParser.html?lat=29.646923&lon=91.117212&width=800&height=400&zoom=6&tile=Esri.NatGeoWorldMap&minimap=off&text=">
</iframe>
</div>
<br />
<p>A sample of a left-justified map. By default, a map will float to the left.</p>
<div id="leaflet_div-1399747688186" class="leaflet_div cke_widget_element align-left" data-lat="9.8349493" data-lon="118.7383615" data-width="300" data-height="420" data-zoom="7" data-tile="Stamen.Watercolor" data-minimap="off" data-popup-text="" data-responsive="">
<iframe scrolling="no" id="leaflet_iframe-1399747688186" class="leaflet_iframe" width="300px" height="420px" frameborder="0" allowtransparency="true" src="../scripts/mapParser.html?lat=9.8349493&lon=118.7383615&width=300&height=420&zoom=7&tile=Stamen.Watercolor&minimap=off&text=">
</iframe>
</div>
<p> <strong>Lateralus</strong> by Tool <br /><br />
Black then white are all I see in my infancy.
red and yellow then came to be, reaching out to me.
lets me see there is so much more
and beckons me to look through to these infinite possibilities.
As below, so above and beyond, I imagine
drawn outside the lines of reason.
Push the envelope. Watch it bend.<br /><br />
Over thinking, over analyzing separates the body from the mind.
Withering my intuition leaving all these opportunities behind.<br /><br />
Feed my will to feel this moment urging me to cross the line.
Reaching out to embrace the random.
Reaching out to embrace whatever may come.<br /><br />
I embrace my desire to
feel the rhythm, to feel connected
enough to step aside and weep like a widow
to feel inspired, to fathom the power,
to witness the beauty, to bathe in the fountain,
to swing on the spiral
of our divinity and still be a human.<br /><br />
</p>
<br><br><p> </p><p> </p><p>A Responsive Map (try to decrease the browser window width by 50%)</p><div id="leaflet_div-1451082032544" class="leaflet_div responsive-map align-left" data-lat="40.46366700000001" data-lon="-3.74922" data-width="400" data-height="400" data-zoom="16" data-popup-text="In The Heart of Spain" data-tile="Thunderforest.OpenCycleMap" data-minimap="on" data-alignment="left" data-responsive="on"><iframe scrolling="no" id="leaflet_iframe-1451082032544" class="leaflet_iframe responsive-map-iframe" width="400px" height="400px" frameborder="0" allowtransparency="true" src="../scripts/mapParser.html?lat=40.46366700000001&lon=-3.74922&width=400&height=400&zoom=16&text=In%20The%20Heart%20of%20Spain&tile=Thunderforest.OpenCycleMap&minimap=on&responsive=on"></iframe></div>
</textarea>
</div>
<script>
var leaflet = 'leaflet';
var relativePath = location.pathname;
var leafletIndex = relativePath.indexOf(leaflet);
var leafletPluginFolderRelativePath = relativePath.substring(0, leafletIndex);
// Load a local plugin in the CDN-hosted CKEditor.js core.
CKEDITOR.plugins.addExternal(leaflet, leafletPluginFolderRelativePath + leaflet + '/');
var config = CKEDITOR.config;
// Specify the custom key.
// Here's using my personal Google API key, it's the default value also.
// but not recommended for Production use.
// It's advised that you create your own key in your Google account.
config.leaflet_maps_google_api_key = 'GOOGLE_API_KEY_REMOVED';
// Activate the plugins.
config.extraPlugins = 'lineutils,widget,leaflet,sourcearea';
var editor;
function createEditor(languageCode) {
if (editor)
editor.destroy();
// Replace the <textarea id="my_editor"> with an CKEditor
// instance, using specified configurations.
editor = CKEDITOR.replace('my_editor', {
toolbar:
[
['Source'],
['Bold', 'Italic'],
['leaflet']
],
width: '100%',
height: 2350,
language: languageCode,
on: {
instanceReady: function () {
// Wait for the editor to be ready to set
// the language drop-down list.
var languages = document.getElementById('languages');
languages.value = this.langCode;
languages.disabled = false;
}
}
});
}
// At page startup, load the default language:
createEditor('');
</script>
</form>
</body>
</html>
|
