Ajout du répertoire de la carte leaflet.
This commit is contained in:
parent
e695d26f2c
commit
a9d6762d4b
|
|
@ -0,0 +1,110 @@
|
|||
opendir: file:///home/pi/Desktop/Carto/OceansPlastiques_gyres/css
|
||||
filegloblist: *.xml
|
||||
filegloblist: *.txt
|
||||
filegloblist: *.shtml
|
||||
filegloblist: *.py
|
||||
filegloblist: *.pl
|
||||
filegloblist: *.php
|
||||
filegloblist: *.js
|
||||
filegloblist: *.java
|
||||
filegloblist: *.htm
|
||||
filegloblist: *.html
|
||||
filegloblist: *.h
|
||||
filegloblist: *.css
|
||||
filegloblist: *.cpp
|
||||
filegloblist: *.cgi
|
||||
filegloblist: *.c
|
||||
filegloblist: *
|
||||
spell_check_default: 1
|
||||
display_right_margin: 1
|
||||
c2e.convert_special: 0
|
||||
e2c.convert_iso: 0
|
||||
autocomplete: 1
|
||||
snr_escape_chars: 0
|
||||
autoindent: 1
|
||||
convertcolumn_horizontally: 0
|
||||
view_line_numbers: 1
|
||||
searchlist: url
|
||||
searchlist: un beau
|
||||
searchlist: myIcon4
|
||||
searchlist: centre3
|
||||
searchlist: extension3
|
||||
searchlist: Encore
|
||||
searchlist: popup1
|
||||
sync_include_hidden: 0
|
||||
snr_replacetype: 0
|
||||
bookmarks_filename_mode: 0
|
||||
adv_open_recursive: 0
|
||||
ssearch_regex: 0
|
||||
ssearch_unescape: 0
|
||||
show_mbhl: 1
|
||||
view_blockstack: 1
|
||||
leftpanel_active_tab: 0
|
||||
default_mime_type: text/plain
|
||||
c2e.IE_apos_workaround: 0
|
||||
recent_files: file:///home/pi/Documents/Prof/TestsDivers/JS-CollisionDetection/index.html
|
||||
recent_files: file:///home/pi/Documents/Prof/TestsDivers/JS-CollisionDetection/js/monjs.js
|
||||
recent_files: file:///home/pi/Desktop/Carto/TestLeaflet/index.html
|
||||
recent_files: file:///home/pi/Desktop/Carto/TestLeaflet/js/monjs.js
|
||||
recent_files: file:///home/pi/Desktop/Carto/TestLeaflet/css/moncss.css
|
||||
recent_files: file:///home/pi/Desktop/Carto/OceansPlastiques_gyres/images/fleche.svg
|
||||
recent_files: file:///home/pi/Desktop/Carto/OceansPlastiques_gyres/images/leaf-solid-svgrepo-com.svg
|
||||
recent_files: file:///home/pi/Desktop/Carto/OceansPlastiques_D3/js/monjs.js
|
||||
recent_files: file:///home/pi/Desktop/Carto/OceansPlastiques/js/monjs.js
|
||||
recent_files: file:///home/pi/Desktop/Carto/TestLeafet2/js/monjs.js
|
||||
recent_files: file:///home/pi/Desktop/Carto/OceansPlastiques_cercle/js/monjs.js
|
||||
recent_files: file:///home/pi/Desktop/Carto/OceansPlastiques_gyres/js/monjs.js
|
||||
recent_files: file:///home/pi/Desktop/Carto/OceansPlastiques_gyres/index.html
|
||||
recent_files: file:///home/pi/Desktop/Carto/OceansPlastiques_gyres/css/moncss.css
|
||||
openfiles: /home/pi/Desktop/Carto/OceansPlastiques_gyres/css/moncss.css:379:0:0:
|
||||
openfiles: /home/pi/Desktop/Carto/OceansPlastiques_gyres/js/monjs.js:8002:6694:1:
|
||||
openfiles: /home/pi/Desktop/Carto/OceansPlastiques_gyres/index.html:990:0:0:
|
||||
last_filefilter:
|
||||
adv_open_matchname: 0
|
||||
editor_tab_width: 3
|
||||
fb_show_backup_f: 0
|
||||
htmlbar_notebooktab: 0
|
||||
outputb_scroll_mode: 0
|
||||
spell_insert_entities: 0
|
||||
htmlbar_thumbnailwidth: 300
|
||||
sync_delete_deprecated: 0
|
||||
fb_viewmode: 0
|
||||
ssearch_text: popup1
|
||||
recent_dirs: file:///home/pi/Desktop/Carto/OceansPlastiques_gyres/css
|
||||
recent_dirs: file:///home/pi
|
||||
view_blocks: 1
|
||||
editor_indent_wspaces: 0
|
||||
view_statusbar: 1
|
||||
wrap_text_default: 0
|
||||
view_main_toolbar: 1
|
||||
bookmarks_show_mode: 0
|
||||
snr_dotmatchall: 0
|
||||
snr_ignorebackupfiles: 1
|
||||
fb_show_hidden_f: 0
|
||||
sync_include_backup: 0
|
||||
show_visible_spacing: 0
|
||||
snr_recursion_level: 5
|
||||
c2e.convert_xml: 1
|
||||
snr_showinoutputbox: 0
|
||||
view_left_panel: 1
|
||||
ssearch_dotmatchall: 0
|
||||
e2c.convert_xml: 1
|
||||
ssearch_casesens: 0
|
||||
fb_focus_follow: 1
|
||||
htmlbar_view: 1
|
||||
savedir: file:///home/pi/Desktop/Carto/OceansPlastiques_gyres/js
|
||||
bmarksearchmode: 0
|
||||
enable_syntax_scan: 1
|
||||
e2c.convert_num: 0
|
||||
e2c.convert_special: 0
|
||||
c2e.convert_symbol: 0
|
||||
outputb_show_all_output: 0
|
||||
snr_casesens: 0
|
||||
e2c.convert_symbol: 0
|
||||
c2e.convert_iso: 0
|
||||
name: ProjetOceansPlastiques_gyres
|
||||
view_cline: 1
|
||||
charmap_block: 1
|
||||
snippets_show_as_menu: 1
|
||||
spell_lang: fr_CH
|
||||
snr_type: 0
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
#map {
|
||||
/* les dimensions de la carte sur tout le viewport */
|
||||
/*width: 100vw;
|
||||
height: 100vh;*/
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
border: solid black 1px;
|
||||
}
|
||||
|
||||
svg {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.my-div-icon {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
width: 50%;
|
||||
margin: auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
video {
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
.legend {
|
||||
background-color: rgba(51, 170, 51, .3);
|
||||
padding: 5px;
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
#map {
|
||||
/* les dimensions de la carte sur tout le viewport */
|
||||
/*width: 100vw;
|
||||
height: 100vh;*/
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
border: solid black 1px;
|
||||
}
|
||||
|
||||
svg {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.my-div-icon {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
width: 50%;
|
||||
margin: auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
video {
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
.legend {
|
||||
background-color: rgba(51, 170, 51, .3);
|
||||
padding: 2px;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.4 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="50mm" height="50mm" version="1.1" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><defs><marker id="Arrow1Sstart" overflow="visible" orient="auto"><path transform="scale(.2) translate(6)" d="m0 0 5-5-17.5 5 17.5 5-5-5z" fill="#1500ff" fill-rule="evenodd" stroke="#1500ff" stroke-width="1pt"/></marker></defs><g transform="translate(-37.138 -71.619)"><ellipse cx="62.708" cy="96.428" rx="23.25" ry="22.489" fill="none" marker-mid="url(#Arrow1Sstart)" stroke="#1500ff" stroke-miterlimit="3" stroke-width="1.9782"/></g></svg>
|
||||
|
After Width: | Height: | Size: 542 B |
|
|
@ -0,0 +1,138 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="52.774998mm"
|
||||
height="56.952mm"
|
||||
version="1.1"
|
||||
viewBox="0 0 52.774998 56.952"
|
||||
id="svg845"
|
||||
sodipodi:docname="CercleFlecheRemplisBleuNoir.svg"
|
||||
inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
|
||||
<metadata
|
||||
id="metadata849">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="995"
|
||||
id="namedview847"
|
||||
showgrid="false"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
inkscape:zoom="3.7072886"
|
||||
inkscape:cx="99.732279"
|
||||
inkscape:cy="107.62583"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg845"
|
||||
inkscape:document-rotation="0" />
|
||||
<defs
|
||||
id="defs841">
|
||||
<marker
|
||||
id="Arrow2Mstart"
|
||||
overflow="visible"
|
||||
orient="auto">
|
||||
<path
|
||||
transform="scale(0.6)"
|
||||
d="M 8.7186,4.0337 -2.2074,0.016 8.7186,-4.0017 c -1.7455,2.3721 -1.7354,5.6175 0,8.0354 z"
|
||||
fill-rule="evenodd"
|
||||
stroke="#0000fe"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="0.625"
|
||||
id="path833" />
|
||||
</marker>
|
||||
<radialGradient
|
||||
id="radialGradient1243"
|
||||
cx="46.580002"
|
||||
cy="58.880001"
|
||||
r="26.386999"
|
||||
gradientTransform="matrix(-0.020117,-1.0233,1.0789,-0.021212,-34.440001,77.234999)"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop
|
||||
offset="0"
|
||||
id="stop836" />
|
||||
<stop
|
||||
stop-color="#00f"
|
||||
stop-opacity="0"
|
||||
offset="1"
|
||||
id="stop838" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<g
|
||||
id="circle843"
|
||||
style="opacity:1;stroke-width:1.00000003;stroke-miterlimit:3;stroke-dasharray:none">
|
||||
<path
|
||||
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:url(#radialGradient1243);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.00000003;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:3;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1"
|
||||
d="m 51.775,28.476 c 0,12.867682 -10.431318,23.299 -23.299,23.299 -12.867682,0 -23.299,-10.431318 -23.299,-23.299 0,-12.867682 10.431318,-23.299 23.299,-23.299 12.867682,0 23.299,10.431318 23.299,23.299 z"
|
||||
id="path998" />
|
||||
<path
|
||||
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#0000fe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:3;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1;stroke-width:1.00000003"
|
||||
d="M 28.476562 4.1777344 C 15.06844 4.1777344 4.1777344 15.06844 4.1777344 28.476562 C 4.1777344 41.884685 15.06844 52.775391 28.476562 52.775391 C 41.884685 52.775391 52.775391 41.884685 52.775391 28.476562 C 52.775391 15.06844 41.884685 4.1777344 28.476562 4.1777344 z M 28.476562 6.1777344 C 40.803805 6.1777344 50.775391 16.14932 50.775391 28.476562 C 50.775391 40.803805 40.803805 50.775391 28.476562 50.775391 C 16.14932 50.775391 6.1777344 40.803805 6.1777344 28.476562 C 6.1777344 16.14932 16.14932 6.1777344 28.476562 6.1777344 z "
|
||||
id="path1000" />
|
||||
<g
|
||||
id="g972"
|
||||
style="stroke-width:1.00000003;stroke-miterlimit:3;stroke-dasharray:none">
|
||||
<g
|
||||
id="path990"
|
||||
style="opacity:1;stroke-width:1.00000003;stroke-miterlimit:3;stroke-dasharray:none">
|
||||
<path
|
||||
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.00000003;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:3;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1"
|
||||
d="M 38.93832,10.01744 25.82712,5.1962 38.93832,0.37496 c -2.0946,2.84652 -2.08248,6.741 0,9.64248 z"
|
||||
id="path994" />
|
||||
<path
|
||||
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#0000fe;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:3;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1;stroke-width:1.00000003"
|
||||
d="M 38.941406 0 A 0.3750375 0.3750375 0 0 0 38.808594 0.0234375 L 25.697266 4.84375 A 0.3750375 0.3750375 0 0 0 25.697266 5.5488281 L 38.808594 10.369141 A 0.3750375 0.3750375 0 0 0 39.242188 9.7988281 C 37.251992 7.025926 37.242815 3.3121097 39.240234 0.59765625 A 0.3750375 0.3750375 0 0 0 38.941406 0 z M 38.175781 1.0546875 C 36.727575 3.6319489 36.734989 6.730859 38.181641 9.3398438 L 26.916016 5.1953125 L 38.175781 1.0546875 z "
|
||||
id="path996" />
|
||||
</g>
|
||||
<g
|
||||
id="path982"
|
||||
style="opacity:1;stroke-width:1.00000003;stroke-miterlimit:3;stroke-dasharray:none">
|
||||
<path
|
||||
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.00000003;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:3;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1"
|
||||
d="M 10.01744,18.01368 5.1962,31.12488 0.37496,18.01368 c 2.84652,2.0946 6.741,2.08248 9.64248,0 z"
|
||||
id="path986" />
|
||||
<path
|
||||
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#0000fe;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:3;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1;stroke-width:1.00000003"
|
||||
d="M 0.35546875 17.638672 A 0.3750375 0.3750375 0 0 0 0.0234375 18.142578 L 4.84375 31.253906 A 0.3750375 0.3750375 0 0 0 5.5488281 31.253906 L 10.369141 18.142578 A 0.3750375 0.3750375 0 0 0 9.7988281 17.708984 C 7.025926 19.69918 3.3121097 19.708357 0.59765625 17.710938 A 0.3750375 0.3750375 0 0 0 0.35546875 17.638672 z M 9.3417969 18.769531 L 5.1953125 30.037109 L 1.0546875 18.777344 C 3.6324554 20.225834 6.7325204 20.217032 9.3417969 18.769531 z "
|
||||
id="path988" />
|
||||
</g>
|
||||
<g
|
||||
id="path974"
|
||||
style="opacity:1;stroke-width:1.00000003;stroke-miterlimit:3;stroke-dasharray:none">
|
||||
<path
|
||||
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.00000003;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:3;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1"
|
||||
d="m 18.01368,46.93456 13.1112,4.82124 -13.1112,4.82124 c 2.0946,-2.84652 2.08248,-6.741 0,-9.64248 z"
|
||||
id="path978" />
|
||||
<path
|
||||
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#0000fe;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:3;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1;stroke-width:1.00000003"
|
||||
d="M 17.992188 46.560547 A 0.3750375 0.3750375 0 0 0 17.708984 47.152344 C 19.69918 49.925246 19.708357 53.641015 17.710938 56.355469 A 0.3750375 0.3750375 0 0 0 18.142578 56.929688 L 31.253906 52.107422 A 0.3750375 0.3750375 0 0 0 31.253906 51.404297 L 18.142578 46.582031 A 0.3750375 0.3750375 0 0 0 17.992188 46.560547 z M 18.769531 47.611328 L 30.039062 51.755859 L 18.777344 55.896484 C 20.22573 53.318903 20.21672 50.220497 18.769531 47.611328 z "
|
||||
id="path980" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 16 KiB |
|
|
@ -0,0 +1,49 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="210mm"
|
||||
height="297mm"
|
||||
viewBox="0 0 210 297"
|
||||
version="1.1"
|
||||
id="svg8">
|
||||
<defs
|
||||
id="defs2">
|
||||
<marker
|
||||
style="overflow:visible"
|
||||
id="Arrow1Lstart"
|
||||
refX="0.0"
|
||||
refY="0.0"
|
||||
orient="auto">
|
||||
<path
|
||||
transform="scale(0.8) translate(12.5,0)"
|
||||
style="fill-rule:evenodd;stroke:#fe0000;stroke-width:1pt;stroke-opacity:1;fill:#fe0000;fill-opacity:1"
|
||||
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
|
||||
id="path835" />
|
||||
</marker>
|
||||
</defs>
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
id="layer1">
|
||||
<circle
|
||||
style="fill:none;stroke:#fe0000;stroke-width:0.265;stroke-miterlimit:4;stroke-dasharray:none;marker-start:url(#Arrow1Lstart);marker-mid:url(#Arrow1Lstart)"
|
||||
id="path833"
|
||||
cx="52.646824"
|
||||
cy="62.197933"
|
||||
r="24.887123" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 4.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 580 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 334 B |
|
|
@ -0,0 +1,58 @@
|
|||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="210mm"
|
||||
height="297mm"
|
||||
viewBox="0 0 210 297"
|
||||
version="1.1"
|
||||
id="svg8">
|
||||
<defs
|
||||
id="defs2">
|
||||
<marker
|
||||
style="overflow:visible;"
|
||||
id="Arrow1Lend"
|
||||
refX="0.0"
|
||||
refY="0.0"
|
||||
orient="auto">
|
||||
<path
|
||||
transform="scale(0.8) rotate(180) translate(12.5,0)"
|
||||
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1"
|
||||
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
|
||||
id="path838" />
|
||||
</marker>
|
||||
<marker
|
||||
style="overflow:visible"
|
||||
id="Arrow1Lstart"
|
||||
refX="0.0"
|
||||
refY="0.0"
|
||||
orient="auto">
|
||||
<path
|
||||
transform="scale(0.8) translate(12.5,0)"
|
||||
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1"
|
||||
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
|
||||
id="path835" />
|
||||
</marker>
|
||||
</defs>
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
id="layer1">
|
||||
<path
|
||||
style="fill:none;stroke:#000000;stroke-width:0.265;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none;marker-end:url(#Arrow1Lend)"
|
||||
d="M 28.186353,15.889452 V 32.750021"
|
||||
id="path10" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1,88 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="210mm"
|
||||
height="297mm"
|
||||
viewBox="0 0 210 297"
|
||||
version="1.1"
|
||||
id="svg8"
|
||||
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
|
||||
sodipodi:docname="fleche.svg">
|
||||
<defs
|
||||
id="defs2">
|
||||
<marker
|
||||
style="overflow:visible;"
|
||||
id="Arrow1Lend"
|
||||
refX="0.0"
|
||||
refY="0.0"
|
||||
orient="auto"
|
||||
inkscape:stockid="Arrow1Lend"
|
||||
inkscape:isstock="true">
|
||||
<path
|
||||
transform="scale(0.8) rotate(180) translate(12.5,0)"
|
||||
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1"
|
||||
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
|
||||
id="path838" />
|
||||
</marker>
|
||||
<marker
|
||||
style="overflow:visible"
|
||||
id="Arrow1Lstart"
|
||||
refX="0.0"
|
||||
refY="0.0"
|
||||
orient="auto"
|
||||
inkscape:stockid="Arrow1Lstart"
|
||||
inkscape:isstock="true">
|
||||
<path
|
||||
transform="scale(0.8) translate(12.5,0)"
|
||||
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1"
|
||||
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
|
||||
id="path835" />
|
||||
</marker>
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="12.151778"
|
||||
inkscape:cx="106.5311"
|
||||
inkscape:cy="92.889324"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:current-layer="layer1"
|
||||
inkscape:document-rotation="0"
|
||||
showgrid="false"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="995"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1" />
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Calque 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
style="fill:none;stroke:#000000;stroke-width:0.265;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none;marker-end:url(#Arrow1Lend)"
|
||||
d="M 28.186353,15.889452 V 32.750021"
|
||||
id="path10" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
|
|
@ -0,0 +1,13 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>leaf-solid</title>
|
||||
<g id="Layer_2" data-name="Layer 2">
|
||||
<g id="invisible_box" data-name="invisible box">
|
||||
<rect width="48" height="48" fill="none"/>
|
||||
</g>
|
||||
<g id="Q3_icons" data-name="Q3 icons">
|
||||
<path d="M45.7,36.9c-3.8-6.4-12.3-12.7-18.6-15.2a12.8,12.8,0,0,0-3.4-1c-1.7-.2-2.5-1.4-2.2-2.5s.8-1.4,1.9-1.3c3,.4,7.7,2.3,12.2,5.2l.9.6.3.2,1.2.8a1,1,0,0,0,1.6-.9c-.6-4.7-2.1-9.4-6.5-12.4S21.2,8,14,9.2a80.6,80.6,0,0,1-9.7,1.3H3a.9.9,0,0,0-.9,1.3l.4,1.2c3.1,9.4,7.4,22.3,17.8,25.4a17.4,17.4,0,0,0,4.5.6A19.5,19.5,0,0,0,38,33.7,29.4,29.4,0,0,1,42.3,39,1.9,1.9,0,0,0,44,40a2.2,2.2,0,0,0,1.3-.4A2.1,2.1,0,0,0,45.7,36.9Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 890 B |
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Oceans de plastiques</title>
|
||||
<meta http-equiv="Content-Type"content="text/html; charset=utf8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- le css -->
|
||||
<link href="css/moncss.css" type="text/css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body id="body">
|
||||
<h1>Carte des pollutions plastiques</h1>
|
||||
<div id="map"></div>
|
||||
<footer>Copyleft</footer>
|
||||
</body>
|
||||
<!-- Stamen Watercolor -->
|
||||
<!--<script type="text/javascript" src="https://stamen-maps.a.ssl.fastly.net/js/tile.stamen.js?v1.3.0"></script> -->
|
||||
<!-- Leaflet -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
||||
<script src="js/Leaflet.greatCircle.js"></script>
|
||||
<!-- Le js -->
|
||||
<script src="js/monjs.js"></script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Oceans de plastiques</title>
|
||||
<meta http-equiv="Content-Type"content="text/html; charset=utf8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- le css -->
|
||||
<link href="css/moncss.css" type="text/css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body id="body">
|
||||
<h1>Carte des pollutions plastiques</h1>
|
||||
<div id="map"></div>
|
||||
<footer>Copyleft</footer>
|
||||
</body>
|
||||
<!-- Stamen Watercolor -->
|
||||
<!--<script type="text/javascript" src="https://stamen-maps.a.ssl.fastly.net/js/tile.stamen.js?v1.3.0"></script> -->
|
||||
<!-- Leaflet -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
||||
<!-- Le js -->
|
||||
<script src="js/monjs.js"></script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,443 @@
|
|||
/*
|
||||
|
||||
Leaflet.greatCircle.js
|
||||
Copyright Alex Wellerstein, 2018.
|
||||
Licensed under the MIT License: https://opensource.org/licenses/MIT
|
||||
|
||||
*/
|
||||
L.GreatCircle = L.Circle.extend({
|
||||
|
||||
initialize: function (position, options = {}) {
|
||||
//default options
|
||||
var defaults = {
|
||||
clipLat: 65, //lat (+/-) used to determine when regular circles might be used. set to false to force render of circle as polygon (no matter what), or true to render it as a normal circle (no matter what)
|
||||
clipRad: 2000000, //radius (m) at which it will always render a polygon, unless clipLat == true.
|
||||
degStep: 0.5, //degrees by which the circle drawing function will step for each polygon -- smaller is more refined.
|
||||
maxCopies: -1, //set a maximum number of copies if elements are wrapped -- -1 is no max.
|
||||
wrapElements: true, //whether to wrap the elements as multiple copies.
|
||||
wrapMarker: true, //whether to wrap the bound marker, too
|
||||
maxRadius: 20015086.5, //cap on radius
|
||||
}
|
||||
|
||||
//apply defaults if they aren't in the options object
|
||||
for(var i in defaults) { if(typeof options[i] == "undefined") options[i] = defaults[i]; }
|
||||
|
||||
this._position = L.latLng(position);
|
||||
this._options = options;
|
||||
|
||||
this._addedToMap = false; //flag for whether we've added this to the map yet
|
||||
},
|
||||
|
||||
//remove all parts from map
|
||||
remove: function() {
|
||||
if(this._polygon) this._polygon.remove();
|
||||
if(this._circle) this._circle.remove();
|
||||
if(typeof this._circles != "undefined") {
|
||||
if(this._circles.length>0) {
|
||||
for(var i in this._circles) {
|
||||
this._circles[i].remove();
|
||||
}
|
||||
}
|
||||
this._circles = undefined;
|
||||
}
|
||||
this._addedToMap = false;
|
||||
},
|
||||
|
||||
//add to the map
|
||||
addTo: function(map) {
|
||||
if(this._polygon) this._polygon.addTo(map);
|
||||
if(this._circle) this._circle.addTo(map);
|
||||
if(typeof this._circles != "undefined") {
|
||||
if(this._circles.length>0) {
|
||||
for(var i in this._circles) {
|
||||
this._circles[i].addTo(map);
|
||||
}
|
||||
}
|
||||
}
|
||||
this._addedToMap = true; //we keep track of this so we can automatically re-add new shapes if they switch
|
||||
this._map = map;
|
||||
this._map.on("zoomend", function() { this.redraw()},this); //refresh on zoom
|
||||
this.redraw(); //initial draw
|
||||
},
|
||||
|
||||
//a function that binds the Great Circle object's LatLng to any other LatLng, based on an event firing
|
||||
bindTo: function(object, event="drag") {
|
||||
//moves with an object that has a LatLng
|
||||
this._bindobject = object;
|
||||
object.on(event, function(ev) {
|
||||
var ll = this._bindobject.getLatLng();
|
||||
var noredraw = (ll.lat==this._position.lat&&ll.lng==this._position.lng); //keeps this from redrawing when nothing has really changed -- otherwise redraw will fire twice on addMap and bindTo
|
||||
if(this._options.wrapMarker) {
|
||||
//"wraps" the marker if it exceeds bounds on low zooms
|
||||
if(this._map.getZoom()<=2) {
|
||||
if(ll.lng<-180) {
|
||||
ll.lng = 360+ll.lng;
|
||||
this._bindobject.setLatLng(ll);
|
||||
}
|
||||
if(ll.lng>180) {
|
||||
ll.lng = ll.lng-360;
|
||||
this._bindobject.setLatLng(ll);
|
||||
}
|
||||
}
|
||||
}
|
||||
if(!noredraw) this.setLatLng(this._bindobject.getLatLng());
|
||||
},this);
|
||||
object.fire(event);
|
||||
},
|
||||
|
||||
//just to avoid re-calculating these ten million times
|
||||
_deg2rad: Math.PI / 180, _rad2deg: 180 / Math.PI,
|
||||
_m2km: 1/1000, //I know this is kind of obvious, but I'm just using it to improve legibility of code logic
|
||||
|
||||
//set the latLng center of the Great Circle
|
||||
setLatLng: function(position) {
|
||||
this._position = L.latLng(position);
|
||||
this.redraw();
|
||||
},
|
||||
|
||||
//return the latLng center of the Great Circle
|
||||
getLatLng: function() {
|
||||
return this._position;
|
||||
},
|
||||
|
||||
//update styles
|
||||
setStyle: function(options) {
|
||||
if(this._polygon) this._polygon.setStyle(options);
|
||||
if(this._circle) this._circle.setStyle(options);
|
||||
if(typeof this._circles != "undefined") {
|
||||
if(this._circles.length>0) {
|
||||
for(var i in this._circles) {
|
||||
this._circles[i].setStyle(options);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
//returns the bounds
|
||||
getBounds: function() {
|
||||
if(this._circle) {
|
||||
return this._circle.getBounds(); //straightforward
|
||||
}
|
||||
if(this._polygon) {
|
||||
//this gives pretty good results for all of the clip statuses, even the weird ones
|
||||
return L.latLngBounds(
|
||||
this._destination_from_bearing(this._position.lat,this._position.lng,315,this._options.radius*this._m2km),
|
||||
this._destination_from_bearing(this._position.lat,this._position.lng,135,this._options.radius*this._m2km)
|
||||
);
|
||||
}
|
||||
|
||||
//if you don't have a circle or polygon, then I don't really know what you want. but here's something.
|
||||
return L.latLngBounds(
|
||||
this._destination_from_bearing(this._position.lat,this._position.lng,315,this._options.radius*this._m2km),
|
||||
this._destination_from_bearing(this._position.lat,this._position.lng,135,this._options.radius*this._m2km)
|
||||
);
|
||||
},
|
||||
|
||||
//set the radius of the Great Circle
|
||||
setRadius: function(radius) {
|
||||
this._options.radius = radius;
|
||||
if(this._options.maxRadius != -1) {
|
||||
if(this._options.radius > this._options.maxRadius) this._options.radius = this._options.maxRadius;
|
||||
}
|
||||
this.redraw();
|
||||
},
|
||||
|
||||
//return the radius
|
||||
getRadius: function() {
|
||||
return this._options.radius;
|
||||
},
|
||||
|
||||
//a rounding function with decimal precision, which is necessary for the next function.
|
||||
_round: function(number,decimals = 0) {
|
||||
if(decimals==0) return Math.round(number);
|
||||
var multiplier = Math.pow(10, decimals);
|
||||
return Math.round(number * multiplier) / multiplier;
|
||||
},
|
||||
|
||||
//returns destination lat/lon from a start point lat/lon of a giving bearing (degrees) and distance (km).
|
||||
//round_off will round to a given precision.
|
||||
//based on the haversine formula implementation at: https://www.movable-type.co.uk/scripts/latlong.html
|
||||
_destination_from_bearing: function(lat,lng,bearing,distance,round_off = undefined) {
|
||||
var R = 6371; // mean radius of the Earth, in km
|
||||
var d = distance;
|
||||
var deg2rad = this._deg2rad; var rad2deg = this._rad2deg;
|
||||
var lat1 = deg2rad*lat;
|
||||
var lng1 = deg2rad*lng;
|
||||
var brng = deg2rad*bearing;
|
||||
//kind of a sad attempt at optimization of these costly trig functions
|
||||
var sinLat1 = Math.sin(lat1); var cosLat1 = Math.cos(lat1);
|
||||
var cosdR = Math.cos(d/R); var sindR = Math.sin(d/R);
|
||||
var lat2 = Math.asin(sinLat1*cosdR+cosLat1*sindR*Math.cos(brng));
|
||||
var lng2 = lng1+Math.atan2(Math.sin(brng)*sindR*cosLat1,cosdR-sinLat1*Math.sin(lat2));
|
||||
if(typeof round_off != "undefined") {
|
||||
return [this._round(rad2deg*lat2,round_off),this._round(rad2deg*lng2,round_off)];
|
||||
} else {
|
||||
return [(rad2deg*lat2),(rad2deg*lng2)];
|
||||
}
|
||||
},
|
||||
|
||||
//main render event -- the big show
|
||||
redraw: function() {
|
||||
|
||||
var lat = this._position.lat; var lng = this._position.lng; //just for legibility
|
||||
if(this._options.maxRadius != -1) {
|
||||
if(this._options.radius > this._options.maxRadius) this._options.radius = this._options.maxRadius;
|
||||
}
|
||||
|
||||
//These are control points that we can evaluate to see if it is clipping against the poles.
|
||||
//l1 and l2 are the top of the circle, l3 and l4 are the bottom.
|
||||
//In a closed circle, l1==l2 and l3==l4. In a clipped circle, one or both of these
|
||||
//conditions will not be true. Rounding used to deal with precision errors.
|
||||
var l1 = this._destination_from_bearing(lat,lng,0,this._options.radius*this._m2km, 3);
|
||||
var l2 = this._destination_from_bearing(lat,lng,360,this._options.radius*this._m2km, 3);
|
||||
var l3 = this._destination_from_bearing(lat,lng,180,this._options.radius*this._m2km, 3);
|
||||
var l4 = this._destination_from_bearing(lat,lng,-180,this._options.radius*this._m2km, 3);
|
||||
|
||||
//now check for the 4 possible clipping conditions
|
||||
if( (l1[0]!=l2[0]||l1[1]!=l2[1]) && (l3[0]!=l4[0]||l3[1]!=l4[1]) ) {
|
||||
this._clipStatus = 4; //both the top AND bottom of the circle is clipped (which means that there will be "holes" in the polygon) -- most complex case
|
||||
} else if( l1[0]!=l2[0]||l1[1]!=l2[1]) {
|
||||
this._clipStatus = 2; //top of the circle is clipped (moderately complex polygon)
|
||||
} else if( l3[0]!=l4[0]||l3[1]!=l4[1]) {
|
||||
this._clipStatus = 3; //bottom of the circle is clipped (moderately complex polygon)
|
||||
} else {
|
||||
this._clipStatus = 1; //no clipping at all (the circle is closed)
|
||||
}
|
||||
|
||||
//figure out how many copies to render.
|
||||
//copies are copies to the left AND right of the main instance.
|
||||
//so 1 copy is 3 instances. 2 copies is 5. 0 copies is just the main instance.
|
||||
//for zooms 0-2, it tries to guess based on the pixels (which depends on browser zoom). for >2, just assumes 1 is OK.
|
||||
switch(this._map.getZoom()) {
|
||||
case 0:
|
||||
this._copies = Math.ceil((window.innerWidth / 256) /4)+2;
|
||||
break;
|
||||
case 1:
|
||||
this._copies = Math.ceil((window.innerWidth / 512) /4)+2;
|
||||
break;
|
||||
case 2:
|
||||
this._copies = Math.ceil((window.innerWidth / 768) /4)+1;
|
||||
break;
|
||||
default: this._copies = 1; break;
|
||||
}
|
||||
//see if options override the above
|
||||
if(this._options.maxCopies > -1) this._copies = this._copies>this._options.maxCopies?this._options.maxCopies:this._copies;
|
||||
if(this._options.wrapElements === false) this._copies = 0;
|
||||
|
||||
//now we see if we're rendering a polygon or a circle. there are several conditions that result in the polygon being preferred. it is also possible to override this with the clipLat setting.
|
||||
if((this._options.radius>=this._options.clipRad || this._clipStatus>1 || l1[0] >= this._options.clipLat || l3[0] <= this._options.clipLat*-1 || this._options.clipLat===false) && this._options.clipLat!==true) {
|
||||
//polygon is being rendered
|
||||
|
||||
//initialize arrays of points
|
||||
this._latLngs = []; //array of lat/lngs for polygon
|
||||
this._latLngsM = []; //array for multipolygons
|
||||
|
||||
//for each of the possible clipping scenarios, we draw the circles differently. this aids in assembling the polygons into coherent shapes that can be
|
||||
//seamlessly joined together.
|
||||
//the basic algorithm draws the circles in two halves (the reason for this is because of complex clipStatus = 4, which requires putting the halves into different polygons).
|
||||
//the numbers below give two pieces of information for each half: what angle (degree) to start at, what angle to draw until. direction of movement through the start/stop is then inferred.
|
||||
//in the clipping cases, it also adds an additional point at the beginning of the polygon (the "lower" or "upper" edge).
|
||||
switch(this._clipStatus) {
|
||||
case 1: //perfect circle -- easy
|
||||
var t_start1 = 0; var t_stop1 = 180;
|
||||
var t_start2 = 180; var t_stop2 = 360;
|
||||
break;
|
||||
case 2: //top clipping -- work backwards
|
||||
var t_start1 = 360; var t_stop1 = 180;
|
||||
var t_start2 = 180; var t_stop2 = 0;
|
||||
this._latLngs.push([90,l2[1]+(360*(-1*this._copies))]);
|
||||
break;
|
||||
case 3: //bottom clipping -- works best as -180 to 180
|
||||
var t_start1 = -180; var t_stop1 = 0;
|
||||
var t_start2 = 0; var t_stop2 = 180;
|
||||
this._latLngs.push([-90,l4[1]+(360*(-1*this._copies))]);
|
||||
break;
|
||||
case 4: //weird case 4 -- also works bet as -180 to 180
|
||||
var t_start1 = -180; var t_stop1 = 0;
|
||||
var t_start2 = 0; var t_stop2 = 180;
|
||||
this._latLngs.push([-90,l4[1]+(360*(-1*this._copies))]);
|
||||
break;
|
||||
}
|
||||
//infer direction
|
||||
if(t_start1<t_stop1) { var t_dir1 = 1; } else { var t_dir1 = -1; }
|
||||
if(t_start2<t_stop2) { var t_dir2 = 1; } else { var t_dir2 = -1; }
|
||||
|
||||
//now we render the circles. we do this for each of the copies.
|
||||
for(var copy=this._copies*-1;copy<=this._copies;copy++) {
|
||||
//iterate over polygon, using geo function to get lat/lng points, for the first half of the circle
|
||||
for(var theta=t_start1; t_dir1>0?(theta < t_stop1):(theta > t_stop1); theta+=(this._options.degStep*t_dir1)) {
|
||||
var ll = this._destination_from_bearing(lat,lng,theta,this._options.radius*this._m2km);
|
||||
ll[1] = ll[1]+(360*copy);
|
||||
this._latLngs.push(ll);
|
||||
}
|
||||
|
||||
//special actions for weird clipStatus = 4 -- this pushes the points around so they form better polygons (a big polygon in the 0 array, and the rest are "holes")
|
||||
//the logic of this is basically: for the very far left copy (copy = -copies), it adds a bottom "edge" and then kicks it to the 0 position of _latLngsM.
|
||||
//for the middle copies, it puts the "left" half of the circle into the _latLngM array created by the previous copy, where it becomes the "right" side of a hole.
|
||||
//for the last, far-right copy (copy = copies), it preps the last part of the circle by adding a control point.
|
||||
if(this._clipStatus==4) {
|
||||
var ll = this._destination_from_bearing(lat,lng,360,this._options.radius*this._m2km);
|
||||
this._latLngs.push([ll[0],ll[1]+(360*copy)]);
|
||||
if(copy==this._copies*-1) {
|
||||
var ll = this._destination_from_bearing(lat,lng,-180,this._options.radius*this._m2km);
|
||||
this._latLngs.push([90,ll[1]+(360*(-1*this._copies))]);
|
||||
var ll = this._destination_from_bearing(lat,lng,180,this._options.radius*this._m2km);
|
||||
this._latLngs.push([90,ll[1]+(360*(-1*this._copies))]);
|
||||
this._latLngsM.push(this._latLngs);
|
||||
} else {
|
||||
this._latLngsM[this._latLngsM.length-1] = this._latLngsM[this._latLngsM.length-1].concat(this._latLngs);
|
||||
}
|
||||
this._latLngs = [];
|
||||
if(copy==this._copies) {
|
||||
var ll = this._destination_from_bearing(lat,lng,0,this._options.radius*this._m2km);
|
||||
this._latLngs.push([90,ll[1]+(360*(1*this._copies))]);
|
||||
}
|
||||
}
|
||||
|
||||
//draw second half of the circle
|
||||
for(var theta=t_start2; t_dir2>0?(theta < t_stop2):(theta > t_stop2); theta+=(this._options.degStep*t_dir2)) {
|
||||
var ll = this._destination_from_bearing(lat,lng,theta,this._options.radius*this._m2km);
|
||||
ll[1] = ll[1]+(360*copy);
|
||||
this._latLngs.push(ll);
|
||||
}
|
||||
|
||||
//again process for the clipstatus = 4 situation. in this case, if it is the last copy (copy = copies), we add a final control point and then push it into _latLngsM[0], where it is now
|
||||
//part of a giant polygon with the far left control point. For any other case, we create a new _latLngsM array of points, where this "right" side of a circle will be coupled with the "left" of the next copy.
|
||||
//again, the logic of this is confusing, but it makes sense if you graph it out: we have made a giant polygon, and used the other points to define coherent "holes" in the polygon.
|
||||
//the array pushing and concatenation is a way to juggle all this.
|
||||
if(this._clipStatus==4) {
|
||||
var ll = this._destination_from_bearing(lat,lng,180,this._options.radius*this._m2km);
|
||||
this._latLngs.push([ll[0],ll[1]+(360*copy)]);
|
||||
if(copy==this._copies) {
|
||||
var ll = this._destination_from_bearing(lat,lng,180,this._options.radius*this._m2km);
|
||||
this._latLngs.push([-90,ll[1]+(360*(1*this._copies))]);
|
||||
this._latLngsM[0] = this._latLngsM[0].concat(this._latLngs);
|
||||
} else {
|
||||
this._latLngsM.push(this._latLngs);
|
||||
}
|
||||
this._latLngs = [];
|
||||
}
|
||||
|
||||
//for the non-clipping case, we push each coherent circle to a multipolygon so lines don't connect the disconnected bits
|
||||
if(this._clipStatus==1) {
|
||||
if(typeof this._latLngsM == "undefined") this._latLngsM = [];
|
||||
this._latLngsM.push(this._latLngs);
|
||||
this._latLngs = [];
|
||||
}
|
||||
}
|
||||
|
||||
//now that we're done, there are still a few final control points that need to be added in two of the cases (top and bottom)
|
||||
switch(this._clipStatus) {
|
||||
case 2:
|
||||
var ll = this._destination_from_bearing(lat,lng,0,this._options.radius*this._m2km);
|
||||
this._latLngs.push([ll[0],ll[1]+(360*(this._copies))]);
|
||||
this._latLngs.push([90,ll[1]+(360*(this._copies))]);
|
||||
break;
|
||||
case 3:
|
||||
var ll = this._destination_from_bearing(lat,lng,180,this._options.radius*this._m2km);
|
||||
this._latLngs.push([ll[0],ll[1]+(360*(this._copies))]);
|
||||
this._latLngs.push([-90,ll[1]+(360*(this._copies))]);
|
||||
break;
|
||||
}
|
||||
|
||||
//now we render the latLng points we've generated for the polygons.
|
||||
|
||||
//if there was a circle (or circles) previously, get rid of it
|
||||
if(this._circle) {
|
||||
this._circle.remove();
|
||||
this._circle = undefined;
|
||||
if(typeof this._circles != "undefined") {
|
||||
if(this._circles.length>0) {
|
||||
for(var i in this._circles) {
|
||||
this._circles[i].remove();
|
||||
}
|
||||
}
|
||||
this._circles = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
//create, or update, the existing polygon object
|
||||
if(!this._polygon) { //create new
|
||||
if(this._clipStatus == 1 || this._clipStatus == 4) { //multipolygon
|
||||
this._polygon = new L.polygon(this._latLngsM,this._options);
|
||||
} else { //render single polygon
|
||||
this._polygon = new L.polygon(this._latLngs,this._options);
|
||||
}
|
||||
if(this._addedToMap) { //if it's added to the map already, add it to the map. I guess I can imagine cases where you might want to calculate it but not render it to a map, like maybe you want to do something to the LatLng points before rendering them? Anyway, I give you the option.
|
||||
this._polygon.addTo(this._map);
|
||||
}
|
||||
} else { //update exiting
|
||||
if(this._clipStatus == 1 || this._clipStatus == 4) { //multipolygon
|
||||
this._polygon.setLatLngs(this._latLngsM);
|
||||
} else {
|
||||
this._polygon.setLatLngs(this._latLngs);
|
||||
}
|
||||
this._polygon.setStyle(this._options);
|
||||
this._polygon.redraw();
|
||||
}
|
||||
} else {
|
||||
//if we aren't rendering a polygon, we're rendering a "normal" circle object
|
||||
|
||||
//if there was a polygon previously, get rid of it
|
||||
if(this._polygon) {
|
||||
this._polygon.remove();
|
||||
this._polygon = undefined;
|
||||
}
|
||||
|
||||
//copy management
|
||||
if(this._copies>0) {
|
||||
if(typeof this._circles == "undefined") {
|
||||
this._circles = [];
|
||||
} else if(this._circles.length > (this._copies*2)) { //this trims any copies off we don't need
|
||||
for(var i in this._circles) {
|
||||
if(i>this._copies*2) {
|
||||
this._circles[i].remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if(typeof this._circles != "undefined") {
|
||||
if(this._circles.length>0) {
|
||||
for(var i in this._circles) {
|
||||
this._circles[i].remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
this._circles = undefined;
|
||||
}
|
||||
//now we render the circles. we do this for each of the copies, too.
|
||||
for(var copy=this._copies*-1;copy<=this._copies;copy++) {
|
||||
if(copy==0) { //main instance
|
||||
if(!this._circle) { //create new circle object
|
||||
this._circle = new L.circle(this._position,this._options);
|
||||
if(this._addedToMap) { //add to map if it should be
|
||||
this._circle.addTo(this._map);
|
||||
}
|
||||
} else { //update existing
|
||||
this._circle.setLatLng(this._position);
|
||||
this._circle.setStyle(this._options);
|
||||
this._circle.setRadius(this._options.radius);
|
||||
this._circle.redraw();
|
||||
}
|
||||
} else { //create or update copy
|
||||
if(typeof this._circles[copy] == "undefined") {
|
||||
this._circles[copy] = new L.circle([lat,lng+(360*copy)],this._options);
|
||||
if(this._addedToMap) { //add to map if it should be
|
||||
this._circles[copy].addTo(this._map);
|
||||
}
|
||||
} else {
|
||||
this._circles[copy].setLatLng([lat,lng+(360*copy)]);
|
||||
this._circles[copy].setStyle(this._options);
|
||||
this._circles[copy].setRadius(this._options.radius);
|
||||
this._circles[copy].redraw();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
L.greatCircle = function(position, options) {
|
||||
return new L.GreatCircle(position, options);
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,215 @@
|
|||
document.getElementById('body').onload = function(){
|
||||
|
||||
/* Fonction de recentrage des svgOverlay dont le zéro est en haut à gauche
|
||||
alors qu'on le veut au milieu */
|
||||
// --------------------------------------------------------------------------
|
||||
function centrerSVG(latitudeLongitudeCentre,extension) {
|
||||
coinHautGaucheX = latitudeLongitudeCentre[0]+extension[0]/2
|
||||
coinHautGaucheY = latitudeLongitudeCentre[1]-extension[1]/2
|
||||
coinHautGauche = [coinHautGaucheX,coinHautGaucheY];
|
||||
coinBasDroiteX = latitudeLongitudeCentre[0]-extension[0]/2;
|
||||
coinBasDroiteY = latitudeLongitudeCentre[1]+extension[1]/2;
|
||||
coinBasDroite = [ coinBasDroiteX, coinBasDroiteY];
|
||||
return [[coinHautGaucheX,coinHautGaucheY],[coinBasDroiteX,coinBasDroiteY]];
|
||||
}
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
// Déclaration des variables
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var centrePacifiqueSud = [-24.3763, -128.3184];
|
||||
var extensionPacifiqueSud = [50,50];
|
||||
var centrePacifiqueNord = [35, -180];
|
||||
var extensionPacifiqueNord = [100,100];
|
||||
var centreZero = [0, 0];
|
||||
var extensionZero = [90, 90];
|
||||
|
||||
// La carte centrée et zoomée
|
||||
// --------------------------------------------------------------------------
|
||||
// --------------------------------------------------------------------------
|
||||
var map = L.map('map', {
|
||||
center: [-7, -100],
|
||||
zoom: 2
|
||||
});//.setView([0, 0], 2);
|
||||
|
||||
// Déclaration des fonds
|
||||
var baselayers = {
|
||||
osm:L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 19,
|
||||
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||
}),
|
||||
stamen:L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg', {
|
||||
maxZoom: 19,
|
||||
attribution: 'Map tiles by <a href="https://stamen.com">Stamen Design</a>, under CC BY 4.0. Data by <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by/4.0">CC BY SA</a>.'
|
||||
})
|
||||
};
|
||||
// Ajout du fond par défaut
|
||||
baselayers.stamen.addTo(map);
|
||||
// Ajout du menu de changement de fonds
|
||||
L.control.layers(baselayers, null, {position: 'topright', collapsed : false }).addTo(map);
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// Définition des marqueurs
|
||||
var marker1 = L.marker([-42.5,69]).addTo(map)
|
||||
.bindPopup("La gyre de l'océan indien.")
|
||||
.openPopup();
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// Définition des cercles
|
||||
var rayon = 3000000
|
||||
// Un cercle orange, remplis vert transparent -------------------------------
|
||||
var cercle1 = L.circle([-45, -130], rayon, {
|
||||
color: 'black',
|
||||
fill: 'true',
|
||||
fillColor: '#101010',
|
||||
fillOpacity: 0.2,
|
||||
}).addTo(map)
|
||||
.bindTooltip("Gyre du Pacifique Sud",
|
||||
{
|
||||
permanent: true,
|
||||
direction: 'left',
|
||||
offset: [0,0]
|
||||
});
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// Définition des polygones
|
||||
// Un polygone
|
||||
/* var polygon1 = L.polygon([
|
||||
[61, -95],
|
||||
[61, 4.3],
|
||||
[7, 4.3],
|
||||
[7, -95]
|
||||
],{color: "green"}).addTo(map);
|
||||
*/
|
||||
// --------------------------------------------------------------------------
|
||||
// Définition des polylines
|
||||
var latlngs1 = [
|
||||
[0, -80],
|
||||
[0, 80]
|
||||
];
|
||||
|
||||
var polyline = L.polyline(latlngs1, {color: 'green'}).addTo(map)
|
||||
.bindTooltip("Équateur : latitude 0°",
|
||||
{
|
||||
permanent: true,
|
||||
direction: 'right',
|
||||
offset: [60,0]
|
||||
});
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// Définition des overlays svg
|
||||
// La gyre de l'océan Indien
|
||||
var coin20_0 = L.latLng(0, 23);
|
||||
var coin0_20 = L.latLng(-65, 115);
|
||||
var bounds1 = L.latLngBounds(coin20_0, coin0_20);
|
||||
|
||||
// Définition des calques (overlay)
|
||||
var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
svgElement.setAttribute('xmlns', "http://www.w3.org/2000/svg");
|
||||
svgElement.setAttribute('viewBox', "0 0 100 100");
|
||||
svgElement.innerHTML = '<ellipse transform="rotate(-40 50 60)" cx="50" cy="60" rx="45" ry="30" stroke="black" stroke-opacity="1" fill-opacity="50%"/>';
|
||||
//svgElementBounds = centrerSVG(centreZero,extensionZero);
|
||||
//svgElementBounds = [map.layerPointToLatLng([0,0]),map.layerPointToLatLng([30,30])];
|
||||
var forme = L.svgOverlay(svgElement, bounds1);
|
||||
forme.addTo(map);
|
||||
|
||||
// La gyre de l'Atlantique Sud
|
||||
var coin20_0 = L.latLng(0, -65);
|
||||
var coin0_20 = L.latLng(-70, 18);
|
||||
var bounds1 = L.latLngBounds(coin20_0, coin0_20);
|
||||
|
||||
// Définition des calques (overlay)
|
||||
var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
svgElement.setAttribute('xmlns', "http://www.w3.org/2000/svg");
|
||||
svgElement.setAttribute('viewBox', "0 0 100 100");
|
||||
svgElement.innerHTML = '<path d="M 85,15 C 100,40 85,85 15,85 C 0,85 50,-55 85,15" stroke="black" stroke-opacity="1" fill-opacity="0%"/>\
|
||||
<image xlink:href="images/Mollweide_Cycle.gif" x="30" y="20" height="50" width="50" />';
|
||||
//svgElementBounds = centrerSVG(centreZero,extensionZero);
|
||||
//svgElementBounds = [map.layerPointToLatLng([0,0]),map.layerPointToLatLng([30,30])];
|
||||
var forme = L.svgOverlay(svgElement, bounds1);
|
||||
forme.addTo(map);
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// Définition des images overlay
|
||||
|
||||
var imageUrl = 'images/North_Pacific_Gyre.png';
|
||||
var errorOverlayUrl = 'https://cdn-icons-png.flaticon.com/512/110/110686.png';
|
||||
var altText = 'Wikipedia : https://commons.wikimedia.org/wiki/File:North_Pacific_Gyre.png';
|
||||
var latLngBounds = L.latLngBounds([[66.6, -254.5], [-15.5, -105.2]]);
|
||||
|
||||
var imageOverlay = L.imageOverlay(imageUrl, latLngBounds, {
|
||||
opacity: 1,
|
||||
errorOverlayUrl: errorOverlayUrl,
|
||||
alt: altText,
|
||||
interactive: true
|
||||
}).addTo(map)
|
||||
.bindTooltip("Gyre du Pacifique Nord",
|
||||
{
|
||||
permanent: true,
|
||||
direction: 'right',
|
||||
offset: [0,0]
|
||||
});
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Définition des vidéos overlay
|
||||
// Attention, pour remplir latLngBound, il faut mettre à fill la propriété
|
||||
// css object-fit de la balise video.
|
||||
|
||||
var videoUrls = [
|
||||
'images/GyreAtlantiqueNordPetitPetit.mp4'
|
||||
];
|
||||
var errorOverlayUrl = 'https://cdn-icons-png.flaticon.com/512/110/110686.png';
|
||||
var latLngBounds = L.latLngBounds([[57, -100], [3.5, 13]]);
|
||||
|
||||
var videoOverlay = L.videoOverlay(videoUrls, latLngBounds, {
|
||||
opacity: 0.6,
|
||||
errorOverlayUrl: errorOverlayUrl,
|
||||
interactive: true,
|
||||
autoplay: true,
|
||||
muted: true,
|
||||
playsInline: true,
|
||||
keepAspectRatio: false
|
||||
}).addTo(map);
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// Définition de la légende
|
||||
function getColor(d) {
|
||||
return d === 'Océaniques' ? "#5bc6da" :
|
||||
d === 'Terrestres' ? "#e5c7a9" :
|
||||
d === 'Polaires' ? "#dadcd2" :
|
||||
d === 'Désertiques' ? "#e2ddcf" :
|
||||
"#cd9474";
|
||||
}
|
||||
var legend = L.control({position: 'bottomleft'});
|
||||
legend.onAdd = function (map) {
|
||||
var div = L.DomUtil.create('div', 'info legend');
|
||||
labels = ['<strong>Surfaces</strong>'],
|
||||
categories = ['Océaniques','Terrestres','Polaires','Désertiques','Autres'];
|
||||
for (var i = 0; i < categories.length; i++) {
|
||||
div.innerHTML +=
|
||||
labels.push('<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background:'+getColor(categories[i])+';"></span> '+categories[i]);
|
||||
}
|
||||
div.innerHTML = labels.join('<br>');
|
||||
return div;
|
||||
};
|
||||
legend.addTo(map);
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// Définition d'un grand cercle avec le plugin Leaflet.greatCircle permettant
|
||||
// des grand cercles correctement définis dans la projection de Mercator.
|
||||
var grandcercle = new L.greatCircle([-30, 110], {radius: 7000000});
|
||||
grandcercle.addTo(map);
|
||||
|
||||
|
||||
onMapClick = function(e){
|
||||
popup = L.popup()
|
||||
popup.setLatLng(e.latlng)
|
||||
lepoint = map.latLngToLayerPoint(e.latlng);
|
||||
popup.setContent("Position : "+e.latlng+" et "+lepoint)
|
||||
popup.openOn(map);
|
||||
//console.log("Coordinate: #{e.latlng}")
|
||||
}
|
||||
|
||||
map.on('click', onMapClick)
|
||||
|
||||
};
|
||||
|
|
@ -0,0 +1,215 @@
|
|||
document.getElementById('body').onload = function(){
|
||||
|
||||
/* Fonction de recentrage des svgOverlay dont le zéro est en haut à gauche
|
||||
alors qu'on le veut au milieu */
|
||||
// --------------------------------------------------------------------------
|
||||
function centrerSVG(latitudeLongitudeCentre,extension) {
|
||||
coinHautGaucheX = latitudeLongitudeCentre[0]+extension[0]/2
|
||||
coinHautGaucheY = latitudeLongitudeCentre[1]-extension[1]/2
|
||||
coinHautGauche = [coinHautGaucheX,coinHautGaucheY];
|
||||
coinBasDroiteX = latitudeLongitudeCentre[0]-extension[0]/2;
|
||||
coinBasDroiteY = latitudeLongitudeCentre[1]+extension[1]/2;
|
||||
coinBasDroite = [ coinBasDroiteX, coinBasDroiteY];
|
||||
return [[coinHautGaucheX,coinHautGaucheY],[coinBasDroiteX,coinBasDroiteY]];
|
||||
}
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
// Déclaration des variables
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var centrePacifiqueSud = [-24.3763, -128.3184];
|
||||
var extensionPacifiqueSud = [50,50];
|
||||
var centrePacifiqueNord = [35, -180];
|
||||
var extensionPacifiqueNord = [100,100];
|
||||
var centreZero = [0, 0];
|
||||
var extensionZero = [90, 90];
|
||||
|
||||
// La carte centrée et zoomée
|
||||
// --------------------------------------------------------------------------
|
||||
// --------------------------------------------------------------------------
|
||||
var map = L.map('map', {
|
||||
center: [-7, -100],
|
||||
zoom: 2
|
||||
});//.setView([0, 0], 2);
|
||||
|
||||
// Déclaration des fonds
|
||||
var baselayers = {
|
||||
osm:L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 19,
|
||||
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||
}),
|
||||
stamen:L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg', {
|
||||
maxZoom: 19,
|
||||
attribution: 'Map tiles by <a href="https://stamen.com">Stamen Design</a>, under CC BY 4.0. Data by <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by/4.0">CC BY SA</a>.'
|
||||
})
|
||||
};
|
||||
// Ajout du fond par défaut
|
||||
baselayers.stamen.addTo(map);
|
||||
// Ajout du menu de changement de fonds
|
||||
L.control.layers(baselayers, null, {position: 'topright', collapsed : false }).addTo(map);
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// Définition des marqueurs
|
||||
var marker1 = L.marker([-42.5,69]).addTo(map)
|
||||
.bindPopup("La gyre de l'océan indien.")
|
||||
.openPopup();
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// Définition des cercles
|
||||
var rayon = 3000000
|
||||
// Un cercle orange, remplis vert transparent -------------------------------
|
||||
var cercle1 = L.circle([-45, -130], rayon, {
|
||||
color: 'black',
|
||||
fill: 'true',
|
||||
fillColor: '#101010',
|
||||
fillOpacity: 0.2,
|
||||
}).addTo(map)
|
||||
.bindTooltip("Gyre du Pacifique Sud",
|
||||
{
|
||||
permanent: true,
|
||||
direction: 'left',
|
||||
offset: [0,0]
|
||||
});
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// Définition des polygones
|
||||
// Un polygone
|
||||
/* var polygon1 = L.polygon([
|
||||
[61, -95],
|
||||
[61, 4.3],
|
||||
[7, 4.3],
|
||||
[7, -95]
|
||||
],{color: "green"}).addTo(map);
|
||||
*/
|
||||
// --------------------------------------------------------------------------
|
||||
// Définition des polylines
|
||||
var latlngs1 = [
|
||||
[0, -80],
|
||||
[0, 80]
|
||||
];
|
||||
|
||||
var polyline = L.polyline(latlngs1, {color: 'green'}).addTo(map)
|
||||
.bindTooltip("Équateur : latitude 0°",
|
||||
{
|
||||
permanent: true,
|
||||
direction: 'right',
|
||||
offset: [60,0]
|
||||
});
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// Définition des overlays svg
|
||||
// La gyre de l'océan Indien
|
||||
var coin20_0 = L.latLng(0, 23);
|
||||
var coin0_20 = L.latLng(-65, 115);
|
||||
var bounds1 = L.latLngBounds(coin20_0, coin0_20);
|
||||
|
||||
// Définition des calques (overlay)
|
||||
var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
svgElement.setAttribute('xmlns', "http://www.w3.org/2000/svg");
|
||||
svgElement.setAttribute('viewBox', "0 0 100 100");
|
||||
svgElement.innerHTML = '<ellipse transform="rotate(-40 50 60)" cx="50" cy="60" rx="45" ry="30" stroke="black" stroke-opacity="1" fill-opacity="50%"/>';
|
||||
//svgElementBounds = centrerSVG(centreZero,extensionZero);
|
||||
//svgElementBounds = [map.layerPointToLatLng([0,0]),map.layerPointToLatLng([30,30])];
|
||||
var forme = L.svgOverlay(svgElement, bounds1);
|
||||
forme.addTo(map);
|
||||
|
||||
// La gyre de l'Atlantique Sud
|
||||
var coin20_0 = L.latLng(0, -65);
|
||||
var coin0_20 = L.latLng(-70, 18);
|
||||
var bounds1 = L.latLngBounds(coin20_0, coin0_20);
|
||||
|
||||
// Définition des calques (overlay)
|
||||
var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
svgElement.setAttribute('xmlns', "http://www.w3.org/2000/svg");
|
||||
svgElement.setAttribute('viewBox', "0 0 100 100");
|
||||
svgElement.innerHTML = '<path d="M 85,15 C 100,40 85,85 15,85 C 0,85 50,-55 85,15" stroke="black" stroke-opacity="1" fill-opacity="0%"/>\
|
||||
<image xlink:href="images/Mollweide_Cycle.gif" x="30" y="20" height="50" width="50" />';
|
||||
//svgElementBounds = centrerSVG(centreZero,extensionZero);
|
||||
//svgElementBounds = [map.layerPointToLatLng([0,0]),map.layerPointToLatLng([30,30])];
|
||||
var forme = L.svgOverlay(svgElement, bounds1);
|
||||
forme.addTo(map);
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// Définition des images overlay
|
||||
|
||||
var imageUrl = 'images/North_Pacific_Gyre.png';
|
||||
var errorOverlayUrl = 'https://cdn-icons-png.flaticon.com/512/110/110686.png';
|
||||
var altText = 'Wikipedia : https://commons.wikimedia.org/wiki/File:North_Pacific_Gyre.png';
|
||||
var latLngBounds = L.latLngBounds([[66.6, -254.5], [-15.5, -105.2]]);
|
||||
|
||||
var imageOverlay = L.imageOverlay(imageUrl, latLngBounds, {
|
||||
opacity: 1,
|
||||
errorOverlayUrl: errorOverlayUrl,
|
||||
alt: altText,
|
||||
interactive: true
|
||||
}).addTo(map)
|
||||
.bindTooltip("Gyre du Pacifique Nord",
|
||||
{
|
||||
permanent: true,
|
||||
direction: 'right',
|
||||
offset: [0,0]
|
||||
});
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Définition des vidéos overlay
|
||||
// Attention, pour remplir latLngBound, il faut mettre à fill la propriété
|
||||
// css object-fit de la balise video.
|
||||
|
||||
var videoUrls = [
|
||||
'images/GyreAtlantiqueNordPetitPetit.mp4'
|
||||
];
|
||||
var errorOverlayUrl = 'https://cdn-icons-png.flaticon.com/512/110/110686.png';
|
||||
var latLngBounds = L.latLngBounds([[57, -100], [3.5, 13]]);
|
||||
|
||||
var videoOverlay = L.videoOverlay(videoUrls, latLngBounds, {
|
||||
opacity: 0.6,
|
||||
errorOverlayUrl: errorOverlayUrl,
|
||||
interactive: true,
|
||||
autoplay: true,
|
||||
muted: true,
|
||||
playsInline: true,
|
||||
keepAspectRatio: false
|
||||
}).addTo(map);
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// Définition de la légende
|
||||
function getColor(d) {
|
||||
return d === 'Océaniques' ? "#5bc6da" :
|
||||
d === 'Terrestres' ? "#e5c7a9" :
|
||||
d === 'Polaires' ? "#dadcd2" :
|
||||
d === 'Désertiques' ? "#e2ddcf" :
|
||||
"#cd9474";
|
||||
}
|
||||
var legend = L.control({position: 'bottomleft'});
|
||||
legend.onAdd = function (map) {
|
||||
var div = L.DomUtil.create('div', 'info legend');
|
||||
labels = ['<strong>Surfaces</strong>'],
|
||||
categories = ['Océaniques','Terrestres','Polaires','Désertiques','Autres'];
|
||||
for (var i = 0; i < categories.length; i++) {
|
||||
div.innerHTML +=
|
||||
labels.push('<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background:'+getColor(categories[i])+';"></span> '+categories[i]);
|
||||
}
|
||||
div.innerHTML = labels.join('<br>');
|
||||
return div;
|
||||
};
|
||||
legend.addTo(map);
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// Définition d'un grand cercle avec le plugin Leaflet.greatCircle permettant
|
||||
// des grand cercles correctement définis dans la projection de Mercator.
|
||||
var grandcercle = new L.greatCircle([-30, 110], {radius: 6000000});
|
||||
grandcercle.addTo(map);
|
||||
|
||||
|
||||
onMapClick = function(e){
|
||||
popup = L.popup()
|
||||
popup.setLatLng(e.latlng)
|
||||
lepoint = map.latLngToLayerPoint(e.latlng);
|
||||
popup.setContent("Position : "+e.latlng+" et "+lepoint)
|
||||
popup.openOn(map);
|
||||
//console.log("Coordinate: #{e.latlng}")
|
||||
}
|
||||
|
||||
map.on('click', onMapClick)
|
||||
|
||||
};
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 778 B |
Loading…
Reference in New Issue