Ajout du répertoire de la carte leaflet.
This commit is contained in:
parent
e695d26f2c
commit
a9d6762d4b
110
OceansPlastiques_gyres/ProjetOceansPlastiques.bfproject
Normal file
110
OceansPlastiques_gyres/ProjetOceansPlastiques.bfproject
Normal file
@ -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
|
||||||
31
OceansPlastiques_gyres/css/moncss.css
Normal file
31
OceansPlastiques_gyres/css/moncss.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
31
OceansPlastiques_gyres/css/moncss.css~
Normal file
31
OceansPlastiques_gyres/css/moncss.css~
Normal file
@ -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;
|
||||||
|
}
|
||||||
1
OceansPlastiques_gyres/images/CercleFleche.svg
Normal file
1
OceansPlastiques_gyres/images/CercleFleche.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.4 KiB |
1
OceansPlastiques_gyres/images/CercleFleche50x50.svg
Normal file
1
OceansPlastiques_gyres/images/CercleFleche50x50.svg
Normal file
@ -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 |
138
OceansPlastiques_gyres/images/CercleFlecheRemplisBleuNoir.svg
Normal file
138
OceansPlastiques_gyres/images/CercleFlecheRemplisBleuNoir.svg
Normal file
@ -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 |
49
OceansPlastiques_gyres/images/Gyre.svg
Normal file
49
OceansPlastiques_gyres/images/Gyre.svg
Normal file
@ -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 |
BIN
OceansPlastiques_gyres/images/GyreAtlantiqueNordPetitPetit.mp4
Normal file
BIN
OceansPlastiques_gyres/images/GyreAtlantiqueNordPetitPetit.mp4
Normal file
Binary file not shown.
BIN
OceansPlastiques_gyres/images/Mollweide_Cycle.gif
Normal file
BIN
OceansPlastiques_gyres/images/Mollweide_Cycle.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 MiB |
BIN
OceansPlastiques_gyres/images/North_Pacific_Gyre.png
Normal file
BIN
OceansPlastiques_gyres/images/North_Pacific_Gyre.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 580 KiB |
BIN
OceansPlastiques_gyres/images/fleche.png
Normal file
BIN
OceansPlastiques_gyres/images/fleche.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 334 B |
58
OceansPlastiques_gyres/images/fleche.svg
Normal file
58
OceansPlastiques_gyres/images/fleche.svg
Normal file
@ -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 |
88
OceansPlastiques_gyres/images/fleche0.svg
Normal file
88
OceansPlastiques_gyres/images/fleche0.svg
Normal file
@ -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 |
13
OceansPlastiques_gyres/images/leaf-solid-svgrepo-com.svg
Normal file
13
OceansPlastiques_gyres/images/leaf-solid-svgrepo-com.svg
Normal file
@ -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 |
24
OceansPlastiques_gyres/index.html
Normal file
24
OceansPlastiques_gyres/index.html
Normal file
@ -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>
|
||||||
23
OceansPlastiques_gyres/index.html~
Normal file
23
OceansPlastiques_gyres/index.html~
Normal file
@ -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>
|
||||||
443
OceansPlastiques_gyres/js/Leaflet.greatCircle.js
Normal file
443
OceansPlastiques_gyres/js/Leaflet.greatCircle.js
Normal file
@ -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);
|
||||||
|
};
|
||||||
2
OceansPlastiques_gyres/js/jquery-3.7.0.min.js
vendored
Normal file
2
OceansPlastiques_gyres/js/jquery-3.7.0.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
215
OceansPlastiques_gyres/js/monjs.js
Normal file
215
OceansPlastiques_gyres/js/monjs.js
Normal file
@ -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)
|
||||||
|
|
||||||
|
};
|
||||||
215
OceansPlastiques_gyres/js/monjs.js~
Normal file
215
OceansPlastiques_gyres/js/monjs.js~
Normal file
@ -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)
|
||||||
|
|
||||||
|
};
|
||||||
BIN
OceansPlastiques_gyres/my-icon.png
Normal file
BIN
OceansPlastiques_gyres/my-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 778 B |
Loading…
Reference in New Issue
Block a user