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
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
| <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Adapte de http://www.carto.net/papers/svg/navigationTools/index.svg le 13/06/2006-->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
<!--
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
-->
<!ATTLIST svg
xmlns:attrib CDATA #IMPLIED
xmlns:batik CDATA #IMPLIED
>
<!ATTLIST g
batik:static CDATA #IMPLIED
>
<!ATTLIST image
batik:static CDATA #IMPLIED
>
<!ATTLIST path
batik:static CDATA #IMPLIED
>
]>
<?AdobeSVGViewer save="snapshot"?>
<?xml-stylesheet href="style/style.css" type="text/css"?>
<?xml-stylesheet href="style/styleImage.css" type="text/css"?>
<svg viewBox="0 0 1650 1050" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:attrib="http://www.carto.net/attrib" xmlns:batik="http://xml.apache.org/batik/ext" onload='initGlobal(evt);' >
<!-- don't forget to adopt the pathes to the scripts, or you'll receive a plethora of error messages -->
<script type="text/ecmascript" xlink:href="scripts/helper_functions.js"/>
<script type="text/ecmascript" xlink:href="scripts/mapApp.js"/>
<script type="text/ecmascript" xlink:href="scripts/timer.js"/>
<script type="text/ecmascript" xlink:href="scripts/slider.js"/>
<script type="text/ecmascript" xlink:href="scripts/button.js"/>
<script type="text/ecmascript" xlink:href="scripts/checkbox_and_radiobutton.js"/>
<script type="text/ecmascript" xlink:href="scripts/navigation.js"/>
<script type="text/ecmascript" xlink:href="scripts/copy_DOM_Tree.js"/>
<script type="text/ecmascript" xlink:href="scripts/insererImage.js"/>
<script type="text/ecmascript" xlink:href="scripts/debug.js"/>
<script type="text/ecmascript" xlink:href="scripts/functionalities.js"/>
<script type="text/ecmascript" xlink:href="scripts/updateData.js"/>
<script type="text/ecmascript"><![CDATA[
//global variables for mapApp and map object
var myMapApp = new mapApp();
var myMainMap;
function initGlobal(evt) {
//dynamic layer array that allow loading from database
var dynamicLayers = new Array();
//initialize digiLayers (layers that allow digitizing)
var digiLayers = new Array();
//define some styles for the map object
var zoomRectStyles = {"fill":"none","stroke":"crimson","stroke-width":0.002,"stroke-dasharray":"0.012,0.002"};
var highlightStyles = {"stroke":"crimson","stroke-width":0.002};
var dragRectStyles = {"fill":"lightskyblue","fill-opacity":0.5};
//initialize myMainMap object, you need to adopt the parameters here
//init level for layers im pictures
var richMin=0;
var richMax=1000;
var richLevel=richMin;
var moreorless=100;
myMainMap = new map("mainMap",moreorless,richLevel,richMax,richMin,1400,10,0.8,0,26911,"",1,true,"coordX","coordY",dynamicLayers,digiLayers,"",zoomRectStyles,highlightStyles,dragRectStyles,"referenceMap","myDragCrossSymbol",200);
//create zoom slider
myMapApp.zoomSlider = new slider(170,75,myMainMap.minWidth,170,165,myMainMap.maxWidth,myMainMap.maxWidth,"mapZoomSlider","dimgray",2,10,"sliderSymbol",myMapApp.refMapDragger,true);
//now initialize buttons
myMapApp.buttons = new Array();
//button styles, adopt the style settings to match your needs
var buttonTextStyles = {"font-family":"Arial,Helvetica","fill":"dimgray","font-size":15};
var buttonStyles = {"fill":"white"};
var shadeLightStyles = {"fill":"rgb(235,235,235)"};
var shadeDarkStyles = {"fill":"dimgray"};
//button instance creation
//groupId,functionToCall,buttonType,buttonText,buttonSymbolId,x,y,width,height,textStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,shadowOffset
myMapApp.buttons["zoomIn"] = new button("zoomIn",zoomImageButtons,"rect",undefined,"magnifyerZoomIn",160,47,25,25,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
myMapApp.buttons["zoomOut"] = new button("zoomOut",zoomImageButtons,"rect",undefined,"magnifyerZoomOut",160,173,25,25,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
myMapApp.buttons["infoButton"] = new switchbutton("infoButton",zoomImageSwitchButtons,"rect",undefined,"infoBut",0,235,25,25,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
myMapApp.buttons["infoButton"].setSwitchValue(true,false);
statusChange("Mode: Infomode");
myMapApp.buttons["zoomFull"] = new button("zoomFull",zoomImageButtons,"rect",undefined,"magnifyerFull",30,235,25,25,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
myMapApp.buttons["zoomManual"] = new switchbutton("zoomManual",zoomImageSwitchButtons,"rect",undefined,"magnifyerManual",60,235,25,25,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
myMapApp.buttons["panManual"] = new switchbutton("panManual",zoomImageSwitchButtons,"rect",undefined,"symbPan",90,235,25,25,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
myMapApp.buttons["recenterMap"] = new switchbutton("recenterMap",zoomImageSwitchButtons,"rect",undefined,"symbRecenter",120,235,25,25,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
//button for layers
myMapApp.buttons["richIn"] = new button("richIn",richImageButtons,"rect",undefined,"richMore",150,235,25,25,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
myMapApp.buttons["richOut"] = new button("richOut",richImageButtons,"rect",undefined,"richLess",180,235,25,25,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
//see if we need to disable buttons
myMainMap.checkButtons();
var labeltextStyles = {"font-family":"Arial,Helvetica","fill":"dimgray","font-size":15};
//load function specific to the current map project
loadProjectSpecific();
// set good rich level
richImageButtons('null');
}
//this function is called after each pan or zoom or change of map extent
//you can place project specific functions here that need to react on the map extent, e.g. adopting line-widths, loading additional data, etc.
function loadProjectSpecific() {
}
//this function toggles the visibility of a map layer
function toggleMapLayer(id,checkStatus,labelText) {
var mapLayer = document.getElementById(id);
var visibleStatus = "hidden";
if (checkStatus) {
visibleStatus = "visible";
}
mapLayer.setAttributeNS(null,"visibility",visibleStatus);
}
//this function demonstrates the highlight mode of the map
function highlightMap(id,evt,buttonState,buttonText) {
if (buttonState) {
myMapApp.buttons["highlightButton"].setTextValue("Hide Halfdome");
myMainMap.highlightPosition(276810,4180645,true);
}
else {
myMapApp.buttons["highlightButton"].setTextValue("Show Halfdome");
myMainMap.hideHighlightCross();
}
}
]]></script>
<defs>
<!-- Symbols for checkboxes -->
<symbol id="checkBoxRect" overflow="visible">
<rect x="-6" y="-6" width="12" height="12" fill="white" stroke="dimgray" stroke-width="1.5"/>
</symbol>
<symbol id="checkBoxCross" overflow="visible" fill="none" stroke="dimgray" stroke-width="1" pointer-events="none">
<line x1="-5" y1="-5" x2="5" y2="5"/>
<line x1="-5" y1="5" x2="5" y2="-5"/>
</symbol>
<!-- Symbols for Zoom Magnifyer glasses -->
<symbol id="magnifyerFull" overflow="visible">
<text y="7.5" font-family="Arial,Helvetica" fill="dimgray" font-size="18px" font-weight="bold" text-anchor="middle" pointer-events="none">F</text>
</symbol>
<symbol id="infoBut" overflow="visible">
<circle fill="none" stroke="dimgray" stroke-width="1.5" r="7.5" />
<text y="5" font-family="Arial,Helvetica" font-size="13px" font-weight="bold" fill="dimgray" text-anchor="middle" pointer-events="none">i</text>
</symbol>
<symbol id="magnifyerManual" overflow="visible" fill="none" stroke="dimgray" stroke-width="1.5">
<rect x="-6" y="-6" width="12" height="12" stroke-dasharray="1.5,1.5"/>
<line x1="-3" y1="0" x2="3" y2="0" />
<line x1="0" y1="-3" x2="0" y2="3" />
</symbol>
<symbol id="magnifyerZoomIn" overflow="visible" fill="none" stroke="dimgray" stroke-width="2">
<line x1="-4" y1="0" x2="4" y2="0"/>
<line x1="0" y1="-4" x2="0" y2="4"/>
</symbol>
<symbol id="magnifyerZoomOut" overflow="visible">
<line x1="-4" y1="0" x2="4" y2="0" fill="none" stroke="dimgray" stroke-width="2" />
</symbol>
<!-- Symbols for Layers Visibility -->
<symbol id="richMore" overflow="visible" fill="none" stroke="dimgray" stroke-width="2">
<text y="5" font-family="Arial,Helvetica" font-size="13px" font-weight="bold" fill="dimgray" text-anchor="middle" pointer-events="none">Z+</text>
</symbol>
<symbol id="richLess" overflow="visible" fill="none" stroke="dimgray" stroke-width="2">
<text y="5" font-family="Arial,Helvetica" font-size="13px" font-weight="bold" fill="dimgray" text-anchor="middle" pointer-events="none">Z-</text>
</symbol>
<!-- hand symbol for panning -->
<symbol id="symbPan" overflow="visible">
<path transform="scale(1.2)" fill="none" stroke="dimgray" stroke-width="1" d="M-2 6 C -2.2 2.5 -8.0 -0 -5.7 -1.9 C -4.3 -2.5 -3.3 -0.5 -2.5 0.7 C -3.2 -2.1 -5.5 -5.2 -3.6 -5.8 C -2.1 -6.3 -1.6 -3.6 -1.1 -1.9 C -0.9 -4.2 -1.6 -6.4 -0.2 -6.6 C 1.4 -6.8 0.9 -3 1.1 -1.9 C 1.5 -3.5 1.2 -6.1 2.5 -6.1 C 3.9 -6.1 3.5 -3.2 3.6 -1.6 C 4 -2.9 4.1 -4.3 5.3 -4.4 C 7.3 -3.5 4 2.2 3 6z"/>
</symbol>
<!-- Symbol for Arrows -->
<symbol id="symbArrow" overflow="visible">
<polyline fill="none" stroke="dimgray" stroke-width="1" points="-3,-6 3,-6 3,1 5,1 0,7 -5,1 -3,1 -3,-5"/>
</symbol>
<symbol id="symbArrowLeft" overflow="visible">
<use xlink:href="#symbArrow" transform="rotate(90)" />
</symbol>
<symbol id="symbArrowRight" overflow="visible">
<use xlink:href="#symbArrow" transform="rotate(-90)" />
</symbol>
<!-- Symbol for Recentering Map -->
<symbol id="symbRecenter" overflow="visible">
<circle fill="dimgray" cx="0" cy="0" r="1" pointer-events="none"/>
<g fill="none" stroke="dimgray" stroke-width="1.5" pointer-events="none">
<line x1="-7" y1="-7" x2="-3" y2="-3"/>
<line x1="7" y1="7" x2="3" y2="3"/>
<line x1="-7" y1="7" x2="-3" y2="3"/>
<line x1="7" y1="-7" x2="3" y2="-3"/>
</g>
</symbol>
<!-- Symbol for Slider -->
<symbol id="sliderSymbol" overflow="visible" pointer-events="none">
<line x1="0" y1="-5" x2="0" y2="5" fill="none" stroke="dimgray" stroke-width="5"/>
</symbol>
<!-- Symbol for Dragging if zoomed in far -->
<symbol id="myDragCrossSymbol" overflow="visible" stroke-width="40" fill="none" stroke="red" pointer-events="none">
<line x1="-200" y1="0" x2="-100" y2="0"/>
<line x1="200" y1="0" x2="100" y2="0"/>
<line x1="0" y1="-100" x2="0" y2="-200"/>
<line x1="0" y1="100" x2="0" y2="200"/>
</symbol>
<!-- Marker for Extent-Arrows -->
<marker id="myStartArrow" overflow="visible" orient="auto">
<polyline fill="dimgray" points="-0.5,0 8,-2 8,2"/>
</marker>
<marker id="myEndArrow" overflow="visible" orient="auto">
<polyline fill="dimgray" points="0.5,0 -8,-2 -8,2"/>
</marker>
</defs>
<title>SVG NavigationTools</title>
<!-- this is a background rectangle that is used to ensure that the svg root element receives all mouse events, please adopt the fill attribute to match your desired background color -->
<!--<rect x="-500" y="-500" width="3000" height="3000" stroke="none" fill="aliceblue" />
-->
<!-- Main Map Frame -->
<rect x="5" y="5" width="1400" height="1050" stroke-witdh="10" stroke="red" fill="none"/>
<svg id="mainMap" x="5" y="5" viewBox="0 0 1400 1050" width="1400" height="1050" cursor="crosshair">
<rect x="0" y="0" width="1400" height="1050" fill="none" stroke="green" />
<!-- this group is necessary for manual panning, it temporarily gets a translate transformation which is later removed on mouseup -->
<g id="mainMapGroup" transform="translate(0,0)">
<!-- within this group you should place all map layers, usually, if you have more than one element in a map layer, you would use a group instead of a single element, as in this example -->
<svg id="imageSVG" viewBox="0 0 800 600" contentScriptType="text/ecmascript" width="1400" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" contentStyleType="text/css" height="1050" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" version="1.0">
<defs>
<filter xlink:type="simple" xlink:actuate="onLoad" id="filtre" xlink:show="other" xmlns:xlink="http://www.w3.org/1999/xlink">
<feGaussianBlur stdDeviation="2" in="SourceAlpha" result="blur"/>
<feOffset dx="2" dy="2" in="blur" result="offsetBlur"/>
<feSpecularLighting specularConstant="1" specularExponent="75" result="specOut" in="blur" surfaceScale="2" lighting-color="white">
<fePointLight x="-5000" y="-10000" z="20000"/>
</feSpecularLighting>
<feComposite in2="SourceAlpha" operator="in" in="specOut" result="specOut"/>
<feComposite result="litPaint" in="SourceGraphic" k1="0" k2="1" k3="1" k4="0" in2="specOut" operator="arithmetic"/>
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="litPaint"/>
</feMerge>
</filter>
<radialGradient gradientTransform="" xmlns:xlink="http://www.w3.org/1999/xlink" id="radial0" gradientUnits="objectBoundingBox" spreadMethod="pad" xlink:show="other" xlink:type="simple" r="50%" cx="50%" fx="50%" fy="50%" cy="50%" xlink:actuate="onLoad">
<stop offset="0%" style="stop-color:navy;stop-opacity:1;"/>
<stop offset="0%" style="stop-color:blue;stop-opacity:1;"/>
<stop offset="0%" style="stop-color:#000000;stop-opacity:1;"/>
<stop offset="10%" style="stop-color:steelblue;stop-opacity:1;"/>
<stop offset="10%" style="stop-color:royalblue;stop-opacity:1;"/>
<stop offset="14%" style="stop-color:blue;stop-opacity:1;"/>
<stop offset="14%" style="stop-color:navy;stop-opacity:1;"/>
<stop offset="16%" style="stop-color:steelblue;stop-opacity:1;"/>
<stop offset="16%" style="stop-color:midnightblue;stop-opacity:1;"/>
<stop offset="18%" style="stop-color:steelblue;stop-opacity:1;"/>
<stop offset="99%" style="stop-color:dodgerblue;stop-opacity:1;"/>
</radialGradient>
<linearGradient gradientTransform="" xmlns:xlink="http://www.w3.org/1999/xlink" id="lineaire1" gradientUnits="objectBoundingBox" spreadMethod="pad" xlink:show="other" xlink:type="simple" x1="0%" y1="0%" y2="100%" x2="0%" xlink:actuate="onLoad">
<stop offset="0%" style="stop-color:saddlebrown;stop-opacity:1;"/>
<stop offset="17%" style="stop-color:brown;stop-opacity:1;"/>
<stop offset="25%" style="stop-color:saddlebrown;stop-opacity:1;"/>
<stop offset="47%" style="stop-color:lightslategrey;stop-opacity:1;"/>
<stop offset="59%" style="stop-color:saddlebrown;stop-opacity:1;"/>
</linearGradient>
</defs>
<g transform="scale(1)">
<g id="1" type="layer" zmax="1000" zmin="0" visibility="visible">
<rect x="-21" width="871" y="-12" height="785" style="stroke:#000000;fill:lightskyblue;"/>
<path d="M-28 489L-40 448C21 273 -11 307 120 186C245 242 305 246 283 403C236 298 259 509 339 438C385 348 355 509 361 461C275 559 341 420 395 419C331 537 448 370 424 398C400 426 481 330 470 348C459 366 520 236 600 294C680 340 709 431 710 411C711 391 683 297 759 347C703 458 755 497 786 447C811 419 782 499 860 492L857 510C836 554 846 511 880 554L838 601L-31 608C-26 494 3 596 -26 485" style="stroke:none;fill:seagreen;stroke-opacity:0;" filter="url(#filtre)"/>
</g>
<g id="2" type="layer" zmax="300" zmin="0" visibility="visible">
<ellipse style="stroke:#000000;fill:gold;" filter="url(#filtre)" rx="72" cx="615" cy="90" ry="73"/>
<path d="M116 181L215 225L196 241L176 224L163 233L145 218L129 234L121 218L93 234L83 221L108 188Z" style="stroke:#000000;fill:cornsilk;" filter="url(#filtre)"/>
</g>
<g id="3" type="layer" zmax="600" zmin="200" visibility="hidden">
<path d="M127 49Q214 11 168 35C132 77 170 113 200 27C280 -19 323 87 254 71C368 79 172 118 250 98C332 73 304 155 249 111C186 95 267 175 219 150C231 119 229 220 169 144C160 177 87 170 115 156C143 142 120 92 80 117C40 142 71 51 102 81C133 111 73 5 207 28L185 110Z" style="stroke:#000000;fill:snow;stroke-opacity:0;" filter="url(#filtre)"/>
<path id="0" d="M549.7286376953125 74.77405548095703Q591 -24 520.8536376953125 63.70292663574219C546.207275390625 96.91632080078125 519.4451293945312 125.38493347167969 498.31707763671875 57.37657165527344C441.9755859375 21 353 97 460.28656005859375 92.17155456542969C380 98.49790954589844 518.03662109375 129.3389129638672 463.1036376953125 113.52301025390625C405.3536376953125 93.75314331054688 425.07318115234375 158.59832763671875 463.80792236328125 123.8033447265625C508.17681884765625 111.150634765625 378 191 484.93597412109375 154.64434814453125C476.4847412109375 130.1297149658203 477.893310546875 210 520.1494140625 149.8995819091797C526.48779296875 175.99581909179688 469 213 534 196C688 195 554.6585693359375 108.77824401855469 582.8292236328125 128.54811096191406C644 86 589.167724609375 76.35564422607422 567.3353271484375 100.07948303222656C545.5030517578125 123.8033447265625 587.7591552734375 39.97908020019531 493.38720703125 58.16736602783203L508.881103515625 123.01255798339844Z" style="stroke:#000000;fill:snow;stroke-opacity:0;" filter="url(#filtre)"/>
</g>
<g id="4" type="layer" zmax="1000" zmin="500" visibility="hidden"><ellipse style="stroke:#000000;fill:url(#radial0);" filter="none" rx="629" cx="454" cy="618.5" ry="70.5"/>
</g>
<g id="5" type="layer" zmax="1000" zmin="600" visibility="hidden">
<rect x="470" y="499" width="43" style="fill:saddlebrown;stroke:#000000;" filter="none" height="24"/>
<rect x="496" y="499" width="43" style="fill:saddlebrown;stroke:#000000;" filter="none" id="9" height="24"/>
<rect x="491" y="459" width="10" style="fill:saddlebrown;stroke:#000000;" filter="url(#filtre)" height="64"/>
<path style="fill:saddlebrown;stroke:#000000;" d="M386 523L422 561L530 562L584 523L384 523Z"/>
</g>
<g id="6" type="layer" zmax="1000" zmin="700" visibility="hidden">
<path d="M493 458Q489 430 501 391Q503 348 545 329Q572 314 587 279Q646 361 567 369Q523 442 498 455Q500 459 497 458Z" style="stroke:#000000;fill:#ccccff;opacity:0.65;" filter="url(#filtre)"/>
</g>
</g>
</svg>
</g>
</svg>
<!-- Zone d'affichage des boutons de navigation, et autres...-->
<g transform="translate(1410,0)">
<!-- this group holds navigation, title and if you like, legend information -->
<g>
<!-- your map title -->
<text font-family="Arial,Helvetica" fill="dimgray" font-size="27px" font-weight="bold" x="10" y="30" pointer-events="none">Map Title</text>
<!-- coordinate display -->
<g font-family="Arial,Helvetica" fill="dimgray" font-size="21px" pointer-events="none">
<text id="coordX" x="50" y="355">X:</text>
<text id="coordY" x="50" y="385">Y:</text>
</g>
<!-- display width and height of map extent -->
<!--Ca sert a rien, on vire.... ouais mais ca fait planter alors......... -->
<g>
<!-- vertical line, displays current height of map extent -->
<!--<line stroke="dimgray" stroke-width="1.5" marker-start="url(#myStartArrow)" marker-end="url(#myEndArrow)" x1="561" y1="15" x2="561" y2="715"/>-->
<!--<rect fill="aliceblue" x="555" y="330" width="12" height="70"/>-->
<text id="myScaleTextH" font-family="Arial,Helvetica" fill="dimgray" font-size="15px" text-anchor="middle" transform="translate(556,365),rotate(90)" pointer-events="none"></text>
<!-- horizontal line, displays current width of map extent -->
<!--<line stroke="dimgray" stroke-width="1.5" marker-start="url(#myStartArrow)" marker-end="url(#myEndArrow)" x1="0" y1="723" x2="553.1" y2="723"/>-->
<!--<rect fill="aliceblue" x="242" y="717" width="70" height="12"/>-->
<text id="myScaleTextW" font-family="Arial,Helvetica" fill="dimgray" font-size="15px" text-anchor="middle" transform="translate(277,728)" pointer-events="none"></text>
<!-- small rectangle in lower right corner, onclick displays current map extent in real world coordinates -->
<!--<rect fill="dimgray" x="558.5" y="720.5" width="5" height="5" onclick="showExtent()" />-->
</g>
<!-- control map layer visibility with checkBoxes -->
<g transform="translate(0, 400)" id="checkBoxes">
<!-- <text font-family="Arial,Helvetica" fill="dimgray" font-size="24px" font-weight="bold" x="10" y="0" pointer-events="none">Affichage des Couches</text> -->
<!-- the checkbox geometries will be added here -->
</g>
<!-- map impressum and status Bar -->
<g >
<!-- text with this id is required to show help texts -->
<text id="statusTextBar" x="10" y="300" fill="dimgray" font-family="Arial,Helvetica" font-weight="bold" font-size="18px">Statusbar:</text>
<text id="statusText" x="10" y="330" fill="dimgray" font-family="Arial,Helvetica" font-weight="bold" font-size="18px">Your Status Text</text>
<!--
<text x="0" y="760">Map Author: Your Name, 2004</text>
<text x="310" y="760">Source: Your datasources</text>
-->
</g>
</g>
<!-- small reference map, shares the same coordinate system than the main map -->
<!-- it is very recommended that the width and height of the nested svg element has the same ratio as the viewBox width and height -->
<rect x="0" y="65" width="140" height="105" stroke="red" fill="none"/>
<svg id="referenceMap" x="0" y="65" viewBox="0 0 1400 1050" width="140" height="105">
<!-- here you can place any graphical elements for your reference/overview map -->
<image id="miniImage" x="0" y="" width="1400" height="1050" xlink:href="images/p400win13.PNG" batik:static="true"/>
</svg>
<!-- this group holds the zoom slider and buttons -->
<g>
<!-- empty group where zoomSlider is later appended -->
<g id="mapZoomSlider"/>
<text fill="dimgray" font-family="Arial,Helvetica" font-weight="bold" font-size="23px" x="10" y="218" pointer-events="none">Navigation</text>
<!-- button for zoom-in, above slider -->
<g id="zoomIn" cursor="pointer" />
<!-- button for zoom-out, below slider -->
<g id="zoomOut" cursor="pointer" />
<!-- info button -->
<g id="infoButton" cursor="pointer" />
<!-- button for full view (f) -->
<g id="zoomFull" cursor="pointer" />
<!-- button for manual zoom (rectangle) -->
<g id="zoomManual" cursor="pointer" />
<!-- button for manual pan -->
<g id="panManual" cursor="pointer" />
<!-- button for redefining map center -->
<g id="recenterMap" cursor="pointer" />
<!-- button for rich-out -->
<g id="richOut" cursor="pointer" />
<!-- button for rich-in -->
<g id="richIn" cursor="pointer" />
<!-- button for backwarding map extent (extent history) -->
<!-- <g id="backwardExtent" cursor="pointer" /> -->
<!-- button for forwarding map extent (extent history) -->
<!-- <g id="forwardExtent" cursor="pointer" /> -->
<!-- button for demonstrating highlight feature of the map -->
<g id="highlightMap" cursor="pointer" />
</g>
</g>
</svg> |
Aide sur tutoriel
Répondre avec citation
Partager