From 6787114fc2ab5d5f59dd71a06150bd07b68ebac0 Mon Sep 17 00:00:00 2001 From: elias75015 Date: Thu, 9 Jul 2020 11:09:15 +0200 Subject: [PATCH 1/2] =?UTF-8?q?update(it:dep):=20mets=20=C3=A0=20jour=20la?= =?UTF-8?q?=20dep=20itowns=20en=202.23?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 18bc703f6..46704e96a 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,7 @@ "@mapbox/mapbox-gl-style-spec": "13.11.0", "eventbusjs": "0.2.0", "geoportal-access-lib": "2.1.6", - "itowns": "2.19.0", + "itowns": "2.23.0", "leaflet": "1.5.1", "leaflet-draw": "1.0.4", "loglevel": "^1.6.7", From 9c9cf6535affde46f4eb65eba8669ec455a1261d Mon Sep 17 00:00:00 2001 From: Elias Couppe Date: Thu, 9 Jul 2020 14:16:59 +0200 Subject: [PATCH 2/2] review(it): ajoute une copie du code itowns pour review --- src/Common-review/CSS/GPboostRelief.css | 180 +++ src/Common-review/CSS/GPdrawing.css | 61 + src/Common-review/CSS/GPelevationPath.css | 451 ++++++ src/Common-review/CSS/GPgeneralWidget.css | 228 +++ src/Common-review/CSS/GPgetFeatureInfo.css | 29 + src/Common-review/CSS/GPisochron.css | 309 ++++ src/Common-review/CSS/GPlayerSwitcher.css | 402 ++++++ src/Common-review/CSS/GPlocation.css | 52 + src/Common-review/CSS/GPmeasureArea.css | 22 + src/Common-review/CSS/GPmeasureAzimuth.css | 22 + src/Common-review/CSS/GPmeasureLength.css | 22 + src/Common-review/CSS/GPmeasureToolTip.css | 46 + src/Common-review/CSS/GPmousePosition.css | 215 +++ src/Common-review/CSS/GPreverseGeocoding.css | 161 +++ src/Common-review/CSS/GProute.css | 446 ++++++ src/Common-review/CSS/GPsearchEngine.css | 175 +++ src/Common-review/CSS/GPwaiting.css | 37 + src/Common-review/CSS/img/waiting.gif | Bin 0 -> 1333 bytes src/Common-review/Controls/AttributionDOM.js | 96 ++ src/Common-review/Controls/BoostReliefDOM.js | 242 ++++ src/Common-review/Controls/DrawingDOM.js | 671 +++++++++ src/Common-review/Controls/Editor/.gitkeep | 0 .../Controls/Editor/EditorDOM.js | 14 + .../Controls/ElevationPathDOM.js | 254 ++++ .../Controls/GetFeatureInfoDOM.js | 77 + src/Common-review/Controls/IsoDOM.js | 835 +++++++++++ src/Common-review/Controls/LayerImportDOM.js | 1064 ++++++++++++++ .../Controls/LayerSwitcherDOM.js | 676 +++++++++ .../Controls/LocationSelectorDOM.js | 484 +++++++ src/Common-review/Controls/MeasureAreaDOM.js | 80 ++ .../Controls/MeasureAzimuthDOM.js | 80 ++ .../Controls/MeasureLengthDOM.js | 80 ++ .../Controls/MeasureToolBoxDOM.js | 102 ++ src/Common-review/Controls/MiniGlobeDOM.js | 28 + .../Controls/MousePositionDOM.js | 940 ++++++++++++ .../Controls/ProfileElevationPathDOM.js | 524 +++++++ .../Controls/ReverseGeocodingDOM.js | 463 ++++++ src/Common-review/Controls/RouteDOM.js | 1200 ++++++++++++++++ src/Common-review/Controls/ScaleDOM.js | 26 + src/Common-review/Controls/SearchEngineDOM.js | 747 ++++++++++ src/Common-review/Styles.js | 17 + src/Common-review/Utils.js | 98 ++ src/Common-review/Utils/AutoLoadConfig.js | 58 + .../Utils/CheckRightManagement.js | 172 +++ src/Common-review/Utils/ColorUtils.js | 75 + src/Common-review/Utils/Config.js | 265 ++++ src/Common-review/Utils/Draggable.js | 120 ++ src/Common-review/Utils/LayerUtils.js | 312 ++++ src/Common-review/Utils/LoggerByDefault.js | 21 + src/Common-review/Utils/MathUtils.js | 111 ++ src/Common-review/Utils/ProxyUtils.js | 50 + src/Common-review/Utils/Register.js | 643 +++++++++ src/Common-review/Utils/SearchEngineUtils.js | 145 ++ src/Common-review/Utils/SelectorID.js | 80 ++ src/Itowns-review/CRS/CRS.js | 204 +++ .../Attribution/GPattributionItowns.css | 66 + .../BoostRelief/GPboostReliefItowns.css | 74 + .../BoostRelief/img/GPboostReliefOpen.png | Bin 0 -> 306 bytes .../BoostRelief/img/GPreliefSlider.png | Bin 0 -> 179 bytes .../LayerSwitcher/GPlayerSwitcherItowns.css | 91 ++ .../LayerSwitcher/img/GPlayerInfo.png | Bin 0 -> 726 bytes .../LayerSwitcher/img/GPlayerInfoClose.png | Bin 0 -> 535 bytes .../LayerSwitcher/img/GPlayerTools.png | Bin 0 -> 2233 bytes .../LayerSwitcher/img/GPopacitySlider.png | Bin 0 -> 179 bytes .../LayerSwitcher/img/GPshowLayersList.png | Bin 0 -> 571 bytes .../Controls/MiniGlobe/GPminiGlobeItowns.css | 8 + .../MousePosition/GPmousePositionItowns.css | 30 + .../MousePosition/img/GPmapCenter.png | Bin 0 -> 1975 bytes .../MousePosition/img/GPmousePositionOpen.png | Bin 0 -> 377 bytes .../CSS/Controls/Scale/GPscaleItowns.css | 15 + .../CSS/GPgeneralWidgetItowns.css | 67 + .../CSS/img/GPshowMoreOptions.png | Bin 0 -> 293 bytes src/Itowns-review/Controls/Attributions.js | 318 ++++ src/Itowns-review/Controls/BoostRelief.js | 281 ++++ src/Itowns-review/Controls/LayerSwitcher.js | 909 ++++++++++++ src/Itowns-review/Controls/MiniGlobe.js | 161 +++ src/Itowns-review/Controls/MousePosition.js | 1278 +++++++++++++++++ src/Itowns-review/Controls/Scale.js | 152 ++ .../Controls/Utils/PositionFormater.js | 88 ++ src/Itowns-review/Controls/Widget.js | 112 ++ src/Itowns-review/GlobeViewExtended.js | 848 +++++++++++ src/Itowns-review/Layer/LayerElevation.js | 131 ++ src/Itowns-review/Layer/LayerWMS.js | 126 ++ src/Itowns-review/Layer/LayerWMTS.js | 129 ++ src/Itowns-review/Layer/VectorTileLayer.js | 89 ++ src/Itowns-review/Styles.js | 7 + src/Itowns-review/index.js | 151 ++ 87 files changed, 19043 insertions(+) create mode 100644 src/Common-review/CSS/GPboostRelief.css create mode 100644 src/Common-review/CSS/GPdrawing.css create mode 100644 src/Common-review/CSS/GPelevationPath.css create mode 100644 src/Common-review/CSS/GPgeneralWidget.css create mode 100644 src/Common-review/CSS/GPgetFeatureInfo.css create mode 100644 src/Common-review/CSS/GPisochron.css create mode 100644 src/Common-review/CSS/GPlayerSwitcher.css create mode 100644 src/Common-review/CSS/GPlocation.css create mode 100644 src/Common-review/CSS/GPmeasureArea.css create mode 100644 src/Common-review/CSS/GPmeasureAzimuth.css create mode 100644 src/Common-review/CSS/GPmeasureLength.css create mode 100644 src/Common-review/CSS/GPmeasureToolTip.css create mode 100644 src/Common-review/CSS/GPmousePosition.css create mode 100644 src/Common-review/CSS/GPreverseGeocoding.css create mode 100644 src/Common-review/CSS/GProute.css create mode 100644 src/Common-review/CSS/GPsearchEngine.css create mode 100644 src/Common-review/CSS/GPwaiting.css create mode 100644 src/Common-review/CSS/img/waiting.gif create mode 100644 src/Common-review/Controls/AttributionDOM.js create mode 100644 src/Common-review/Controls/BoostReliefDOM.js create mode 100644 src/Common-review/Controls/DrawingDOM.js create mode 100644 src/Common-review/Controls/Editor/.gitkeep create mode 100644 src/Common-review/Controls/Editor/EditorDOM.js create mode 100644 src/Common-review/Controls/ElevationPathDOM.js create mode 100644 src/Common-review/Controls/GetFeatureInfoDOM.js create mode 100644 src/Common-review/Controls/IsoDOM.js create mode 100644 src/Common-review/Controls/LayerImportDOM.js create mode 100644 src/Common-review/Controls/LayerSwitcherDOM.js create mode 100644 src/Common-review/Controls/LocationSelectorDOM.js create mode 100644 src/Common-review/Controls/MeasureAreaDOM.js create mode 100644 src/Common-review/Controls/MeasureAzimuthDOM.js create mode 100644 src/Common-review/Controls/MeasureLengthDOM.js create mode 100644 src/Common-review/Controls/MeasureToolBoxDOM.js create mode 100644 src/Common-review/Controls/MiniGlobeDOM.js create mode 100644 src/Common-review/Controls/MousePositionDOM.js create mode 100644 src/Common-review/Controls/ProfileElevationPathDOM.js create mode 100644 src/Common-review/Controls/ReverseGeocodingDOM.js create mode 100644 src/Common-review/Controls/RouteDOM.js create mode 100644 src/Common-review/Controls/ScaleDOM.js create mode 100644 src/Common-review/Controls/SearchEngineDOM.js create mode 100644 src/Common-review/Styles.js create mode 100644 src/Common-review/Utils.js create mode 100644 src/Common-review/Utils/AutoLoadConfig.js create mode 100644 src/Common-review/Utils/CheckRightManagement.js create mode 100644 src/Common-review/Utils/ColorUtils.js create mode 100644 src/Common-review/Utils/Config.js create mode 100644 src/Common-review/Utils/Draggable.js create mode 100644 src/Common-review/Utils/LayerUtils.js create mode 100644 src/Common-review/Utils/LoggerByDefault.js create mode 100644 src/Common-review/Utils/MathUtils.js create mode 100644 src/Common-review/Utils/ProxyUtils.js create mode 100644 src/Common-review/Utils/Register.js create mode 100644 src/Common-review/Utils/SearchEngineUtils.js create mode 100644 src/Common-review/Utils/SelectorID.js create mode 100644 src/Itowns-review/CRS/CRS.js create mode 100644 src/Itowns-review/CSS/Controls/Attribution/GPattributionItowns.css create mode 100644 src/Itowns-review/CSS/Controls/BoostRelief/GPboostReliefItowns.css create mode 100644 src/Itowns-review/CSS/Controls/BoostRelief/img/GPboostReliefOpen.png create mode 100644 src/Itowns-review/CSS/Controls/BoostRelief/img/GPreliefSlider.png create mode 100644 src/Itowns-review/CSS/Controls/LayerSwitcher/GPlayerSwitcherItowns.css create mode 100644 src/Itowns-review/CSS/Controls/LayerSwitcher/img/GPlayerInfo.png create mode 100644 src/Itowns-review/CSS/Controls/LayerSwitcher/img/GPlayerInfoClose.png create mode 100644 src/Itowns-review/CSS/Controls/LayerSwitcher/img/GPlayerTools.png create mode 100644 src/Itowns-review/CSS/Controls/LayerSwitcher/img/GPopacitySlider.png create mode 100644 src/Itowns-review/CSS/Controls/LayerSwitcher/img/GPshowLayersList.png create mode 100644 src/Itowns-review/CSS/Controls/MiniGlobe/GPminiGlobeItowns.css create mode 100644 src/Itowns-review/CSS/Controls/MousePosition/GPmousePositionItowns.css create mode 100644 src/Itowns-review/CSS/Controls/MousePosition/img/GPmapCenter.png create mode 100644 src/Itowns-review/CSS/Controls/MousePosition/img/GPmousePositionOpen.png create mode 100644 src/Itowns-review/CSS/Controls/Scale/GPscaleItowns.css create mode 100644 src/Itowns-review/CSS/GPgeneralWidgetItowns.css create mode 100644 src/Itowns-review/CSS/img/GPshowMoreOptions.png create mode 100644 src/Itowns-review/Controls/Attributions.js create mode 100644 src/Itowns-review/Controls/BoostRelief.js create mode 100644 src/Itowns-review/Controls/LayerSwitcher.js create mode 100644 src/Itowns-review/Controls/MiniGlobe.js create mode 100644 src/Itowns-review/Controls/MousePosition.js create mode 100644 src/Itowns-review/Controls/Scale.js create mode 100644 src/Itowns-review/Controls/Utils/PositionFormater.js create mode 100644 src/Itowns-review/Controls/Widget.js create mode 100644 src/Itowns-review/GlobeViewExtended.js create mode 100644 src/Itowns-review/Layer/LayerElevation.js create mode 100644 src/Itowns-review/Layer/LayerWMS.js create mode 100644 src/Itowns-review/Layer/LayerWMTS.js create mode 100644 src/Itowns-review/Layer/VectorTileLayer.js create mode 100644 src/Itowns-review/Styles.js create mode 100644 src/Itowns-review/index.js diff --git a/src/Common-review/CSS/GPboostRelief.css b/src/Common-review/CSS/GPboostRelief.css new file mode 100644 index 000000000..1706ae36d --- /dev/null +++ b/src/Common-review/CSS/GPboostRelief.css @@ -0,0 +1,180 @@ +/* BOOST RELIEF */ + + div[id^=GPboostRelief-] { + font-size: 11px; + width: 150px; + } + + div[id^=GPboostRelief-] label { + display: block; + } + + div[id^=GPBoostReliefListContainer-] { + position: relative; + width: 100%; + height: 28px; + padding-left: 8px; + line-height: 28px; + } + + .GPlayerRelief, + .GPlayerReliefValue { + position: absolute; + top: 0; + } + + .GPlayerRelief { + width: calc(100% - 60px); + height: 28px; + padding-left: 8px; + } + + .GPlayerReliefValue { + width: 32px; + left: calc(100% - 40px); + line-height: 28px; + font-size: 10px; + font-style: italic; + cursor: default; + } + + /* Showing/hiding boost relief panel */ + + label[id^=GPshowBoostReliefPicto] { + display: inline-block; + } + + input[id^=GPshowBoostRelief-] + label { + display: block; + } + + input[id^=GPshowBoostRelief-]:checked + label { + display: none; + } + + input[id^=GPshowBoostRelief-] + label + div { + display: none; + } + + input[id^=GPshowBoostRelief-]:checked + label + div { + display: block; + } + + /* Showing layer advanced tools */ + + div[id^=GPboostRelief-] input[type="checkbox"]:checked + label + .GPlayerAdvancedToolsRelief { + max-height: 28px; + opacity: 1; + } + + .GPlayerAdvancedToolsRelief { + display: block; + position: relative; + width: 100%; + border-bottom : 1px dotted #CCC; + background-color : #FFF; + } + + .GPlayerReliefLayerId { + position: relative; + width: 100px; + height: 28px; + padding-left: 8px; + line-height: 28px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + /* Relief slider : general */ + + .GPlayerRelief input { + -webkit-appearance: none; + -moz-appearance: none; + background: none; + display: block; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + overflow: hidden; + cursor: pointer; + } + + .GPlayerRelief input[type="range"]:focus { + box-shadow: none; + outline: none; + } + + /* Relief slider : Chrome, Safari, Opera */ + + .GPlayerRelief input[type="range"]::-webkit-slider-runnable-track { + -webkit-appearance: none; + height: 3px; + } + + .GPlayerRelief input[type="range"]::-webkit-slider-thumb:before { + position: absolute; + top: 0; + right: 50%; + left: -200px; + height: 3px; + pointer-events: none; + } + + .GPlayerRelief input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + width: 9px; + height: 17px; + -webkit-appearance: none; + border: 2px solid #FFF; + background-color: #505050; + position: relative; + top: -7px; + } + + /* Relief slider : Firefox */ + + .GPlayerRelief input[type="range"]::-moz-range-track { + width: 80px; + height: 3px; + } + + .GPlayerRelief input[type="range"]::-moz-range-thumb { + width: 5px; + height: 13px; + border: 2px solid #FFF; + border-radius: 0; + box-shadow: 0; + background-color: #505050; + position: relative; + } + + /* Relief slider : IE */ + + .GPlayerRelief input[type="range"]::-ms-track { + border: 0; + border-color: transparent; + border-radius: 0; + border-width: 0; + color: transparent; + height: 3px; + width: 80px; + } + + .GPlayerRelief input[type="range"]::-ms-fill-lower, + .GPlayerRelief input[type="range"]::-ms-fill-upper { + background: transparent; + border-radius: 0; + } + + .GPlayerRelief input[type="range"]::-ms-thumb { + width: 5px; + height: 13px; + border: 2px solid #FFF; + background-color: #505050; + } + + .GPlayerRelief input[type="range"]::-ms-tooltip { + display: none; + } \ No newline at end of file diff --git a/src/Common-review/CSS/GPdrawing.css b/src/Common-review/CSS/GPdrawing.css new file mode 100644 index 000000000..a64b89e68 --- /dev/null +++ b/src/Common-review/CSS/GPdrawing.css @@ -0,0 +1,61 @@ +/* MOUSE POSITION */ + +/* Showing/hiding drawing panel */ + +label[id^=GPshowDrawingPicto-] { + display: inline-block; +} + +input[id^=GPshowDrawing-] + label { + display: block; +} + +input[id^=GPshowDrawing-]:checked + label { + display: none; +} + +input[id^=GPshowDrawing-] + label + div { + display: none; +} + +input[id^=GPshowDrawing-]:checked + label + div { + display: block; +} + +/* General panels */ + +div[id^=GPdrawingPanel-] { + width: 240px; + overflow: hidden; +} + +/* Basic infos */ + +div[id^=GPdrawingBasicPanel-] { + padding: 10px 15px; +} + +.GPdrawingLabel, +.GPdrawingCoords { + display: inline-block; + line-height: 20px; +} + +.GPdrawingLabel { + width: 80px; + font-weight: bold; +} + +.GPdrawingCoords { + width: 110px; +} + +/* markers selector */ +.marker-input-radio { + display : none ; +} + +input.marker-input-radio:checked + label { + border: 1px solid red; +} + diff --git a/src/Common-review/CSS/GPelevationPath.css b/src/Common-review/CSS/GPelevationPath.css new file mode 100644 index 000000000..bd8c57ef1 --- /dev/null +++ b/src/Common-review/CSS/GPelevationPath.css @@ -0,0 +1,451 @@ +div[id^=GPelevationPathPanelInfo] { + display: none; /* on n'affiche pas le bouton d'information par defaut */ +} + +/* Calc waiting */ + +.GPelevationPathCalcWaitingContainerVisible, +.GPelevationPathCalcWaitingContainerHidden { + position: absolute; + top: 32px; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(255,255,255,0.9); + font-size: 1.5em; + font-weight: bold; + overflow: hidden; +} + +.GPelevationPathInformationsContainerVisible, +.GPelevationPathInformationsContainerHidden { + position: absolute; + top: 32px; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(255,255,255,0.9); + font-size: 13px; + font-weight: bold; + overflow: hidden; +} + +.GPelevationPathCalcWaitingContainerVisible { + display: -webkit-flex; + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +.GPelevationPathInformationsContainerVisible { + display: -webkit-flex; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + flex-direction: column; +} + +.GPelevationPathCalcWaitingContainerHidden, +.GPelevationPathInformationsContainerHidden { + display: none; +} + +.GPelevationPathCalcWaiting, +.GPelevationPathInformations { + margin: auto; +} + +.GPelevationPathInformations { + font-size: 0.8em; +} + +.GPelevationPathCalcWaitingContainerVisible, +.GPelevationPathCalcWaitingContainerHidden, +.GPelevationPathInformationsContainerVisible, +.GPelevationPathInformationsContainerHidden { + border-radius: 5px; +} + +/* CSS : Raw */ + +#profileElevationRaw { + resize: none; + padding: unset; +} + +/* CSS : default */ + +#profileElevationByDefault { + display:-webkit-flex; + display:-webkit-box; + display:-ms-flexbox; + display:flex; + -webkit-box-orient:vertical; + -webkit-box-direction:normal; + -webkit-flex-direction:column; + -ms-flex-direction:column; + flex-direction:column; + height:100%; +} + +.profile-box { + height: calc(100% - 15px); + display:-webkit-flex; + display:-webkit-box; + display:-ms-flexbox; + display:flex; + -webkit-flex:1; + -webkit-box-flex:1; + -ms-flex:1; + flex:1; + -webkit-box-orient:horizontal; + -webkit-box-direction:normal; + -webkit-flex-direction:row; + -ms-flex-direction:row; + flex-direction:row; +} + +.profile-content { + -webkit-flex:1; + -webkit-box-flex:1; + -ms-flex:1; + flex:1; + -webkit-justify-content:center; + -webkit-box-pack:center; + -ms-flex-pack:center; + justify-content:center; + -webkit-box-align:center; + -webkit-align-items:center; + -ms-flex-align:center; + align-items:center; +} + +.profile-z-vertical, +.profile-z-vertical ul, +.profile-x-horizontal, +.profile-x-horizontal ul { + display:-webkit-flex; + display:-webkit-box; + display:-ms-flexbox; + display:flex; + /*justify-content:center;*/ + -webkit-align-items:center; + -webkit-box-align:center; + -ms-flex-align:center; + align-items:center; +} + + +.profile-z-vertical, +.profile-z-vertical ul, +.profile-content +{ + -webkit-box-orient:vertical; + -webkit-box-direction:normal; + -webkit-flex-direction:column; + -ms-flex-direction:column; + flex-direction:column; + height:100%; +} + +.profile-z-vertical ul, +.profile-x-horizontal ul{ + /*padding:0;*/ + margin:0; + list-style-type:none; +} + +.profile-z-vertical{ + /*background:green;*/ + -webkit-flex:0 1 auto; + -webkit-box-flex:0; + -ms-flex:0 1 auto; + flex:0 1 auto; + +} +.profile-z-vertical ul{ + /*background:pink;*/ + -webkit-justify-content:space-between; + -webkit-box-pack:justify; + -ms-flex-pack:justify; + justify-content:space-between; + padding:2px 5px 2px 2px; + /*border-right:1px solid #888;*/ +} +.profile-z-vertical .profile-unit{ + /*background:gray;*/ + width:100%; + text-align:center; + /*padding:5px 5px 2px 2px;*/ +} +.profile-content{ + /*background:yellow;*/ + /*flex:1 0 auto;*/ + +} +.profile-content ul { + background:white; + -webkit-flex:1 0 auto; + -webkit-box-flex:1; + -ms-flex:1 0 auto; + flex:1 0 auto; + height:100%; + width:100%; + -webkit-justify-content:flex-start; + -webkit-box-pack:start; + -ms-flex-pack:start; + justify-content:flex-start; + -webkit-align-items:flex-end; + -webkit-box-align:end; + -ms-flex-align:end; + align-items:flex-end; + + margin:0; + padding:0; + +} +.profile-x-horizontal{ + /*background:blue;*/ + -webkit-flex:0 1 auto; + -webkit-box-flex:0; + -ms-flex:0 1 auto; + flex:0 1 auto;; + width:100%; + height: 15px +} +.profile-x-horizontal ul{ + /*background:orange;*/ + -webkit-justify-content:space-between; + -webkit-box-pack:justify; + -ms-flex-pack:justify; + justify-content:space-between; + /*padding:5px 2px 2px 2px;*/ + width:100%; + /*border-top:1px solid #888;*/ +} + +.profile-x-fleche { + width: 0; + height: 0; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 5px solid green; +} + +.profile-z-fleche { + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 5px solid red; +} + +.profile-z-axis { + border-right: none; + border-left: solid 2px #888; + cursor: default; +} + +.profile-x-axis { + border-top: none; + border-bottom: solid 2px #888; + cursor: default; +} + +ul#profile-data li.percent { + display: inline-block; + vertical-align: bottom; + background-color: #C77A04; + opacity : 0.3; + border-top: solid 1px; + border-radius: 2px; + cursor: pointer; +} + +li.axe span.bottom-axis { + vertical-align: bottom; +} + +ul#profile-data .percent:hover { + display: inline-block; + vertical-align: bottom; + background-color: #f00; +} + +.v0 { height: 0%; } +.v1 { height: 1%; } +.v2 { height: 2%; } +.v3 { height: 3%; } +.v4 { height: 4%; } +.v5 { height: 5%; } +.v6 { height: 6%; } +.v7 { height: 7%; } +.v8 { height: 8%; } +.v9 { height: 9%; } +.v10 { height: 10%; } +.v11 { height: 11%; } +.v12 { height: 12%; } +.v13 { height: 13%; } +.v14 { height: 14%; } +.v15 { height: 15%; } +.v16 { height: 16%; } +.v17 { height: 17%; } +.v18 { height: 18%; } +.v19 { height: 19%; } +.v20 { height: 20%; } +.v21 { height: 21%; } +.v22 { height: 22%; } +.v23 { height: 23%; } +.v24 { height: 24%; } +.v25 { height: 25%; } +.v26 { height: 26%; } +.v27 { height: 27%; } +.v28 { height: 28%; } +.v29 { height: 29%; } +.v30 { height: 30%; } +.v31 { height: 31%; } +.v32 { height: 32%; } +.v33 { height: 33%; } +.v34 { height: 34%; } +.v35 { height: 35%; } +.v36 { height: 36%; } +.v37 { height: 37%; } +.v38 { height: 38%; } +.v39 { height: 39%; } +.v40 { height: 40%; } +.v41 { height: 41%; } +.v42 { height: 42%; } +.v43 { height: 43%; } +.v44 { height: 44%; } +.v45 { height: 45%; } +.v46 { height: 46%; } +.v47 { height: 47%; } +.v48 { height: 48%; } +.v49 { height: 49%; } +.v50 { height: 50%; } +.v51 { height: 51%; } +.v52 { height: 52%; } +.v53 { height: 53%; } +.v54 { height: 54%; } +.v55 { height: 55%; } +.v56 { height: 56%; } +.v57 { height: 57%; } +.v58 { height: 58%; } +.v59 { height: 59%; } +.v60 { height: 60%; } +.v61 { height: 61%; } +.v62 { height: 62%; } +.v63 { height: 63%; } +.v64 { height: 64%; } +.v65 { height: 65%; } +.v66 { height: 66%; } +.v67 { height: 67%; } +.v68 { height: 68%; } +.v69 { height: 69%; } +.v70 { height: 70%; } +.v71 { height: 71%; } +.v72 { height: 72%; } +.v73 { height: 73%; } +.v74 { height: 74%; } +.v75 { height: 75%; } +.v76 { height: 76%; } +.v77 { height: 77%; } +.v78 { height: 78%; } +.v79 { height: 79%; } +.v80 { height: 80%; } +.v81 { height: 81%; } +.v82 { height: 82%; } +.v83 { height: 83%; } +.v84 { height: 84%; } +.v85 { height: 85%; } +.v86 { height: 86%; } +.v87 { height: 87%; } +.v88 { height: 88%; } +.v89 { height: 89%; } +.v90 { height: 90%; } +.v91 { height: 91%; } +.v92 { height: 92%; } +.v93 { height: 93%; } +.v94 { height: 94%; } +.v95 { height: 95%; } +.v96 { height: 96%; } +.v97 { height: 97%; } +.v98 { height: 98%; } +.v99 { height: 99%; } +.v100 { height: 100%; } + +/* CSS : D3 */ + +.axis-d3 > text { + fill: rgb(94, 94, 94); + font-family: Verdana; + font-size: 10px; + opacity: 1; + text-anchor: end; +} + +.axis-d3 { + fill: none; + stroke: #5E5E5E; + stroke-width: 1; + shape-rendering: crispEdges; +} + +.area-d3 { + fill: #C77A04; + stroke: #5E5E5E; + stroke-width: 0; + fill-opacity: 0.4; +} + +.line-d3 { + fill: none; + stroke: #C77A04; + stroke-width: 1px; +} + +.grid-d3 .tick { + stroke: lightgrey; + opacity: 0.7; +} + +.grid-d3 path { + stroke-width: 0; +} + +.grid-d3 .tick { + stroke: lightgrey; + opacity: 0.7; +} + +.grid-d3 path { + stroke-width: 0; +} + +.overlay-d3 { + fill: none; + pointer-events: all; +} + +.focusLine-d3 { + fill: none; + stroke: #C77A04; + stroke-width: 0.5px; +} + +.focusCircle-d3 { + fill: #C77A04; +} + +div.tooltip-d3 { + position: inherit;; + text-align: left; + width: 80px; + height: 45px; + padding: 5px; + font: 8px sans-serif; + background: white; + border: 0px; + border-radius: 8px; + pointer-events: none; +} diff --git a/src/Common-review/CSS/GPgeneralWidget.css b/src/Common-review/CSS/GPgeneralWidget.css new file mode 100644 index 000000000..2c0c81be1 --- /dev/null +++ b/src/Common-review/CSS/GPgeneralWidget.css @@ -0,0 +1,228 @@ +/* Widgets : general */ + +.GPwidget { + position: absolute; + font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; + font-size: 13px; + color: #333; +} + +.GPwidget input[type='text'], +.GPwidget input[type='button'] { + -webkit-appearance: none; + color: #333333; +} + +.GPwidget input[type="checkbox"] { + display: none; +} + +.GPwidget select { + padding-left: 3px; + border-radius: 3px; +} + +.GPwidget form { + margin-bottom: 0; +} + +.GPwidget * { + box-sizing: border-box; + background-repeat: no-repeat; +} + +/* waiting */ + +.GPwaiting { + background-image : url("img/waiting.gif"); + background-position : center center; + background-repeat : no-repeat; +} + +/* General panels */ + +.GPpanel { + background-color: #FFF; +} + +.GPpanelHeader { + position: relative; + width: 100%; +} + +.GPpanelTitle { + width: 100%; + height: 100%; + text-align: center; + font-weight: bold; +} + +.GPpanelClose, .GPpanelReduce, .GPpanelInfo { + position: absolute; + cursor: pointer; +} + +/* Showing/hiding advanced panels */ + +.GPshowAdvancedToolPicto { + position: relative; + box-sizing: border-box; + cursor: pointer; +} + +.GPshowAdvancedToolOpen { + position: absolute; + display: block; + box-sizing: border-box; +} + +/* Flex inputs */ + +.GPflexInput { + display: -webkit-flex; + display: -ms-flexbox; + display: -webkit-box; + display: flex; + transition: max-height 0.3s ease-out, opacity 0.3s ease-out; +} + +/* FIXME tempory hack with :not(.GPlocationOriginHidden) ! +.GPflexInput > *:not(.GPlocationOriginHidden) */ +.GPflexInput > * { + display: block; + height: 28px; + line-height: 26px; + border: 1px solid #999; + border-radius: 0; +} + +.GPflexInput *:not(:last-child) { + border-right:none; +} + +.GPflexInput *:first-child { + border-radius: 3px 0 0 3px; +} + +.GPflexInput *:last-child { + border-radius: 0 3px 3px 0; +} + +.GPflexInput > *:not(input) { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.GPflexInput > input { + -webkit-flex: 1; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + padding: 0 5px; + min-width: 0; +} + +.GPflexInput > select { + -webkit-flex: 1; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + padding-right: 7px; +} + +.GPflexInput > label { + background-color: #F2F2F2; + color: #666; + padding-left: 7px; + padding-right: 9px; + cursor: pointer; +} + +/* Particular inputs */ + +.GPinputSelect { + display: block; + height: 28px; + line-height: 26px; + margin: auto; + border: 1px solid #999; + color: #333; + cursor: pointer; +} + +input.GPinputSubmit { + display: block; + width: 80px; + margin: auto; + height: 28px; + line-height: 26px; + padding: 0; + background: none; + border: none; + border-radius: 3px; + font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; + color: #FFF; + font-weight: bold; + opacity: 0.8; + transition: opacity 0.2s ease-out; + cursor: pointer; +} + +input.GPinputSubmit:hover { + opacity: 1; +} + +/* Autocomplete/geocode results */ + +.GPautoCompleteList, +.GPadvancedAutoCompleteList { + z-index: 2; + display: none; + position: absolute; + max-height: 140px; + background-color: #FFF; + border: 1px solid #999; + overflow-y: hidden; +} + +.GPadvancedAutoCompleteList { + width: calc(100% - 28px); + border-top: none; + font-size: 0.9em; +} + +.GPautoCompleteProposal { + width: 100%; + height: 28px; + line-height: 16px; + padding: 6px 10px; + color: #5E5E5E; + font-size: 1.0em; + overflow: hidden; + white-space: nowrap; + text-overflow:ellipsis; + cursor: pointer; +} + +.GPautoCompleteProposal:hover { + color: #000000; + background-color: #CEDBEF +} + +/* Showing additional hidden options */ + +.GPshowMoreOptions { + display: block; + position: absolute; + width: 28px; + height: 28px; + cursor: pointer; + transition: all 0.5s ease-out 0s; +} + +input[type="checkbox"]:checked + .GPshowMoreOptions { + -webkit-transform: rotateX(180deg); + transform: rotateX(180deg); + /* bottom: 90px; */ +} diff --git a/src/Common-review/CSS/GPgetFeatureInfo.css b/src/Common-review/CSS/GPgetFeatureInfo.css new file mode 100644 index 000000000..422d8878d --- /dev/null +++ b/src/Common-review/CSS/GPgetFeatureInfo.css @@ -0,0 +1,29 @@ +/* GET FEATURE INFO */ + +label[id^=GPgetFeatureInfoPicto] { + display: inline-block; +} + +div[id^=GPgetFeatureInfo-] + label { + display: block; +} + +span[id^=GPgetFeatureInfoActivate], +span[id^=GPgetFeatureInfoDeactivate] { + position: absolute; + display: block; + transition: border-radius 0.5s ease-out 0s, opacity 0.5s ease-out 0s; +} + +span[id^=GPgetFeatureInfoActivate] { + background-position: 0 0; + opacity: 1; +} + +span[id^=GPgetFeatureInfoDeactivate] { + opacity: 0; +} + +div[id^=GPgetFeatureInfo-] input[type="checkbox"]:not(:checked) + label[id^=GPgetFeatureInfoPicto] span[id^=GPgetFeatureInfoDeactivate] { + opacity: 1; +} diff --git a/src/Common-review/CSS/GPisochron.css b/src/Common-review/CSS/GPisochron.css new file mode 100644 index 000000000..f9af5195b --- /dev/null +++ b/src/Common-review/CSS/GPisochron.css @@ -0,0 +1,309 @@ +/* ISOCHRON */ + +div[id^=GPisochron-] { + top: 140px; +} + +/* Showing/hiding mouse position panel */ + +label[id^=GPshowIsochronPicto] { + display: inline-block; +} + +input[id^=GPshowIsochron-] + label { + display: block; +} + +input[id^=GPshowIsochron-]:checked + label { + display: none; +} + +input[id^=GPshowIsochron-] + label + div { + display: none; +} + +input[id^=GPshowIsochron-]:checked + label + div { + display: block; +} + +/* General panels */ + +div[id^=GPisochronPanel-] { + width: 280px; +} + +/* Calc waiting */ + +.GPisochronCalcWaitingContainerVisible, +.GPisochronCalcWaitingContainerHidden { + position: absolute; + top: 32px; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(255,255,255,0.9); + font-size: 1.5em; + font-weight: bold; + overflow: hidden; +} + +.GPisochronCalcWaitingContainerVisible { + display: -webkit-flex; + display: -ms-flexbox; + display: -webkit-box; + display: flex; +} + +.GPisochronCalcWaitingContainerHidden { + display: none; +} + +.GPisochronCalcWaiting { + margin: auto; +} + +/* Isochron form */ + +form[id^=GPisochronForm] { + padding: 15px; +} + +.GPisochronFormMini { + max-height: 58px; + overflow: hidden; +} + +.GPisochronFormMini div[id^="GPisochronReset-"], +.GPisochronFormMini label[id^="GPshowIsoExclusionsPicto-"] { + display: none; +} + +.GPisochronOriginVisible { + display: block; +} + +.GPisochronOriginHidden { + display: none; +} + +.GPisochronOriginPointerImg { + width: 28px; + background-color: #F2F2F2; + cursor: pointer; +} + +input[id^="GPisochronOriginPointer"] + .GPisochronOriginPointerImg { + background-position: -1px -1px; +} + +input[id^="GPisochronOriginPointer"]:checked + .GPisochronOriginPointerImg { + background-position: -29px -1px; +} + +input[id^=GPisochronSubmit] { + margin-top: 5px; +} + +/* Alternative choice */ + +div[id^=GPisochronChoice] { + display: -webkit-flex; + display: -ms-flexbox; + display: -webkit-box; + display: flex; + width: 160px; + -webkit-justify-content: space-between; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + margin: auto; + margin-top: 15px; + margin-bottom: 5px; +} + +.GPisochronChoiceAlt input { + display: none; +} + +.GPisochronChoiceAltImg { + display: block; + width: 28px; + height: 28px; + margin: auto; + cursor: pointer; +} + +input[id^=GPisochronChoiceAltChron] + .GPisochronChoiceAltImg { + background-position: -56px 0; +} + +input[id^=GPisochronChoiceAltChron]:checked + .GPisochronChoiceAltImg { + background-position: -84px 0; +} + +input[id^=GPisochronChoiceAltDist] + .GPisochronChoiceAltImg { + background-position: -112px 0; +} + +input[id^=GPisochronChoiceAltDist]:checked + .GPisochronChoiceAltImg { + background-position: -140px 0; +} + +.GPisochronChoiceAlt span { + cursor: pointer; + display:block; + color: #999; +} + +.GPisochronValueHidden { + display: none; +} + +div[id^=GPisochronValueChron], +div[id^=GPisochronValueDist] { + width: 220px; + margin: auto; +} + +/* Mode choice */ + +div[id^=GPisochronModeChoice] { + display: -webkit-flex; + display: -ms-flexbox; + display: -webkit-box; + display: flex; + -webkit-justify-content: space-between; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + margin: 15px 0; +} + +.GPisochronModeLabel { + display: block; + text-align: center; + margin-bottom: 5px; +} + +div[id^=GPisochronTransportChoice] input { + display: none; +} + +.GPisochronTransportImg { + display: inline-block; + width: 28px; + height: 28px; + cursor: pointer; +} + +.GPisochronTransportImg:first-of-type { + margin-left: 18px; + margin-right: 10px; +} + +input[id^=GPisochronTransportCar] + .GPisochronTransportImg { + background-position: -168px 0; +} + +input[id^=GPisochronTransportCar]:checked + .GPisochronTransportImg { + background-position: -196px 0; +} + +input[id^=GPisochronTransportPedestrian] + .GPisochronTransportImg { + background-position: -224px 0; +} + +input[id^=GPisochronTransportPedestrian]:checked + .GPisochronTransportImg { + background-position: -252px 0; +} + +select[id^=GPisochronDirectionSelect] { + width: 80px; +} + +/* Showing/hiding exclusions */ + +input[id^=GPshowIsoExclusions] { + display: none; +} + +.GPshowIsoExclusionsPicto { + top: 250px; + right: 0; + transition: all 0.5s ease-out 0s; +} + +input[id^=GPshowIsoExclusions] + label + div[id^=GPisoExclusions] { + max-height: 0; + opacity: 0; + margin-bottom: 0; +} + +input[id^=GPshowIsoExclusions]:checked + label + div[id^=GPisoExclusions] { + display: block; + max-height: 60px; + opacity: 1; + margin-bottom: 15px; +} + +/* Exclusions */ + +div[id^=GPisoExclusions] { + transition: max-height 0.5s ease-in-out 0.25s, opacity 0.5s ease-in-out 0.25s, margin 0.3s ease-in-out 0.25s; + overflow: hidden; +} + +.GPisoExclusionsLabel { + display: block; + text-align: center; + margin-bottom: 10px; + font-weight: bold; + line-height: 16px; +} + +.GPisoExclusionsOptions { + display: -webkit-flex; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; +} + +.GPisoExclusionsOption { + display: block; + height: 28px; + line-height: 26px; + color: #A77; + background-color: #FEE; + padding-left: 28px; + padding-right: 5px; + border: 1px solid #A77; + border-radius: 3px; + cursor: pointer; +} + +input:checked + .GPisoExclusionsOption { + background-color: #EFE; + background-position: 0 -28px; + color: #797; + border: 1px solid #797; +} + +/* Reset picto */ +div[id^=GPisochronReset] { + position: absolute; + margin-top: 5px; + width: 28px; + height: 28px; + border-radius: 3px; + opacity: 0.8; + background-position: -281px 0; + transition: opacity 0.2s ease-out; + cursor: pointer; +} + +div[id^=GPisochronReset]:hover { + opacity: 1; +} diff --git a/src/Common-review/CSS/GPlayerSwitcher.css b/src/Common-review/CSS/GPlayerSwitcher.css new file mode 100644 index 000000000..b5f19732e --- /dev/null +++ b/src/Common-review/CSS/GPlayerSwitcher.css @@ -0,0 +1,402 @@ +/* LAYER SWITCHER */ + +div[id^=GPlayerSwitcher-] { + font-size: 11px; +} + +div[id^=GPlayerSwitcher-] [draggable] { + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + user-select: none; + /* Required to make elements draggable in old WebKit */ + -khtml-user-drag: element; + -webkit-user-drag: element; +} + +/* Manage opening of the components through hiden checkboxes */ + +div[id^=GPlayerSwitcher-] input[type="checkbox"] + div, +div[id^=GPlayerSwitcher-] input[type="checkbox"] + label + div { + max-height: 0px; +} + +div[id^=GPlayerSwitcher-] label { + display: block; +} + +/* Showing/hiding layers list */ + +label[id^=GPshowLayersListPicto] { + position: relative; + float: right; + display: block; + opacity: 1; + transition: opacity 0.5s ease-out 0s, box-shadow 0.5s ease-out 0s, border 0.5s ease-out 0s, border-radius 0.5s ease-out 0s; + cursor: pointer; +} + +span[id^=GPshowLayersListOpen], +span[id^=GPshowLayersListClose] { + position: absolute; + display: block; + transition: border-radius 0.5s ease-out 0s, opacity 0.5s ease-out 0s; +} + +span[id^=GPshowLayersListOpen] { + background-position: 0 0; + opacity: 1; +} + +span[id^=GPshowLayersListClose] { + opacity: 0; +} + +div[id^=GPlayerSwitcher-] input[type="checkbox"]:checked + div + label[id^=GPshowLayersListPicto] { + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +div[id^=GPlayerSwitcher-] input[type="checkbox"]:checked + div + label[id^=GPshowLayersListPicto] span[id^=GPshowLayersListClose] { + opacity: 1; +} + +/* Layers list */ + +div[id^=GPlayersList] { + position: relative; + width: 180px; + border-bottom-right-radius: 0; + opacity: 0; + overflow: auto; + transition: max-height 0.5s ease-out 0s, opacity 0.5s ease-out 0.25s; +} + +div[id^=GPlayerSwitcher-] input[type="checkbox"]:checked + div[id^=GPlayersList] { + max-height: 232px; + opacity: 1; + transition: max-height 0.5s ease-in 0s, opacity 0.25s ease-in 0s; +} + +/* Layer : general */ + +.GPlayerSwitcher_layer { + position: relative; + top: 0; + background-color: #FFF; + border-bottom: 1px dotted #CCC; + overflow: hidden; +} + +div[id^=GPlayersList] .GPlayerSwitcher_layer:last-child { + border-bottom: none; +} + +.GPlayerBasicTools, +.GPlayerAdvancedTools { + position: relative; + width: 100%; + height: 28px; +} + +.GPlayerVisibility, +.GPlayerInfo, +.GPlayerInfoOpened, +.GPlayerRemove { + width: 28px; + height: 28px; + cursor: pointer; +} + +.GPlayerVisibility, +.GPlayerName, +.GPlayerInfo, +.GPlayerInfoOpened, +.GPlayerRemove, +.GPlayerOpacity, +.GPlayerOpacityValue { + position: absolute; + top: 0; +} + +.GPghostLayer { + opacity: 0; +} + +/* Layer basic tools */ + +.GPlayerBasicTools { + background-color: #FFF; +} + +.GPlayerVisibility { + left: 0; + background-position: -28px 0; +} + +input[type="checkbox"]:checked + .GPlayerVisibility { + background-position: 0 0; +} + +.GPlayerName { + left: 28px; + width: calc(100% - 56px); + line-height: 28px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + padding-left: 4px; + cursor: move; +} + +.outOfRange .GPlayerName { + color: #AAA; +} + +/* Showing layer advanced tools */ + +.GPshowLayerAdvancedTools { + top: 0; + right: 0; + background-position: -112px 0; +} + +.GPlayerAdvancedTools { + display: block; + max-height: 0; + opacity: 0; + transition: max-height 0.5s ease-out 0s, opacity 0.5s ease-out 0s; +} + +div[id^=GPlayerSwitcher-] input[type="checkbox"]:checked + label + .GPlayerAdvancedTools { + max-height: 28px; + opacity: 1; +} + +/* Layer advanced tools */ + +.GPlayerInfo { + left: 0; + background-position: -55px 0; +} + +.GPlayerInfoOpened { + left: 0; + background-position: -83px 0; +} + +.GPlayerOpacity { + left: 28px; + width: calc(100% - 100px); + height: 28px; + padding-left: 8px; +} + +.GPlayerOpacityValue { + width: 32px; + left: calc(100% - 60px); + line-height: 28px; + font-size: 10px; + font-style: italic; + cursor: default; +} + +.GPlayerRemove { + right: 0; + background-position: -140px 0; +} + +/* Opacity slider : general */ + +.GPlayerOpacity input { + -webkit-appearance: none; + -moz-appearance: none; + background: none; + display: block; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + overflow: hidden; + cursor: pointer; +} + +.GPlayerOpacity input[type="range"]:focus { + box-shadow: none; + outline: none; +} + +/* Opacity slider : Chrome, Safari, Opera */ + +.GPlayerOpacity input[type="range"]::-webkit-slider-runnable-track { + -webkit-appearance: none; + height: 3px; +} + +.GPlayerOpacity input[type="range"]::-webkit-slider-thumb:before { + position: absolute; + top: 0; + right: 50%; + left: -200px; + height: 3px; + pointer-events: none; +} + +.GPlayerOpacity input[type="range"]::-webkit-slider-thumb { + width: 9px; + height: 17px; + -webkit-appearance: none; + border: 2px solid #FFF; + background-color: #505050; + position: relative; + top: -7px; +} + +/* Opacity slider : Firefox */ + +.GPlayerOpacity input[type="range"]::-moz-range-track { + width: 80px; + height: 3px; +} + +.GPlayerOpacity input[type="range"]::-moz-range-thumb { + width: 5px; + height: 13px; + border: 2px solid #FFF; + border-radius: 0; + box-shadow: 0; + background-color: #505050; + position: relative; +} + +/* Opacity slider : IE */ + +.GPlayerOpacity input[type="range"]::-ms-track { + border: 0; + border-color: transparent; + border-radius: 0; + border-width: 0; + color: transparent; + height: 3px; + width: 80px; +} + +.GPlayerOpacity input[type="range"]::-ms-fill-lower, +.GPlayerOpacity input[type="range"]::-ms-fill-upper { + background: transparent; + border-radius: 0; +} + +.GPlayerOpacity input[type="range"]::-ms-thumb { + width: 5px; + height: 13px; + border: 2px solid #FFF; + background-color: #505050; +} + +.GPlayerOpacity input[type="range"]::-ms-tooltip { + display: none; +} + +/* Layer info panel */ + +div[id^=GPlayerInfoPanel] { + position: absolute; + top: 0; + overflow-y: hidden; + padding-top: 10px; + padding-bottom: 10px; +} + +.GPlayerInfoPanelOpened { + display: block; +} + +.GPlayerInfoPanelClosed { + display: none; +} + +div[id^=GPlayerInfoContent] { + position: relative; + width: 280px; + max-height: 200px; + overflow-y: auto; + padding-left: 10px; + padding-right: 10px; +} + +div[id^=GPlayerInfoTitle] { + width: calc(100% - 52px); + margin: auto; + margin-bottom: 10px; + padding-bottom: 5px; + text-align: center; + font-size: 1.1em; + font-weight: bold; +} + +div[id^=GPlayerInfoQuicklook] { + position: absolute; + top: -2px; + left: 10px; + width: 20px; + height: 20px; + cursor: pointer; +} + +div[id^=GPlayerInfoClose] { + position: absolute; + top: -8px; + right: 10px; + width: 28px; + height: 28px; + cursor: pointer; +} + +div[id^=GPlayerInfoDescription] { + font-size: 0.9em; +} + +div[id^=GPlayerInfoLegend] { + +} + +div[id^=GPlayerInfoMetadata] { + +} + +.GPlayerInfoSubtitle { + padding-left: 35px; + font-weight: bold; + margin-top: 10px; + margin-bottom: 4px; +} + +.GPlayerInfoLink, +.GPlayerInfoPopup { + line-height: 20px; + padding-left: 23px; + white-space: nowrap; + overflow-x: hidden; + text-overflow: ellipsis; + color: #999999; + background-repeat: no-repeat; + cursor: pointer; +} + +.GPlayerInfoLink { + background-position: 0 -20px; +} + +.GPlayerInfoLink:hover, +.GPlayerInfoPopup:hover { + color: #333; +} + +.GPlayerInfoLink a, +.GPlayerInfoLink a:visited +.GPlayerInfoLink a:focus +.GPlayerInfoLink a:hover { + text-decoration: none; + color: inherit; +} diff --git a/src/Common-review/CSS/GPlocation.css b/src/Common-review/CSS/GPlocation.css new file mode 100644 index 000000000..0db15e710 --- /dev/null +++ b/src/Common-review/CSS/GPlocation.css @@ -0,0 +1,52 @@ +/* Location */ + +/* Location form */ + +.GPlocationStageFlexInput { + max-height: 28px; + opacity: 1; +} + +.GPlocationStageFlexInputHidden { + max-height: 0; + opacity: 0; + overflow: hidden; +} + +.GPlocationOriginVisible { + display: block; +} + +.GPlocationOriginHidden { + display: none; +} + +label.GPlocationOriginPointerImg[id*="GPlocationOriginPointerImg"] { + width: 28px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + border-right: 1px solid #999; +} + +input[id*="GPlocationOriginPointer"] + .GPlocationOriginPointerImg { + background-position: -1px -1px; +} + +input[id*="GPlocationOriginPointer"]:checked + .GPlocationOriginPointerImg { + background-position: -29px -1px; +} + +.GPlocationStageRemove, +div[id^=GPlocationStageAdd] { + width: 28px; + border: none; + cursor: pointer; +} + +.GPlocationStageRemove { + background-position: -84px 0; +} + +div[id^=GPlocationStageAdd] { + background-position: -56px 0; +} diff --git a/src/Common-review/CSS/GPmeasureArea.css b/src/Common-review/CSS/GPmeasureArea.css new file mode 100644 index 000000000..b405a9ac7 --- /dev/null +++ b/src/Common-review/CSS/GPmeasureArea.css @@ -0,0 +1,22 @@ +/* Showing/hiding drawing panel */ + +label[id^=GPshowMeasureAreaPicto-] { + display: inline-block; +} + +input[id^=GPshowMeasureArea-] + label { + display: block; +} + +input[id^=GPshowMeasureArea-]:checked + label { + display: block; + background-color: rgba(0,60,136,0.5); +} + +input[id^=GPshowMeasureArea-] + label + div { + display: block; +} + +input[id^=GPshowMeasureArea-]:checked + label + div { + display: block; +} diff --git a/src/Common-review/CSS/GPmeasureAzimuth.css b/src/Common-review/CSS/GPmeasureAzimuth.css new file mode 100644 index 000000000..ac9a4b93d --- /dev/null +++ b/src/Common-review/CSS/GPmeasureAzimuth.css @@ -0,0 +1,22 @@ +/* Showing/hiding drawing panel */ + +label[id^=GPshowMeasureAzimuthPicto-] { + display: inline-block; +} + +input[id^=GPshowMeasureAzimuth-] + label { + display: block; +} + +input[id^=GPshowMeasureAzimuth-]:checked + label { + display: block; + background-color: rgba(0,60,136,0.5); +} + +input[id^=GPshowMeasureAzimuth-] + label + div { + display: block; +} + +input[id^=GPshowMeasureAzimuth-]:checked + label + div { + display: block; +} diff --git a/src/Common-review/CSS/GPmeasureLength.css b/src/Common-review/CSS/GPmeasureLength.css new file mode 100644 index 000000000..c520239da --- /dev/null +++ b/src/Common-review/CSS/GPmeasureLength.css @@ -0,0 +1,22 @@ +/* Showing/hiding drawing panel */ + +label[id^=GPshowMeasureLengthPicto-] { + display: inline-block; +} + +input[id^=GPshowMeasureLength-] + label { + display: block; +} + +input[id^=GPshowMeasureLength-]:checked + label { + display: block; + background-color: rgba(0,60,136,0.5); +} + +input[id^=GPshowMeasureLength-] + label + div { + display: block; +} + +input[id^=GPshowMeasureLength-]:checked + label + div { + display: block; +} diff --git a/src/Common-review/CSS/GPmeasureToolTip.css b/src/Common-review/CSS/GPmeasureToolTip.css new file mode 100644 index 000000000..fb0102bfd --- /dev/null +++ b/src/Common-review/CSS/GPmeasureToolTip.css @@ -0,0 +1,46 @@ +/* MEASURE TOOL */ + +.GPmeasureTooltip { + position: relative; + background: rgba(0, 0, 0, 0.5); + border-radius: 4px; + color: white; + padding: 4px 8px; + white-space: nowrap; +} + +.GPmeasureTooltip-measure { + font-weight: bold; +} + +.GPmeasureTooltip-info { + font-size: 0.75em; + text-align: center; +} + +.GPmeasureTooltip-static { + background-color: #ffcc33; + color: black; + border: 1px solid white; +} + +.GPmeasureTooltip-hidden { + display: none; +} + +.GPmeasureTooltip-measure::before, +.GPmeasureTooltip-info::before, +.GPmeasureTooltip-static::before { + border-top: 6px solid rgba(0, 0, 0, 0.5); + border-right: 6px solid transparent; + border-left: 6px solid transparent; + content: ""; + position: absolute; + bottom: -6px; + margin-left: -7px; + left: 50%; +} + +.GPmeasureTooltip-static::before { + border-top-color: #ffcc33; +} diff --git a/src/Common-review/CSS/GPmousePosition.css b/src/Common-review/CSS/GPmousePosition.css new file mode 100644 index 000000000..6ce642695 --- /dev/null +++ b/src/Common-review/CSS/GPmousePosition.css @@ -0,0 +1,215 @@ +/* MOUSE POSITION */ + +/* Showing/hiding mouse position panel */ + +label[id^=GPshowMousePositionPicto] { + display: inline-block; +} + +input[id^=GPshowMousePosition-] + label { + display: block; +} + +input[id^=GPshowMousePosition-]:checked + label { + display: none; +} + +input[id^=GPshowMousePosition-] + label + div { + display: none; +} + +input[id^=GPshowMousePosition-]:checked + label + div { + display: block; +} + +/* General panels */ + +div[id^=GPmousePositionPanel-] { + width: 300px; + overflow: hidden; +} + +/* Basic infos */ + +div[id^=GPmousePositionBasicPanel] { + padding: 10px 15px; + position: relative; +} + +.GPmousePositionLabel, +.GPmousePositionCoords { + display: inline-block; + line-height: 20px; +} + +.GPmousePositionLabel { + width: 80px; + font-weight: bold; +} + +.GPmousePositionCoords { + width: 110px; +} + +/* Showing settings */ + +.GPshowMousePositionSettingsPicto { + bottom: 5px; + right: 0; + transition: all 0.5s ease-out 0s; +} + +div[id^=GPmousePosition-] input[type="checkbox"]:checked + .GPshowMousePositionSettingsPicto { + bottom: 100px; +} + +div[id^=GPmousePositionSettings-] { + display: block; + max-height: 0; + opacity: 0; + transition: max-height 0.5s ease-out 0s, opacity 0.5s ease-out 0s; +} + +div[id^=GPmousePosition-] input[type="checkbox"]:checked + label + div[id^=GPmousePositionSettings-] { + max-height: 95px; + opacity: 1; +} + +/* Settings */ + +div[id^=GPmousePositionSettings-] { + height: 95px; + padding-left: 0 15px; + overflow: hidden; +} + +.GPmousePositionSettingsLabel { + display: block; + margin: auto; + text-align: center; + font-weight: bold; + line-height: 16px; +} + +.GPmousePositionSettingsSelect { + width: 180px; + margin-top: 5px; +} + +/* General panels */ + +div[id^=GPmousePositionCoordinate-] input.error { + border: 1px solid rgb(255, 0, 0); +} +div[id^=GPmousePositionCoordinate-] input[readonly] { + border: 1px solid transparent; + padding: 2px; + text-align: right; +} + +input[id^=GPmousePositionLat-], input[id^=GPmousePositionLon-] { + width: 120px; +} + +span[id^=GPmousePositionAlt-] { + display: inline-block; + padding: 2px; + width: 120px; + line-height: 20px; + text-align: right; +} + +/* sexagesimal coordinates */ + +.GPSexagesimal, .GPSexagesimalsec { + margin:0; + border: 1px solid rgb(204, 204, 204); + border-radius: 4px; +} + +input:read-only.GPSexagesimal, input:read-only.GPSexagesimalsec { + text-align: right; +} + +.GPSexagesimal { + width: 30px; +} + +.GPSexagesimalsec { + width: 45px; +} +.GPmousePositionSexagesimalLabel { + font-size: 1.2em; + vertical-align: middle; + padding: 0; +} + +/* direction N/S ou E/O */ +select.GPmousePositionDirection { + border: 1px solid #999; + margin-left: 2px; +} + +select.GPmousePositionDirection:disabled{ + border: none; + background: transparent; + color: black; + /*For FireFox*/ + -webkit-appearance: none; + /*For Chrome*/ + -moz-appearance: none; +} + +/*For IE10+*/ +select.GPmousePositionDirection:disabled::-ms-expand { + display: none; +} +select.GPmousePositionDirection:disabled::-ms-value { + color: black; +} + +.GPmousePositionUnits, +.GPmousePositionAltitudeUnits { + margin-left: 5px; +} + +/* EDIT COORDINATES TOOLS */ +.GPmousePositionPanelEditTools { + position: absolute; + top: 20px; + right: 5px; +} + +.GPmousePositionEditTool { + width: 18px; + height: 18px; + display: inline-block; + cursor: pointer; +} + +span[id^=GPmousePositionCloseEdit] { + background-position: -18px 0; + margin-left: 5px; +} + +img[id^=GPmousePositionMarker]:hover { + cursor: pointer; + opacity: 0.7; +} + +/* Map center localisation */ + +#GPmapCenter { + display: none; + position: absolute; + top: 50%; + left: 50%; + width: 50px; + height: 50px; + margin-top: -25px; + margin-left: -25px; +} + +#GPmapCenter.GPmapCenterVisible { + display: block; +} diff --git a/src/Common-review/CSS/GPreverseGeocoding.css b/src/Common-review/CSS/GPreverseGeocoding.css new file mode 100644 index 000000000..458011970 --- /dev/null +++ b/src/Common-review/CSS/GPreverseGeocoding.css @@ -0,0 +1,161 @@ +/* REVERSE GEOCODING */ + +[id^="GPreverseGeocoding-"] { + top: 180px; +} + +/* Showing/hiding reverse geocoding panel */ + +[id^="GPshowReverseGeocodingPicto-"] { + display: inline-block; +} + +[id^="GPshowReverseGeocoding-"] + label { + display: block; +} + +[id^="GPshowReverseGeocoding-"]:checked + label { + display: none; +} + +[id^="GPshowReverseGeocoding-"] + label + div { + display: none; +} + +[id^="GPshowReverseGeocoding-"]:checked + label + div { + display: block; +} + +/* General panels */ + +div[id^=GPreverseGeocodingResultsClose] { + top: 0; + right: 0; + width: 30px; + height: 32px; + /*background-position: -26px 0;*/ +} + +[id^="GPreverseGeocodingPanel-"] { + width: 280px; +} + +.GPreverseGeocodingComponentHidden { + display: none; +} + +div[id^="GPreverseGeocodingReturnPicto-"] { + position: absolute; + width: 26px; + height: 26px; + border-radius: 3px; + opacity: 1; + background-position: 0 0; + cursor: pointer; +} + +.GPreverseGeocodingReturnPictoHidden { + display: none; +} + +/* Calc waiting */ + +.GPreverseGeocodingCalcWaitingContainerVisible, +.GPreverseGeocodingCalcWaitingContainerHidden { + position: absolute; + top: 32px; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(255,255,255,0.9); + font-size: 1.5em; + font-weight: bold; + overflow: hidden; +} + +.GPreverseGeocodingCalcWaitingContainerVisible { + display: -webkit-flex; + display: -ms-flexbox; + display: -webkit-box; + display: flex; +} + +.GPreverseGeocodingCalcWaitingContainerHidden { + display: none; +} + +.GPreverseGeocodingCalcWaiting { + margin: auto; +} + +/* Search panel */ + +[id^="GPreverseGeocodingForm-"] { + position: relative; + max-height: 270px; + overflow-y: auto; + padding-left: 15px; + padding-right: 15px; + padding-top: 10px; +} + +.GPreverseGeocodingCodeLabel, +.GPreverseGeocodingFilterLabel { + max-width: 105px; +} + +.GPreverseGeocodingCodeLabel, +.GPreverseGeocodingCode { + margin-top: 5px; + margin-bottom: 0; +} + +.GPreverseGeocodingFilterLabel, +.GPreverseGeocodingFilterInput { + margin-bottom: 5px; +} + +input[id^="GPreverseGeocodingSubmit-"] { + margin-top: 5px; + margin-bottom: 15px; + width: 100px; +} + +/* Calc waiting */ + +/* TODO: waiting */ +.GPreverseGeocodingCalcWaitingContainerVisible, +.GPreverseGeocodingCalcWaitingContainerHidden { + position: absolute; + top: 32px; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(255,255,255,0.9); + font-size: 1.5em; + font-weight: bold; + overflow: hidden; +} + +.GPreverseGeocodingCalcWaitingContainerVisible { + display: -webkit-flex; + display: -ms-flexbox; + display: -webkit-box; + display: flex; +} + +.GPreverseGeocodingCalcWaitingContainerHidden { + display: none; +} + +.GPreverseGeocodingCalcWaiting { + margin: auto; +} + +/* Result panel */ + +div[id^=GPreverseGeocodingResultsList-] { + position: relative; + max-height: 210px; + overflow-y: auto; +} diff --git a/src/Common-review/CSS/GProute.css b/src/Common-review/CSS/GProute.css new file mode 100644 index 000000000..00768097a --- /dev/null +++ b/src/Common-review/CSS/GProute.css @@ -0,0 +1,446 @@ +/* ROUTE */ + +div[id^=GProute-] { + top: 100px; +} + +/* Showing/hiding route panel */ + +label[id^=GPshowRoutePicto] { + display: inline-block; +} + +input[id^=GPshowRoute-] + label { + display: block; +} + +input[id^=GPshowRoute-]:checked + label { + display: none; +} + +input[id^=GPshowRoute-] + label + div { + display: none; +} + +input[id^=GPshowRoute-]:checked + label + div { + display: block; +} + +/* General panels */ + +div[id^=GProutePanel-] { + width: 320px; +} + +.GProuteComponentHidden { + display: none; +} + +/* Calc waiting */ + +.GProuteCalcWaitingContainerVisible, +.GProuteCalcWaitingContainerHidden { + position: absolute; + top: 32px; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(255,255,255,0.9); + font-size: 1.5em; + font-weight: bold; + overflow: hidden; +} + +.GProuteCalcWaitingContainerVisible { + display: -webkit-flex; + display: -ms-flexbox; + display: -webkit-box; + display: flex; +} + +.GProuteCalcWaitingContainerHidden { + display: none; +} + +.GProuteCalcWaiting { + margin: auto; +} + +/* Route form */ + +form[id^=GProuteForm] { + padding: 15px; +} + +.GProuteFormMini { + max-height: 58px; + overflow: hidden; + -webkit-transform: translateY(-5px); + transform: translateY(-5px); +} + +.GProuteStageFlexInput { + max-height: 28px; + opacity: 1; +} + +.GProuteStageFlexInputHidden { + max-height: 0; + opacity: 0; + overflow: hidden; +} + +form[id^=GProuteForm] > .GPlocationStageFlexInput { + margin-top: 5px; +} + +form[id^=GProuteForm] > .GPlocationStageFlexInputHidden { + margin-top: 0; +} + +form[id^=GProuteForm].GProuteFormMini .GPlocationStageFlexInput:first-child { + margin-top: 5px; +} + +.GProuteOriginVisible { + display: block; +} + +.GProuteOriginHidden { + display: none; +} + +label.GProuteOriginPointerImg[id*="GProuteOriginPointerImg"] { + width: 28px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + border-right: 1px solid #999; +} + +input[id*="GProuteOriginPointer"] + .GProuteOriginPointerImg { + background-position: -1px -1px; +} + +input[id*="GProuteOriginPointer"]:checked + .GProuteOriginPointerImg { + background-position: -29px -1px; +} + +.GProuteStageRemove, +div[id^=GProuteStageAdd] { + width: 28px; + border: none; + cursor: pointer; +} + +.GProuteFormMini .GProuteStageRemove, +.GProuteFormMini div[id^=GProuteStageAdd] { + display: none; +} + +.GProuteStageRemove { + background-position: -84px 0; +} + +div[id^=GProuteStageAdd] { + background-position: -56px 0; +} + +/* Mode choice */ + +div[id^=GProuteModeChoice] { + display: -webkit-flex; + display: -ms-flexbox; + display: -webkit-box; + display: flex; + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; + margin: 15px 0; +} + +.GProuteModeLabel { + display: block; + text-align: center; + margin-bottom: 5px; +} + +div[id^=GProuteTransportChoice] input { + display: none; +} + +.GProuteTransportImg { + display: inline-block; + width: 28px; + height: 28px; + cursor: pointer; +} + +.GProuteTransportImg:first-of-type { + margin-left: 18px; + margin-right: 10px; +} + +input[id^=GProuteTransportCar] + .GProuteTransportImg { + background-position: -112px 0; +} + +input[id^=GProuteTransportCar]:checked + .GProuteTransportImg { + background-position: -140px 0; +} + +input[id^=GProuteTransportPedestrian] + .GProuteTransportImg { + background-position: -168px 0; +} + +input[id^=GProuteTransportPedestrian]:checked + .GProuteTransportImg { + background-position: -196px 0; +} + +select[id^=GProuteComputationSelect] { + width: 100px; +} + +/* Showing/hiding exclusions */ + +input[id^=GPshowRouteExclusions] { + display: none; +} + +.GPshowRouteExclusionsPicto { + /* top: 185px; */ + /* bottom: 25px; */ + right: 0; + transition: all 0.3s ease-out 0s; +} + +input[id^=GPshowRouteExclusions] + label + div[id^=GProuteExclusions] { + max-height: 0; + opacity: 0; + margin-bottom: 0; +} + +input[id^=GPshowRouteExclusions]:checked + label + div[id^=GProuteExclusions] { + display: block; + max-height: 60px; + opacity: 1; + margin-bottom: 15px; +} + +/* Exclusions */ + +div[id^=GProuteExclusions] { + transition: max-height 0.5s ease-in-out 0.25s, opacity 0.5s ease-in-out 0.25s, margin 0.3s ease-in-out 0.25s; + overflow: hidden; +} + +.GProuteExclusionsLabel { + display: block; + text-align: center; + margin-bottom: 10px; + font-weight: bold; + line-height: 16px; +} + +.GProuteExclusionsOptions { + display: -webkit-flex; + display: -ms-flexbox; + display: -webkit-box; + display: flex; + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; +} + +.GProuteExclusionsOption { + display: block; + height: 28px; + line-height: 26px; + color: #A77; + background-color: #FEE; + padding-left: 28px; + padding-right: 5px; + border: 1px solid #A77; + border-radius: 3px; + cursor: pointer; +} + +input:checked + .GProuteExclusionsOption { + background-color: #EFE; + background-position: 0 -28px; + color: #797; + border: 1px solid #797; +} + +/* Reset picto */ +div[id^=GProuteReset] { + position: absolute; + width: 28px; + height: 28px; + border-radius: 3px; + opacity: 0.8; + background-position: -224px 0; + transition: opacity 0.2s ease-out; + cursor: pointer; +} + +div[id^=GProuteReset]:hover { + opacity: 1; +} + +/* Result panel */ + +div[id^=GProuteResultsPanel] { + padding: 15px; +} + +.GProuteResultStage { + display: -webkit-flex; + display: -ms-flexbox; + display: -webkit-box; + display: flex; +} + +div[id^=GProuteResultsStages] { + margin-bottom: 15px; +} + +.GProuteResultStageLabel, +.GProuteResultStageValue, +.GProuteResultsValueLabel, +div[id^=GProuteResultsValueDist], +div[id^=GProuteResultsValueTime] { + display: inline-block; + line-height: 18px; +} + +.GProuteResultStageLabel, +.GProuteResultsValueLabel { + color: #666; +} + +.GProuteResultStageLabel { + width: 60px; +} + +.GProuteResultsValueLabel { + width: 65px; +} + +.GProuteResultStageValue { + -webkit-flex: 1; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + overflow-x: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +div[id^=GProuteResultsValueDist], +div[id^=GProuteResultsValueTime] { + width: 80px; + font-weight: bold; +} + +div[id^=GProuteResults-] { + display: -webkit-flex; + display: -ms-flexbox; + display: -webkit-box; + display: flex; + -webkit-justify-content: space-between; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-bottom: 10px; +} + +select[id^=GProuteResultsComputationSelect] { + width: 100px; +} + +div[id^=GProuteResultsNew] { + width: 28px; + height: 28px; + border-radius: 3px; + opacity: 0.8; + background-position: -224px 0; + transition: opacity 0.2s ease-out; + cursor: pointer; +} + +div[id^=GProuteResultsNew]:hover { + opacity: 1; +} + +/* Results details header */ + +.GPfakeBorder { + display: inline-block; + height: 14px; + width: 60px; + border-bottom: 1px solid #999; +} + +.GPfakeBorderLeft { + margin-left:15px; +} + +input[id^=GProuteResultsShowDetails] + label, +input[id^=GProuteResultsShowDetails] + label + label { + width: 130px; + line-height: 28px; + vertical-align: top; + text-align: center; + font-weight: bold; + cursor: pointer; + transition: color 0.2s ease-out; +} + +input[id^=GProuteResultsShowDetails] + label, +input[id^=GProuteResultsShowDetails]:checked + label + label { + display: inline-block; +} + +input[id^=GProuteResultsShowDetails]:checked + label, +input[id^=GProuteResultsShowDetails] + label + label { + display: none; +} + +input[id^=GProuteResultsShowDetails] + label + label + div + div[id^=GProuteResultsDetails] { + max-height: 0; + opacity: 0; +} + +input[id^=GProuteResultsShowDetails]:checked + label + label + div + div[id^=GProuteResultsDetails] { + max-height: 200px; + opacity: 1; +} + +div[id^=GProuteResultsDetails] { + overflow-y: auto; + transition: max-height 0.5s ease-in-out 0.25s, opacity 0.5s ease-in-out 0.25s; +} + +.GProuteResultsDetailsNumber, +.GProuteResultsDetailsInstruction { + display: inline-block; + margin-top: 4px; + line-height: 16px; + color: #666; +} + +.GProuteResultsDetailsNumber { + font-weight: bold; + width: 22px; + text-align: right; + vertical-align: top; +} + +.GProuteResultsDetailsInstruction { + width: calc(100% - 30px); + padding-left: 5px; +} diff --git a/src/Common-review/CSS/GPsearchEngine.css b/src/Common-review/CSS/GPsearchEngine.css new file mode 100644 index 000000000..0e915f9fe --- /dev/null +++ b/src/Common-review/CSS/GPsearchEngine.css @@ -0,0 +1,175 @@ +/* SEARCH ENGINE */ + +input[id^=GPshowSearchEngine-] + label + form[id^=GPsearchInput-] { + max-width: 0px; +} + +/* Showing/hiding search engine input */ + +input[id^=GPshowSearchEngine-] { + display: none; +} + +label[id^=GPshowSearchEnginePicto] { + display: inline-block; + transition: border-radius 0s ease-out 0s; + transition-delay: 0.5s; +} + +input[id^=GPshowSearchEngine-]:checked + label { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + transition-delay: 0s; +} + +input[id^=GPshowSearchEngine-] + label + form[id^=GPsearchInput-] { + max-width: 0px; + border: none; + transition: max-width 0.5s ease-out 0s; +} + +input[id^=GPshowSearchEngine-]:checked + label + form[id^=GPsearchInput-] { + max-width: 280px; +} + +input[id^=GPshowSearchEngine-] + label + form[id^=GPsearchInput-] + div[id^=GPshowAdvancedSearch] { + display: none; +} + +input[id^=GPshowSearchEngine-]:checked + label + form[id^=GPsearchInput-] + div[id^=GPshowAdvancedSearch] { + display: inline-block; +} + +div[id^=GPautoCompleteList] { + display: none; +} + +input[id^=GPshowSearchEngine-]:checked + label + form[id^=GPsearchInput-] + div[id^=GPautoCompleteList] { + display: block; +} + +/* Simple search input */ + +form[id^=GPsearchInput-] { + display: inline-block; + position: relative; + left: -3px; + width: 280px; + overflow: hidden; +} + +form[id^=GPsearchInput-] input { + display: block; + width: 100%; + height: 100%; + border: 1px solid #999; + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + padding: 0; + padding-right: 30px; + padding-left: 5px; + color: #333; + font-size: 1.0em; +} + +form[id^=GPsearchInput-] input:disabled { + background-color: #DDD; + color: #999; +} + +div[id^=GPsearchInputReset] { + position: absolute; + top: 0; + right: 0; + width: 30px; + height: 32px; + background-position: -30px 0; + cursor: pointer; +} + +/* General panels */ + +div[id^=GPgeocodeResultsClose], +div[id^=GPadvancedSearchClose] { + top: 0; + right: 0; + width: 30px; + height: 32px; +} + +div[id^=GPgeocodeResultsClose] { + background-position: 0 0; +} + +div[id^=GPadvancedSearchClose] { + background-repeat: no-repeat; +} + +/* Advanced search picto */ + +div[id^=GPshowAdvancedSearch] { + transition: border-radius 0s ease-out 0s; + transition-delay: 0.5s; +} + +/* Advanced search panel */ + +div[id^=GPadvancedSearchPanel] { + display: none; + width: 280px; + vertical-align: top; + overflow: hidden; +} + +form[id^=GPadvancedSearchForm] { + max-height: 220px; + overflow-y: auto; + padding-left: 15px; + padding-right: 15px; +} + +.GPadvancedSearchCodeLabel, +.GPadvancedSearchFilterLabel { + max-width: 105px; +} + +.GPadvancedSearchCodeLabel, +.GPadvancedSearchCode, + div[id^=GPadvancedSearchFilters] { + margin-top: 15px; +} + +.GPadvancedSearchFilterLabel, +.GPadvancedSearchFilterInput { + margin-bottom: 5px; +} + +input[id^=GPadvancedSearchSubmit] { + margin-top: 10px; + margin-bottom: 15px; +} + +/* Autocomplete list / geocode results */ + +div[id^=GPautoCompleteList], +div[id^=GPgeocodeResultsList] { + width: 280px; +} + +div[id^=GPautoCompleteList] { + top: 35px; +} + +div[id^=GPgeocodeResultsList] { + display: none; + position: absolute; + top: 40px; + border-radius: 4px; + overflow: hidden; +} + +div[id^=GPgeocodeResults-] { + background-color: #FFF; + max-height: 140px; + overflow-y: auto; +} diff --git a/src/Common-review/CSS/GPwaiting.css b/src/Common-review/CSS/GPwaiting.css new file mode 100644 index 000000000..ec093cb27 --- /dev/null +++ b/src/Common-review/CSS/GPwaiting.css @@ -0,0 +1,37 @@ +/** +* Map loading +* @sample +* function setMap(map) { +* var center = this._createLoadingElement(); +* map.getViewport().appendChild(center); +* center.className = ""; // invisible ! +* center.className = "GPmapLoadingVisible"; // visible ! +* } +* +* function _createLoadingElement() { +* var div = document.createElement("div"); +* div.id = "GPmapLoading"; +* div.className = ""; +* return div; +* } +*/ + +#GPmapLoading { + display: none; + position: absolute; + z-index: 50; + top: 50%; + left: 50%; + width: 50px; + height: 50px; + margin-top: -25px; + margin-left: -25px; +} + +#GPmapLoading.GPmapLoadingVisible { + display: block; +} + +#GPmapLoading { + background-image: url("img/waiting.gif"); +} diff --git a/src/Common-review/CSS/img/waiting.gif b/src/Common-review/CSS/img/waiting.gif new file mode 100644 index 0000000000000000000000000000000000000000..c7ceaea45827eebcb1d951c26bdb465127063550 GIT binary patch literal 1333 zcmZ?wbhEHbG+{7dXc1yyOj)W{xq)%&J>QAD)K=VcUVQ!I6gJ;&&!+EZZ`pIV>eTy* z$M3DW^z6);GuN(NJ9zK?y?ghbJ$v?_XrTC?+s`#5*x50_)kx2PnUR5kLGdRGDU}Ah^D}p)#7UDiig?@m*=Dh67tfqMOEbI8XTbuE>Kcz_vsY9vT{B00anuZljhocx z^{vsKwr#`0DTj|7J$78a+w@e@R+DMD#*Kx$E7u!VpV7ULd`qk9vf-AfhGKzBS5@}! zdTH?ZO^RC1b5j9---oJ#d|xK6JfZxL@y`KW?hVOr8P>ft->~p-yMSj4lGnu;SQw-j z)PY_vc<|lPm$?(@_4t=&IdiP?U!Ev>`)Fg_C!MIb+q5K#O{Wz`c5rrTJri0nMQ)|W zYmwPki*{ei*V5^mcK*eds$SZQXcQp)UMCBJ^fYse#(^HeDhvi z@8Iz6yB|2UMmO@<@)EDLQEOXs7+0SS+I?3uLR&6>=`&-gGhgHGf7tP-xkCBfcda`A zyPxOR)i*SjYO%GmX}4&1bad6V_4a91=uDdIKfOJ8R_B~aVZEV94&h`F1BQhZFf_mp z$(*a`J!(grtMaGznte$)Y%mvhxoT;F{ZsJTijY8 z@l;p)Xh!hO7?~8hyulK6!?(OUL6{r_b zLU98unHGamNTk$?#C18dHf?yZtI&G!*Q&?bk6v3(&hKEj)N*A0%Lp&NVvlq|t4V$< zL)Eu=-ubrY!G;PSJ<)TmhElR|>ksB_Gp}pAd^>OJo-^-%|5p=CnE*8Rf=|&FYB9q@chiw z-tKLiw*K7*bVoyDlRR%LU$b^=7jK7(KzCcO(uA%_EmL|X^-pM@Hf5SJ-^2xq4AuY< CkYarR literal 0 HcmV?d00001 diff --git a/src/Common-review/Controls/AttributionDOM.js b/src/Common-review/Controls/AttributionDOM.js new file mode 100644 index 000000000..80f55f305 --- /dev/null +++ b/src/Common-review/Controls/AttributionDOM.js @@ -0,0 +1,96 @@ +// FIXME not use !? +var AttributionDOM = { + + // ################################################################### // + // ######################### Main container ########################## // + // ################################################################### // + + /** + * Add uuid to the tag ID + * @param {String} id - id selector + * @returns {String} uid - id selector with an unique id + */ + _addUID : function (id) { + var uid = (this._uid) ? id + "-" + this._uid : id; + return uid; + }, + + /** + * Creation du container principal (DOM) + * + * @returns {DOMElement} div DOM + */ + _createMainContainerElement : function () { + var container = document.createElement("div"); + container.id = this._addUID("GPAttribution"); + container.className = "GPwidget"; + + return container; + }, + + /** + * Creation du selecteur (caché) pour l'affichage/masquage des attributions (DOM) + * + * @returns {DOMElement} checkbox DOM + */ + _createMainAttributionsShowElement : function () { + var input = document.createElement("input"); + input.id = this._addUID("GPshowAttributionsList"); + input.type = "checkbox"; + return input; + }, + + /** + * Création de l'élément liste des attributions (DOM) + * + * @returns {DOMElement} liste DOM + */ + _createAttributionsList : function () { + var ul = document.createElement("ul"); + ul.id = this._addUID("GPAttributionsList"); + return ul; + }, + + /** + * Création du conteneur principal des attributions (DOM) + * + * @returns {DOMElement} div DOM + */ + _createMainAttributionsListContainer : function () { + var div = document.createElement("div"); + div.id = this._addUID("GPAttributionsListContainer"); + + return div; + }, + + /** + * Création du container du picto du controle (DOM) + * @param {Boolean} collapsed - collapsed + * @returns {DOMElement} label DOM + */ + _createMainPictoElement : function (collapsed) { + var self = this; + + var label = document.createElement("label"); + label.id = this._addUID("GPshowAttributionsListPicto"); + label.className = "GPshowAdvancedToolPicto"; + label.htmlFor = this._addUID("GPshowAttributionsList"); + label.title = "Afficher/masquer les attributions"; + + var spanOpen = document.createElement("span"); + spanOpen.id = this._addUID("GPshowAttributionsListOpenClose"); + spanOpen.className = "GPshowAdvancedToolOpen"; + spanOpen.innerHTML = collapsed ? "i" : "»"; + /** Evenement de type 'click' sur le picto du controle */ + spanOpen.addEventListener("click", function () { + spanOpen.innerHTML = (document.getElementById(self._addUID("GPshowAttributionsList")).checked) ? "i" : "»"; + }); + + label.appendChild(spanOpen); + + return label; + } + +}; + +export default AttributionDOM; diff --git a/src/Common-review/Controls/BoostReliefDOM.js b/src/Common-review/Controls/BoostReliefDOM.js new file mode 100644 index 000000000..6a39cf1fd --- /dev/null +++ b/src/Common-review/Controls/BoostReliefDOM.js @@ -0,0 +1,242 @@ +var BoostReliefDOM = { + + // ################################################################### // + // ######################### Main container ########################## // + // ################################################################### // + + /** + * Add uuid to the tag ID + * @param {String} id - id selector + * @returns {String} uid - id selector with an unique id + */ + _addUID : function (id) { + var uid = (this._uid) ? id + "-" + this._uid : id; + return uid; + }, + + /** + * Creation du container principal (DOM) + * + * @returns {DOMElement} container - layer switcher DOM element + */ + _createMainContainerElement : function () { + var container = document.createElement("div"); + container.id = this._addUID("GPboostRelief"); + container.className = "GPwidget"; + return container; + }, + + /** + * Creation du selecteur (caché) pour l'affichage/masquage des slides de boostRelief (DOM) + * + * @param {Boolean} collapsed - option indiquant si le control est déplié + * + * @returns {DOMElement} checkbox DOM + */ + _createMainBoostReliefShowElement : function (collapsed) { + var input = document.createElement("input"); + input.id = this._addUID("GPshowBoostReliefList"); + input.type = "checkbox"; + if (collapsed) { + input.checked = true; + } + return input; + }, + + // ################################################################### // + // ############################ Relief tool ########################### // + // ################################################################### // + + /** + * Creation du container des outils avancés du layer (DOM) + * + * @param {Object} brOptions - options du control boostRelief + * + * @returns {DOMElement} container + */ + _createAdvancedToolElement : function (brOptions) { + // exemple : + //
+ // + //
+ var container = document.createElement("div"); + container.className = "GPlayerAdvancedToolsRelief"; + + var array = this._createAdvancedToolReliefElement(brOptions.scale, brOptions.defaultBoost); + for (var j = 0; j < array.length; j++) { + container.appendChild(array[j]); + } + + return container; + }, + /** + * Creation de l'icone de gestion du relief du layer (DOM) + * + * @param {Object} scale - définition de l'echelle que le slider utilise (min,max,step) + * + * @returns {DOMElement[]} array of two containers + */ + _createAdvancedToolReliefElement : function (scale, defaultBoost) { + // exemple : + //
+ // Layer1 + //
+ // + //
+ // + //
+ //
+ // 100 + // % + //
+ + var list = []; + + // curseur pour changer l'exageration du relief + var divB = document.createElement("div"); + divB.className = "GPlayerRelief"; + divB.title = "Relief"; + + // le relief est à un facteur 1 par défaut + var relief = 1; + + var input = document.createElement("input"); + input.id = this._addUID("GPreliefValueDiv"); + input.type = "range"; + + // echelle de 1 à 50 par defaut + if (!scale) { + scale = { + min : 1, + max : 50, + step : 1 + }; + }; + + input.min = scale.min || 1; + input.max = scale.max || 50; + input.step = scale.step || 1; + + + // le relief est à un facteur 1 par défaut + var defaultBoostValue = 1; + if (defaultBoost) { + defaultBoostValue = defaultBoost; + } + + // the reliefValue given must me in the slider range + if (defaultBoostValue > input.max) { + defaultBoostValue = input.max; + } + + if (defaultBoostValue < input.min) { + defaultBoostValue = input.min; + } + + // mise à jour des couches et du slider une fois le controle ajouté + input.value = defaultBoostValue; + + // add event for relief change + var context = this; + if (input.addEventListener) { + input.addEventListener( + "change", + function (e) { + context._onChangeLayerRelief(e); + } + ); + } else if (input.attachEvent) { + // internet explorer + input.attachEvent( + "onchange", + function (e) { + context._onChangeLayerRelief(e); + } + ); + } + + if (input.addEventListener) { + input.addEventListener( + "input", + function (e) { + context._onChangeLayerRelief(e); + } + ); + } else if (input.attachEvent) { + // internet explorer + input.attachEvent( + "oninput", + function (e) { + context._onChangeLayerRelief(e); + } + ); + } + + divB.appendChild(input); + + // Valeur d'echelle du relief + var divC = document.createElement("div"); + divC.id = this._addUID("GPreliefValueDiv"); + divC.className = "GPlayerReliefValue"; + + var span = document.createElement("span"); + span.id = this._addUID("GPreliefValue"); + span.innerHTML = "x" + relief; + + divC.appendChild(span); + + list.push(divB); + list.push(divC); + + return list; + }, + + /** + * Création du conteneur principal des couches MNT boostRelief (DOM) + * + * @returns {DOMElement} div DOM + */ + _createMainBoostReliefListContainer : function () { + var div = document.createElement("div"); + div.id = this._addUID("GPBoostReliefListContainer"); + div.className = "GPpanel"; + + return div; + }, + + /** + * Show boostRelief control + * @param {Boolean} isDesktop - specifies if the support is desktop or tactile + * + * @returns {DOMElement} DOM element + */ + + _createMainPictoElement : function () { + var self = this; + var label = document.createElement("label"); + + label.id = this._addUID("GPshowBoostReliefListPicto"); + label.className = "GPshowAdvancedToolPicto"; + label.htmlFor = this._addUID("GPshowBoostReliefList"); + label.title = "Afficher/Masquer le control d'exageration du relief"; + + var spanOpenClose = document.createElement("span"); + spanOpenClose.id = this._addUID("GPshowBoostReliefOpenClose"); + spanOpenClose.className = "GPshowAdvancedToolOpen"; + + /** Evenement de type 'click' sur le picto du controle */ + label.addEventListener("click", function () { + if (document.getElementById(self._addUID("GPshowBoostReliefList")).checked) { + document.getElementById(self._addUID("GPBoostReliefListContainer")).style.display = "none"; + } else { + document.getElementById(self._addUID("GPBoostReliefListContainer")).style.display = "block"; + } + }); + + label.appendChild(spanOpenClose); + + return label; + } +}; + +export default BoostReliefDOM; diff --git a/src/Common-review/Controls/DrawingDOM.js b/src/Common-review/Controls/DrawingDOM.js new file mode 100644 index 000000000..0db76f948 --- /dev/null +++ b/src/Common-review/Controls/DrawingDOM.js @@ -0,0 +1,671 @@ +import Logger from "../../Common/Utils/LoggerByDefault"; + +var logger = Logger.getLogger("DrawingDOM"); + +var DrawingDOM = { + + /** + * Add uuid to the tag ID + * @param {String} id - id selector + * @returns {String} uid - id selector with an unique id + */ + _addUID : function (id) { + var uid = (this._uid) ? id + "-" + this._uid : id; + return uid; + }, + + /** + * Main container (DOM) + * + * @returns {DOMElement} DOM element + */ + _createMainContainerElement : function () { + var container = document.createElement("div"); + container.id = this._addUID("GPdrawing"); + container.className = "GPwidget"; + return container; + }, + + // ################################################################### // + // ################### Methods of main container ##################### // + // ################################################################### // + + /** + * Hidden checkbox for minimizing/maximizing + * + * @returns {DOMElement} DOM element + */ + _createShowDrawingElement : function () { + var input = document.createElement("input"); + input.id = this._addUID("GPshowDrawing"); + input.className = "GPshowDrawing"; + input.type = "checkbox"; + return input; + }, + + /** + * Show mouse position control + * + * @returns {DOMElement} DOM element + */ + _createShowDrawingPictoElement : function () { + var self = this; + + var label = document.createElement("label"); + label.id = this._addUID("GPshowDrawingPicto"); + label.className = "GPshowAdvancedToolPicto"; + label.htmlFor = this._addUID("GPshowDrawing"); + label.title = this.options.labels.control; + + // gestionnaire d'evenement : + // on ouvre le menu de saisie de saisie + // L'ouverture/Fermeture permet de faire le menage + // (reinitialisation) + if (label.addEventListener) { + label.addEventListener("click", function (e) { + self.onShowDrawingClick(e); + }); + } else if (label.attachEvent) { + label.attachEvent("onclick", function (e) { + self.onShowDrawingClick(e); + }); + } + + var spanOpen = document.createElement("span"); + spanOpen.id = this._addUID("GPshowDrawingOpen"); + spanOpen.className = "GPshowAdvancedToolOpen"; + label.appendChild(spanOpen); + + return label; + }, + + /** + * Drawing panel + * + * @returns {DOMElement} DOM element + */ + _createDrawingPanelElement : function () { + var div = document.createElement("div"); + div.id = this._addUID("GPdrawingPanel"); + div.className = "GPpanel"; + + return div; + }, + + // ################################################################### // + // ####################### Panel container ########################### // + // ################################################################### // + + /** + * Creates drawing Panel header DOM structure + * @returns {DOMElement} DOM element + */ + _createDrawingPanelHeaderElement : function () { + /* + *
+ *
Annoter la carte
+ *
+ *
+ */ + + var container = document.createElement("div"); + container.className = "GPpanelHeader"; + + var divTitle = document.createElement("div"); + divTitle.className = "GPpanelTitle"; + divTitle.innerHTML = this.options.controlLabel || "Annoter la carte"; + container.appendChild(divTitle); + + var divClose = document.createElement("div"); + divClose.id = this._addUID("GPdrawingPanelClose"); + divClose.className = "GPpanelClose"; + divClose.title = "Fermer le panneau"; + + // Link panel close / visibility checkbox + var dtObj = this; + if (divClose.addEventListener) { + divClose.addEventListener("click", function () { + document.getElementById(dtObj._addUID("GPshowDrawingPicto")).click(); + }, false); + } else if (divClose.attachEvent) { + divClose.attachEvent("onclick", function () { + document.getElementById(dtObj._addUID("GPshowDrawingPicto")).click(); + }); + } + + container.appendChild(divClose); + + return container; + }, + + /** + * Creates drawing tools section. + * + * @returns {DOMElement} DOM element + */ + _createDrawingToolsSections : function () { + var tools = []; + + this.dtOptions = {}; + if (this.options.tools.points) { + this.dtOptions.points = { + label : this.options.labels.points, + active : false, + panel : "draw", + id : "point" + }; + } + if (this.options.tools.lines) { + this.dtOptions.lines = { + label : this.options.labels.lines, + active : false, + panel : "draw", + id : "line" + }; + } + if (this.options.tools.polygons) { + this.dtOptions.polygons = { + label : this.options.labels.polygons, + active : false, + panel : "draw", + id : "polygon" + }; + } + if (this.options.tools.holes) { + this.dtOptions.holes = { + label : this.options.labels.holes, + active : false, + panel : "draw", + id : "holes" + }; + } + if (this.options.tools.text) { + this.dtOptions.text = { + label : this.options.labels.text, + active : false, + panel : "draw", + id : "text" + }; + } + if (this.options.tools.edit) { + this.dtOptions.edit = { + label : this.options.labels.edit, + active : false, + panel : "edit", + id : "edit" + }; + } + if (this.options.tools.display) { + this.dtOptions.display = { + label : this.options.labels.display, + active : false, + panel : "edit", + id : "display" + }; + } + if (this.options.tools.tooltip) { + this.dtOptions.tooltip = { + label : this.options.labels.tooltip, + active : false, + panel : "edit", + id : "tooltip" + }; + } + if (this.options.tools.remove) { + this.dtOptions.remove = { + label : this.options.labels.remove, + active : false, + panel : "edit", + id : "remove" + }; + } + // ajout drawing tools + if (this.dtOptions.points || + this.dtOptions.lines || + this.dtOptions.polygons || + this.dtOptions.text) { + tools.push(this._createDrawingToolSection(this.options.labels.creatingTools, "draw")); + } + // ajout editing tools + if (this.dtOptions.edit || + this.dtOptions.display || + this.dtOptions.tooltip || + this.dtOptions.remove) { + tools.push(this._createDrawingToolSection(this.options.labels.editingTools, "edit")); + } + // ajout export tools + if (this.options.tools.export) { + tools.push(this._createSavingSection( + this.options.labels.export, + this.options.labels.exportTitle + )); + } + + return tools; + }, + + /** + * Creates drawing tool section DOM structure. + * + * @param {String} sectionLabel - section title + * @param {String} panelType - Drawing ("draw") or editing ("edit") tools panel + * @returns {DOMElement} DOM element + */ + _createDrawingToolSection : function (sectionLabel, panelType) { + /* + * Exemple panelType == "draw" + * + *
+ *

Outils de création

+ *
    + *
  • + *
  • + *
  • + *
  • + *
+ *
+ */ + var container = document.createElement("div"); + container.className = "drawing-tool-section"; + + var p = document.createElement("p"); + p.className = "drawing-tool-section-title"; + p.innerHTML = sectionLabel; + container.appendChild(p); + + var ul = document.createElement("ul"); + ul.className = "drawing-tools-flex-display"; + var context = this; + // li click handler function + function liClickHandler (e) { + /* jshint validthis: true */ + // this == elem clicked + context._handleDOMToolClick(e, this.id, context); + context._handleToolClick(e, this.id, context); + } + for (var type in this.dtOptions) { + if (this.dtOptions[type].panel !== panelType) { + continue; + } + var li = document.createElement("li"); + li.className = "drawing-tool"; + li.id = this._addUID("drawing-tool-" + this.dtOptions[type].id); + li.title = this.dtOptions[type].label; + li.addEventListener("click", liClickHandler); + ul.appendChild(li); + } + container.appendChild(ul); + + return container; + }, + + /** + * Creates drawing tool section DOM structure. + * + * @param {String} buttonLabel - Button label + * @param {String} buttonTitle - Button title + * @returns {DOMElement} DOM element + */ + _createSavingSection : function (buttonLabel, buttonTitle) { + /* + *
+ * + *
+ */ + var container = document.createElement("div"); + container.className = "drawing-tool-section drawing-tools-flex-display"; + + var button = document.createElement("button"); + button.title = buttonTitle; + button.className = "tool-form-submit drawing-button"; + button.id = this._addUID("drawing-export"); + button.type = "button"; + button.textContent = buttonLabel; + var context = this; + /** export function */ + button.onclick = function () { + context.onExportFeatureClick(); + }; + container.appendChild(button); + + return container; + }, + + /** + * Creates input for color choosing + * + * @param {Object} options - options + * @param {String} options.defaultValue - defaultValue + * @param {String} options.className - input className + * @returns {DOMElement} - created li element + */ + _createMarkersChooser : function (options) { + var li = document.createElement("li"); + li.className = options.className; + for (var i = 0; i < this.options.markersList.length; i++) { + // radio bouton pour la selection + var inputElem = document.createElement("input"); + inputElem.type = "radio"; + inputElem.name = "marker"; + inputElem.id = this._addUID("marker-" + i); + inputElem.value = this.options.markersList[i].src; + inputElem.className = "marker-input-radio"; + if (options.defaultValue === inputElem.value) { + inputElem.checked = true; + } + li.appendChild(inputElem); + // label pour l'affichage du marker + var labelElem = document.createElement("label"); + labelElem.className = "marker-label"; // utile ? + labelElem.setAttribute("for", inputElem.id); + var imgElem = document.createElement("img"); + imgElem.src = inputElem.value; + labelElem.appendChild(imgElem); + li.appendChild(labelElem); + } + return li; + }, + + /** + * Creates input for color choosing + * + * @param {Object} options - options + * @param {String} options.label - label + * @param {String} options.type - input type for element ("color") + * @param {String} options.defaultValue - defaultValue + * @param {String} options.id - input id + * @param {String} options.title - input title + * @param {String} options.className - input className + * @returns {DOMElement} - created li element + */ + _createStylingElement : function (options) { + var li = document.createElement("li"); + li.className = options.className; + var textNode = document.createTextNode(options.label); + li.appendChild(textNode); + var inputElem = document.createElement("input"); + try { + inputElem.type = options.type; + } catch (e) { + // ie 11 input type== color ne marche pas... + inputElem.type = "text"; + } + inputElem.id = options.id; + inputElem.value = options.defaultValue; + if (options.title) { + inputElem.title = options.title; + } + // si options.type == "range" + if (options.min !== undefined) { + inputElem.min = options.min; + } + if (options.max !== undefined) { + inputElem.max = options.max; + } + if (options.step !== undefined) { + inputElem.step = options.step; + } + li.appendChild(inputElem); + return li; + }, + + /** + * Creates Styling div to include in popup. + * + * @param {Object} options - toolId selected + * @param {String} options.geomType - gemeotryType selected ("Point", "Line" or "Polygon") + * @param {Object} options.initValues - values to init fields + * @param {String} options.initValues.markerSrc - marker URL for Points + * @param {Function} options.applyFunc - function called when apply is selected + * @returns {DOMElement} DOM element created + */ + _createStylingDiv : function (options) { + var div = document.createElement("div"); + div.className = "gp-styling-div"; + var ul = document.createElement("ul"); + var li = null; + /* + * TODO : finir de remplir la div pour tous les styles éditables. + */ + switch (options.geomType.toLowerCase()) { + case "point": + li = this._createMarkersChooser({ + className : "gp-styling-option", + // defaultValue : this.options.markersList[0].src + defaultValue : options.initValues.markerSrc + }); + ul.appendChild(li); + break; + case "text": + li = this._createStylingElement({ + type : "color", + className : "gp-styling-option", + label : this.options.labels.fillColor, + id : this._addUID("fillColor"), + defaultValue : options.initValues.fillColor + }); + ul.appendChild(li); + li = this._createStylingElement({ + type : "color", + className : "gp-styling-option", + label : this.options.labels.strokeColor, + id : this._addUID("strokeColor"), + defaultValue : options.initValues.strokeColor + }); + ul.appendChild(li); + break; + case "line": + li = this._createStylingElement({ + type : "color", + className : "gp-styling-option", + label : this.options.labels.strokeColor, + id : this._addUID("strokeColor"), + defaultValue : options.initValues.strokeColor + }); + ul.appendChild(li); + li = this._createStylingElement({ + type : "range", + className : "gp-styling-option", + label : this.options.labels.strokeWidth, + title : "1 à 10 pixels", + id : this._addUID("strokeWidth"), + min : 1, + max : 10, + step : 1, + defaultValue : options.initValues.strokeWidth + }); + ul.appendChild(li); + break; + case "polygon": + li = this._createStylingElement({ + type : "color", + className : "gp-styling-option", + label : this.options.labels.strokeColor, + id : this._addUID("strokeColor"), + defaultValue : options.initValues.strokeColor + }); + ul.appendChild(li); + li = this._createStylingElement({ + type : "range", + className : "gp-styling-option", + label : this.options.labels.strokeWidth, + title : "1 à 10 pixels", + id : this._addUID("strokeWidth"), + min : 1, + max : 10, + step : 1, + defaultValue : options.initValues.strokeWidth + }); + ul.appendChild(li); + li = this._createStylingElement({ + type : "color", + className : "gp-styling-option", + label : this.options.labels.fillColor, + id : this._addUID("fillColor"), + defaultValue : options.initValues.fillColor + }); + ul.appendChild(li); + li = this._createStylingElement({ + type : "range", + className : "gp-styling-option", + label : this.options.labels.fillOpacity, + title : "0 (transparent) à 100% (opaque)", + id : this._addUID("fillOpacity"), + min : 0, + max : 10, + step : 1, + defaultValue : options.initValues.fillOpacity * 10 + }); + ul.appendChild(li); + break; + default: + logger.log("Unhandled geometry type for styling."); + } + div.appendChild(ul); + // apply button + var applyButton = document.createElement("input"); + applyButton.type = "button"; + applyButton.className = "gp-styling-button"; + applyButton.value = this.options.labels.applyToObject; + /** click sur applyButton */ + applyButton.onclick = function () { + options.applyFunc.call(this, "apply"); + }; + div.appendChild(applyButton); + // set default button + var setDefaultButton = document.createElement("input"); + setDefaultButton.type = "button"; + setDefaultButton.value = this.options.labels.setAsDefault; + setDefaultButton.className = "gp-styling-button"; + /** click sur set Default Button */ + setDefaultButton.onclick = function () { + options.applyFunc.call(this, "default"); + }; + div.appendChild(setDefaultButton); + // cancel Button + var cancelButton = document.createElement("input"); + cancelButton.type = "button"; + // cancelButton.value = "X" ; + cancelButton.className = "gp-styling-button closer"; + /** click sur cancel Button */ + cancelButton.onclick = function () { + options.applyFunc.call(this, "cancel"); + }; + div.appendChild(cancelButton); + return div; + }, + + /** + * Creates Text editing div to include in popup. + * + * @param {Object} options - options for popup + * @param {String} options.geomType - gemeotryType selected ("Point", "Line" or "Polygon") + * @param {String} options.text - text to fill input. + * @param {String} options.measure - measure to fill input. + * @param {String} options.placeholder - placeholder for text input. + * @param {String} options.inputId - text input id. + * @param {Function} options.applyFunc - function called when text is to be saved. + * @returns {DOMElement} DOM element created + * @private + */ + _createLabelDiv : function (options) { + var popup = document.createElement("div"); + popup.className = "gp-label-div"; + var inputLabel = null; + if (options.geomType === "Text") { + inputLabel = document.createElement("input"); + inputLabel.type = "text"; + inputLabel.className = "gp-input-label-style"; + } else { + inputLabel = document.createElement("textArea"); + inputLabel.rows = 2; + inputLabel.cols = 40; + inputLabel.className = "gp-textarea-att-label-style"; + } + + if (options.text) { + inputLabel.value = options.text; + } + + inputLabel.autocomplete = "off"; + inputLabel.placeholder = options.placeholder; + inputLabel.id = options.inputId; + popup.appendChild(inputLabel); + // blur + inputLabel.onblur = function () { + options.applyFunc.call(this, inputLabel.value, true); + }; + // keyup + inputLabel.onkeyup = function (evtk) { + if (options.geomType === "Text" && evtk.keyCode === 13) { + options.applyFunc.call(this, inputLabel.value, true); + } + if (evtk.keyCode === 27) { + options.applyFunc.call(this, inputLabel.value, false); + } + }; + + if (options.measure && options.geomType !== "Text") { + var inputMeasure = document.createElement("input"); + inputMeasure.type = "text"; + inputMeasure.readonly = true; + inputMeasure.className = "gp-input-measure-style"; + inputMeasure.value = options.measure; + popup.appendChild(inputMeasure); + } + + if (options.geomType !== "Text") { + // apply button + var applyButton = document.createElement("input"); + applyButton.type = "button"; + applyButton.className = "gp-styling-button"; + applyButton.value = this.options.labels.saveDescription; + /** click sur applyButton */ + applyButton.onclick = function () { + options.applyFunc.call(this, inputLabel.value, true); + }; + popup.appendChild(applyButton); + // cancel Button + var cancelButton = document.createElement("input"); + cancelButton.type = "button"; + cancelButton.className = "gp-styling-button closer"; + /** click sur cancel Button */ + cancelButton.onclick = function () { + options.applyFunc.call(this, inputLabel.value, false); + }; + popup.appendChild(cancelButton); + } + + return popup; + }, + + /** + * Handles drawing tool selection from a DOM point of view. + * + * @param {Event} e - DOM Event + * @param {String} toolId - toolId selected + * @param {DrawingDOM} context - Drawing control instance + */ + _handleDOMToolClick : function (e, toolId, context) { + for (var availType in context.dtOptions) { + var availToolId = context._addUID("drawing-tool-" + context.dtOptions[availType].id); + var li = document.getElementById(availToolId); + // ce n'est pas l'outil selectionne : on le desactive (s'il ne l'était pas déjà). + if (availToolId !== toolId) { + li.className = "drawing-tool"; + context.dtOptions[availType].active = false; + continue; + } + // ici, c'est le l'outil selectionne + if (context.dtOptions[availType].active) { + li.className = "drawing-tool"; + } else { + li.className = "drawing-tool drawing-tool-active"; + } + context.dtOptions[availType].active = !context.dtOptions[availType].active; + } + } + +}; + +export default DrawingDOM; diff --git a/src/Common-review/Controls/Editor/.gitkeep b/src/Common-review/Controls/Editor/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/src/Common-review/Controls/Editor/EditorDOM.js b/src/Common-review/Controls/Editor/EditorDOM.js new file mode 100644 index 000000000..3facbf4ba --- /dev/null +++ b/src/Common-review/Controls/Editor/EditorDOM.js @@ -0,0 +1,14 @@ +var EditorDOM = { + + /** + * Add uuid to the tag ID + * @param {String} id - id selector + * @returns {String} uid - id selector with an unique id + */ + _addUID : function (id) { + var uid = (this._uid) ? id + "-" + this._uid : id; + return uid; + } +}; + +export default EditorDOM; diff --git a/src/Common-review/Controls/ElevationPathDOM.js b/src/Common-review/Controls/ElevationPathDOM.js new file mode 100644 index 000000000..af28b935f --- /dev/null +++ b/src/Common-review/Controls/ElevationPathDOM.js @@ -0,0 +1,254 @@ +var ElevationPathDOM = { + + /** + * Add uuid to the tag ID + * @param {String} id - id selector + * @returns {String} uid - id selector with an unique id + */ + _addUID : function (id) { + var uid = (this._uid) ? id + "-" + this._uid : id; + return uid; + }, + + /** + * Main container (DOM) + * + * @returns {DOMElement} DOM element + */ + _createMainContainerElement : function () { + var container = document.createElement("div"); + container.id = this._addUID("GPelevationPath"); + container.className = "GPwidget"; + return container; + }, + + // ################################################################### // + // ################# Methods to display Main Panel ################### // + // ################################################################### // + + /** + * Hidden checkbox for minimizing/maximizing panel + * + * @returns {DOMElement} DOM element + */ + _createShowElevationPathElement : function () { + var input = document.createElement("input"); + input.id = this._addUID("GPshowElevationPath"); + input.type = "checkbox"; + return input; + }, + + /** + * Show control + * see event ! + * + * @returns {DOMElement} DOM element + */ + _createShowElevationPathPictoElement : function () { + // contexte d'execution + var context = this; + + var label = document.createElement("label"); + label.id = this._addUID("GPshowElevationPathPicto"); + label.className = "GPshowAdvancedToolPicto"; + label.htmlFor = this._addUID("GPshowElevationPath"); + label.title = "Calculer un profil"; + + // gestionnaire d'evenement : + // on ouvre le menu de saisie de saisie + // L'ouverture/Fermeture permet de faire le menage + // (reinitialisation) + if (label.addEventListener) { + label.addEventListener("click", function (e) { + context.onShowElevationPathClick(e); + }); + } else if (label.attachEvent) { + label.attachEvent("onclick", function (e) { + context.onShowElevationPathClick(e); + }); + } + + var spanOpen = document.createElement("span"); + spanOpen.id = this._addUID("GPshowElevationPathOpen"); + spanOpen.className = "GPshowAdvancedToolOpen"; + label.appendChild(spanOpen); + + return label; + }, + + // ################################################################### // + // ######################### Methods to Panel ######################## // + // ################################################################### // + + /** + * Create Container Panel + * + * FIXME + * don't call this._createElevationPathPanelHeaderElement + * don't call this._createElevationPathPanelProfilElement + * + * @returns {DOMElement} DOM element + */ + _createElevationPathPanelElement : function () { + var div = document.createElement("div"); + div.id = this._addUID("GPelevationPathPanel"); + div.className = "GPpanel"; + + // div.appendChild(this._createElevationPathPanelHeaderElement()); + // div.appendChild(this._createElevationPathPanelProfilElement()); + + return div; + }, + + /** + * Create Header Panel + * + * @returns {DOMElement} DOM element + */ + _createElevationPathPanelHeaderElement : function () { + var self = this; + + var container = document.createElement("div"); + container.className = "GPpanelHeader"; + + var divInfo = document.createElement("div"); + divInfo.id = this._addUID("GPelevationPathPanelInfo"); + divInfo.className = "GPpanelInfo"; + divInfo.title = "Informations"; + // add event on click + if (divInfo.addEventListener) { + divInfo.addEventListener( + "click", + function () { + self.onOpenElevationPathInfoClick(); + } + ); + } else if (divInfo.attachEvent) { + // internet explorer + divInfo.attachEvent( + "onclick", + function () { + self.onOpenElevationPathInfoClick(); + } + ); + } + container.appendChild(divInfo); + + var divTitle = document.createElement("div"); + divTitle.className = "GPpanelTitle"; + divTitle.innerHTML = "Profil Altimétrique"; + container.appendChild(divTitle); + + var divReduce = document.createElement("div"); + divReduce.id = this._addUID("GPelevationPathPanelReduce"); + divReduce.className = "GPpanelReduce"; + divReduce.title = "Masquer le panneau"; + + if (divReduce.addEventListener) { + divReduce.addEventListener("click", function () { + if (typeof self.onReduceElevationPathPanelClick === "function") { + document.getElementById(self._addUID("GPshowElevationPath")).checked = false; + self.onReduceElevationPathPanelClick(); + } + }, false); + } else if (divReduce.attachEvent) { + divReduce.attachEvent("onclick", function () { + if (typeof self.onReduceElevationPathPanelClick === "function") { + document.getElementById(self._addUID("GPshowElevationPath")).checked = false; + self.onReduceElevationPathPanelClick(); + } + }); + } + container.appendChild(divReduce); + + var divClose = document.createElement("div"); + divClose.id = this._addUID("GPelevationPathPanelClose"); + divClose.className = "GPpanelClose"; + divClose.title = "Fermer le panneau"; + + // Link panel close / visibility checkbox + if (divClose.addEventListener) { + divClose.addEventListener("click", function () { + document.getElementById(self._addUID("GPshowElevationPathPicto")).click(); + }, false); + } else if (divClose.attachEvent) { + divClose.attachEvent("onclick", function () { + document.getElementById(self._addUID("GPshowElevationPathPicto")).click(); + }); + } + container.appendChild(divClose); + + return container; + }, + + /** + * Create Form + * see evenement ! + * + * @returns {DOMElement} DOM element + */ + _createElevationPathPanelProfilElement : function () { + var div = document.createElement("div"); + div.id = "GPelevationPathProfil"; + + return div; + }, + + /** + * Create Waiting Panel + * + * @returns {DOMElement} DOM element + */ + _createElevationPathWaitingElement : function () { + var div = document.createElement("div"); + div.id = this._addUID("GPelevationPathCalcWaitingContainer"); + div.className = "GPelevationPathCalcWaitingContainerHidden"; + + var p = document.createElement("p"); + p.className = "GPelevationPathCalcWaiting"; + p.innerHTML = "Calcul en cours..."; + + div.appendChild(p); + + return div; + }, + + /** + * Create information Panel + * + * @returns {DOMElement} DOM element + */ + _createElevationPathInformationsElement : function () { + var div = document.createElement("div"); + div.id = this._addUID("GPelevationPathInformationsContainer"); + div.className = "GPelevationPathInformationsContainerHidden"; + + var p = document.createElement("p"); + p.className = "GPelevationPathInformations"; + p.innerHTML = "Aucune information..."; + div.appendChild(p); + + return div; + }, + + /** + * Add a information into Panel + * + * @param {String} value - value of item + * @returns {DOMElement} DOM element + */ + _addElevationPathInformationsItem : function (value) { + var div = document.getElementById(this._addUID("GPelevationPathInformationsContainer")); + + if (div) { + var p = document.createElement("p"); + p.className = "GPelevationPathInformations"; + p.innerHTML = value; + div.appendChild(p); + } + + return div; + } +}; + +export default ElevationPathDOM; diff --git a/src/Common-review/Controls/GetFeatureInfoDOM.js b/src/Common-review/Controls/GetFeatureInfoDOM.js new file mode 100644 index 000000000..73aac2546 --- /dev/null +++ b/src/Common-review/Controls/GetFeatureInfoDOM.js @@ -0,0 +1,77 @@ +var GetFeatureInfoDOM = { + + /** + * Add uuid to the tag ID + * @param {String} id - id selector + * @returns {String} uid - id selector with an unique id + */ + _addUID : function (id) { + var uid = (this._uid) ? id + "-" + this._uid : id; + return uid; + }, + + /** + * Main container (DOM) + * + * @returns {DOMElement} DOM element + */ + _createMainContainerElement : function () { + var container = document.createElement("div"); + container.id = this._addUID("GPgetFeatureInfo"); + container.className = "GPwidget"; + return container; + }, + + // ################################################################### // + // ################# Methods to display Main Panel ################### // + // ################################################################### // + + /** + * Hidden checkbox for activating getFeatureInfo + * @param {Boolean} activate - specify if the control is active or inactive + * + * @returns {DOMElement} DOM element + */ + _createActivateGetFeatureInfoElement : function (activate) { + // contexte d'execution + var context = this; + + var input = document.createElement("input"); + input.id = this._addUID("GPactivateGetFeatureInfo"); + input.type = "checkbox"; + input.checked = activate; + + input.addEventListener("change", function (e) { + context.onActivateGetFeatureInfoElementChange(e); + }); + + return input; + }, + + /** + * Creation du container du picto du controle (DOM) + * @returns {DOMElement} DOM element + */ + _createMainPictoElement : function () { + var self = this; + + var label = document.createElement("label"); + label.id = this._addUID("GPgetFeatureInfoPicto"); + label.className = "GPshowAdvancedToolPicto"; + label.htmlFor = this._addUID("GPactivateGetFeatureInfo"); + label.title = "activer/desactiver l'interrogation des couches"; + + var spanOpen = document.createElement("span"); + spanOpen.id = this._addUID("GPgetFeatureInfoActivate"); + spanOpen.className = "GPshowAdvancedToolOpen"; + label.appendChild(spanOpen); + + var spanClose = document.createElement("span"); + spanClose.id = self._addUID("GPgetFeatureInfoDeactivate"); + label.appendChild(spanClose); + + return label; + } +}; + +export default GetFeatureInfoDOM; diff --git a/src/Common-review/Controls/IsoDOM.js b/src/Common-review/Controls/IsoDOM.js new file mode 100644 index 000000000..6deb3982b --- /dev/null +++ b/src/Common-review/Controls/IsoDOM.js @@ -0,0 +1,835 @@ +var IsoDOM = { + + /** + * Add uuid to the tag ID + * @param {String} id - id selector + * @returns {String} uid - id selector with an unique id + */ + _addUID : function (id) { + var uid = (this._uid) ? id + "-" + this._uid : id; + return uid; + }, + + /** + * Main container (DOM) + * + * @returns {DOMElement} DOM element + */ + _createMainContainerElement : function () { + var container = document.createElement("div"); + container.id = this._addUID("GPisochron"); + container.className = "GPwidget"; + return container; + }, + + // ################################################################### // + // ################# Methods to display Main Panel ################### // + // ################################################################### // + + /** + * Hidden checkbox for minimizing/maximizing panel + * + * @returns {DOMElement} DOM element + */ + _createShowIsoElement : function () { + var input = document.createElement("input"); + input.id = this._addUID("GPshowIsochron"); + input.type = "checkbox"; + return input; + }, + + /** + * Show iso control + * see event ! + * + * @returns {DOMElement} DOM element + */ + _createShowIsoPictoElement : function () { + // contexte d'execution + var context = this; + + var label = document.createElement("label"); + label.id = this._addUID("GPshowIsochronPicto"); + label.className = "GPshowAdvancedToolPicto"; + label.htmlFor = this._addUID("GPshowIsochron"); + label.title = "Calculer une isochrone"; + + // gestionnaire d'evenement : + // on ouvre le menu de saisie du calcul d'isochrone + // L'ouverture/Fermeture permet de faire le menage + // (reinitialisation) + if (label.addEventListener) { + label.addEventListener("click", function (e) { + context.onShowIsoPanelClick(e); + }); + } else if (label.attachEvent) { + label.attachEvent("onclick", function (e) { + context.onShowIsoPanelClick(e); + }); + } + + var spanOpen = document.createElement("span"); + spanOpen.id = this._addUID("GPshowIsochronOpen"); + spanOpen.className = "GPshowAdvancedToolOpen"; + label.appendChild(spanOpen); + + return label; + }, + + // ################################################################### // + // ################## Methods to display Inputs Panel ################ // + // ################################################################### // + + /** + * Create Container Panel + * + * FIXME + * don't call this._createIsoPanelHeaderElement + * don't call this._createIsoPanelFormElement + * + * @returns {DOMElement} DOM element + */ + _createIsoPanelElement : function () { + var div = document.createElement("div"); + div.id = this._addUID("GPisochronPanel"); + div.className = "GPpanel"; + + // div.appendChild(this._createIsoPanelHeaderElement()); + // div.appendChild(this._createIsoPanelFormElement()); + + return div; + }, + + /** + * Create Header Panel + * + * @returns {DOMElement} DOM element + */ + _createIsoPanelHeaderElement : function () { + var self = this; + + var container = document.createElement("div"); + container.className = "GPpanelHeader"; + + var div = document.createElement("div"); + div.className = "GPpanelTitle"; + div.innerHTML = "Calcul d'isochrone"; + container.appendChild(div); + + // on desactive l'impl. reduction de la fenetre + // var divReduce = document.createElement("div"); + // divReduce.id = this._addUID("GPisochronPanelReduce"); + // divReduce.className = "GPpanelReduce"; + // divReduce.title = "Masquer le panneau"; + // + // if (divReduce.addEventListener) { + // divReduce.addEventListener("click", function () { + // if ( typeof self.onReduceIsoPanelClick === "function") { + // document.getElementById(self._addUID("GPshowIsochron")).checked = false; + // self.onReduceIsoPanelClick(); + // } + // }, false); + // } else if (divReduce.attachEvent) { + // divReduce.attachEvent("onclick", function () { + // if ( typeof self.onReduceIsoPanelClick === "function") { + // document.getElementById(self._addUID("GPshowIsochron")).checked = false; + // self.onReduceIsoPanelClick(); + // } + // }); + // } + // container.appendChild(divReduce); + + var divClose = document.createElement("div"); + divClose.id = this._addUID("GPisochronPanelClose"); + divClose.className = "GPpanelClose"; + divClose.title = "Fermer le panneau"; + + // Link panel close / visibility checkbox + if (divClose.addEventListener) { + divClose.addEventListener("click", function () { + document.getElementById(self._addUID("GPshowIsochronPicto")).click(); + }, false); + } else if (divClose.attachEvent) { + divClose.attachEvent("onclick", function () { + document.getElementById(self._addUID("GPshowIsochronPicto")).click(); + }); + } + container.appendChild(divClose); + + return container; + }, + + /** + * Create Form + * see evenement ! + * + * @returns {DOMElement} DOM element + */ + _createIsoPanelFormElement : function () { + // contexte d'execution + var self = this; + + var form = document.createElement("form"); + form.id = this._addUID("GPisochronForm"); + + form.addEventListener("submit", function (e) { + e.preventDefault(); + self.onIsoComputationSubmit(e); + return false; + }); + + return form; + }, + + /** + * Create Waiting Panel + * + * @returns {DOMElement} DOM element + */ + _createIsoWaitingElement : function () { + var div = document.createElement("div"); + div.id = this._addUID("GPisochronCalcWaitingContainer"); + div.className = "GPisochronCalcWaitingContainerHidden"; + + var p = document.createElement("p"); + p.className = "GPisochronCalcWaiting"; + p.innerHTML = "Calcul en cours..."; + + div.appendChild(p); + + return div; + }, + + // ################################################################### // + // ############# Methods to the type choice into form ################ // + // ################################################################### // + + /** + * Create Container to type choice + * + * FIXME + * don't call this._createIsoPanelFormTypeChoiceChronElement + * don't call this._createIsoPanelFormTypeChoiceDistElement + * + * @returns {DOMElement} DOM element + */ + _createIsoPanelFormTypeChoiceElement : function () { + var div = document.createElement("div"); + div.id = this._addUID("GPisochronChoice"); + + // div.appendChild(this._createIsoPanelFormTypeChoiceChronElement()); + // div.appendChild(this._createIsoPanelFormTypeChoiceDistElement()); + + return div; + }, + + /** + * Create Type choice Chron + * see event ! + * FIXME event not useful + * @param {Boolean} checked - checked + * @returns {DOMElement} DOM element + */ + _createIsoPanelFormTypeChoiceChronElement : function (checked) { + var self = this; + + var div = document.createElement("div"); + div.className = "GPisochronChoiceAlt"; + + var input = document.createElement("input"); + input.id = this._addUID("GPisochronChoiceAltChron"); + input.name = "GPisochronChoiceMode"; + input.type = "radio"; + input.checked = !!(checked); + if (input.addEventListener) { + input.addEventListener("change", function (e) { + document.getElementById(self._addUID("GPisochronValueChron")).className = "GPflexInput"; + document.getElementById(self._addUID("GPisochronValueDist")).className = "GPisochronValueHidden"; + self.onIsoTypeChoiceChange(e); + }, false); + } else if (input.attachEvent) { + input.attachEvent("onchange", function () { + document.getElementById(self._addUID("GPisochronValueChron")).className = "GPflexInput"; + document.getElementById(self._addUID("GPisochronValueDist")).className = "GPisochronValueHidden"; + self.onIsoTypeChoiceChange(); + }); + } + // info: Internet explorer support + input.value = "isochron"; + div.appendChild(input); + + var label = document.createElement("label"); + label.className = "GPisochronChoiceAltImg"; + label.htmlFor = this._addUID("GPisochronChoiceAltChron"); + div.appendChild(label); + + var span = document.createElement("span"); + span.id = this._addUID("GPisochronChoiceAltChronTxt"); + span.innerHTML = "isochrone"; + if (span.addEventListener) { + span.addEventListener("click", function () { + document.getElementById(self._addUID("GPisochronChoiceAltChron")).click(); + }, false); + } else if (span.attachEvent) { + span.attachEvent("onclick", function () { + document.getElementById(self._addUID("GPisochronChoiceAltChron")).click(); + }); + } + div.appendChild(span); + + return div; + }, + + /** + * Create Type choice Dist + * see event ! + * FIXME event not useful + * @param {Boolean} checked - checked + * @returns {DOMElement} DOM element + */ + _createIsoPanelFormTypeChoiceDistElement : function (checked) { + var self = this; + + var div = document.createElement("div"); + div.className = "GPisochronChoiceAlt"; + + var input = document.createElement("input"); + input.id = this._addUID("GPisochronChoiceAltDist"); + input.name = "GPisochronChoiceMode"; + input.type = "radio"; + input.checked = !!(checked); + if (input.addEventListener) { + input.addEventListener("change", function (e) { + document.getElementById(self._addUID("GPisochronValueDist")).className = "GPflexInput"; + document.getElementById(self._addUID("GPisochronValueChron")).className = "GPisochronValueHidden"; + self.onIsoTypeChoiceChange(e); + }, false); + } else if (input.attachEvent) { + input.attachEvent("onchange", function () { + document.getElementById(self._addUID("GPisochronValueDist")).className = "GPflexInput"; + document.getElementById(self._addUID("GPisochronValueChron")).className = "GPisochronValueHidden"; + self.onIsoTypeChoiceChange(); + }); + } + // info: Internet explorer support + input.value = "isodistance"; + div.appendChild(input); + + var label = document.createElement("label"); + label.className = "GPisochronChoiceAltImg"; + label.htmlFor = this._addUID("GPisochronChoiceAltDist"); + div.appendChild(label); + + var span = document.createElement("span"); + span.id = this._addUID("GPisochronChoiceAltDistTxt"); + span.innerHTML = "isodistance"; + if (span.addEventListener) { + span.addEventListener("click", function () { + document.getElementById(self._addUID("GPisochronChoiceAltDist")).click(); + }, false); + } else if (span.attachEvent) { + span.attachEvent("onclick", function () { + document.getElementById(self._addUID("GPisochronChoiceAltDist")).click(); + }); + } + div.appendChild(span); + + return div; + }, + + // ################################################################### // + // ############### Methods to the value iso into form ################ // + // ################################################################### // + + /** + * Create isochron inputs values + * see event ! + * @param {Boolean} checked - checked + * @returns {DOMElement} DOM element + */ + _createIsoPanelFormValueIsochronElement : function (checked) { + // contexte + var context = this; + + var div = document.createElement("div"); + div.id = this._addUID("GPisochronValueChron"); + div.className = (checked) ? "GPflexInput" : "GPisochronValueHidden"; + + var label = document.createElement("label"); + label.id = this._addUID("GPisochronValueChronLabel"); + label.htmlFor = this._addUID("GPisochronValueChronInput"); + label.innerHTML = "Temps"; + div.appendChild(label); + + var input1 = document.createElement("input"); + input1.id = this._addUID("GPisochronValueChronInput1"); + input1.min = "0"; + input1.step = "1"; + input1.value = "0"; + input1.type = "number"; + if (input1.addEventListener) { + input1.addEventListener("change", function (e) { + if (typeof context.onIsoValueChronTimeMinuteChange === "function") { + context.onIsoValueChronTimeHourChange(e); + } + }); + } else if (input1.attachEvent) { + input1.attachEvent("onchange", function (e) { + if (typeof context.onIsoValueChronTimeMinuteChange === "function") { + context.onIsoValueChronTimeHourChange(e); + } + }); + } + div.appendChild(input1); + + var label1 = document.createElement("label"); + label1.innerHTML = "h"; + div.appendChild(label1); + + var input2 = document.createElement("input"); + input2.id = this._addUID("GPisochronValueChronInput2"); + input2.min = "0"; + input2.max = "59"; + input2.step = "1"; + input2.value = "0"; + input2.type = "number"; + if (input2.addEventListener) { + input2.addEventListener("change", function (e) { + if (typeof context.onIsoValueChronTimeMinuteChange === "function") { + context.onIsoValueChronTimeMinuteChange(e); + } + }); + } else if (input2.attachEvent) { + input2.attachEvent("onchange", function (e) { + if (typeof context.onIsoValueChronTimeMinuteChange === "function") { + context.onIsoValueChronTimeMinuteChange(e); + } + }); + } + div.appendChild(input2); + + var label2 = document.createElement("label"); + label2.innerHTML = "min"; + div.appendChild(label2); + + return div; + }, + + /** + * Create isodistance inputs values + * see event ! + * @param {Boolean} checked - checked + * @returns {DOMElement} DOM element + */ + _createIsoPanelFormValueIsodistanceElement : function (checked) { + // contexte + var context = this; + + var div = document.createElement("div"); + div.id = this._addUID("GPisochronValueDist"); + div.className = (checked) ? "GPflexInput" : "GPisochronValueHidden"; + + var label = document.createElement("label"); + label.id = this._addUID("GPisochronValueDistLabel"); + label.htmlFor = this._addUID("GPisochronValueDistInput"); + label.innerHTML = "Distance"; + div.appendChild(label); + + var input1 = document.createElement("input"); + input1.id = this._addUID("GPisochronValueDistInput"); + input1.min = "0"; + input1.step = "any"; + input1.value = "0"; + input1.type = "number"; + if (input1.addEventListener) { + input1.addEventListener("change", function (e) { + if (typeof context.onIsoValueDistChange === "function") { + context.onIsoValueDistChange(e); + } + }); + } else if (input1.attachEvent) { + input1.attachEvent("onchange", function (e) { + if (typeof context.onIsoValueDistChange === "function") { + context.onIsoValueDistChange(e); + } + }); + } + div.appendChild(input1); + + var label1 = document.createElement("label"); + label1.innerHTML = "km"; + div.appendChild(label1); + + return div; + }, + + // ################################################################### // + // ############ Methods to the mode choice into form ################# // + // ################################################################### // + + /** + * Create Container to Mode choice + * + * FIXME + * don't call this._createIsoPanelFormModeChoiceTransportElement + * don't call this._createIsoPanelFormModeChoiceDirectionElement + * + * @returns {DOMElement} DOM element + */ + _createIsoPanelFormModeChoiceElement : function () { + var div = document.createElement("div"); + div.id = this._addUID("GPisochronModeChoice"); + + // div.appendChild(this._createIsoPanelFormModeChoiceTransportElement()); + // div.appendChild(this._createIsoPanelFormModeChoiceDirectionElement()); + + return div; + }, + + /** + * Create Mode choice transport + * see event ! + * FIXME event not useful + * @param {Array} transports - transports in a list + * @returns {DOMElement} DOM element + */ + _createIsoPanelFormModeChoiceTransportElement : function (transports) { + // contexte d'execution + var context = this; + + var div = document.createElement("div"); + div.id = this._addUID("GPisochronTransportChoice"); + + var span = document.createElement("span"); + span.className = "GPisochronModeLabel"; + span.innerHTML = "Mode de transport"; + div.appendChild(span); + + /* jshint -W083 */ + for (var i = 0; i < transports.length; i++) { + var transport = transports[i]; + + if (transport === "Voiture") { + var inputCar = document.createElement("input"); + inputCar.id = this._addUID("GPisochronTransportCar"); + inputCar.type = "radio"; + inputCar.name = "GPisochronTransport"; + if (i === 0) { + inputCar.checked = true; + } + // gestionnaire d'evenement : + // on stocke le mode de transport, + // utilisation pour la requête sur le service de calcul d'itiniraire + if (inputCar.addEventListener) { + inputCar.addEventListener("change", function (e) { + context.onIsoModeTransportChange(e); + }); + } else if (inputCar.attachEvent) { + inputCar.attachEvent("onchange", function (e) { + context.onIsoModeTransportChange(e); + }); + } + // info : internet explorer support + inputCar.value = "Voiture"; + div.appendChild(inputCar); + + var labelCar = document.createElement("label"); + labelCar.className = "GPisochronTransportImg"; + labelCar.htmlFor = this._addUID("GPisochronTransportCar"); + labelCar.title = "Voiture"; + div.appendChild(labelCar); + } + + if (transport === "Pieton") { + var inputPedestrian = document.createElement("input"); + inputPedestrian.id = this._addUID("GPisochronTransportPedestrian"); + inputPedestrian.type = "radio"; + inputPedestrian.name = "GPisochronTransport"; + if (i === 0) { + inputPedestrian.checked = true; + } + // gestionnaire d'evenement : + // on stocke le mode de transport, + // utilisation pour la requête sur le service de calcul d'itiniraire + if (inputPedestrian.addEventListener) { + inputPedestrian.addEventListener("change", function (e) { + context.onIsoModeTransportChange(e); + }); + } else if (inputPedestrian.attachEvent) { + inputPedestrian.attachEvent("onchange", function (e) { + context.onIsoModeTransportChange(e); + }); + } + // info : internet explorer support + inputPedestrian.value = "Pieton"; + div.appendChild(inputPedestrian); + + var labelPedestrian = document.createElement("label"); + labelPedestrian.className = "GPisochronTransportImg"; + labelPedestrian.htmlFor = this._addUID("GPisochronTransportPedestrian"); + labelPedestrian.title = "Piéton"; + div.appendChild(labelPedestrian); + } + } + + return div; + }, + + /** + * Create Mode choice direction + * see event! + * + * @param {Array} directions - directions to display in list ("Departure", "Arrival"). First element will be selected by default + * @returns {DOMElement} DOM element + */ + _createIsoPanelFormModeChoiceDirectionElement : function (directions) { + // contexte d'execution + var self = this; + + var div = document.createElement("div"); + div.id = this._addUID("GPisochronDirectionChoice"); + + var span = document.createElement("span"); + span.className = "GPisochronModeLabel"; + span.innerHTML = "Sens de parcours"; + div.appendChild(span); + + var select = document.createElement("select"); + select.id = this._addUID("GPisochronDirectionSelect"); + select.className = "GPinputSelect"; + // gestionnaire d'evenement : + // on stocke la valeur du mode de calcul, + // utilisation pour la requête sur le service de calcul d'iso + select.addEventListener("change", function (e) { + self.onIsoModeDirectionChange(e); + }); + + for (var i = 0; i < directions.length; i++) { + var direction = directions[i]; + if (direction.toLowerCase() === "departure") { + var departureOption = document.createElement("option"); + if (i === 0) { + departureOption.selected = "selected"; + } + departureOption.value = "departure"; + departureOption.text = "Départ"; + select.appendChild(departureOption); + } + if (direction.toLowerCase() === "arrival") { + var arrivalOption = document.createElement("option"); + if (i === 0) { + arrivalOption.selected = "selected"; + } + arrivalOption.value = "arrival"; + arrivalOption.text = "Arrivée"; + select.appendChild(arrivalOption); + } + } + div.appendChild(select); + + return div; + }, + + // ################################################################### // + // ################# Methods to the choice exclusions ################ // + // ################################################################### // + + /** + * Hidden checkbox for minimizing/maximizing Exclusions Options + * + * @returns {DOMElement} DOM element + */ + _createShowIsoExclusionsElement : function () { + var input = document.createElement("input"); + input.id = this._addUID("GPshowIsoExclusions"); + input.type = "checkbox"; + return input; + }, + + /** + * Label to Exclusions Options + * + * @returns {DOMElement} DOM element + */ + _createShowIsoExclusionsPictoElement : function () { + var label = document.createElement("label"); + label.id = this._addUID("GPshowIsoExclusionsPicto"); + label.className = "GPshowMoreOptionsImage GPshowMoreOptions GPshowIsoExclusionsPicto"; + label.htmlFor = this._addUID("GPshowIsoExclusions"); + label.title = "Exclusions"; + label.style.top = "240px"; + + return label; + }, + + /** + * Create Container to Exclusions + * + * @returns {DOMElement} DOM element + */ + _createIsoPanelFormExclusionsElement : function () { + var div = document.createElement("div"); + div.id = this._addUID("GPisoExclusions"); + + var span = document.createElement("span"); + span.className = "GPisoExclusionsLabel"; + span.innerHTML = "Passages autorisés"; + div.appendChild(span); + + // div.appendChild(this._createIsoPanelFormExclusionOptionsElement()); + + return div; + }, + + /** + * Create Exclusions Options + * see event ! + * FIXME event not useful + * @param {Array} exclusions - exclusions to display in list + * @returns {DOMElement} DOM element + */ + _createIsoPanelFormExclusionOptionsElement : function (exclusions) { + // contexte d'execution + var context = this; + + var div = document.createElement("div"); + div.className = "GPisoExclusionsOptions"; + + /* jshint -W083 */ + for (var value in exclusions) { + if (exclusions.hasOwnProperty(value)) { + var status = exclusions[value]; + switch (value) { + case "toll": + var inputToll = document.createElement("input"); + inputToll.id = this._addUID("GPisoExclusionsToll"); + inputToll.type = "checkbox"; + inputToll.checked = !status; + // gestionnaire d'evenement : + // on stocke l'exclusion, + // utilisation pour la requête sur le service de calcul d'itiniraire + if (inputToll.addEventListener) { + inputToll.addEventListener("change", function (e) { + context.onIsoExclusionsChange(e); + }); + } else if (inputToll.attachEvent) { + inputToll.attachEvent("onchange", function (e) { + context.onIsoExclusionsChange(e); + }); + } + // info : internet explorer support + inputToll.value = "Toll"; + div.appendChild(inputToll); + + var labelToll = document.createElement("label"); + labelToll.className = "GPisoExclusionsOption"; + labelToll.htmlFor = this._addUID("GPisoExclusionsToll"); + labelToll.innerHTML = "Péages"; + div.appendChild(labelToll); + break; + + case "tunnel": + var inputTunnel = document.createElement("input"); + inputTunnel.id = this._addUID("GPisoExclusionsTunnel"); + inputTunnel.type = "checkbox"; + inputTunnel.checked = !status; + // gestionnaire d'evenement : + // on stocke l'exclusion, + // utilisation pour la requête sur le service de calcul d'itiniraire + if (inputTunnel.addEventListener) { + inputTunnel.addEventListener("change", function (e) { + context.onIsoExclusionsChange(e); + }); + } else if (inputTunnel.attachEvent) { + inputTunnel.attachEvent("onchange", function (e) { + context.onIsoExclusionsChange(e); + }); + } + // info : internet explorer support + inputTunnel.value = "Tunnel"; + div.appendChild(inputTunnel); + + var labelTunnel = document.createElement("label"); + labelTunnel.className = "GPisoExclusionsOption"; + labelTunnel.htmlFor = this._addUID("GPisoExclusionsTunnel"); + labelTunnel.innerHTML = "Tunnels"; + div.appendChild(labelTunnel); + break; + + case "bridge": + var inputBridge = document.createElement("input"); + inputBridge.id = this._addUID("GPisoExclusionsBridge"); + inputBridge.type = "checkbox"; + inputBridge.checked = !status; + // gestionnaire d'evenement : + // on stocke l'exclusion, + // utilisation pour la requête sur le service de calcul d'itiniraire + if (inputBridge.addEventListener) { + inputBridge.addEventListener("change", function (e) { + context.onIsoExclusionsChange(e); + }); + } else if (inputBridge.attachEvent) { + inputBridge.attachEvent("onchange", function (e) { + context.onIsoExclusionsChange(e); + }); + } + // info : internet explorer support + inputBridge.value = "Bridge"; + div.appendChild(inputBridge); + + var labelBridge = document.createElement("label"); + labelBridge.className = "GPisoExclusionsOption"; + labelBridge.htmlFor = this._addUID("GPisoExclusionsBridge"); + labelBridge.innerHTML = "Ponts"; + div.appendChild(labelBridge); + break; + } + } + } + + return div; + }, + + // ################################################################### // + // ############################### Submit Form ####################### // + // ################################################################### // + + /** + * Create Submit Form Element + * + * @returns {DOMElement} DOM element + */ + _createIsoSubmitFormElement : function () { + var input = document.createElement("input"); + input.id = this._addUID("GPisochronSubmit"); + input.className = "GPinputSubmit"; + input.type = "submit"; + input.value = "Calculer"; + + return input; + }, + + // ################################################################### // + // ############################### Reset picto ####################### // + // ################################################################### // + + /** + * Create Reset Picto Element + * + * @returns {DOMElement} DOM element + */ + _createIsoFormResetElement : function () { + var self = this; + + var divReset = document.createElement("div"); + divReset.id = this._addUID("GPisochronReset"); + divReset.title = "Réinitialiser les paramètres"; + divReset.addEventListener("click", function (e) { + self.onIsoResetClick(e); + }); + + return divReset; + } +}; + +export default IsoDOM; diff --git a/src/Common-review/Controls/LayerImportDOM.js b/src/Common-review/Controls/LayerImportDOM.js new file mode 100644 index 000000000..b48f46b13 --- /dev/null +++ b/src/Common-review/Controls/LayerImportDOM.js @@ -0,0 +1,1064 @@ +import SelectorID from "../Utils/SelectorID"; + +var LayerImportDOM = { + + /** + * Add uuid to the tag ID + * @param {String} id - id selector + * @returns {String} uid - id selector with an unique id + */ + _addUID : function (id) { + var uid = (this._uid) ? id + "-" + this._uid : id; + return uid; + }, + + /** + * Map loading + * + * @returns {DOMElement} container + */ + _createLoadingElement : function () { + var div = document.createElement("div"); + div.id = "GPmapLoading"; + div.className = ""; + return div; + }, + + /** + * Main container (DOM) + * + * @returns {DOMElement} DOM element + */ + _createMainContainerElement : function () { + var container = document.createElement("div"); + container.id = this._addUID("GPimport"); + container.className = "GPwidget"; + return container; + }, + + // ################################################################### // + // ######################### show widget ############################# // + // ################################################################### // + + /** + * Hidden checkbox for minimizing/maximizing + * + * @returns {DOMElement} DOM element + */ + _createShowImportElement : function () { + var input = document.createElement("input"); + input.id = this._addUID("GPshowImport"); + input.type = "checkbox"; + return input; + }, + + /** + * Show Import + * + * @returns {DOMElement} DOM element + */ + _createShowImportPictoElement : function () { + // contexte d'execution + var self = this; + + var label = document.createElement("label"); + label.id = this._addUID("GPshowImportPicto"); + label.className = "GPshowAdvancedToolPicto"; + label.htmlFor = this._addUID("GPshowImport"); + label.title = "Ouvrir l'import de couches"; + + // Close all results and panels when minimizing the widget + if (label.addEventListener) { + label.addEventListener("click", function () { + self._onShowImportClick(); + }); + } else if (label.attachEvent) { + label.attachEvent("onclick", function () { + self._onShowImportClick(); + }); + } + + var spanOpen = document.createElement("span"); + spanOpen.id = this._addUID("GPshowImportOpen"); + spanOpen.className = "GPshowAdvancedToolOpen"; + label.appendChild(spanOpen); + + return label; + }, + + // ################################################################### // + // ######################### Header panel ############################ // + // ################################################################### // + + /** + * Create Container Panel + * + * @returns {DOMElement} DOM element + */ + _createImportPanelElement : function () { + var div = document.createElement("div"); + div.id = this._addUID("GPimportPanel"); + div.className = "GPpanel"; + + return div; + }, + + /** + * Create Header Panel + * + * @returns {DOMElement} DOM element + */ + _createImportPanelHeaderElement : function () { + var container = document.createElement("div"); + container.className = "GPpanelHeader"; + + // panel title + var panelTitle = this._createImportPanelTitleElement(); + container.appendChild(panelTitle); + // close picto + var closeDiv = this._createImportPanelCloseElement(); + container.appendChild(closeDiv); + + return container; + }, + + /** + * Create Header Title Panel + * + * @returns {DOMElement} DOM element + */ + _createImportPanelTitleElement : function () { + var div = document.createElement("div"); + div.className = "GPpanelTitle"; + div.innerHTML = "Import de données"; + return div; + }, + + /** + * Create Header close div + * + * @returns {DOMElement} DOM element + */ + _createImportPanelCloseElement : function () { + // contexte + var self = this; + + var divClose = document.createElement("div"); + divClose.id = this._addUID("GPimportPanelClose"); + divClose.className = "GPpanelClose"; + divClose.title = "Fermer le panneau"; + + // Link panel close / visibility checkbox + if (divClose.addEventListener) { + divClose.addEventListener("click", function () { + document.getElementById(self._addUID("GPshowImportPicto")).click(); + }, false); + } else if (divClose.attachEvent) { + divClose.attachEvent("onclick", function () { + document.getElementById(self._addUID("GPshowImportPicto")).click(); + }); + } + + return divClose; + }, + + // ################################################################### // + // ########################### Form panel ############################ // + // ################################################################### // + + /** + * Create Form + * see event ! + * + * @returns {DOMElement} DOM element + */ + _createImportPanelFormElement : function () { + // contexte d'execution + var self = this; + + var form = document.createElement("form"); + form.id = this._addUID("GPimportForm"); + form.className = "map-tool-box"; + + // TODO ? + if (form.addEventListener) { + form.addEventListener("submit", function (e) { + e.preventDefault(); + self._onImportSubmit(); + }); + } else if (form.attachEvent) { + form.attachEvent("onsubmit", function (e) { + e.preventDefault(); + self._onImportSubmit(); + }); + } + + return form; + }, + + /** + * Create Container for import type choice + * + * @param {Array} importTypes - import types to be displayed (and used) + * @returns {DOMElement} DOM element + */ + _createImportTypeLineElement : function (importTypes) { + // contexte d'execution + var context = this; + + var div = document.createElement("div"); + div.id = this._addUID("GPimportTypeLine"); + div.className = "GPimportInputLine"; + + var label = document.createElement("label"); + label.htmlFor = this._addUID("GPimportType"); + label.className = "GPimportLabel"; + label.innerHTML = "Type de donnée"; + label.title = "Type de donnée"; + div.appendChild(label); + + var select = document.createElement("select"); + select.className = "GPimportSelect"; + // gestionnaire d'evenement : on stocke la valeur du type d'import + if (select.addEventListener) { + select.addEventListener("change", function (e) { + if (this.value === "KML" || this.value === "GPX" || this.value === "GeoJSON" || this.value === "MAPBOX") { + // static import + document.getElementById(context._addUID("GPimportStaticParams")).className = "GPimportVisibleParams"; + document.getElementById(context._addUID("GPimportServiceParams")).className = "GPimportHiddenParams"; + } else if (this.value === "WMS" || this.value === "WMTS" || this.value === "WFS") { + // service import + document.getElementById(context._addUID("GPimportServiceParams")).className = "GPimportVisibleParams"; + document.getElementById(context._addUID("GPimportStaticParams")).className = "GPimportHiddenParams"; + } + context._onImportTypeChange(e); + }); + } else if (select.attachEvent) { + select.attachEvent("onchange", function () { + if (this.value === "KML" || this.value === "GPX" || this.value === "GeoJSON" || this.value === "MAPBOX") { + // static import + document.getElementById(context._addUID("GPimportStaticParams")).className = "GPimportVisibleParams"; + document.getElementById(context._addUID("GPimportServiceParams")).className = "GPimportHiddenParams"; + } else if (this.value === "WMS" || this.value === "WMTS" || this.value === "WFS") { + // service import + document.getElementById(context._addUID("GPimportServiceParams")).className = "GPimportVisibleParams"; + document.getElementById(context._addUID("GPimportStaticParams")).className = "GPimportHiddenParams"; + } + context._onImportTypeChange(); + }); + } + select.id = this._addUID("GPimportType"); + + // on prend soit les valeurs passées par l'utilisateur, soit des valeurs par défaut + if (!importTypes || !Array.isArray(importTypes)) { + importTypes = [ + "KML", + "GPX", + "GeoJSON", + "MAPBOX", + "WMS", + "WMTS", + "WFS" + ]; + } + var option; + for (var i = 0; i < importTypes.length; i++) { + option = document.createElement("option"); + option.value = importTypes[i]; + option.text = (importTypes[i] === "MAPBOX") ? "Vecteur tuilé" : importTypes[i]; + select.appendChild(option); + } + + div.appendChild(select); + + return div; + }, + + /** + * Create Waiting Panel + * + * @returns {DOMElement} DOM element + */ + _createImportWaitingElement : function () { + var div = document.createElement("div"); + div.id = this._addUID("GPimportWaitingContainer"); + div.className = "GPimportWaitingContainerHidden"; + + var p = document.createElement("p"); + p.className = "GPimportWaiting"; + p.innerHTML = "Recherche en cours..."; + + div.appendChild(p); + + return div; + }, + + // ################################################################### // + // ##### Params for static import (KML / GPX / GeoJSON) ############## // + // ################################################################### // + + /** + * Create container for KML/GPX/GeoJSON parameters + * @param {String} currentType - GeoJSON, GPX or KML value + * @returns {DOMElement} DOM element + */ + _createImportStaticParamsContainer : function (currentType) { + var div = document.createElement("div"); + div.id = this._addUID("GPimportStaticParams"); + if (currentType === "KML" || currentType === "GPX" || currentType === "GeoJSON" || currentType === "MAPBOX") { + div.className = "GPimportVisibleParams"; + } else { + div.className = "GPimportHiddenParams"; + } + + return div; + }, + + /** + * Create name label for KML/GPX/GeoJSON parameters + * + * @returns {DOMElement} DOM element + */ + _createStaticNameLabel : function () { + var div = document.createElement("div"); + div.className = "GPimportInputLine"; + + var label = document.createElement("label"); + label.className = "GPimportLabel"; + label.htmlFor = this._addUID("GPimportName"); + label.innerHTML = "Nom"; + label.title = "Nom"; + div.appendChild(label); + + var input = document.createElement("input"); + input.type = "text"; + input.id = this._addUID("GPimportName"); + input.className = "GPimportInput"; + div.appendChild(input); + + return div; + }, + + /** + * Create import choice for KML/GPX/GeoJSON parameters (local or url) + * + * @returns {DOMElement} DOM element + */ + _createStaticModeChoiceDiv : function () { + var div = document.createElement("div"); + div.id = this._addUID("GPimportChoice"); + return div; + }, + + /** + * Create local import choice for KML/GPX/GeoJSON parameters + * + * @returns {DOMElement} DOM element + */ + _createStaticLocalChoiceDiv : function () { + var context = this; + + var div = document.createElement("div"); + div.className = "GPimportChoiceAlt"; + + var input = document.createElement("input"); + input.type = "radio"; + if (input.addEventListener) { + input.addEventListener("change", function (e) { + document.getElementById(context._addUID("GPimportValueLocal")).className = "GPimportInputLine"; + document.getElementById(context._addUID("GPimportValueUrl")).className = "GPimportValueHidden"; + context._onStaticImportTypeChange(e); + }); + } else if (input.appendChild) { + input.appendChild("onchange", function () { + document.getElementById(context._addUID("GPimportValueLocal")).className = "GPimportInputLine"; + document.getElementById(context._addUID("GPimportValueUrl")).className = "GPimportValueHidden"; + context._onStaticImportTypeChange(); + }); + } + input.name = "GPimportChoiceMode"; + input.value = "local"; + input.checked = true; + input.id = this._addUID("GPimportChoiceAltLocal"); + div.appendChild(input); + + var label = document.createElement("label"); + label.className = "GPimportChoiceAltTxt"; + label.htmlFor = this._addUID("GPimportChoiceAltLocal"); + label.innerHTML = "par fichier local"; + label.title = "par fichier local"; + div.appendChild(label); + + return div; + }, + + /** + * Create url import choice for KML/GPX/GeoJSON parameters + * + * @returns {DOMElement} DOM element + */ + _createStaticUrlChoiceDiv : function () { + var context = this; + + var div = document.createElement("div"); + div.className = "GPimportChoiceAlt"; + + var input = document.createElement("input"); + input.type = "radio"; + if (input.addEventListener) { + input.addEventListener("change", function (e) { + document.getElementById(context._addUID("GPimportValueUrl")).className = "GPimportInputLine"; + document.getElementById(context._addUID("GPimportValueLocal")).className = "GPimportValueHidden"; + context._onStaticImportTypeChange(e); + }); + } else if (input.appendChild) { + input.appendChild("onchange", function () { + document.getElementById(context._addUID("GPimportValueUrl")).className = "GPimportInputLine"; + document.getElementById(context._addUID("GPimportValueLocal")).className = "GPimportValueHidden"; + context._onStaticImportTypeChange(); + }); + } + input.id = this._addUID("GPimportChoiceAltUrl"); + input.name = "GPimportChoiceMode"; + input.value = "url"; + input.checked = false; + div.appendChild(input); + + var label = document.createElement("label"); + label.className = "GPimportChoiceAltTxt"; + label.htmlFor = this._addUID("GPimportChoiceAltUrl"); + label.innerHTML = "par URL"; + label.title = "par URL"; + div.appendChild(label); + + return div; + }, + + /** + * Create input div for KML/GPX/GeoJSON parameters local import + * + * @returns {DOMElement} DOM element + */ + _createStaticLocalInputDiv : function () { + var div = document.createElement("div"); + div.id = this._addUID("GPimportValueLocal"); + div.className = "GPimportInputLine"; + return div; + }, + + /** + * Create input label for KML/GPX/GeoJSON parameters local import + * + * @returns {DOMElement} DOM element + */ + _createStaticLocalInputLabel : function () { + var label = document.createElement("label"); + label.className = "GPimportLabel"; + label.htmlFor = this._addUID("GPimportFile"); + label.innerHTML = "Fichier local"; + label.title = "Fichier local"; + return label; + }, + + /** + * Create file input for KML/GPX/GeoJSON parameters local import + * + * @returns {DOMElement} DOM element + */ + _createStaticLocalInput : function () { + var input = document.createElement("input"); + input.type = "file"; + input.id = this._addUID("GPimportFile"); + input.className = "GPimportInputFile"; + return input; + }, + + /** + * Create input div for KML/GPX/GeoJSON parameters url import + * + * @returns {DOMElement} DOM element + */ + _createStaticUrlInputDiv : function () { + var div = document.createElement("div"); + div.id = this._addUID("GPimportValueUrl"); + div.className = "GPimportValueHidden"; + return div; + }, + + /** + * Create input label for KML/GPX/GeoJSON parameters url import + * + * @returns {DOMElement} DOM element + */ + _createStaticUrlInputLabel : function () { + var label = document.createElement("label"); + label.className = "GPimportLabel"; + label.htmlFor = this._addUID("GPimportUrl"); + label.innerHTML = "URL"; + label.title = "URL"; + return label; + }, + + /** + * Create url input for KML/GPX/GeoJSON parameters url import + * + * @returns {DOMElement} DOM element + */ + _createStaticUrlInput : function () { + var input = document.createElement("input"); + input.type = "text"; + input.id = this._addUID("GPimportUrl"); + input.className = "GPimportInput"; + return input; + }, + + // ################################################################### // + // ######## Params for service params import (WMS//WMTS/WFS) ######### // + // ################################################################### // + + /** + * Create container for WMS/WMTS/WFS parameters + * @param {String} currentType - WMS, WMTS or WFS value + * @returns {DOMElement} DOM element + */ + _createServiceParamsContainer : function (currentType) { + var div = document.createElement("div"); + div.id = this._addUID("GPimportServiceParams"); + if (currentType === "WMS" || currentType === "WMTS" || currentType === "WFS") { + div.className = "GPimportVisibleParams"; + } else { + div.className = "GPimportHiddenParams"; + } + + return div; + }, + + /** + * Create div for WMS/WMTS/WFS url + * + * @returns {DOMElement} DOM element + */ + _createServiceUrlDiv : function () { + var div = document.createElement("div"); + div.className = "GPimportInputLine"; + return div; + }, + + /** + * Create input label for WMS/WMTS/WFS url + * + * @returns {DOMElement} DOM element + */ + _createServiceUrlInputLabel : function () { + var label = document.createElement("label"); + label.className = "GPimportLabel"; + label.htmlFor = this._addUID("GPimportServiceUrl"); + label.innerHTML = "URL du service"; + label.title = "URL du service"; + return label; + }, + + /** + * Create input for WMS/WMTS/WFS parameters url + * + * @returns {DOMElement} DOM element + */ + _createServiceUrlInput : function () { + var input = document.createElement("input"); + input.type = "text"; + input.id = this._addUID("GPimportServiceUrl"); + input.className = "GPimportInput"; + return input; + }, + + // ################################################################### // + // ########################### Submit Form ########################### // + // ################################################################### // + + /** + * Create Submit Form Element + * + * @returns {DOMElement} DOM element + */ + _createImportSubmitFormElement : function () { + var input = document.createElement("input"); + input.id = this._addUID("GPimportSubmit"); + input.className = "GPinputSubmit tool-form-submit"; + input.type = "submit"; + input.value = "Importer"; + + return input; + }, + + // ################################################################### // + // ########################### GetCap Panel ########################## // + // ################################################################### // + + /** + * Create GetCap Panel Element + * + * @returns {DOMElement} DOM element + */ + _createImportGetCapPanelElement : function () { + var div = document.createElement("div"); + div.id = this._addUID("GPimportGetCapPanel"); + div.className = "GPpanel"; + return div; + }, + + /** + * Create GetCap Panel Header Element + * + * @returns {DOMElement} DOM element + */ + _createImportGetCapPanelHeaderElement : function () { + // contexte + var context = this; + + var container = document.createElement("div"); + container.className = "GPpanelHeader"; + + // panel title + var panelTitle = document.createElement("div"); + panelTitle.className = "GPpanelTitle"; + panelTitle.innerHTML = "Couches accessibles"; + panelTitle.title = "Couches accessibles"; + container.appendChild(panelTitle); + + // close picto + var closeDiv = document.createElement("div"); + if (closeDiv.addEventListener) { + closeDiv.addEventListener("click", function () { + document.getElementById(context._addUID("GPimportGetCapPanel")).style.display = "none"; + document.getElementById(context._addUID("GPimportPanel")).style.display = ""; + context._onGetCapPanelClose(); + }); + } else if (closeDiv.attachEvent) { + closeDiv.attachEvent("click", function () { + document.getElementById(context._addUID("GPimportGetCapPanel")).style.display = "none"; + document.getElementById(context._addUID("GPimportPanel")).style.display = ""; + context._onGetCapPanelClose(); + }); + } + closeDiv.className = "GPpanelClose"; + closeDiv.title = "Fermer le panneau"; + closeDiv.id = this._addUID("GPimportGetCapPanelClose"); + container.appendChild(closeDiv); + + return container; + }, + + /** + * Create GetCap Results List Element + * + * @returns {DOMElement} DOM element + */ + _createImportGetCapResultsContainer : function () { + var container = document.createElement("div"); + container.className = "GPimportGetCapRoot"; + container.id = this._addUID("GPimportGetCapResults"); + + return container; + }, + + _addImportGetCapResultListRubrique : function (title, container) { + var ul = document.createElement("ul"); + ul.className = "GPimportGetCapListRubrique"; + ul.title = title; + + container.appendChild(ul); + return container; + }, + + _addImportGetCapResultRubrique : function (title, container) { + var li = document.createElement("li"); + li.className = "GPimportGetCapRubrique"; + + // input + var input = document.createElement("input"); + input.id = "GPimportGetCapRubrique-" + SelectorID.generate(); + input.className = "GPimportGetCapRubrique"; + input.type = "checkbox"; + li.appendChild(input); + + // label for + var label = document.createElement("label"); + label.className = "GPimportGetCapRubriqueTitle"; + label.htmlFor = input.id; + label.innerHTML = title; + label.title = title; + li.appendChild(label); + + container.appendChild(li); + return container; + }, + + _addImportGetCapResultListLayer : function (container) { + var ul = document.createElement("ul"); + ul.className = "GPimportGetCapListLayer"; + + container.appendChild(ul); + return container; + }, + + _addImportGetCapResultLayer : function (description, id, container) { + var li = document.createElement("li"); + li.className = "GPimportGetCapProposal"; + li.innerHTML = description.content; + li.title = description.title; + li.id = "GPimportGetCapProposal_" + id; + + var context = this; + if (li.addEventListener) { + li.addEventListener("click", function (e) { + context._onGetCapResponseLayerClick(e); + }); + } else if (li.attachEvent) { + li.attachEvent("onclick", function () { + context._onGetCapResponseLayerClick(); + }); + } + + container.appendChild(li); + return container; + }, + + // ################################################################### // + // ########################### MapBox Panel ########################## // + // ################################################################### // + + /** + * Create MapBox Panel Element + * + * @returns {DOMElement} DOM element + */ + _createImportMapBoxPanelElement : function () { + var div = document.createElement("div"); + div.id = this._addUID("GPimportMapBoxPanel"); + div.className = "GPpanel"; + return div; + }, + + /** + * Create MapBox Panel Header Element + * + * @returns {DOMElement} DOM element + */ + _createImportMapBoxPanelHeaderElement : function () { + // contexte + var context = this; + + var container = document.createElement("div"); + container.className = "GPpanelHeader"; + + // return picto + var returnDiv = document.createElement("div"); + returnDiv.id = this._addUID("GPimportMapBoxPanelReturnPicto"); + returnDiv.title = "Masquer le panneau"; + returnDiv.className = ""; + if (returnDiv.addEventListener) { + returnDiv.addEventListener("click", function (e) { + // document.getElementById(context._addUID("GPimportMapBoxPanel")).style.display = "none"; + // document.getElementById(context._addUID("GPimportPanel")).style.display = "none"; + context._onMapBoxReturnPictoClick(e); + }); + } else if (returnDiv.attachEvent) { + returnDiv.attachEvent("onclick", function (e) { + // document.getElementById(context._addUID("GPimportMapBoxPanel")).style.display = "none"; + // document.getElementById(context._addUID("GPimportPanel")).style.display = "none"; + context._onMapBoxReturnPictoClick(e); + }); + } + container.appendChild(returnDiv); + + // panel title + var panelTitle = document.createElement("div"); + panelTitle.className = "GPpanelTitle"; + panelTitle.innerHTML = "Edition des styles"; + panelTitle.title = "Edition des styles"; + container.appendChild(panelTitle); + + // close picto + var closeDiv = document.createElement("div"); + if (closeDiv.addEventListener) { + closeDiv.addEventListener("click", function () { + document.getElementById(context._addUID("GPimportMapBoxPanel")).style.display = "none"; + document.getElementById(context._addUID("GPimportPanel")).style.display = ""; + context._onMapBoxPanelClose(); + }); + } else if (closeDiv.attachEvent) { + closeDiv.attachEvent("click", function () { + document.getElementById(context._addUID("GPimportMapBoxPanel")).style.display = "none"; + document.getElementById(context._addUID("GPimportPanel")).style.display = ""; + context._onMapBoxPanelClose(); + }); + } + closeDiv.className = "GPpanelClose"; + closeDiv.title = "Fermer le panneau"; + closeDiv.id = this._addUID("GPimportMapBoxPanelClose"); + container.appendChild(closeDiv); + + return container; + }, + + /** + * Create MapBox Results List Element + * + * @returns {DOMElement} DOM element + */ + _createImportMapBoxResultsContainer : function () { + var container = document.createElement("div"); + container.className = "GPimportMapBoxpRoot"; + container.id = this._addUID("GPimportMapBoxResults"); + return container; + } + + // _addImportMapBoxResultListSource : function (id, source, container) { + // var ul = document.createElement("ul"); + // ul.className = "GPimportMapBoxListSource"; + // ul.title = id; + // + // var label = document.createElement("label"); + // label.className = "GPimportMapBoxListSourceTitle"; + // label.innerHTML = "Listes des couches pour la source '" + id + "' :"; + // label.title = source.attribution || id; + // ul.appendChild(label); + // + // container.appendChild(ul); + // return container; + // }, + // + // _addImportMapBoxResultSource : function (layer, container) { + // var li = document.createElement("li"); + // li.className = "GPimportMapBoxSource"; + // + // // input + // var input = document.createElement("input"); + // input.id = "GPimportMapBoxSource-" + SelectorID.generate(); + // input.className = "GPimportMapBoxSource"; + // input.type = "checkbox"; + // li.appendChild(input); + // + // // label for + // var name = layer["source-layer"] || layer.id || layer.source; + // var label = document.createElement("label"); + // label.className = "GPimportMapBoxSourceTitle"; + // label.htmlFor = input.id; + // label.innerHTML = name; + // label.title = JSON.stringify(layer.metadata) || name; + // li.appendChild(label); + // + // container.appendChild(li); + // return container; + // }, + // + // _addImportMapBoxStyleSource : function (layer, container) { + // // contexte + // var self = this; + // + // var _style = false; + // var _obj = {}; + // var _layer = JSON.parse(JSON.stringify(layer)); // on utilise une copie ! + // if (_layer.paint && Object.keys(_layer.paint).length) { + // _style = true; + // _obj.paint = _layer.paint; + // } + // + // // pas de style dans paint, on teste dans layout ! + // if (_layer.layout && Object.keys(_layer.layout).length) { + // _style = true; + // _obj.layout = _layer.layout; + // // on supprime visibility à l'affichage uniquement + // // cf. _addImportMapBoxVisibilitySource ! + // if (_layer.layout.visibility) { + // delete _obj.visibility; + // } + // } + // + // function syntaxHighlight (json) { + // json = json.replace(/&/g, "&").replace(//g, ">"); + // return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g, function (match) { + // var cls = "gp-json-number"; + // if (/^"/.test(match)) { + // if (/:$/.test(match)) { + // cls = "gp-json-key"; + // } else { + // cls = "gp-json-string"; + // } + // } else if (/true|false/.test(match)) { + // cls = "gp-json-boolean"; + // } else if (/null/.test(match)) { + // cls = "gp-json-null"; + // } + // return "" + match + ""; + // }); + // } + // + // var div = document.createElement("div"); + // div.className = "GPimportMapBoxSourceStyle"; + // + // if (_style) { + // var strJson = JSON.stringify(_obj, null, 4); + // + // var label = document.createElement("label"); + // label.innerHTML = "JSON Styles :"; + // div.appendChild(label); + // var pre = document.createElement("pre"); + // pre.className = "GPimportMapBoxJsonEdit"; + // pre.innerHTML = syntaxHighlight(strJson); + // if (pre.addEventListener) { + // pre.addEventListener("click", function (e) { + // self._onSwitchStyleEditSourceMapBox(e); + // }); + // } else if (pre.appendChild) { + // pre.appendChild("onclick", function (e) { + // self._onSwitchStyleEditSourceMapBox(e); + // }); + // } + // div.appendChild(pre); + // } + // + // container.appendChild(div); + // return container; + // }, + // + // _addImportMapBoxFilterSource : function (layer, container) { + // // contexte + // var self = this; + // + // var _filter = false; + // // FIXME tag filter est obselete ! + // // on doit utiliser les expressions dans "paint" ou "layout" ! + // if (layer.filter && layer.filter.length) { + // _filter = true; + // } + // + // var div = document.createElement("div"); + // div.className = "GPimportMapBoxSourceFilter"; + // + // if (_filter) { + // var label = document.createElement("label"); + // label.innerHTML = "JSON Filtres :"; + // div.appendChild(label); + // var pre = document.createElement("pre"); + // pre.className = "GPimportMapBoxJsonEdit"; + // pre.innerHTML = JSON.stringify(layer.filter, null, 4); + // if (pre.addEventListener) { + // pre.addEventListener("click", function (e) { + // self._onSwitchFilterEditSourceMapBox(e); + // }); + // } else if (pre.appendChild) { + // pre.appendChild("onclick", function (e) { + // self._onSwitchFilterEditSourceMapBox(e); + // }); + // } + // div.appendChild(pre); + // } + // + // container.appendChild(div); + // return container; + // }, + // + // _addImportMapBoxScaleSource : function (layer, container) { + // // contexte + // var self = this; + // + // var _scaleMin = layer.minzoom || 0; + // var _scaleMax = layer.maxzoom || 21; + // + // var div = document.createElement("div"); + // div.className = "GPimportMapBoxSourceScale"; + // + // var labelMin = document.createElement("label"); + // labelMin.className = "GPimportMapBoxSourceScaleLabel"; + // labelMin.innerHTML = "minZoom :"; + // div.appendChild(labelMin); + // + // var inputMin = document.createElement("input"); + // inputMin.className = "GPimportMapBoxSourceScaleInput"; + // inputMin.type = "range"; + // inputMin.value = _scaleMin; + // inputMin.title = _scaleMin; + // inputMin.disabled = false; + // inputMin.min = 0; + // inputMin.max = 21; + // if (inputMin.addEventListener) { + // inputMin.addEventListener("change", function (e) { + // self._onChangeScaleMinSourceMapBox(e, layer); + // }); + // } else if (inputMin.appendChild) { + // inputMin.appendChild("onchange", function (e) { + // self._onChangeScaleMinSourceMapBox(e, layer); + // }); + // } + // div.appendChild(inputMin); + // + // div.appendChild(document.createElement("br")); + // + // var labelMax = document.createElement("label"); + // labelMax.className = "GPimportMapBoxSourceScaleLabel"; + // labelMax.innerHTML = "maxZoom :"; + // div.appendChild(labelMax); + // + // var inputMax = document.createElement("input"); + // inputMax.className = "GPimportMapBoxSourceScaleInput"; + // inputMax.type = "range"; + // inputMax.value = _scaleMax; + // inputMax.title = _scaleMax; + // inputMax.disabled = false; + // inputMax.min = 0; + // inputMax.max = 21; + // if (inputMax.addEventListener) { + // inputMax.addEventListener("change", function (e) { + // self._onChangeScaleMaxSourceMapBox(e, layer); + // }); + // } else if (inputMax.appendChild) { + // inputMax.appendChild("onchange", function (e) { + // self._onChangeScaleMaxSourceMapBox(e, layer); + // }); + // } + // div.appendChild(inputMax); + // + // container.appendChild(div); + // return container; + // }, + // + // _addImportMapBoxVisibilitySource : function (layer, container) { + // // contexte + // var self = this; + // + // var _visibility = true; + // if (layer.layout && layer.layout.visibility && layer.layout.visibility === "none") { + // _visibility = false; + // } + // + // var div = document.createElement("div"); + // div.className = "GPimportMapBoxSourceVisibility"; + // + // var label = document.createElement("label"); + // label.className = "GPimportMapBoxSourceVisibilityLabel"; + // label.innerHTML = "Visibilité :"; + // div.appendChild(label); + // + // var input = document.createElement("input"); + // input.className = "GPimportMapBoxSourceVisibilityInput"; + // input.type = "checkbox"; + // input.checked = _visibility; + // input.disabled = false; + // if (input.addEventListener) { + // input.addEventListener("change", function (e) { + // self._onChangeVisibilitySourceMapBox(e, layer); + // }); + // } else if (input.appendChild) { + // input.appendChild("onchange", function (e) { + // self._onChangeVisibilitySourceMapBox(e, layer); + // }); + // } + // div.appendChild(input); + // + // container.appendChild(div); + // return container; + // } +}; + +export default LayerImportDOM; diff --git a/src/Common-review/Controls/LayerSwitcherDOM.js b/src/Common-review/Controls/LayerSwitcherDOM.js new file mode 100644 index 000000000..7ccd92fe2 --- /dev/null +++ b/src/Common-review/Controls/LayerSwitcherDOM.js @@ -0,0 +1,676 @@ +import Sortable from "sortablejs"; + +var LayerSwitcherDOM = { + + /** + * Creation du drag and drop + * + * @param {Object} elementDraggable - Element HTML (DOM) Container + * @param {Object} context - this + */ + _createDraggableElement : function (elementDraggable, context) { + Sortable.create(elementDraggable, { + handle : ".GPlayerName", + draggable : ".draggable-layer", + ghostClass : "GPghostLayer", + animation : 200, + // Call event function on drag and drop + onEnd : function (e) { + // FIXME pas terrrible, mais il faut bien passer ce contexte... + context._onDragAndDropLayerClick(e); + } + }); + }, + + // ################################################################### // + // ######################### Main container ########################## // + // ################################################################### // + + /** + * Add uuid to the tag ID + * @param {String} id - id selector + * @returns {String} uid - id selector with an unique id + */ + _addUID : function (id) { + var uid = (this._uid) ? id + "-" + this._uid : id; + return uid; + }, + + /** + * Creation du container principal (DOM) + * + * @returns {DOMElement} container - layer switcher DOM element + */ + _createMainContainerElement : function () { + var container = document.createElement("div"); + container.id = this._addUID("GPlayerSwitcher"); + container.className = "GPwidget"; + return container; + }, + + /** + * Creation du container principal d"affichage des layers (DOM) + * + * @returns {DOMElement} input - element for minimizing/maximizing the layer switcher + */ + _createMainLayersShowElement : function () { + // + var input = document.createElement("input"); + input.id = this._addUID("GPshowLayersList"); + input.type = "checkbox"; + return input; + }, + + /** + * Creation du container principal des layers (DOM) + * + * @returns {DOMElement} container - layers list container + */ + _createMainLayersElement : function () { + // ajout de la liste des layers dans le container principal + //
+ // (...) + //
+ var div = document.createElement("div"); + div.id = this._addUID("GPlayersList"); + div.className = "GPpanel"; + return div; + }, + + /** + * Creation du container du picto du controle (DOM) + * + * @returns {DOMElement} label + */ + _createMainPictoElement : function () { + var self = this; + + // exemple : + // + // + + var label = document.createElement("label"); + label.id = this._addUID("GPshowLayersListPicto"); + label.className = "GPshowAdvancedToolPicto"; + label.htmlFor = this._addUID("GPshowLayersList"); + label.title = "Afficher/masquer le gestionnaire de couches"; + + var spanOpen = document.createElement("span"); + spanOpen.id = this._addUID("GPshowLayersListOpen"); + spanOpen.className = "GPshowAdvancedToolOpen"; + spanOpen.addEventListener("click", function () { + if (document.getElementById(self._addUID("GPshowLayersList")).checked) { + var layers = document.getElementsByClassName("GPlayerInfoOpened"); + for (var i = 0; i < layers.length; i++) { + layers[i].className = "GPlayerInfo"; + } + document.getElementById(self._addUID("GPlayerInfoPanel")).className = "GPlayerInfoPanelClosed"; + } + }); + + label.appendChild(spanOpen); + + var spanClose = document.createElement("span"); + spanClose.addEventListener("click", function () { + if (document.getElementById(self._addUID("GPshowLayersList")).checked) { + var layers = document.getElementsByClassName("GPlayerInfoOpened"); + for (var i = 0; i < layers.length; i++) { + layers[i].className = "GPlayerInfo"; + } + document.getElementById(self._addUID("GPlayerInfoPanel")).className = "GPlayerInfoPanelClosed"; + } + }); + spanClose.id = self._addUID("GPshowLayersListClose"); + + label.appendChild(spanClose); + + return label; + }, + + /** + * Creation du container du panneau d"information (DOM) + * + * @returns {DOMElement} container + */ + _createMainInfoElement : function () { + // gestion du panneau d"information dans le container principal + //
...
+ var div = document.createElement("div"); + div.id = this._addUID("GPlayerInfoPanel"); + div.className = "GPpanel GPlayerInfoPanelClosed"; + return div; + }, + + // ################################################################### // + // ######################### Layer container ######################### // + // ################################################################### // + + /** + * Creation du container du layer (DOM) + * + * @param {Object} obj - options de la couche à ajouter dans le layer switcher + * @param {Object} obj.layer - couche (ol ou leaflet) + * @param {String} obj.id - identifiant de la couche (pour ol ou leaflet) + * @param {String} obj.title - nom de la couche à afficher dans le controle + * @param {String} obj.description - description de la couche à afficher + * @param {Boolean} obj.visibility - visibilité de la couche dans la carte (true or false) + * @param {Float} obj.opacity - opacité de la couche + * + * @returns {DOMElement} container + */ + _createContainerLayerElement : function (obj) { + // exemple : + //
+ // + // + // + //
+ + // + // + var container = document.createElement("div"); + container.id = this._addUID("GPlayerSwitcher_ID_" + obj.id); + container.className = "GPlayerSwitcher_layer draggable-layer"; + + // ajout des outils basiques (visibility / layer name) + container.appendChild(this._createBasicToolElement(obj)); + + // liste des outils avancés (layer info / opacity slider / opacity value / removal) + var array = this._createAdvancedToolShowElement(obj); + for (var i = 0; i < array.length; i++) { + container.appendChild(array[i]); + } + + // ajout des outils avancés + container.appendChild(this._createAdvancedToolElement(obj)); + + return container; + }, + + // ################################################################### // + // ############################ Layer tool ########################### // + // ################################################################### // + + /** + * Creation du container des outils basiques du layer (DOM) + * + * @param {Object} obj - options de la couche à ajouter dans le layer switcher + * + * @returns {DOMElement} container + */ + _createBasicToolElement : function (obj) { + // exemple : + //
+ // + // + //
+ + var div = document.createElement("div"); + div.id = this._addUID("GPbasicTools_ID_" + obj.id); + div.className = "GPlayerBasicTools"; + + div.appendChild(this._createBasicToolNameElement(obj)); + + var array = this._createBasicToolVisibilityElement(obj); + for (var i = 0; i < array.length; i++) { + div.appendChild(array[i]); + } + + return div; + }, + + /** + * Creation du nom du layer (DOM) + * + * @param {Object} obj - options de la couche à ajouter dans le layer switcher + * + * @returns {DOMElement} container + */ + _createBasicToolNameElement : function (obj) { + // exemple : + // Quartiers prioritaires de la ville + var span = document.createElement("span"); + span.id = this._addUID("GPname_ID_" + obj.id); + span.className = "GPlayerName"; + span.title = obj.description || obj.title; + span.innerHTML = obj.title; + + return span; + }, + + /** + * Creation de l'icone de visibilité du layer (DOM) + * + * @param {Object} obj - options de la couche à ajouter dans le layer switcher + + * @returns {DOMElement[]} array containing input and label elements + */ + _createBasicToolVisibilityElement : function (obj) { + // exemple : + // + // + + var list = []; + + var checked = (typeof obj.visibility !== "undefined") ? obj.visibility : true; + var id = this._addUID("GPvisibility_ID_" + obj.id); + + var input = document.createElement("input"); + input.id = id; + input.type = "checkbox"; + input.checked = checked; + + var label = document.createElement("label"); + label.htmlFor = id; + label.id = this._addUID("GPvisibilityPicto_ID_" + obj.id); + label.className = "GPlayerVisibility"; + label.title = "Afficher/masquer la couche"; + + // add event for visibility change + var context = this; + if (input.addEventListener) { + input.addEventListener( + "click", + function (e) { + context._onVisibilityLayerClick(e); + } + ); + } else if (input.attachEvent) { + // internet explorer + input.attachEvent( + "onclick", + function (e) { + context._onVisibilityLayerClick(e); + } + ); + } + + list.push(input); + list.push(label); + + return list; + }, + + /** + * Creation de l'affichage du menu des outils avancés du layer (DOM) + * + * @param {Object} obj - options de la couche à ajouter dans le layer switcher + * + * @returns {DOMElement[]} array containing input and label elements + */ + _createAdvancedToolShowElement : function (obj) { + // + // + + var list = []; + + var label = document.createElement("label"); + label.id = this._addUID("GPshowAdvancedToolsPicto_ID_" + obj.id); + label.htmlFor = this._addUID("GPshowAdvancedTools_ID_" + obj.id); + label.title = "Plus d'outils"; + label.className = "GPshowMoreOptions GPshowLayerAdvancedTools"; + + var input = document.createElement("input"); + input.type = "checkbox"; + input.id = this._addUID("GPshowAdvancedTools_ID_" + obj.id); + + list.push(input); + list.push(label); + + return list; + }, + + /** + * Creation du container des outils avancés du layer (DOM) + * + * @param {Object} obj - options de la couche à ajouter dans le layer switcher + * + * @returns {DOMElement} container + */ + _createAdvancedToolElement : function (obj) { + // exemple : + //
+ // + // + // + //
+ + var container = document.createElement("div"); + container.id = this._addUID("GPadvancedTools_ID_" + obj.id); + container.className = "GPlayerAdvancedTools"; + + container.appendChild(this._createAdvancedToolDeleteElement(obj)); + + // si on n'a de l'informations à afficher, on met en place ce composant + if (obj.title && obj.description) { + container.appendChild(this._createAdvancedToolInformationElement(obj)); + } + if (obj.type !== "feature") { + var array = this._createAdvancedToolOpacityElement(obj); + for (var i = 0; i < array.length; i++) { + container.appendChild(array[i]); + } + } + + return container; + }, + + /** + * Creation de l'icone de suppression du layer (DOM) + * + * @param {Object} obj - options de la couche à ajouter dans le layer switcher + * + * @returns {DOMElement} container + */ + _createAdvancedToolDeleteElement : function (obj) { + // exemple : + //
+ + var div = document.createElement("div"); + div.id = this._addUID("GPremove_ID_" + obj.id); + div.className = "GPlayerRemove"; + div.title = "Supprimer la couche"; + div.layerId = obj.id; + + var context = this; + if (div.addEventListener) { + div.addEventListener( + "click", + function (e) { + context._onDropLayerClick(e); + } + ); + } else if (div.attachEvent) { + // internet explorer + div.attachEvent( + "onclick", + function (e) { + context._onDropLayerClick(e); + } + ); + } + + return div; + }, + + /** + * Creation de l'icone d'information du layer (DOM) + * + * @param {Object} obj - options de la couche à ajouter dans le layer switcher + * + * @returns {DOMElement} container + */ + _createAdvancedToolInformationElement : function (obj) { + // exemple : + //
+ + var div = document.createElement("div"); + div.id = this._addUID("GPinfo_ID_" + obj.id); + div.className = "GPlayerInfo"; + div.title = "Informations/légende"; + div.layerId = obj.id; + // add event on click + var context = this; + if (div.addEventListener) { + div.addEventListener( + "click", + function (e) { + context._onOpenLayerInfoClick(e); + } + ); + } else if (div.attachEvent) { + // internet explorer + div.attachEvent( + "onclick", + function (e) { + context._onOpenLayerInfoClick(e); + } + ); + } + + return div; + }, + + /** + * Creation de l'icone de gestion de l'opacité du layer (DOM) + * + * @param {Object} obj - options de la couche à ajouter dans le layer switcher + * + * @returns {DOMElement[]} array of two containers + */ + _createAdvancedToolOpacityElement : function (obj) { + // exemple : + //
+ // + //
+ //
+ // 100 + // % + //
+ + var list = []; + + // curseur pour changer l'opacité + var divO = document.createElement("div"); + divO.id = this._addUID("GPopacity_ID_" + obj.id); + divO.className = "GPlayerOpacity"; + divO.title = "Opacité"; + + var opacity = (typeof obj.opacity !== "undefined") ? obj.opacity : 1; + opacity = Math.round(opacity * 100); + + var input = document.createElement("input"); + input.id = this._addUID("GPopacityValueDiv_ID_" + obj.id); + input.type = "range"; + input.value = opacity; + + // add event for opacity change + var context = this; + if (input.addEventListener) { + input.addEventListener( + "change", + function (e) { + context._onChangeLayerOpacity(e); + } + ); + } else if (input.attachEvent) { + // internet explorer + input.attachEvent( + "onchange", + function (e) { + context._onChangeLayerOpacity(e); + } + ); + } + + if (input.addEventListener) { + input.addEventListener( + "input", + function (e) { + context._onChangeLayerOpacity(e); + } + ); + } else if (input.attachEvent) { + // internet explorer + input.attachEvent( + "oninput", + function (e) { + context._onChangeLayerOpacity(e); + } + ); + } + + divO.appendChild(input); + + // Valeur d'opacité + var divC = document.createElement("div"); + divC.id = this._addUID("GPopacityValueDiv_ID_" + obj.id); + divC.className = "GPlayerOpacityValue"; + + var span = document.createElement("span"); + span.id = this._addUID("GPopacityValue_ID_" + obj.id); + span.innerHTML = opacity + "%"; + + divC.appendChild(span); + + list.push(divO); + list.push(divC); + + return list; + }, + + // ################################################################### // + // ############################ Layer info ########################### // + // ################################################################### // + + /** + * Creation du container du layer info (DOM) + * + * TODO GPlayerInfoPopup : ??? + * TODO GPlayerInfoLink : mettre en forme les échelles ! + * + * @param {Object} obj - options de la couche à ajouter dans le layer switcher + * + * @returns {DOMElement} container + */ + _createContainerLayerInfoElement : function (obj) { + var container = document.createElement("div"); + container.id = this._addUID("GPlayerInfoContent"); + + var title = document.createElement("div"); + title.id = this._addUID("GPlayerInfoTitle"); + title.innerHTML = obj.title; + container.appendChild(title); + + if (obj.quicklookUrl) { + var quick = document.createElement("div"); + quick.id = this._addUID("GPlayerInfoQuicklook"); + quick.title = "Afficher un aperçu de la couche"; + var refquick = document.createElement("a"); + refquick.href = obj.quicklookUrl; + refquick.appendChild(quick); + container.appendChild(refquick); + } + + var close = document.createElement("div"); + close.id = this._addUID("GPlayerInfoClose"); + close.title = "Fermer la fenêtre"; + + var self = this; + /** Call event function on close click */ + var onCloseClick = function () { + document.getElementById(self._addUID("GPlayerInfoPanel")).className = "GPlayerInfoPanelClosed"; + var layers = document.getElementsByClassName("GPlayerInfoOpened"); + for (var i = 0; i < layers.length; i++) { + layers[i].className = "GPlayerInfo"; + } + }; + if (close.addEventListener) { + close.addEventListener("click", onCloseClick); + } else if (close.attachEvent) { + // internet explorer + close.attachEvent("onclick", onCloseClick); + } + container.appendChild(close); + + var desc = document.createElement("div"); + desc.id = this._addUID("GPlayerInfoDescription"); + desc.innerHTML = obj.description; + container.appendChild(desc); + + if (obj.metadata) { + var mtd = document.createElement("div"); + mtd.id = this._addUID("GPlayerInfoMetadata"); + + var mtdtitle = document.createElement("div"); + mtdtitle.className = "GPlayerInfoSubtitle"; + mtdtitle.innerHTML = "Métadonnées"; + mtd.appendChild(mtdtitle); + + for (var i = 0; i < obj.metadata.length; i++) { + var urlmtd = obj.metadata[i].url; + + var mtdlink = document.createElement("div"); + mtdlink.className = "GPlayerInfoLink"; + + var refmtd = document.createElement("a"); + refmtd.href = urlmtd; + refmtd.innerHTML = urlmtd; + mtdlink.appendChild(refmtd); + mtd.appendChild(mtdlink); + } + + if (obj.metadata.length !== 0) { + container.appendChild(mtd); + } + } + + if (obj.legends) { + var lgd = document.createElement("div"); + lgd.id = this._addUID("GPlayerInfoLegend"); + + var lgdtitle = document.createElement("div"); + lgdtitle.className = "GPlayerInfoSubtitle"; + lgdtitle.innerHTML = "Légende"; + lgd.appendChild(lgdtitle); + + var legends = {}; + var maxScale = obj.maxScaleDenominator || 560000000; + + // on crée un tableau temporaire pour ordonner les légendes selon le dénominateur d'échelle + for (var k = 0; k < obj.legends.length; k++) { + var minScale = obj.legends[k].minScaleDenominator; + if (minScale) { + var s = minScale.toString(); + minScale = Math.round(parseInt(s.substring(0, 3), 10) / 10) * Math.pow(10, s.length - 2); + } else { + minScale = 270; + } + legends[minScale] = obj.legends[k]; + } + + for (var scale in legends) { + if (legends.hasOwnProperty(scale)) { + var urllgd = legends[scale].url; + // on n'affiche pas les légendes pointant vers "nolegend.jpg" + if (typeof urllgd === "string" && urllgd.toLowerCase().indexOf("nolegend.jpg") === -1) { + // TODO GPlayerInfoPopup + var lgdlink = document.createElement("div"); + lgdlink.className = "GPlayerInfoLink"; + + maxScale = legends[scale].maxScaleDenominator || maxScale; + + var reflgd = document.createElement("a"); + reflgd.href = urllgd; + reflgd.innerHTML = "Du 1/" + scale + " au 1/" + maxScale; + lgdlink.appendChild(reflgd); + lgd.appendChild(lgdlink); + } else { + delete legends[scale]; + } + } + } + + if (Object.keys(legends).length !== 0) { + container.appendChild(lgd); + } + } + + return container; + } +}; + +export default LayerSwitcherDOM; diff --git a/src/Common-review/Controls/LocationSelectorDOM.js b/src/Common-review/Controls/LocationSelectorDOM.js new file mode 100644 index 000000000..ea03d8edb --- /dev/null +++ b/src/Common-review/Controls/LocationSelectorDOM.js @@ -0,0 +1,484 @@ +import ID from "../Utils/SelectorID"; +import Logger from "../../Common/Utils/LoggerByDefault"; + +var logger = Logger.getLogger("LocationSelectorDOM"); + +var LocationSelectorDOM = { + + /** + * Add uuid to the tag ID + * @param {String} id - id selector + * @returns {String} uid - id selector with an unique id + */ + _addUID : function (id) { + var uid = (this._uid) ? id + "-" + this._uid : id; + return uid; + }, + + /** + * Main container (DOM) + * + * @returns {DOMElement} DOM element + */ + _createMainContainerElement : function () { + var container = document.createElement("div"); + container.className = this._addUID("GPlocationPoint"); // ceci permet de gerer les groupes de points ! + container.className += " GPwidget"; + return container; + }, + + /** + * Create Container Point + * see event ! + * + * @param {Number} id - tag ID + * @param {Number} display - display + * @returns {DOMElement} DOM element + */ + _createLocationPointElement : function (id, display) { + var div = document.createElement("div"); + div.id = this._addUID("GPlocationPoint_" + id); + div.className = (display) ? "GPflexInput GPlocationStageFlexInput" : "GPflexInput GPlocationStageFlexInputHidden"; + div.style.cssText = ""; + + return div; + }, + + /** + * Create Container Point + * see event ! + * + * @param {Number} id - tag ID + * @param {String} text - label + * @returns {DOMElement} DOM element + */ + _createLocationPointLabelElement : function (id, text) { + // contexte d'execution + var self = this; + + var labelOrigin = document.createElement("label"); + labelOrigin.id = this._addUID("GPlocationOriginLabel_" + id); + labelOrigin.htmlFor = "GPlocationOrigin_" + id; + labelOrigin.innerHTML = text; + labelOrigin.addEventListener("click", function (e) { + var i = ID.index(this.id); + var points = document.getElementsByClassName(self._addUID("GPlocationPoint")); + for (var j = 0; j < points.length; j++) { + var tag = points[j].childNodes[0].id; + var id = ID.index(tag); + document.getElementById(self._addUID("GPlocationPoint_" + id)).style.cssText = ""; + } + document.getElementById(self._addUID("GPlocationOriginCoords_" + i)).value = ""; + document.getElementById(self._addUID("GPlocationOrigin_" + i)).value = ""; + document.getElementById(self._addUID("GPlocationPoint_" + i)).style.cssText = ""; + document.getElementById(self._addUID("GPlocationOriginPointer_" + i)).checked = false; + document.getElementById(self._addUID("GPlocationOrigin_" + i)).className = "GPlocationOriginVisible"; + document.getElementById(self._addUID("GPlocationOriginCoords_" + i)).className = "GPlocationOriginHidden"; + if (document.getElementById(self._addUID("GPlocationStageRemove_" + i))) { + document.getElementById(self._addUID("GPlocationStageRemove_" + i)).className = "GPlocationStageRemove"; + } + if (document.getElementById(self._addUID("GPlocationStageAdd"))) { + document.getElementById(self._addUID("GPlocationStageAdd")).className = ""; + } + // document.getElementById(self._addUID("GPlocationOriginCoords_" + i)).disabled = true; + self.onLocationClearPointClick(e); + }); + + return labelOrigin; + }, + + /** + * Create Input AutoComplete Point tag + * + * @param {Number} id - tag ID + * @returns {DOMElement} DOM element + */ + _createLocationAutoCompleteteInputElement : function (id) { + // contexte d'execution + var self = this; + + var inputOrigin = document.createElement("input"); + inputOrigin.id = this._addUID("GPlocationOrigin_" + id); + inputOrigin.className = "GPlocationOriginVisible"; + inputOrigin.type = "text"; + inputOrigin.placeholder = "Saisir une adresse"; + inputOrigin.autocomplete = "off"; + inputOrigin.addEventListener("keyup", function (e) { + var charCode = e.which || e.keyCode; + if (charCode === 13 || charCode === 10 || charCode === 38 || charCode === 40) { + return; + } + + var i = ID.index(this.id); + if (document.getElementById(self._addUID("GPlocationOrigin_" + i)).value.length > 2) { + document.getElementById(self._addUID("GPlocationAutoCompleteList_" + i)).style.display = "block"; + } else { + document.getElementById(self._addUID("GPlocationAutoCompleteList_" + i)).style.display = "none"; + } + // gestionnaire d'evenement : + // on récupère la valeur de saisie pour une requête sur le service d'autocompletion. + // le resultat de la requête nous permet de recuperer les coordonnées du point... + self.onAutoCompleteSearchText(e); + }); + + inputOrigin.addEventListener("keydown", function (e) { + var charCode = e.which || e.keyCode; + + var container = document.getElementById(self._addUID("GPlocationAutoCompleteList_" + id)); + + // si aucun container !? + if (!container) { + return; + } + + var curr = container.getElementsByClassName("GPautoCompleteProposal current"); + var list = container.getElementsByClassName("GPautoCompleteProposal"); + + // si aucune suggestion, on ne va pas plus loin ! + var length = list.length; + if (!length) { + return; + } + + var current = null; + + // si aucun item courant, on prend le 1er ! + if (!curr.length) { + current = list[0]; + current.className = "GPautoCompleteProposal current"; + current.style.color = "#000000"; + current.style["background-color"] = "#CEDBEF"; + return; + } else { + current = curr[0]; + } + + var index = parseInt(ID.index(current.id), 10); + var next = (index === length - 1) ? list[0] : list[index + 1]; + var prev = (index === 0) ? list[length - 1] : list[index - 1]; + + current.style["background-color"] = ""; + current.style.color = ""; + prev.style["background-color"] = ""; + prev.style.color = ""; + next.style["background-color"] = ""; + next.style.color = ""; + + switch (charCode) { + case 38: // arrow up + logger.log("arrow up"); + current.className = "GPautoCompleteProposal"; + prev.className = "GPautoCompleteProposal current"; + prev.style.color = "#000000"; + prev.style["background-color"] = "#CEDBEF"; + break; + case 40: // arrow down + logger.log("arrow down"); + current.className = "GPautoCompleteProposal"; + next.className = "GPautoCompleteProposal current"; + next.style.color = "#000000"; + next.style["background-color"] = "#CEDBEF"; + break; + case 13: // enter + logger.log("enter"); + current.click(e); + break; + } + + current.focus(); + }); + + return inputOrigin; + }, + + /** + * Create Input Coordinate Point tag + * + * @param {Number} id - tag ID + * @returns {DOMElement} DOM element + */ + _createLocationCoordinateInputElement : function (id) { + // contexte d'execution + var self = this; + + var inputOriginCoord = document.createElement("input"); + inputOriginCoord.id = this._addUID("GPlocationOriginCoords_" + id); + inputOriginCoord.className = "GPlocationOriginHidden"; + inputOriginCoord.type = "text"; + inputOriginCoord.disabled = false; + inputOriginCoord.addEventListener("click", function () { + var i = ID.index(this.id); + document.getElementById(self._addUID("GPlocationOriginLabel_" + i)).click(); + }); + return inputOriginCoord; + }, + + /** + * Create Show Pointer tag + * + * @param {Number} id - tag ID + * @returns {DOMElement} DOM element + */ + _createLocationPointerShowInputElement : function (id) { + var inputOriginPointer = document.createElement("input"); + inputOriginPointer.id = this._addUID("GPlocationOriginPointer_" + id); + inputOriginPointer.type = "checkbox"; + return inputOriginPointer; + }, + + /** + * Create Input Pointer tag + * + * @param {Number} id - tag ID + * @returns {DOMElement} DOM element + */ + _createLocationPointerInputElement : function (id) { + // contexte d'execution + var self = this; + + var labelOriginPointer = document.createElement("label"); + labelOriginPointer.id = this._addUID("GPlocationOriginPointerImg_" + id); + labelOriginPointer.htmlFor = "GPlocationOriginPointer_" + id; + labelOriginPointer.className = "GPlocationOriginPointerImg"; + labelOriginPointer.title = "Pointer un lieu sur la carte"; + labelOriginPointer.addEventListener("click", function (e) { + e.preventDefault(); + e.stopPropagation(); + var i = ID.index(this.id); + var points = document.getElementsByClassName(self._addUID("GPlocationPoint")); + var j; + var tag; + var id; + for (j = 0; j < points.length; j++) { + tag = points[j].childNodes[0].id; + id = ID.index(tag); + if (i !== id) { + document.getElementById(self._addUID("GPlocationOriginPointer_" + id)).checked = false; + if (document.getElementById(self._addUID("GPlocationOriginCoords_" + id)).value === "Pointer un lieu sur la carte") { + document.getElementById(self._addUID("GPlocationOriginCoords_" + id)).value = ""; + document.getElementById(self._addUID("GPlocationOrigin_" + id)).className = "GPlocationOriginVisible"; + document.getElementById(self._addUID("GPlocationOriginCoords_" + id)).className = "GPlocationOriginHidden"; + } + } + } + if (document.getElementById(self._addUID("GPlocationOriginPointer_" + i)).checked) { + document.getElementById(self._addUID("GPlocationOriginCoords_" + i)).value = ""; + for (j = 0; j < points.length; j++) { + tag = points[j].childNodes[0].id; + id = ID.index(tag); + document.getElementById(self._addUID("GPlocationPoint_" + id)).style.cssText = ""; + } + if (document.getElementById(self._addUID("GPlocationStageRemove_" + i))) { + document.getElementById(self._addUID("GPlocationStageRemove_" + i)).className = "GPlocationStageRemove"; + } + if (document.getElementById(self._addUID("GPlocationStageAdd"))) { + document.getElementById(self._addUID("GPlocationStageAdd")).className = ""; + } + document.getElementById(self._addUID("GPlocationOriginPointer_" + i)).checked = false; + document.getElementById(self._addUID("GPlocationOrigin_" + i)).className = "GPlocationOriginVisible"; + document.getElementById(self._addUID("GPlocationOriginCoords_" + i)).className = "GPlocationOriginHidden"; + } else { + document.getElementById(self._addUID("GPlocationOriginCoords_" + i)).value = "Pointer un lieu sur la carte"; + for (j = 0; j < points.length; j++) { + tag = points[j].childNodes[0].id; + id = ID.index(tag); + if (i === id) { + document.getElementById(self._addUID("GPlocationPoint_" + id)).style.cssText = ""; + } else { + document.getElementById(self._addUID("GPlocationPoint_" + id)).style.display = "none"; + } + } + if (document.getElementById(self._addUID("GPlocationStageRemove_" + i))) { + document.getElementById(self._addUID("GPlocationStageRemove_" + i)).className = "GPlocationOriginHidden"; + } + if (document.getElementById(self._addUID("GPlocationStageAdd"))) { + document.getElementById(self._addUID("GPlocationStageAdd")).className = "GPlocationOriginHidden"; + } + document.getElementById(self._addUID("GPlocationOriginPointer_" + i)).checked = true; + document.getElementById(self._addUID("GPlocationOrigin_" + i)).className = "GPlocationOriginHidden"; + document.getElementById(self._addUID("GPlocationOriginCoords_" + i)).className = "GPlocationOriginVisible"; + document.getElementById(self._addUID("GPlocationOriginCoords_" + i)).disabled = true; + } + // gestionnaire d'evenement : + // on stocke la valeur du point, utilisée pour la requête sur le service de calcul d'itiniraire + self.onActivateMapPointClick(e); + }); + + return labelOriginPointer; + }, + + /** + * Create Remove Point tag + * see event ! + * + * @param {Number} id - tag ID + * @returns {DOMElement} DOM element + */ + _createLocationRemovePointElement : function (id) { + // contexte d'execution + var self = this; + + var divRm = document.createElement("div"); + divRm.id = this._addUID("GPlocationStageRemove_" + id); + divRm.className = "GPlocationStageRemove"; + divRm.title = "Supprimer l'étape"; + divRm.addEventListener("click", function (e) { + var points = document.getElementsByClassName(self._addUID("GPlocationPoint")); + var last = points.length - 1; + var start = points[0].childNodes[0].id; + var end = points[last].childNodes[0].id; + + var startID = ID.index(start); + var endID = ID.index(end); + + if (id !== startID && id !== endID) { + var i = ID.index(this.id); + document.getElementById(self._addUID("GPlocationPoint_" + i)).className = "GPflexInput GPlocationStageFlexInputHidden"; + document.getElementById(self._addUID("GPlocationOrigin_" + i)).value = ""; + document.getElementById(self._addUID("GPlocationOrigin_" + i)).className = "GPlocationOriginVisible"; + document.getElementById(self._addUID("GPlocationOriginCoords_" + i)).value = ""; + document.getElementById(self._addUID("GPlocationOriginCoords_" + i)).className = "GPlocationOriginHidden"; + document.getElementById(self._addUID("GPlocationStageAdd")).style.display = ""; + // Moving up exclusions picto + // var exclusionsPictoTop = document.getElementById(self._addUID("GPshowLocationExclusionsPicto")).style.top; + // document.getElementById(self._addUID("GPshowLocationExclusionsPicto")).style.top = (parseInt(exclusionsPictoTop) - 33).toString() + "px"; + + // gestionnaire d'evenement : + // on supprime le point, utilisé pour la requête sur le service d'itiniraire + self.onLocationRemovePointClick(e); + } + }); + + return divRm; + }, + + /** + * Create Add Point tag + * see event ! + * + * @returns {DOMElement} DOM element + */ + _createLocationAddPointElement : function () { + // contexte d'execution + var self = this; + + var divAdd = document.createElement("div"); + divAdd.id = this._addUID("GPlocationStageAdd"); + divAdd.title = "Ajouter une étape"; + divAdd.addEventListener("click", function (e) { + var lastStage = 1; + var nbStages = 0; + var points = document.getElementsByClassName(self._addUID("GPlocationPoint")); + for (var i = 1; i < points.length - 1; i++) { + var tag = points[i].childNodes[0].id; + var id = ID.index(tag); + if (document.getElementById(self._addUID("GPlocationPoint_" + id))) { + if (document.getElementById(self._addUID("GPlocationPoint_" + id)).className === "GPflexInput GPlocationStageFlexInputHidden") { + if (lastStage === 1) { + lastStage = id; + } + } else { + nbStages++; + } + } + } + // FIXME algo à revoir : lastStage = id hors si id = 300 sur 3 points !? + if (lastStage < points.length) { + document.getElementById(self._addUID("GPlocationPoint_" + lastStage)).className = "GPflexInput GPlocationStageFlexInput"; + // Moving down exclusions picto + // var exclusionsPictoTop = document.getElementById(self._addUID("GPshowLocationExclusionsPicto")).style.top; + // document.getElementById(self._addUID("GPshowLocationExclusionsPicto")).style.top = (parseInt(exclusionsPictoTop) + 33).toString() + "px"; + } + if (nbStages === 4) { + document.getElementById(self._addUID("GPlocationStageAdd")).style.display = "none"; + } + // gestionnaire d'evenement : + // on ajoute le point, utilisé pour la requête sur le service d'itiniraire + self.onLocationAddPointClick(e); + }); + + return divAdd; + }, + + /** + * Create Results autocompletion to the point + * see event! + * + * @param {Number} id - tag ID + * @returns {DOMElement} DOM element + */ + _createLocationAutoCompleteResultElement : function (id) { + // contexte d'execution + var self = this; + + var div = document.createElement("div"); + div.id = this._addUID("GPlocationAutoCompleteList_" + id); + div.className = "GPadvancedAutoCompleteList"; + + if (div.addEventListener) { + div.addEventListener("click", function (e) { + self.onAutoCompletedResultsItemClick(e); + document.getElementById(self._addUID("GPlocationAutoCompleteList_" + id)).style.display = "none"; + }, false); + } else if (div.attachEvent) { + div.attachEvent("onclick", function (e) { + self.onAutoCompletedResultsItemClick(e); + document.getElementById(self._addUID("GPlocationAutoCompleteList_" + id)).style.display = "none"; + }); + } + + return div; + }, + + /** + * Autocompletion result to a point. + * Proposals are dynamically filled in Javascript by autocomplete service + * + * TODO formaliser le contenu des reponse + * + * @param {Number} id - tag ID + * @param {Object} location - suggested location result + * @param {Number} n - number of the point + */ + _createLocationAutoCompletedLocationElement : function (id, location, n) { + var container = document.getElementById(this._addUID("GPlocationAutoCompleteList_" + id)); + + var div = document.createElement("div"); + div.id = this._addUID("AutoCompletedLocation_" + n); + div.className = "GPautoCompleteProposal"; + div.innerHTML = location.fullText; + + container.appendChild(div); + }, + + /** + * Display Coordinate + * @param {String} value - a Coordinate + */ + GPdisplayCoordinate : function (value) { + var points = document.getElementsByClassName(this._addUID("GPlocationPoint")); + for (var i = 0; i < points.length; i++) { + var tag = points[i].childNodes[0].id; + var id1 = ID.index(tag); + if (document.getElementById(this._addUID("GPlocationOriginPointer_" + id1)).checked) { + document.getElementById(this._addUID("GPlocationOriginCoords_" + id1)).value = value; + document.getElementById(this._addUID("GPlocationOriginCoords_" + id1)).disabled = false; + for (var j = 0; j < points.length; j++) { + tag = points[j].childNodes[0].id; + var id2 = ID.index(tag); + document.getElementById(this._addUID("GPlocationPoint_" + id2)).style.cssText = ""; + if (document.getElementById(this._addUID("GPlocationStageRemove_" + id2))) { + document.getElementById(this._addUID("GPlocationStageRemove_" + id2)).className = "GPlocationStageRemove"; + } + } + document.getElementById(this._addUID("GPlocationOriginPointer_" + id1)).checked = false; + if (document.getElementById(this._addUID("GPlocationStageAdd"))) { + document.getElementById(this._addUID("GPlocationStageAdd")).className = ""; + } + return; + } + } + } +}; + +export default LocationSelectorDOM; diff --git a/src/Common-review/Controls/MeasureAreaDOM.js b/src/Common-review/Controls/MeasureAreaDOM.js new file mode 100644 index 000000000..900a882f7 --- /dev/null +++ b/src/Common-review/Controls/MeasureAreaDOM.js @@ -0,0 +1,80 @@ +var MeasureAreaDOM = { + + /** + * Add uuid to the tag ID + * @param {String} id - id selector + * @returns {String} uid - id selector with an unique id + */ + _addUID : function (id) { + var uid = (this._uid) ? id + "-" + this._uid : id; + return uid; + }, + + /** + * Main container (DOM) + * + * @returns {DOMElement} DOM element + */ + _createMainContainerElement : function () { + var container = document.createElement("div"); + container.id = this._addUID("GPmeasureArea"); + container.className = "GPwidget"; + return container; + }, + + // ################################################################### // + // ################### Methods of main container ##################### // + // ################################################################### // + + /** + * Hidden checkbox for minimizing/maximizing + * + * @returns {DOMElement} DOM element + */ + _createShowMeasureAreaElement : function () { + var input = document.createElement("input"); + input.id = this._addUID("GPshowMeasureArea"); + input.type = "checkbox"; + return input; + }, + + /** + * Show control + * see event ! + * + * @returns {DOMElement} DOM element + */ + _createShowMeasureAreaPictoElement : function () { + // contexte d'execution + var context = this; + + var label = document.createElement("label"); + label.id = this._addUID("GPshowMeasureAreaPicto"); + label.className = "GPshowAdvancedToolPicto"; + label.htmlFor = this._addUID("GPshowMeasureArea"); + label.title = "Mesurer une surface"; + + // gestionnaire d'evenement : + // on ouvre le menu de saisie... + // L'ouverture/Fermeture permet de faire le menage + // (reinitialisation) + if (label.addEventListener) { + label.addEventListener("click", function (e) { + context.onShowMeasureAreaClick(e); + }); + } else if (label.attachEvent) { + label.attachEvent("onclick", function (e) { + context.onShowMeasureAreaClick(e); + }); + } + + var spanOpen = document.createElement("span"); + spanOpen.id = this._addUID("GPshowMeasureAreaOpen"); + spanOpen.className = "GPshowAdvancedToolOpen"; + label.appendChild(spanOpen); + + return label; + } +}; + +export default MeasureAreaDOM; diff --git a/src/Common-review/Controls/MeasureAzimuthDOM.js b/src/Common-review/Controls/MeasureAzimuthDOM.js new file mode 100644 index 000000000..84f003e83 --- /dev/null +++ b/src/Common-review/Controls/MeasureAzimuthDOM.js @@ -0,0 +1,80 @@ +var MeasureAzimuthDOM = { + + /** + * Add uuid to the tag ID + * @param {String} id - id selector + * @returns {String} uid - id selector with an unique id + */ + _addUID : function (id) { + var uid = (this._uid) ? id + "-" + this._uid : id; + return uid; + }, + + /** + * Main container (DOM) + * + * @returns {DOMElement} DOM element + */ + _createMainContainerElement : function () { + var container = document.createElement("div"); + container.id = this._addUID("GPmeasureAzimuth"); + container.className = "GPwidget"; + return container; + }, + + // ################################################################### // + // ################### Methods of main container ##################### // + // ################################################################### // + + /** + * Hidden checkbox for minimizing/maximizing + * + * @returns {DOMElement} DOM element + */ + _createShowMeasureAzimuthElement : function () { + var input = document.createElement("input"); + input.id = this._addUID("GPshowMeasureAzimuth"); + input.type = "checkbox"; + return input; + }, + + /** + * Show control + * see event ! + * + * @returns {DOMElement} DOM element + */ + _createShowMeasureAzimuthPictoElement : function () { + // contexte d'execution + var context = this; + + var label = document.createElement("label"); + label.id = this._addUID("GPshowMeasureAzimuthPicto"); + label.className = "GPshowAdvancedToolPicto"; + label.htmlFor = this._addUID("GPshowMeasureAzimuth"); + label.title = "Mesurer un azimut"; + + // gestionnaire d'evenement : + // on ouvre le menu de saisie... + // L'ouverture/Fermeture permet de faire le menage + // (reinitialisation) + if (label.addEventListener) { + label.addEventListener("click", function (e) { + context.onShowMeasureAzimuthClick(e); + }); + } else if (label.attachEvent) { + label.attachEvent("onclick", function (e) { + context.onShowMeasureAzimuthClick(e); + }); + } + + var spanOpen = document.createElement("span"); + spanOpen.id = this._addUID("GPshowMeasureAzimuthOpen"); + spanOpen.className = "GPshowAdvancedToolOpen"; + label.appendChild(spanOpen); + + return label; + } +}; + +export default MeasureAzimuthDOM; diff --git a/src/Common-review/Controls/MeasureLengthDOM.js b/src/Common-review/Controls/MeasureLengthDOM.js new file mode 100644 index 000000000..7be6593cf --- /dev/null +++ b/src/Common-review/Controls/MeasureLengthDOM.js @@ -0,0 +1,80 @@ +var MeasureLengthDOM = { + + /** + * Add uuid to the tag ID + * @param {String} id - id selector + * @returns {String} uid - id selector with an unique id + */ + _addUID : function (id) { + var uid = (this._uid) ? id + "-" + this._uid : id; + return uid; + }, + + /** + * Main container (DOM) + * + * @returns {DOMElement} DOM element + */ + _createMainContainerElement : function () { + var container = document.createElement("div"); + container.id = this._addUID("GPmeasureLength"); + container.className = "GPwidget"; + return container; + }, + + // ################################################################### // + // ################### Methods of main container ##################### // + // ################################################################### // + + /** + * Hidden checkbox for minimizing/maximizing + * + * @returns {DOMElement} DOM element + */ + _createShowMeasureLengthElement : function () { + var input = document.createElement("input"); + input.id = this._addUID("GPshowMeasureLength"); + input.type = "checkbox"; + return input; + }, + + /** + * Show control + * see event ! + * + * @returns {DOMElement} DOM element + */ + _createShowMeasureLengthPictoElement : function () { + // contexte d'execution + var context = this; + + var label = document.createElement("label"); + label.id = this._addUID("GPshowMeasureLengthPicto"); + label.className = "GPshowAdvancedToolPicto"; + label.htmlFor = this._addUID("GPshowMeasureLength"); + label.title = "Mesurer une distance"; + + // gestionnaire d'evenement : + // on ouvre le menu de saisie... + // L'ouverture/Fermeture permet de faire le menage + // (reinitialisation) + if (label.addEventListener) { + label.addEventListener("click", function (e) { + context.onShowMeasureLengthClick(e); + }); + } else if (label.attachEvent) { + label.attachEvent("onclick", function (e) { + context.onShowMeasureLengthClick(e); + }); + } + + var spanOpen = document.createElement("span"); + spanOpen.id = this._addUID("GPshowMeasureLengthOpen"); + spanOpen.className = "GPshowAdvancedToolOpen"; + label.appendChild(spanOpen); + + return label; + } +}; + +export default MeasureLengthDOM; diff --git a/src/Common-review/Controls/MeasureToolBoxDOM.js b/src/Common-review/Controls/MeasureToolBoxDOM.js new file mode 100644 index 000000000..ed1949e0c --- /dev/null +++ b/src/Common-review/Controls/MeasureToolBoxDOM.js @@ -0,0 +1,102 @@ +var MeasureToolBoxDOM = { + + _toolboxId : "GPtoolbox-measure-main", + _buttonId : "GPtoolbox-measure-button", + _widgetId : "GPtoolbox-measure-widget", + + /** + * get toolBox ID + * @param {Number} uid - uid + * @returns {String} id selector unique + */ + getToolBoxID : function (uid) { + return (uid) ? this._toolboxId + "-" + uid : this._toolboxId; + }, + + /** + * get button ID + * @param {Number} uid - uid + * @returns {String} id selector unique + */ + getButtonID : function (uid) { + return (uid) ? this._buttonId + "-" + uid : this._buttonId; + }, + + /** + * get toolBox Container for widget + * @param {Number} uid - uid + * @returns {String} id selector unique + */ + getWidgetID : function (uid) { + return (uid) ? this._widgetId + "-" + uid : this._widgetId; + }, + + /** + * Main container (DOM) + * @param {Number} uid - uid + * @returns {DOMElement} DOM element + */ + _createToolBoxContainerElement : function (uid) { + //
+ // + //
+ // + //
+ //
+ var container = document.createElement("div"); + container.id = this.getToolBoxID(uid); + container.className = "GPshowAdvancedToolPicto"; + + var button = document.createElement("button"); + button.id = this.getButtonID(uid); + var self = this; + button.addEventListener("click", function () { + this.blur(); // permet de perdre le focus ! + var widget = document.getElementById(self.getWidgetID(uid)); + if (widget.style.display === "block") { + widget.style.display = "none"; + } else { + widget.style.display = "block"; + } + }); + container.appendChild(button); + + var widget = document.createElement("div"); + widget.id = this.getWidgetID(uid); + widget.addEventListener("click", function () { + + /* + e.preventDefault(); + + // FIXME desactiver tous les outils sur + // l'ouverture/fermeture de la toolbox ? + + var current = e.target.parentNode.getAttribute("for"); + var widgets = this.querySelectorAll("div > input"); + for (var i = 0; i < widgets.length; i++) { + var id = widgets[i].id; + + if (document.getElementById(id) && + document.getElementById(id).checked && + document.querySelector("#" + id + " + label")) { + document.querySelector("#" + id + " + label").click(); + // document.getElementById(id).checked = true; + } + + if (current === id && widgets[i].checked) { + widgets[i].checked = false; + } else if (current === id && !widgets[i].checked) { + widgets[i].checked = true; + } + } + */ + + }, false); + + container.appendChild(widget); + + return container; + } +}; + +export default MeasureToolBoxDOM; diff --git a/src/Common-review/Controls/MiniGlobeDOM.js b/src/Common-review/Controls/MiniGlobeDOM.js new file mode 100644 index 000000000..f03985d4e --- /dev/null +++ b/src/Common-review/Controls/MiniGlobeDOM.js @@ -0,0 +1,28 @@ +var MiniGlobeDOM = { + + /** + * Add uuid to the tag ID + * @param {String} id - id selector + * @returns {String} uid - id selector with an unique id + */ + _addUID : function (id) { + var uid = (this._uid) ? id + "-" + this._uid : id; + return uid; + }, + + /** + * Main container (DOM) + * + * @returns {DOMElement} DOM element + */ + _createMainContainerElement : function () { + var container = document.createElement("div"); + container.id = this._addUID("GPminiglobeContainer"); + container.className = "GPwidget"; + container.style.width = "100px"; + container.style.height = "100px"; + return container; + } +}; + +export default MiniGlobeDOM; diff --git a/src/Common-review/Controls/MousePositionDOM.js b/src/Common-review/Controls/MousePositionDOM.js new file mode 100644 index 000000000..e24ce7352 --- /dev/null +++ b/src/Common-review/Controls/MousePositionDOM.js @@ -0,0 +1,940 @@ +var MousePositionDOM = { + + /** + * Add uuid to the tag ID + * @param {String} id - id selector + * @returns {String} uid - id selector with an unique id + */ + _addUID : function (id) { + var uid = (this._uid) ? id + "-" + this._uid : id; + return uid; + }, + + /** + * Main container (DOM) + * + * @returns {DOMElement} DOM element + */ + _createMainContainerElement : function () { + var container = document.createElement("div"); + container.id = this._addUID("GPmousePosition"); + container.className = "GPwidget"; + return container; + }, + + // ################################################################### // + // ################### Methods of main container ##################### // + // ################################################################### // + + /** + * Hidden checkbox for minimizing/maximizing + * + * @returns {DOMElement} DOM element + */ + _createShowMousePositionElement : function () { + var input = document.createElement("input"); + input.id = this._addUID("GPshowMousePosition"); + input.type = "checkbox"; + return input; + }, + + /** + * Show mouse position control + * @param {Boolean} isDesktop - specifies if the support is desktop or tactile + * + * @returns {DOMElement} DOM element + */ + _createShowMousePositionPictoElement : function (isDesktop) { + // contexte d'execution + var self = this; + + var label = document.createElement("label"); + label.id = this._addUID("GPshowMousePositionPicto"); + label.className = "GPshowAdvancedToolPicto"; + label.htmlFor = this._addUID("GPshowMousePosition"); + label.title = "Afficher les coordonnées du curseur"; + + // FIXME detection disponible dans le JS ! + // Detection : test for desktop or tactile + // var isDesktop = true; + // var userAgent = window.navigator.userAgent.toLowerCase(); + // if (userAgent.indexOf("iphone") !== -1 || + // userAgent.indexOf("ipod") !== -1 || + // userAgent.indexOf("ipad") !== -1 || + // userAgent.indexOf("android") !== -1 || + // userAgent.indexOf("mobile") !== -1 || + // userAgent.indexOf("blackberry") !== -1 || + // userAgent.indexOf("tablet") !== -1 || + // userAgent.indexOf("phone") !== -1 || + // userAgent.indexOf("touch") !== -1 ) { + // isDesktop = false; + // } + // if (userAgent.indexOf("msie") !== -1 || + // userAgent.indexOf("trident") !== -1) { + // isDesktop = true; + // } + + // Show map center localisation if panel opened and tactile support + label.addEventListener("click", function (e) { + var mapCenterClass = ""; + if (!document.getElementById(self._addUID("GPshowMousePosition")).checked && !isDesktop) { + mapCenterClass = "GPmapCenterVisible"; + } + document.getElementById("GPmapCenter").className = mapCenterClass; + self.onShowMousePositionClick(e); + }); + + var spanOpen = document.createElement("span"); + spanOpen.id = this._addUID("GPshowMousePositionOpen"); + spanOpen.className = "GPshowAdvancedToolOpen"; + label.appendChild(spanOpen); + + return label; + }, + + /** + * mouse position panel + * + * @returns {DOMElement} DOM element + */ + _createMousePositionPanelElement : function () { + var panel = document.createElement("div"); + panel.id = this._addUID("GPmousePositionPanel"); + panel.className = "GPpanel"; + + // FIXME on decompose la fonction pour les besoins du controle, + // on ajoutera ces childs à la main... + // div.appendChild(this._createMousePositionPanelHeaderElement()); + // div.appendChild(this._createMousePositionPanelBasicElement()); + // div.appendChild(this._createShowMousePositionSettingsElement()); + // div.appendChild(this._createMousePositionSettingsElement()); + + return panel; + }, + + /** + * Map center localisation (tactile use) + * + * @returns {DOMElement} container + */ + _createMapCenter : function () { + var div = document.createElement("div"); + div.id = "GPmapCenter"; + div.className = ""; + return div; + }, + + // ################################################################### // + // ####################### Panel container ########################### // + // ################################################################### // + + /** + * @returns {DOMElement} container + */ + _createMousePositionPanelHeaderElement : function () { + var container = document.createElement("div"); + container.className = "GPpanelHeader"; + + var divTitle = document.createElement("div"); + divTitle.className = "GPpanelTitle"; + divTitle.innerHTML = "Coordonnées"; + container.appendChild(divTitle); + + var divClose = document.createElement("div"); + divClose.id = "GPmousePositionPanelClose"; + divClose.className = "GPpanelClose"; + divClose.title = "Fermer le panneau"; + + // Link panel close / visibility checkbox + var self = this; + if (divClose.addEventListener) { + divClose.addEventListener("click", function () { + document.getElementById(self._addUID("GPshowMousePositionPicto")).click(); + }, false); + } else if (divClose.attachEvent) { + divClose.attachEvent("onclick", function () { + document.getElementById(self._addUID("GPshowMousePositionPicto")).click(); + }); + } + + container.appendChild(divClose); + + return container; + }, + + /** + * coordinate panel + * @param {Boolean} [displayAltitude] - specifies if the altitude panel must be displayed + * @param {Boolean} [displayCoordinates] - specifies if the coordinates panel must be displayed + * @param {Boolean} [editCoordinates] - specifies if the coordinates edition is allowed + * @param {Boolean} [currentProjectionUnits] - specifies if the current projection units + * + * FIXME + * call this._createMousePositionPanelBasicCoordinateElement + * call this._createMousePositionPanelBasicAltitudeElement + * + * @returns {DOMElement} DOM element + */ + _createMousePositionPanelBasicElement : function (displayAltitude, displayCoordinates, editCoordinates, currentProjectionUnits) { + // default Values + displayAltitude = (typeof displayAltitude === "undefined") ? true : displayAltitude; + displayCoordinates = (typeof displayCoordinates === "undefined") ? true : displayCoordinates; + editCoordinates = (typeof editCoordinates === "undefined") ? false : editCoordinates; + + var container = document.createElement("div"); + container.id = this._addUID("GPmousePositionBasicPanel"); + + // FIXME on devrait decomposer la fonction pour les besoins du controle, + // on ajoutera ces childs à la main... + container.appendChild(this._createMousePositionPanelBasicCoordinateElement(displayCoordinates, editCoordinates, currentProjectionUnits)); + container.appendChild(this._createMousePositionPanelEditToolsElement(editCoordinates)); + container.appendChild(this._createMousePositionPanelBasicAltitudeElement(displayAltitude)); + + return container; + }, + + /** + * create coordinate elements + * + * @param {String} coordType - ("Lon" ou "Lat") + * @param {Boolean} [editCoordinates=false] - specifies if the coordinates edition is allowed + * + * @returns {Array} list of DOM elements + */ + _createCoordinateElement : function (coordType, editCoordinates) { + var context = this; + + if (["Lon", "Lat"].indexOf(coordType) === -1) { + return []; + } + + var list = []; + var input = document.createElement("input"); + input.id = this._addUID("GPmousePosition" + coordType); + input.title = editCoordinates === true ? "Cliquer pour saisir des coordonnées" : ""; + input.readOnly = true; + + if (editCoordinates) { + input.addEventListener("click", function () { + context.onMousePositionEditModeClick(true); + }); + input.addEventListener("change", function (e) { + this.classList.remove("error"); + var valid = context.validateExtentCoordinate(coordType, this.value, e); + valid ? this.classList.remove("error") : this.classList.add("error"); + }); + } + list.push(input); + + var span = document.createElement("span"); + span.className = "GPmousePositionUnits"; + list.push(span); + + return list; + }, + + /** + * + * @param {String} coordType - ("Lon" ou "Lat") + * @param {Boolean} [editCoordinates=false] - specifies if the coordinates edition is allowed + * + * @returns {Array} list of DOM elements + */ + _createDMSCoordinateElement : function (coordType, editCoordinates) { + if (["Lon", "Lat"].indexOf(coordType) === -1) { + return []; + } + + var context = this; + + var list = []; + + var input = document.createElement("input"); + input.id = this._addUID("GPmousePosition" + coordType + "Degrees"); + input.className = "GPSexagesimal"; + input.setAttribute("name", "degrees"); + input.title = editCoordinates === true ? "Cliquer pour saisir des coordonnées" : ""; + input.readOnly = true; + input.dataset.min = 0; + input.dataset.max = (coordType === "Lon") ? 180 : 90; + if (editCoordinates) { + input.addEventListener("click", function () { + context.onMousePositionEditModeClick(true); + }); + input.addEventListener("change", function () { + this.classList.remove("error"); + var valid = context._checkDMSDegrees(coordType, this); + valid ? this.classList.remove("error") : this.classList.add("error"); + }); + } + list.push(input); + + var span = document.createElement("span"); + span.className = "GPmousePositionSexagesimalLabel"; + span.innerHTML = "°"; + list.push(span); + + var input1 = document.createElement("input"); + input1.id = this._addUID("GPmousePosition" + coordType + "Minutes"); + input1.className = "GPSexagesimal"; + input1.setAttribute("name", "minutes"); + input1.title = editCoordinates === true ? "Cliquer pour saisir des coordonnées" : ""; + input1.readOnly = true; + input1.dataset.min = 0; + input1.dataset.max = 59; + if (editCoordinates) { + input1.addEventListener("click", function () { + context.onMousePositionEditModeClick(true); + }); + input1.addEventListener("change", function () { + this.classList.remove("error"); + var valid = context._checkDMSElement(this); + valid ? this.classList.remove("error") : this.classList.add("error"); + }); + } + list.push(input1); + + var span1 = document.createElement("span"); + span1.className = "GPmousePositionSexagesimalLabel"; + span1.innerHTML = "'"; + list.push(span1); + + var input2 = document.createElement("input"); + input2.id = this._addUID("GPmousePosition" + coordType + "Seconds"); + input2.className = "GPSexagesimalsec"; + input2.setAttribute("name", "seconds"); + input2.title = editCoordinates === true ? "Cliquer pour saisir des coordonnées" : ""; + input2.readOnly = true; + input2.dataset.min = 0; + input2.dataset.max = 59; + if (editCoordinates) { + input2.addEventListener("click", function () { + context.onMousePositionEditModeClick(true); + }); + input2.addEventListener("change", function () { + this.classList.remove("error"); + var valid = context._checkDMSElement(this, true); + valid ? this.classList.remove("error") : this.classList.add("error"); + }); + } + list.push(input2); + + var span2 = document.createElement("span"); + span2.className = "GPmousePositionSexagesimalLabel"; + span2.innerHTML = "''"; + list.push(span2); + + var select = document.createElement("select"); + select.id = this._addUID("GPmousePosition" + coordType + "Direction"); + select.className = "GPmousePositionDirection"; + select.setAttribute("name", "direction"); + select.disabled = true; + + var option = document.createElement("option"); + option.value = (coordType === "Lon") ? "E" : "N"; + option.innerHTML = (coordType === "Lon") ? "E" : "N"; + select.appendChild(option); + + var option1 = document.createElement("option"); + option1.value = (coordType === "Lon") ? "O" : "S"; + option1.innerHTML = (coordType === "Lon") ? "O" : "S"; + select.appendChild(option1); + list.push(select); + + return list; + }, + + /** + * @param {Boolean} [display=false] - specifies if the coordinates panel must be displayed + * @param {Boolean} [editCoordinates] - specifies if the coordinates edition is allowed + * @param {Boolean} [currentProjectionUnits] - specifies if the current projection units + * + * @returns {DOMElement} container + */ + _createMousePositionPanelBasicCoordinateElement : function (display, editCoordinates, currentProjectionUnits) { + var div = document.createElement("div"); + div.id = this._addUID("GPmousePositionCoordinate"); + div.style.display = display ? "block" : "none"; + + // latitude + var divLat = document.createElement("div"); + + var spanLat = document.createElement("span"); + spanLat.className = "GPmousePositionLabel"; + spanLat.id = this._addUID("GPmousePositionLatLabel"); + spanLat.innerHTML = "Latitude : "; + divLat.appendChild(spanLat); + + var span = document.createElement("span"); + span.id = this._addUID("GPmousePositionLatCoordinate"); + + var arrayCoords; + if (currentProjectionUnits === "DMS") { + arrayCoords = this._createDMSCoordinateElement("Lat", editCoordinates); + } else { + arrayCoords = this._createCoordinateElement("Lat", editCoordinates); + } + for (var i = 0; i < arrayCoords.length; i++) { + span.appendChild(arrayCoords[i]); + } + divLat.appendChild(span); + div.appendChild(divLat); + + // longitude + var divLon = document.createElement("div"); + + var spanLon = document.createElement("span"); + spanLon.className = "GPmousePositionLabel"; + spanLon.id = this._addUID("GPmousePositionLonLabel"); + spanLon.innerHTML = "Longitude : "; + divLon.appendChild(spanLon); + + var span1 = document.createElement("span"); + span1.id = this._addUID("GPmousePositionLonCoordinate"); + + var arrayCoords1; + if (currentProjectionUnits === "DMS") { + arrayCoords1 = this._createDMSCoordinateElement("Lon", editCoordinates); + } else { + arrayCoords1 = this._createCoordinateElement("Lon", editCoordinates); + } + for (var j = 0; j < arrayCoords1.length; j++) { + span1.appendChild(arrayCoords1[j]); + } + divLon.appendChild(span1); + div.appendChild(divLon); + + return div; + }, + + /** + * @param {Boolean} [display=false] - specifies if the altitude panel must be displayed + * + * @returns {DOMElement} container + */ + _createMousePositionPanelBasicAltitudeElement : function (display) { + var div = document.createElement("div"); + div.id = this._addUID("GPmousePositionAltitude"); + div.style.display = display ? "block" : "none"; + + var spanLabel = document.createElement("span"); + spanLabel.className = "GPmousePositionLabel"; + spanLabel.innerHTML = "Altitude : "; + div.appendChild(spanLabel); + + var spanAlt = document.createElement("span"); + spanAlt.className = "GPmousePositionCoords"; + spanAlt.id = this._addUID("GPmousePositionAlt"); + spanAlt.innerHTML = "..."; + div.appendChild(spanAlt); + + var spanUnits = document.createElement("span"); + spanUnits.className = "GPmousePositionAltitudeUnits"; + spanUnits.innerHTML = "m"; + div.appendChild(spanUnits); + + return div; + }, + + /** + * @param {Boolean} [editCoordinates=false] - specifies if the coordinates edition is allowed + * + * @returns {DOMElement} container + */ + _createMousePositionPanelEditToolsElement : function (editCoordinates) { + var context = this; + + var div = document.createElement("div"); + div.className = "GPmousePositionPanelEditTools"; + div.id = this._addUID("GPmousePositionPanelEditTools"); + if (!editCoordinates) { + div.style.display = "none"; + } + + var span1 = document.createElement("span"); + span1.className = "GPmousePositionEditTool"; + span1.id = this._addUID("GPmousePositionLocate"); + span1.title = editCoordinates === true ? "Cliquer pour saisir des coordonnées" : ""; + if (editCoordinates) { + span1.addEventListener("click", function () { + context.onMousePositionEditModeLocateClick(); + }); + } + div.appendChild(span1); + + var span2 = document.createElement("span"); + span2.className = "GPmousePositionEditTool"; + span2.id = this._addUID("GPmousePositionCloseEdit"); + span2.title = "Quitter la saisie des coordonnées"; + span2.style.display = "none"; + if (editCoordinates) { + span2.addEventListener("click", function () { + context.onMousePositionEditModeClick(false); + }); + } + div.appendChild(span2); + + return div; + }, + + // ################################################################### // + // #################### Settings container ########################### // + // ################################################################### // + + /** + * @param {Boolean} [display=false] - specifies if the settings panel must be displayed + * + * @returns {DOMElement[]} array containing input and label elements + */ + _createShowMousePositionSettingsElement : function (display) { + var list = []; + + var context = this; + + var input = document.createElement("input"); + input.type = "checkbox"; + input.id = this._addUID("GPshowMousePositionSettings"); + + var label = document.createElement("label"); + label.id = this._addUID("GPshowMousePositionSettingsPicto"); + label.htmlFor = this._addUID("GPshowMousePositionSettings"); + label.title = "Réglages"; + label.className = "GPshowMoreOptionsImage GPshowMoreOptions GPshowMousePositionSettingsPicto"; // FIXME classname and id ? + label.style.display = display ? "block" : "none"; + if (label.addEventListener) { + label.addEventListener("click", function (e) { + if (typeof context.onShowMousePositionSettingsClick === "function") { + context.onShowMousePositionSettingsClick(e); + } + }, false); + } else if (label.attachEvent) { + label.attachEvent("onclick", function (e) { + if (typeof context.onShowMousePositionSettingsClick === "function") { + context.onShowMousePositionSettingsClick(e); + } + }); + } + + list.push(input); + list.push(label); + + return list; + }, + + /** + * settings panel + * @param {Boolean} [display=true] - specifies if the settings panel must be displayed + * + * FIXME + * don't call this._createMousePositionSettingsSystemsElement + * don't call this._createMousePositionSettingsUnitsElement + * + * @returns {DOMElement} DOM element + */ + _createMousePositionSettingsElement : function (display) { + var container = document.createElement("div"); + container.id = this._addUID("GPmousePositionSettings"); + container.style.display = (display === undefined || display) ? "block" : "none"; + + var span = document.createElement("span"); + span.className = "GPmousePositionSettingsLabel"; + span.innerHTML = "Système de référence"; + container.appendChild(span); + + // FIXME on decompose la fonction pour les besoins du controle, + // on ajoutera ces childs à la main... + // FIXME tableau statique ! + // var systems = [ + // { + // code : "GEOGRAPHIC", + // label : "Géographique" + // }, + // { + // code : "MERCATOR", + // label : "Mercator" + // }, + // { + // code : "LAMB93", + // label : "Lambert 93" + // }, + // { + // code : "LAMB2E", + // label : "Lambert II étendu" + // } + // ]; + // + // var selectSystem = this._createMousePositionSettingsSystemsElement(systems); + // + // container.appendChild(selectSystem); + + // FIXME on decompose la fonction pour les besoins du controle, + // on ajoutera ces childs à la main... + // FIXME tableau statique ! + // var units = [ + // { + // code : "DEC", + // label : "degrés décimaux", + // }, + // { + // code : "DMS", + // label : "degrés sexagésimaux", + // }, + // { + // code : "RAD", + // label : "radians", + // }, + // { + // code : "GON", + // label : "grades" + // } + // ]; + // + // var selectUnits = this._createMousePositionSettingsUnitsElement(units); + // + // container.appendChild(selectUnits); + + return container; + }, + + /** + * @param {Object[]} systems - list of systems + * + * @returns {DOMElement} DOM element select + */ + _createMousePositionSettingsSystemsElement : function (systems) { + // contexte d'execution + var context = this; + + var selectSystem = document.createElement("select"); + selectSystem.id = this._addUID("GPmousePositionProjectionSystem"); + selectSystem.className = "GPinputSelect GPmousePositionSettingsSelect"; + selectSystem.addEventListener("change", function (e) { + context.onMousePositionProjectionSystemChange(e); + }); + selectSystem.addEventListener("mouseover", function (e) { + // FIXME mettre une condition si target === option + if (e.target.nodeName !== "OPTION") { + context.onMousePositionProjectionSystemMouseOver(e); + } + }); + + for (var i = 0; i < systems.length; i++) { + var obj = systems[i]; + var option = document.createElement("option"); + option.value = obj.code; + option.text = obj.label || i; + // option.label = obj.label; + selectSystem.appendChild(option); + } + + return selectSystem; + }, + + /** + * @param {Object[]} units - list of units + * + * @returns {DOMElement} DOM element select + */ + _createMousePositionSettingsUnitsElement : function (units) { + // contexte d'execution + var context = this; + + var selectUnits = document.createElement("select"); + selectUnits.id = this._addUID("GPmousePositionProjectionUnits"); + selectUnits.className = "GPinputSelect GPmousePositionSettingsSelect"; + selectUnits.addEventListener("change", function (e) { + context.onMousePositionProjectionUnitsChange(e); + }); + + for (var j = 0; j < units.length; j++) { + var obj = units[j]; + var option = document.createElement("option"); + option.value = (obj.code) ? obj.code : j; + option.text = obj.label || j; + // option.label = obj.label; + selectUnits.appendChild(option); + } + + return selectUnits; + }, + + /** + * @param {String} [currentProjectionType="Metric"] - "Geographical" or "Metric" + */ + _resetLabelElements : function (currentProjectionType) { + // Changement des labels dans le formulaire de saisie + var spanLat = document.getElementById(this._addUID("GPmousePositionLatLabel")); + spanLat.innerHTML = currentProjectionType === "Geographical" ? "Latitude :" : "X :"; + + var spanLon = document.getElementById(this._addUID("GPmousePositionLonLabel")); + spanLon.innerHTML = currentProjectionType === "Geographical" ? "Longitude :" : "Y :"; + }, + + /** + * @param {String} currentProjectionUnits - projection units + */ + _resetUnitElements : function (currentProjectionUnits) { + var value = ""; + if (currentProjectionUnits === "M" || currentProjectionUnits === "KM") { + value = currentProjectionUnits.toLowerCase(); + } + + var elts = document.getElementsByClassName("GPmousePositionUnits"); + for (var e = 0; e < elts.length; e++) { + elts[e].innerHTML = value; + } + }, + + /** + * @method _resetCoordinateElements + * @param {Boolean} editCoordinates - edit coordinates option + * @param {String} currentProjectionType - current projection type + * @param {String} currentProjectionUnits - current projection unit + */ + _resetCoordinateElements : function (editCoordinates, currentProjectionType, currentProjectionUnits) { + // Suppression de tous les enfants de GPmousePositionLatCoordinate + var latElt = document.getElementById(this._addUID("GPmousePositionLatCoordinate")); + while (latElt.firstChild) { + latElt.removeChild(latElt.firstChild); + } + + var arrayCoords; + if (currentProjectionUnits === "DMS") { + arrayCoords = this._createDMSCoordinateElement("Lat", editCoordinates); + } else { + arrayCoords = this._createCoordinateElement("Lat", editCoordinates); + } + for (var i = 0; i < arrayCoords.length; i++) { + latElt.appendChild(arrayCoords[i]); + } + + // Suppression de tous les enfants de GPmousePositionLonCoordinate + var lonElt = document.getElementById(this._addUID("GPmousePositionLonCoordinate")); + while (lonElt.firstChild) { + lonElt.removeChild(lonElt.firstChild); + } + + var arrayCoords1; + if (currentProjectionUnits === "DMS") { + arrayCoords1 = this._createDMSCoordinateElement("Lon", editCoordinates); + } else { + arrayCoords1 = this._createCoordinateElement("Lon", editCoordinates); + } + for (var j = 0; j < arrayCoords1.length; j++) { + lonElt.appendChild(arrayCoords1[j]); + } + + // FIXME on simule un deplacement ? + // this.onMapMove(); + }, + + /** + * Set/unset editing mode + * + * @method _setEditMode + * @param {Boolean} editing - active edit coordinates mode + */ + _setEditMode : function (editing) { + var locateElt = document.getElementById(this._addUID("GPmousePositionLocate")); + locateElt.title = editing ? "Aller à la position ..." : "Cliquer pour saisir des coordonnées"; + + var closeEditElt = document.getElementById(this._addUID("GPmousePositionCloseEdit")); + closeEditElt.style.display = editing ? "inline-block" : "none"; + + var selector = "div[id^=" + this._addUID("GPmousePositionCoordinate") + "]"; + var inputs = document.querySelectorAll(selector + " input"); + for (var i = 0; i < inputs.length; i++) { + inputs[i].readOnly = !editing; + if (editing) { + inputs[i].value = ""; + inputs[i].classList.remove("error"); + } + } + var selects = document.querySelectorAll(selector + " select"); + for (var j = 0; j < selects.length; j++) { + selects[j].disabled = !editing; + } + }, + + /** + * + * @param {DOMElement} input - input element + * @param {Boolean} isFloat - check for float value + * + * @returns {Boolean} true if input value is within bounds + */ + _checkDMSElement : function (input, isFloat) { + var b = isFloat !== undefined; + + var value = input.value; + if (b) { + value = value.replace(",", "."); + } + if (isNaN(value)) { + return false; + } + + var v = parseFloat(value); + if (!b && (v | 0) !== v) { // is it an integer + return false; + } + + var min = Number(input.dataset.min); + var max = Number(input.dataset.max); + return (v >= min && v <= max); + }, + + /** + * @param {String} coordType - "Lon" or "Lat" + * @param {DOMElement} input - input element + * + * @returns {Boolean} true if input value is within bounds + */ + _checkDMSDegrees : function (coordType, input) { + if (isNaN(input.value)) { + return false; + } + + var v = parseFloat(input.value); + if ((v | 0) !== v) { // is it an integer + return false; + } + + var min = Number(input.dataset.min); + var max = Number(input.dataset.max); + if (v < min || v > max) { + return false; + } + + var inputMinutes = document.getElementById(this._addUID("GPmousePosition" + coordType + "Minutes")); + var inputSeconds = document.getElementById(this._addUID("GPmousePosition" + coordType + "Seconds")); + + if (v >= max) { + inputMinutes.dataset.max = 0; + inputSeconds.dataset.max = 0; + } else { + inputMinutes.dataset.max = 59; + inputSeconds.dataset.max = 59.9999; + } + + return true; + }, + + // ################################################################### // + // ####################### handlers Event ############################ // + // ################################################################### // + + /** + * Function displaying coordinates from cursor position (desktop) + * or map center (tactile) + * @param {Object} coordinate - coordinates + */ + GPdisplayCoords : function (coordinate) { + // Compute coords in case of cursor position (desktop) + if (coordinate && coordinate != null) { + var labelLon = document.getElementById(this._addUID("GPmousePositionLonLabel")); + var labelLat = document.getElementById(this._addUID("GPmousePositionLatLabel")); + + if (coordinate.x || coordinate.y) { + labelLat.innerHTML = "X : "; + labelLon.innerHTML = "Y : "; + } else if (coordinate.e || coordinate.n) { + labelLat.innerHTML = "E : "; + labelLon.innerHTML = "N : "; + } else { + labelLat.innerHTML = "Latitude : "; + labelLon.innerHTML = "Longitude : "; + } + + if (typeof coordinate.lat === "object" && typeof coordinate.lng === "object") { + var parts = { + lng : "Lon", + lat : "Lat" + }; + var units = ["Degrees", "Minutes", "Seconds"]; + for (var p in parts) { + for (var u = 0; u < units.length; ++u) { + var selector = "GPmousePosition" + parts[p] + units[u]; + var elt = document.getElementById(this._addUID(selector)); + var key = units[u].charAt(0).toLowerCase(); + elt.value = coordinate[p][key]; + } + } + // directions + document.getElementById(this._addUID("GPmousePositionLonDirection")).value = coordinate.lng.direction; + document.getElementById(this._addUID("GPmousePositionLatDirection")).value = coordinate.lat.direction; + } else { + var elLat = document.getElementById(this._addUID("GPmousePositionLat")); + var elLon = document.getElementById(this._addUID("GPmousePositionLon")); + + elLat.value = coordinate.x || coordinate.lat || coordinate.e || "0"; + elLon.value = coordinate.y || coordinate.lng || coordinate.lon || coordinate.n || "0"; + + // les unites + var unit = (coordinate.unit === undefined) ? "" : coordinate.unit; + var elements = document.getElementsByClassName("GPmousePositionUnits"); + for (var n = 0; n < elements.length; ++n) { + elements[n].innerHTML = unit; + } + } + } + }, + + /** + * Function displaying altitude from cursor position (desktop) + * or map center (tactile) + * @param {Object} coordinate - coordinates + * @param {Number} altitudeTimeoutDelay - when the mouse stop moving, delay before the altitude request is launched + * @param {Number} noDataValue - the no data value + * @param {Number} noDataValueTolerance - the no data value tolerance + */ + GPdisplayElevation : function (coordinate, altitudeTimeoutDelay, noDataValue, noDataValueTolerance) { + // contexte d'execution + var self = this; + + // Latency for altitude request + var altitudeTimeout; + if (!altitudeTimeoutDelay) { + altitudeTimeoutDelay = 500; + } + + clearTimeout(altitudeTimeout); + document.getElementById(this._addUID("GPmousePositionAlt")).innerHTML = "..."; + + if (noDataValue == null) { + noDataValue = -99999; + } + if (noDataValueTolerance == null) { + noDataValueTolerance = 99980; + } + var maxThreshold = noDataValue + noDataValueTolerance; + var minThreshold = noDataValue - noDataValueTolerance; + + // Compute coords in case of cursor position (desktop) + if (coordinate && coordinate != null) { + // If no altitude panel, don't call altitude request + if (document.getElementById(this._addUID("GPmousePositionAltitude"))) { + altitudeTimeout = setTimeout(function () { + self.onRequestAltitude(coordinate, function (z) { + if (minThreshold < z && z < maxThreshold) { + self.GPresetElevation(); + } else { + document.getElementById(self._addUID("GPmousePositionAlt")).innerHTML = z; + } + }); + }, altitudeTimeoutDelay); + } + } + }, + + /** + * Function reseting altitude value + */ + GPresetElevation : function () { + if (document.getElementById(this._addUID("GPmousePositionAltitude"))) { + document.getElementById(this._addUID("GPmousePositionAlt")).innerHTML = "---"; + } + } +}; + +export default MousePositionDOM; diff --git a/src/Common-review/Controls/ProfileElevationPathDOM.js b/src/Common-review/Controls/ProfileElevationPathDOM.js new file mode 100644 index 000000000..910c408f9 --- /dev/null +++ b/src/Common-review/Controls/ProfileElevationPathDOM.js @@ -0,0 +1,524 @@ +/* globals AmCharts, d3 */ +var ProfileElevationPathDOM = { + + /** + * Display Profile function used by default : no additonal framework needed. + * @param {Object} data - elevations values for profile + * @param {HTMLElement} container - html container where to display profile + * @param {Object} context - this control object + * @param {Object} className - calling class (ie ElevationPath) + * @returns {DOMElement} profil container + */ + displayProfileByDefault : function (data, container, context, className) { + var self = context; + + // on nettoie toujours... + if (container) { + while (container.firstChild) { + container.removeChild(container.firstChild); + } + } + + if (!data) { + return; + } + + var _displayProfileOptions = self.options.displayProfileOptions; + + var _points = data.points; + + var sortedElev = JSON.parse(JSON.stringify(_points)); + sortedElev.sort(function (e1, e2) { + return e1.z - e2.z; + }); + + var minZ = sortedElev[0].z; + var maxZ = sortedElev[sortedElev.length - 1].z; + var diff = maxZ - minZ; + var dist = data.distance; + var unit = data.unit; + // var distMin = 0; + var barwidth = 100 / _points.length; + + var div = document.createElement("div"); + div.id = "profileElevationByDefault"; + container.appendChild(div); + + var divBox = document.createElement("div"); + divBox.className = "profile-box"; + + var divZ = document.createElement("div"); + divZ.className = "profile-z-vertical"; + var ulZ = document.createElement("ul"); + var liZmin = document.createElement("li"); + liZmin.setAttribute("class", "profile-min-z"); + liZmin.innerHTML = minZ + " m"; + var liZmax = document.createElement("li"); + liZmax.setAttribute("class", "profile-max-z"); + liZmax.innerHTML = maxZ + " m"; + + // var divUnit = document.createElement("div"); + // divUnit.className = "profile-unit"; + // divUnit.innerHTML = "m"; + + ulZ.appendChild(liZmax); + ulZ.appendChild(liZmin); + divZ.appendChild(ulZ); + // divZ.appendChild(divUnit); + divBox.appendChild(divZ); + + var divData = document.createElement("div"); + divData.className = "profile-content"; + divData.addEventListener("mouseover", function (e) { + var _lon = parseFloat(e.target.dataset["lon"]); + var _lat = parseFloat(e.target.dataset["lat"]); + + if (_lon && _lat) { + className.__createProfileMarker(self, { + lat : _lat, + lon : _lon + }); + } + }); + divData.addEventListener("mousemove", function (e) { + var _lon = parseFloat(e.target.dataset["lon"]); + var _lat = parseFloat(e.target.dataset["lat"]); + + if (_lon && _lat) { + className.__updateProfileMarker(self, { + lat : _lat, + lon : _lon + }); + } + }); + divData.addEventListener("mouseout", function () { + className.__removeProfileMarker(self); + }); + + var ulData = document.createElement("ul"); + ulData.id = "profile-data"; + ulData.className = "profile-z-axis profile-x-axis"; + divData.appendChild(ulData); + + for (var i = 0; i < _points.length; i++) { + var d = _points[i]; + var li = document.createElement("li"); + li.setAttribute("data-z", d.z); + li.setAttribute("data-lon", d.lon); + li.setAttribute("data-lat", d.lat); + li.setAttribute("data-dist", d.dist); + + var pct = Math.floor((d.z - minZ) * 100 / diff); + li.setAttribute("class", "percent v" + pct); + li.title = "Altitude : " + d.z + "m"; + if (_displayProfileOptions.currentSlope) { + li.title += " - Pente : " + d.slope + "%"; + } + li.title += " (Lat : " + d.lat + " / Lon : " + d.lon + ")"; + + li.setAttribute("style", "width: " + barwidth + "%"); + ulData.appendChild(li); + } + + divBox.appendChild(divData); + div.appendChild(divBox); + + var divX = document.createElement("div"); + divX.className = "profile-x-horizontal"; + var ulX = document.createElement("ul"); + var liXmin = document.createElement("li"); + liXmin.setAttribute("class", "profile-min-x"); + liXmin.innerHTML = ""; + var liXmax = document.createElement("li"); + liXmax.setAttribute("class", "profile-max-x"); + liXmax.innerHTML = dist + " " + unit; + ulX.appendChild(liXmin); + ulX.appendChild(liXmax); + divX.appendChild(ulX); + div.appendChild(divX); + + return container; + }, + + /** + * Display Profile without graphical rendering (raw service response) + * @param {Object} data - elevations values for profile + * @param {HTMLElement} container - html container where to display profile + * @param {Object} context - this control object + * @param {Object} className - calling class (ie ElevationPath) + * @returns {DOMElement} profil container + */ + displayProfileRaw : function (data, container, context, className) { + // on nettoie toujours... + if (container) { + while (container.firstChild) { + container.removeChild(container.firstChild); + } + } + + var _points = data.points; + + var div = document.createElement("textarea"); + div.id = "profilElevationResults"; + div.rows = 10; + div.cols = 50; + div.style.width = "100%"; + div.innerHTML = JSON.stringify(_points, undefined, 4); + div.addEventListener("mouseover", function (e) { + className.__customRawProfileMouseOverEvent(context, e); + }); + + // TODO + // for (var i = 0; i < _points.length; i++) { + // var point = _points[i]; + // var divC = document.createElement("code"); + // divC.id = "point_" + i; + // divC.innerHTML = JSON.stringify(point, undefined, 4); + // div.appendChild(divC); + // divC.addEventListener("mouseover", function (e) { + // className.__customRawProfileMouseOverEvent(context, e); + // }); + // } + + container.appendChild(div); + + return container; + }, + + /** + * Display Profile using D3 javascript framework. This method needs D3 libraries to be loaded. + * @param {Object} data - elevations values for profile + * @param {HTMLElement} container - html container where to display profile + * @param {Object} context - this control object + * @param {Object} className - calling class (ie ElevationPath) + * @returns {DOMElement} profil container + */ + displayProfileLibD3 : function (data, container, context, className) { + var self = context; + + // on nettoie toujours... + if (container) { + while (container.firstChild) { + container.removeChild(container.firstChild); + } + } + + var _points = data.points; + + var _displayProfileOptions = self.options.displayProfileOptions; + + var margin = { + top : 20, + right : 20, + bottom : 30, + left : 40 + }; + + var width = container.clientWidth - margin.left - margin.right; + var height = container.clientHeight - margin.top - margin.bottom; + + var x = d3.scale.linear() + .range([0, width]); + + var y = d3.scale.linear() + .range([height, 0]); + + var xAxis = d3.svg.axis() + .scale(x) + .orient("bottom") + .ticks(5); + + var yAxis = d3.svg.axis() + .scale(y) + .orient("left") + .ticks(5); + + var line = d3.svg.line() + .interpolate("basis") + .x(function (d) { + return x(d.dist); + }) + .y(function (d) { + return y(d.z); + }); + + var area = d3.svg.area() + .interpolate("basis") + .x(function (d) { + return x(d.dist); + }) + .y0(height) + .y1(function (d) { + return y(d.z); + }); + + var svg = d3.select(container) + .append("svg") + .attr("width", width + margin.left + margin.right) + .attr("height", height + margin.top + margin.bottom) + .append("g") + .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); + + var xDomain = d3.extent(_points, function (d) { + return d.dist; + }); + x.domain(xDomain); + + var yDomain = [ + 0, + d3.max(_points, function (d) { + return d.z; + }) + ]; + y.domain(yDomain); + + svg.append("path") + .datum(_points) + .attr("class", "area-d3") + .attr("d", area); + + svg.append("g") + .attr("class", "x axis-d3") + .attr("transform", "translate(0," + height + ")") + .call(xAxis) + .append("text") + .attr("y", -15) + .attr("dy", ".71em") + .attr("x", width) + .text("Distance (" + data.unit + ")"); + + svg.append("g") + .attr("class", "y axis-d3") + .call(yAxis) + .append("text") + .attr("transform", "rotate(-90)") + .attr("y", 6) + .attr("dy", ".71em") + .text("Altitude (m)"); + + svg.append("g") + .attr("class", "grid-d3 vertical") + .attr("transform", "translate(0," + height + ")") + .call(xAxis + .orient("bottom") + .tickSize(-height, 0, 0) + .tickFormat("") + ); + + svg.append("g") + .attr("class", "grid-d3 horizontal") + .call(yAxis + .orient("left") + .tickSize(-width, 0, 0) + .tickFormat("") + ); + + svg.append("path") + .datum(_points) + .attr("class", "line-d3") + .attr("d", line); + + svg.selectAll("circle") + .data(_points) + .enter() + .append("circle") + .attr("cx", function (d) { + return x(d.dist); + }) + .attr("cy", function (d) { + return y(d.z); + }) + .attr("r", 0) + .attr("class", "circle-d3"); + + var focus = svg.append("g").style("display", "none"); + + focus.append("line") + .attr("id", "focusLineX") + .attr("class", "focusLine-d3"); + focus.append("line") + .attr("id", "focusLineY") + .attr("class", "focusLine-d3"); + focus.append("circle") + .attr("id", "focusCircle") + .attr("r", 4) + .attr("class", "circle-d3 focusCircle-d3"); + + var div = d3.select(container).append("div") + .attr("class", "tooltip-d3") + .style("opacity", 0); + + var bisectDist = d3.bisector(function (d) { + return d.dist; + }).left; + + svg.append("rect") + .attr("class", "overlay-d3") + .attr("width", width) + .attr("height", height) + .on("mouseover", function () { + focus.style("display", null); + className.__createProfileMarker(self, _points[0]); + }) + .on("mouseout", function () { + focus.style("display", "none"); + className.__removeProfileMarker(self); + + // tooltips + div.transition() + .duration(500) + .style("opacity", 0); + }) + .on("mousemove", function () { + var m = d3.mouse(this); + var distance = x.invert(m[0]); + var i = bisectDist(_points, distance); + + var d0 = _points[i - 1]; + var d1 = _points[i]; + var d = distance - d0[0] > d1[0] - distance ? d1 : d0; + + var xc = x(d.dist); + var yc = y(d.z); + + focus.select("#focusCircle") + .attr("cx", xc) + .attr("cy", yc); + focus.select("#focusLineX") + .attr("x1", xc).attr("y1", y(yDomain[0])) + .attr("x2", xc).attr("y2", y(yDomain[1])); + focus.select("#focusLineY") + .attr("x1", x(xDomain[0])).attr("y1", yc) + .attr("x2", x(xDomain[1])).attr("y2", yc); + + className.__updateProfileMarker(self, d); + + // tooltips + div.transition() + .duration(200) + .style("opacity", 0.9); + + var _message = ""; + _message += " Altitude : " + d.z + " m"; + if (_displayProfileOptions.currentSlope) { + _message += "
Pente : " + d.slope + " %"; + } + _message += "
(Lat : " + d.lat + "/ Lon : " + d.lon + ")"; + + div.html(_message) + .style("left", (d3.event.pageX) + "px") + .style("top", (d3.event.pageY - 28) + "px"); + }); + + // return d3.selectAll("rect.overlay")[0][0]; + return svg; + }, + + /** + * Display Profile using Amcharts framework. This method needs AmCharts libraries to be loaded. + * @param {Object} data - elevations values for profile + * @param {HTMLElement} container - html container where to display profile + * @param {Object} context - this control object + * @param {Object} className - calling class (ie ElevationPath) + * @returns {DOMElement} profil container + */ + displayProfileLibAmCharts : function (data, container, context, className) { + var self = context; + + var _points = data.points; + + var ballonText = "[[title]] : [[value]]m
"; + var currentSlope = self.options.displayProfileOptions.currentSlope; + if (currentSlope) { + ballonText += "Pente : [[slope]] %
"; + } + ballonText += "(Lat: [[lat]] / Lon:[[lon]])"; + + AmCharts.addInitHandler(function () {}); + + var settings = { + type : "serial", + pathToImages : "http://cdn.amcharts.com/lib/3/images/", + categoryField : "dist", + autoMarginOffset : 0, + marginRight : 10, + marginTop : 10, + startDuration : 0, + color : "#5E5E5E", + fontSize : 8, + theme : "light", + thousandsSeparator : "", + numberFormatter : { + precision : -1, + decimalSeparator : ",", + thousandsSeparato : " " + }, + categoryAxis : { + color : "#5E5E5E", + gridPosition : "start", + minHorizontalGap : 40, + tickPosition : "start", + title : "Distance (" + data.unit + ")", + titleColor : "#5E5E5E", + labelOffset : 0, + startOnAxis : true + }, + chartCursor : { + animationDuration : 0, + bulletsEnabled : true, + bulletSize : 10, + categoryBalloonEnabled : false, + cursorColor : "#F90", + graphBulletAlpha : 1, + graphBulletSize : 1, + zoomable : false + }, + trendLines : [], + graphs : [{ + balloonColor : "#CCCCCC", + balloonText : ballonText, + bullet : "round", + bulletAlpha : 0, + bulletBorderColor : "#FFF", + bulletBorderThickness : 2, + bulletColor : "#F90", + bulletSize : 6, + hidden : false, + id : "AmGraph-1", + fillAlphas : 0.4, + fillColors : "#C77A04", + lineAlpha : 1, + lineColor : "#C77A04", + lineThickness : 1, + title : "Altitude", + valueField : "z" + }], + guides : [], + valueAxes : [{ + id : "ValueAxis-1", + minVerticalGap : 20, + title : "Altitude (m)" + }], + balloon : { + borderColor : "#CCCCCC", + borderThickness : 1, + fillColor : "#FFFFFF", + showBullet : true + }, + titles : [], + allLabels : [], + dataProvider : _points + }; + + var _containerProfile = AmCharts.makeChart(container, settings); + + _containerProfile.addListener("changed", function (e) { + var obj = e.chart.dataProvider[e.index]; + className.__updateProfileMarker(self, obj); + }); + + return _containerProfile; + } +}; + +export default ProfileElevationPathDOM; diff --git a/src/Common-review/Controls/ReverseGeocodingDOM.js b/src/Common-review/Controls/ReverseGeocodingDOM.js new file mode 100644 index 000000000..e2e59e29b --- /dev/null +++ b/src/Common-review/Controls/ReverseGeocodingDOM.js @@ -0,0 +1,463 @@ +var ReverseGeocodingDOM = { + + /** + * Add uuid to the tag ID + * @param {String} id - id selector + * @returns {String} uid - id selector with an unique id + */ + _addUID : function (id) { + var uid = (this._uid) ? id + "-" + this._uid : id; + return uid; + }, + + /** + * Main container (DOM) + * + * @returns {DOMElement} DOM element + */ + _createMainContainerElement : function () { + var container = document.createElement("div"); + container.id = this._addUID("GPreverseGeocoding"); + container.className = "GPwidget"; + return container; + }, + + // ################################################################### // + // ################### Methods of main container ##################### // + // ################################################################### // + + /** + * Hidden checkbox for minimizing/maximizing + * + * @returns {DOMElement} DOM element + */ + _createShowReverseGeocodingElement : function () { + var input = document.createElement("input"); + input.id = this._addUID("GPshowReverseGeocoding"); + input.type = "checkbox"; + return input; + }, + + /** + * Show ReverseGeocoding + * + * @returns {DOMElement} DOM element + */ + _createShowReverseGeocodingPictoElement : function () { + // contexte d'execution + var self = this; + + var label = document.createElement("label"); + label.id = this._addUID("GPshowReverseGeocodingPicto"); + label.className = "GPshowAdvancedToolPicto"; + label.htmlFor = this._addUID("GPshowReverseGeocoding"); + label.title = "Ouvrir la recherche inverse"; + + // Close all results and panels when minimizing the widget + if (label.addEventListener) { + label.addEventListener("click", function () { + self.onShowReverseGeocodingClick(); + }); + } else if (label.attachEvent) { + label.attachEvent("onclick", function () { + self.onShowReverseGeocodingClick(); + }); + } + + var spanOpen = document.createElement("span"); + spanOpen.id = this._addUID("GPshowReverseGeocodingOpen"); + spanOpen.className = "GPshowAdvancedToolOpen"; + label.appendChild(spanOpen); + + return label; + }, + + /** + * Create Waiting Panel + * + * @returns {DOMElement} DOM element + */ + _createReverseGeocodingWaitingElement : function () { + var div = document.createElement("div"); + div.id = this._addUID("GPreverseGeocodingCalcWaitingContainer"); + div.className = "GPreverseGeocodingCalcWaitingContainerHidden"; + + var p = document.createElement("p"); + p.className = "GPreverseGeocodingCalcWaiting"; + p.innerHTML = "Recherche en cours..."; + + div.appendChild(p); + + return div; + }, + + /** + * Reverse geocoding results panel element. + * + * @returns {DOMElement} DOM element + */ + _createReverseGeocodingResultsPanelElement : function () { + var resultsPanelDiv = document.createElement("div"); + resultsPanelDiv.id = this._addUID("GPreverseGeocodingResultsPanel"); + resultsPanelDiv.className = "GPpanel GPreverseGeocodingComponentHidden"; + return resultsPanelDiv; + }, + + /** + * Reverse geocoding results list. + * + * @returns {DOMElement} DOM element + */ + _createReverseGeocodingResultsListElement : function () { + var container = document.createElement("div"); + container.id = this._addUID("GPreverseGeocodingResultsList"); + // Results are dynamically filled in Javascript by reverse geocoding service + return container; + }, + + /** + * Add Result + * (results dynamically generate !) + * + * @param {String} locationDescription - reverse geocoded location results + * @param {Number} id - ID + */ + _createReverseGeocodingResultElement : function (locationDescription, id) { + // contexte + var context = this; + + var container = document.getElementById(this._addUID("GPreverseGeocodingResultsList")); + + var div = document.createElement("div"); + div.id = this._addUID("ReverseGeocodedLocation_" + id); + div.className = "GPautoCompleteProposal"; + div.innerHTML = locationDescription; + div.title = locationDescription; + + if (div.addEventListener) { + div.addEventListener("mouseover", function (e) { + context.onReverseGeocodingResultMouseOver(e); + }); + div.addEventListener("mouseout", function (e) { + context.onReverseGeocodingResultMouseOut(e); + }); + div.addEventListener("click", function (e) { + if (typeof context.onReverseGeocodingResultClick === "function") { + context.onReverseGeocodingResultClick(e); + } + }); + } else if (div.attachEvent) { + div.attachEvent("onmouseover", function (e) { + context.onReverseGeocodingResultMouseOver(e); + }); + div.attachEvent("onmouseout", function (e) { + context.onReverseGeocodingResultMouseOut(e); + }); + div.attachEvent("onclick", function (e) { + if (typeof context.onReverseGeocodingResultClick === "function") { + context.onReverseGeocodingResultClick(e); + } + }); + } + + container.appendChild(div); + }, + + // ################################################################### // + // ######################### Inputs panel ############################ // + // ################################################################### // + + /** + * Create Container Panel + * + * @returns {DOMElement} DOM element + */ + _createReverseGeocodingPanelElement : function () { + var div = document.createElement("div"); + div.id = this._addUID("GPreverseGeocodingPanel"); + div.className = "GPpanel"; + + return div; + }, + + /** + * Create Header Panel + * + * @returns {DOMElement} DOM element + */ + _createReverseGeocodingPanelHeaderElement : function () { + var container = document.createElement("div"); + container.className = "GPpanelHeader"; + // info: on sépare les appels pour la création du picto de retour, + // du titre et de la croix de fermeture pour les récupérer dans le composant + return container; + }, + + /** + * Create return picto in panel header + * + * @returns {DOMElement} DOM element + */ + _createReverseGeocodingPanelReturnPictoElement : function () { + // contexte + var self = this; + + var divNew = document.createElement("div"); + divNew.id = this._addUID("GPreverseGeocodingReturnPicto"); + divNew.title = "Nouvelle recherche"; + divNew.className = "GPreverseGeocodingReturnPictoHidden"; + if (divNew.addEventListener) { + divNew.addEventListener("click", function (e) { + document.getElementById(self._addUID("GPreverseGeocodingResultsPanel")).className = "GProuteComponentHidden"; + document.getElementById(self._addUID("GPreverseGeocodingForm")).className = ""; + document.getElementById(self._addUID("GPreverseGeocodingHeaderTitle")).innerHTML = "Recherche inverse"; + document.getElementById(self._addUID("GPreverseGeocodingReturnPicto")).className = "GPreverseGeocodingReturnPictoHidden"; + self.onGPreverseGeocodingReturnPictoClick(e); + }); + } else if (divNew.attachEvent) { + divNew.attachEvent("onclick", function (e) { + document.getElementById(self._addUID("GPreverseGeocodingResultsPanel")).className = "GProuteComponentHidden"; + document.getElementById(self._addUID("GPreverseGeocodingForm")).className = ""; + document.getElementById(self._addUID("GPreverseGeocodingHeaderTitle")).innerHTML = "Recherche inverse"; + document.getElementById(self._addUID("GPreverseGeocodingReturnPicto")).className = "GPreverseGeocodingReturnPictoHidden"; + self.onGPreverseGeocodingReturnPictoClick(e); + }); + } + return divNew; + }, + + /** + * Create Header Title Panel + * + * @returns {DOMElement} DOM element + */ + _createReverseGeocodingPanelTitleElement : function () { + var div = document.createElement("div"); + div.className = "GPpanelTitle"; + div.id = this._addUID("GPreverseGeocodingHeaderTitle"); + div.innerHTML = "Recherche inverse"; + return div; + }, + + /** + * Create Header close div + * + * @returns {DOMElement} DOM element + */ + _createReverseGeocodingPanelCloseElement : function () { + // contexte + var self = this; + + var divClose = document.createElement("div"); + divClose.id = this._addUID("GPreverseGeocodingPanelClose"); + divClose.className = "GPpanelClose"; + divClose.title = "Fermer le panneau"; + + // Link panel close / visibility checkbox + if (divClose.addEventListener) { + divClose.addEventListener("click", function () { + document.getElementById(self._addUID("GPshowReverseGeocodingPicto")).click(); + }, false); + } else if (divClose.attachEvent) { + divClose.attachEvent("onclick", function () { + document.getElementById(self._addUID("GPshowReverseGeocodingPicto")).click(); + }); + } + + return divClose; + }, + + /** + * Create Form + * see event ! + * + * @returns {DOMElement} DOM element + */ + _createReverseGeocodingPanelFormElement : function () { + // contexte d'execution + var self = this; + + var form = document.createElement("form"); + form.id = this._addUID("GPreverseGeocodingForm"); + + if (form.addEventListener) { + form.addEventListener("submit", function (e) { + e.preventDefault(); + self.onReverseGeocodingSubmit(); + }); + } else if (form.attachEvent) { + form.attachEvent("onsubmit", function (e) { + e.preventDefault(); + self.onReverseGeocodingSubmit(); + }); + } + + return form; + }, + + // ################################################################### // + // ####################### Choice mode into form ##################### // + // ################################################################### // + + /** + * Create Container to Mode choice geocoding type + * + * @param {Array} resources - geocoding resources to be displayed (and used) + * @returns {DOMElement} DOM element + */ + _createReverseGeocodingFormModeChoiceGeocodingTypeElement : function (resources) { + // contexte d'execution + var context = this; + + var div = document.createElement("div"); + div.className = "GPflexInput"; + + var label = document.createElement("label"); + label.className = "GPreverseGeocodingCodeLabel"; + label.innerHTML = "Recherche par"; + label.title = "Recherche par"; + div.appendChild(label); + + var select = document.createElement("select"); + select.className = "GPreverseGeocodingCode"; + // gestionnaire d'evenement : on stocke la valeur du type de geocodage, + // utilisé dans la requête de géocodage inverse + if (select.addEventListener) { + select.addEventListener("change", function (e) { + context.onReverseGeocodingTypeChange(e); + }); + } else if (select.attachEvent) { + select.attachEvent("onchange", function (e) { + context.onReverseGeocodingTypeChange(e); + }); + } + + // on prend soit les valeurs passées par l'utilisateur, soit des valeurs par défaut + if (!resources || !Array.isArray(resources)) { + resources = ["StreetAddress", "PositionOfInterest", "CadastralParcel"]; + } + for (var i = 0; i < resources.length; i++) { + switch (resources[i]) { + case "PositionOfInterest": + var POIOption = document.createElement("option"); + POIOption.value = "PositionOfInterest"; + POIOption.text = "Lieux/toponymes"; + select.appendChild(POIOption); + break; + case "StreetAddress": + var SAOption = document.createElement("option"); + SAOption.value = "StreetAddress"; + SAOption.text = "Adresses"; + select.appendChild(SAOption); + break; + case "CadastralParcel": + var CPOption = document.createElement("option"); + CPOption.value = "CadastralParcel"; + CPOption.text = "Parcelles cadastrales"; + select.appendChild(CPOption); + break; + case "Administratif": + var adminOption = document.createElement("option"); + adminOption.value = "Administratif"; + adminOption.text = "Unités administratives"; + select.appendChild(adminOption); + break; + default: + break; + } + } + + div.appendChild(select); + + return div; + }, + + /** + * Create Container to Mode choice geocoding delimitation + * + * @param {Array} delimitations - geocoding delimitations to be displayed (and used) + * @returns {DOMElement} DOM element + */ + _createReverseGeocodingFormModeChoiceGeocodingDelimitationElement : function (delimitations) { + // contexte d'execution + var context = this; + + var div = document.createElement("div"); + div.className = "GPflexInput"; + + var label = document.createElement("label"); + label.className = "GPreverseGeocodingCodeLabel"; + label.innerHTML = "Délimitation"; + label.title = "Délimitation"; + div.appendChild(label); + + var select = document.createElement("select"); + select.className = "GPreverseGeocodingCode"; + // gestionnaire d'evenement : on stocke la valeur du type de délimitation, + // et on modifie l'événement de pointage sur la carte en fonction + if (select.addEventListener) { + select.addEventListener("change", function (e) { + context.onReverseGeocodingDelimitationChange(e); + }); + } else if (select.attachEvent) { + select.attachEvent("onchange", function (e) { + context.onReverseGeocodingDelimitationChange(e); + }); + } + + // on prend soit les valeurs passées par l'utilisateur, soit des valeurs par défaut + if (!delimitations || !Array.isArray(delimitations)) { + delimitations = ["Point", "Circle", "Extent"]; + } + for (var i = 0; i < delimitations.length; i++) { + switch (delimitations[i].toLowerCase()) { + case "point": + var pointOption = document.createElement("option"); + pointOption.value = "point"; + pointOption.text = "Pointer un lieu"; + select.appendChild(pointOption); + break; + case "circle": + var circleOption = document.createElement("option"); + circleOption.value = "circle"; + circleOption.text = "Dessiner un cercle"; + select.appendChild(circleOption); + break; + case "extent": + var extentOption = document.createElement("option"); + extentOption.value = "extent"; + extentOption.text = "Dessiner une emprise"; + select.appendChild(extentOption); + break; + default: + break; + } + } + + div.appendChild(select); + + return div; + }, + + // ################################################################### // + // ########################### Submit Form ########################### // + // ################################################################### // + + /** + * Create Submit Form Element + * + * @returns {DOMElement} DOM element + */ + _createReverseGeocodingSubmitFormElement : function () { + var input = document.createElement("input"); + input.id = this._addUID("GPreverseGeocodingSubmit"); + input.className = "GPinputSubmit"; + input.type = "submit"; + input.value = "Rechercher"; + + return input; + } + +}; + +export default ReverseGeocodingDOM; diff --git a/src/Common-review/Controls/RouteDOM.js b/src/Common-review/Controls/RouteDOM.js new file mode 100644 index 000000000..bede85b74 --- /dev/null +++ b/src/Common-review/Controls/RouteDOM.js @@ -0,0 +1,1200 @@ +import ID from "../Utils/SelectorID"; +import Logger from "../../Common/Utils/LoggerByDefault"; + +var logger = Logger.getLogger("RouteDOM"); + +var RouteDOM = { + + /** + * Add uuid to the tag ID + * @param {String} id - id selector + * @returns {String} uid - id selector with an unique id + */ + _addUID : function (id) { + var uid = (this._uid) ? id + "-" + this._uid : id; + return uid; + }, + + /** + * Main container (DOM) + * + * @returns {DOMElement} DOM element + */ + _createMainContainerElement : function () { + var container = document.createElement("div"); + container.id = this._addUID("GProute"); + container.className = "GPwidget"; + return container; + }, + + // ################################################################### // + // ################# Methods to display Main Panel ################### // + // ################################################################### // + + /** + * Hidden checkbox for minimizing/maximizing panel + * + * @returns {DOMElement} DOM element + */ + _createShowRouteElement : function () { + var input = document.createElement("input"); + input.id = this._addUID("GPshowRoute"); + input.type = "checkbox"; + return input; + }, + + /** + * Show route control + * see event ! + * + * @returns {DOMElement} DOM element + */ + _createShowRoutePictoElement : function () { + // contexte d'execution + var context = this; + + var label = document.createElement("label"); + label.id = this._addUID("GPshowRoutePicto"); + label.className = "GPshowAdvancedToolPicto"; + label.htmlFor = this._addUID("GPshowRoute"); + label.title = "Ouvrir le calcul d'itinéraire"; + + // gestionnaire d'evenement : + // on ouvre le menu de saisie du calcul d'itiniraire + // L'ouverture/Fermeture permet de faire le menage + // (reinitialisation) + if (label.addEventListener) { + label.addEventListener("click", function (e) { + context.onShowRoutePanelClick(e); + }); + } else if (label.attachEvent) { + label.attachEvent("onclick", function (e) { + context.onShowRoutePanelClick(e); + }); + } + + var spanOpen = document.createElement("span"); + spanOpen.id = this._addUID("GPshowRouteOpen"); + spanOpen.className = "GPshowAdvancedToolOpen"; + label.appendChild(spanOpen); + + return label; + }, + + // ################################################################### // + // ################## Methods to display Inputs Panel ################ // + // ################################################################### // + + /** + * Create Container Panel + * + * FIXME + * don't call this._createRoutePanelHeaderElement + * don't call this._createRoutePanelFormElement + * don't call this._createRoutePanelResultsElement + * + * @returns {DOMElement} DOM element + */ + _createRoutePanelElement : function () { + var div = document.createElement("div"); + div.id = this._addUID("GProutePanel"); + div.className = "GPpanel"; + + // div.appendChild(this._createRoutePanelHeaderElement()); + // div.appendChild(this._createRoutePanelFormElement()); + // div.appendChild(this._createRoutePanelResultsElement()); + + return div; + }, + + /** + * Create Header Panel + * + * @returns {DOMElement} DOM element + */ + _createRoutePanelHeaderElement : function () { + // contexte d'execution + var self = this; + + var container = document.createElement("div"); + container.className = "GPpanelHeader"; + + var div = document.createElement("div"); + div.className = "GPpanelTitle"; + div.innerHTML = "Calcul d'itinéraire"; + container.appendChild(div); + + var divClose = document.createElement("div"); + divClose.id = this._addUID("GProutePanelClose"); + divClose.className = "GPpanelClose"; + divClose.title = "Masquer le panneau"; + + // Link panel close / visibility checkbox + if (divClose.addEventListener) { + divClose.addEventListener("click", function () { + document.getElementById(self._addUID("GPshowRoutePicto")).click(); + }, false); + } else if (divClose.attachEvent) { + divClose.attachEvent("onclick", function () { + document.getElementById(self._addUID("GPshowRoutePicto")).click(); + }); + } + container.appendChild(divClose); + + return container; + }, + + /** + * Create Form + * see evenement ! + * + * @returns {DOMElement} DOM element + */ + _createRoutePanelFormElement : function () { + // contexte d'execution + var self = this; + + var form = document.createElement("form"); + form.id = this._addUID("GProuteForm"); + form.setAttribute("onkeypress", "return event.keyCode != 13;"); // FIXME hack pour desactiver l'execution via 'enter' au clavier ! + + form.addEventListener("submit", function (e) { + logger.log(e); + e.preventDefault(); + + // points + var points = document.getElementsByClassName(self._addUID("GPlocationPoint")); + + // Must have at least two origin points + var start = points[0].childNodes[0].id; + var end = points[points.length - 1].childNodes[0].id; + var startID = ID.index(start); + var endID = ID.index(end); + + if ((document.getElementById(self._addUID("GPlocationOrigin_" + startID)).value === "" && + document.getElementById(self._addUID("GPlocationOriginCoords_" + startID)).value === "") || + (document.getElementById(self._addUID("GPlocationOrigin_" + endID)).value === "" && + document.getElementById(self._addUID("GPlocationOriginCoords_" + endID)).value === "")) { + return false; + } + + // Send stages to results panel + var id; + document.getElementById(self._addUID("GProuteResultsStages")).innerHTML = ""; + for (var i = 0; i < points.length; i++) { + var tag = points[i].childNodes[0].id; + id = ID.index(tag); + if (document.getElementById(self._addUID("GPlocationPoint_" + id)).className === "GPflexInput GPlocationStageFlexInput") { + var resultStage = document.createElement("div"); + resultStage.className = "GProuteResultsStages"; + var resultStageLabel = document.createElement("div"); + resultStageLabel.className = "GProuteResultStageLabel"; + resultStageLabel.innerHTML = document.getElementById(self._addUID("GPlocationOriginLabel_" + id)).innerHTML + " :"; + resultStage.appendChild(resultStageLabel); + var resultStageValue = document.createElement("div"); + resultStageValue.className = "GProuteResultStageValue"; + var elementCoords = document.getElementById(self._addUID("GPlocationOriginCoords_" + id)); + var stageCoords = elementCoords.value; + var visible = (elementCoords.className === "GPlocationOriginVisible"); + if (stageCoords !== null && stageCoords !== "" && visible) { + resultStageValue.innerHTML = stageCoords; + } else { + resultStageValue.innerHTML = document.getElementById(self._addUID("GPlocationOrigin_" + id)).value; + } + resultStage.appendChild(resultStageValue); + if (resultStageValue.innerHTML !== "") { + document.getElementById(self._addUID("GProuteResultsStages")).appendChild(resultStage); + } + } + } + + // on peut récuperer les valeurs utiles pour les transmettre au service d'iti... + // - le mode de calcul + // - le mode de transport + // - les exclusions + // Les points sont déjà stockés dans l'application. + + // computation mode params + var modeComputation = null; + if (document.getElementById(self._addUID("GProuteComputationSelect"))) { + var select = document.getElementById(self._addUID("GProuteResultsComputationSelect")); + select.selectedIndex = document.getElementById(self._addUID("GProuteComputationSelect")).selectedIndex; + modeComputation = select.options[select.selectedIndex].value; + } + + // transport mode params + var modeTransport = null; + // voiture ? + if (document.getElementById(self._addUID("GProuteTransportCar"))) { + if (document.getElementById(self._addUID("GProuteTransportCar")).checked) { + modeTransport = document.getElementById(self._addUID("GProuteTransportCar")).value; + } + } + // pieton ? + if (document.getElementById(self._addUID("GProuteTransportPedestrian"))) { + if (document.getElementById(self._addUID("GProuteTransportPedestrian")).checked) { + modeTransport = document.getElementById(self._addUID("GProuteTransportPedestrian")).value; + } + } + + // exclusions params + var exclusions = []; + var exclusionsElement = document.getElementsByClassName("GProuteExclusionsOption"); + for (var j = 0; j < exclusionsElement.length; j++) { + id = exclusionsElement[j].htmlFor; + var el = document.getElementById(id); + if (!el.checked) { + exclusions.push(el.value); + } + } + + self.onRouteComputationSubmit({ + computation : modeComputation, + transport : modeTransport, + exclusions : exclusions + }); + + // FIXME mise à jour du controle dans le composant JS ! + // document.getElementById(self._addUID("GProuteForm")).className = "GProuteComponentHidden"; + // document.getElementById(self._addUID("GProuteResultsPanel")).className = ""; + + return false; + }); + + return form; + }, + + /** + * Create Results Panel + * + * @returns {DOMElement} DOM element + */ + _createRoutePanelResultsElement : function () { + var container = document.createElement("div"); + container.id = this._addUID("GProuteResultsPanel"); + container.className = "GProuteComponentHidden"; + + container.appendChild(this._createRouteResultsStagesElement()); + container.appendChild(this._createRouteResultsElement()); + + var divBorderUp = document.createElement("div"); + divBorderUp.className = "GPfakeBorder GPfakeBorderLeft"; + container.appendChild(divBorderUp); + + container.appendChild(this._createRouteShowResultsDetailsElement()); + + var labelShow = document.createElement("label"); + labelShow.htmlFor = this._addUID("GProuteResultsShowDetails"); + labelShow.innerHTML = "Afficher le détail"; + container.appendChild(labelShow); + + var labelHide = document.createElement("label"); + labelHide.htmlFor = this._addUID("GProuteResultsShowDetails"); + labelHide.innerHTML = "Masquer le détail"; + container.appendChild(labelHide); + + var divBorderDown = document.createElement("div"); + divBorderDown.className = "GPfakeBorder"; + container.appendChild(divBorderDown); + + container.appendChild(this._createRouteResultsDetailsElement()); + + return container; + }, + + /** + * Create Waiting Panel + * + * @returns {DOMElement} DOM element + */ + _createRouteWaitingElement : function () { + var div = document.createElement("div"); + div.id = this._addUID("GProuteCalcWaitingContainer"); + div.className = "GProuteCalcWaitingContainerHidden"; + + var p = document.createElement("p"); + p.className = "GProuteCalcWaiting"; + p.innerHTML = "Calcul en cours..."; + + div.appendChild(p); + + return div; + }, + // ################################################################### // + // ############### Methods to the window results ##################### // + // ################################################################### // + + /** + * Create Results Stages + * (results dynamically generate !) + * + * @returns {DOMElement} DOM element + */ + _createRouteResultsStagesElement : function () { + var div = document.createElement("div"); + div.id = this._addUID("GProuteResultsStages"); + return div; + }, + + /** + * Create Show Results + * see event! + * + * @returns {DOMElement} DOM element + */ + _createRouteResultsElement : function () { + // contexte + var self = this; + + var container = document.createElement("div"); + container.id = this._addUID("GProuteResults"); + + // FIXME Route results are dynamically filled in Javascript by route service + var divValue = document.createElement("div"); + divValue.id = this._addUID("GProuteResultsValues"); + container.appendChild(divValue); + + var divMode = document.createElement("div"); + divMode.id = this._addUID("GProuteResultsMode"); + + var select = document.createElement("select"); + select.id = this._addUID("GProuteResultsComputationSelect"); + select.className = "GPinputSelect"; + // gestionnaire d'evenement : + // on stocke la valeur du mode de calcul, et on relance le calcul d'itiniraire + select.addEventListener("change", function (e) { + self.onRouteModeComputationChangeAndRun(e); + }); + + var computes = [{ + code : "fastest", + label : "Plus rapide" + }, { + code : "shortest", + label : "Plus court" + }]; + + for (var i = 0; i < computes.length; i++) { + var option = document.createElement("option"); + option.value = computes[i].code; + option.text = computes[i].label; + select.appendChild(option); + } + divMode.appendChild(select); + container.appendChild(divMode); + + var divNew = document.createElement("div"); + divNew.id = this._addUID("GProuteResultsNew"); + divNew.title = "Modifier le calcul"; + divNew.addEventListener("click", function (e) { + document.getElementById(self._addUID("GProuteResultsPanel")).className = "GProuteComponentHidden"; + document.getElementById(self._addUID("GProuteForm")).className = ""; + self.onShowRouteResultsNewClick(e); + }); + container.appendChild(divNew); + + return container; + }, + + /** + * Add Results Duration and Distance + * (results dynamically generate !) + * see event! + * @param {Number} distance - distance + * @param {Number} duration - duration + * @param {Function} fconvert - fconvert + * + * @returns {DOMElement} DOM element + */ + _addRouteResultsValuesElement : function (distance, duration, fconvert) { + var div = document.getElementById(this._addUID("GProuteResultsValues")); + + // clean ! + if (div.childElementCount) { + while (div.firstChild) { + div.removeChild(div.firstChild); + } + } + + var containerDistance = document.createElement("div"); + containerDistance.className = "GProuteResultsValue"; + + var labelDistance = document.createElement("label"); + labelDistance.className = "GProuteResultsValueLabel"; + labelDistance.innerHTML = "Distance :"; + containerDistance.appendChild(labelDistance); + + var distanceLabel = 0; + var isKm = parseInt(distance / 1000, 10); + + if (!isKm) { + distanceLabel = Math.round(distance) + " m"; + } else { + var distanceArrondi = Math.round(distance); + distanceArrondi = distanceArrondi / 1000; + distanceLabel = distanceArrondi + " km"; + } + + var divDistance = document.createElement("div"); + divDistance.id = this._addUID("GProuteResultsValueDist"); + divDistance.innerHTML = distanceLabel; + containerDistance.appendChild(divDistance); + + div.appendChild(containerDistance); + + var containerDuration = document.createElement("div"); + containerDuration.className = "GProuteResultsValue"; + + var labelDuration = document.createElement("label"); + labelDuration.className = "GProuteResultsValueLabel"; + labelDuration.innerHTML = "Durée :"; + containerDuration.appendChild(labelDuration); + + var divDuration = document.createElement("div"); + divDuration.id = this._addUID("GProuteResultsValueDist"); + divDuration.innerHTML = fconvert(duration); + containerDuration.appendChild(divDuration); + + div.appendChild(containerDuration); + + return div; + }, + + /** + * Create Show Results Details + * + * @returns {DOMElement} DOM element + */ + _createRouteShowResultsDetailsElement : function () { + var input = document.createElement("input"); + input.id = this._addUID("GProuteResultsShowDetails"); + input.type = "checkbox"; + return input; + }, + + /** + * Create Results Details + * + * @returns {DOMElement} DOM element + */ + _createRouteResultsDetailsElement : function () { + // + var div = document.createElement("div"); + div.id = this._addUID("GProuteResultsDetails"); + return div; + }, + + /** + * Add Results Details + * (results dynamically generate !) + * @param {Object[]} instructions - instructions + * @param {Function} fconvert - fconvert + * + * @returns {DOMElement} DOM element + */ + _addRouteResultsDetailsElement : function (instructions, fconvert) { + // contexte + var context = this; + + var div = document.getElementById(this._addUID("GProuteResultsDetails")); + + // clean ! + if (div.childElementCount) { + while (div.firstChild) { + div.removeChild(div.firstChild); + } + } + + // calcul des valeurs cumulé ! + var distanceCumul = 0; + var durationCumul = 0; + + /* jshint -W083 */ + for (var i = 0; i < instructions.length; i++) { + var id = i + 1; + + var o = instructions[i]; + + var divNum = document.createElement("div"); + divNum.className = "GProuteResultsDetailsNumber"; + divNum.innerHTML = id + "."; + div.appendChild(divNum); + + durationCumul += parseFloat(o.duration); + distanceCumul += parseFloat(o.distance); + + var distance = 0; + var isCumulKm = parseInt(distanceCumul / 1000, 10); + if (!isCumulKm) { + distance = Math.round(distanceCumul) + " m"; + } else { + var distanceArrondi = Math.round(distanceCumul); + distanceArrondi = distanceArrondi / 1000; + distance = distanceArrondi + " km"; + } + + var divIns = document.createElement("div"); + divIns.className = "GProuteResultsDetailsInstruction"; + divIns.id = this._addUID("GProuteResultsDetailsInstruction_" + id); + divIns.title = "distance : " + distance + " / " + "temps : " + fconvert(durationCumul); + divIns.innerHTML = o.instruction; + + divIns.addEventListener("mouseover", function (e) { + context.onRouteResultsDetailsMouseOver(e); + }); + divIns.addEventListener("mouseout", function (e) { + context.onRouteResultsDetailsMouseOut(e); + }); + divIns.addEventListener("click", function (e) { + // mode mobile ! + if (typeof context.onRouteResultsDetailsClick === "function") { + context.onRouteResultsDetailsClick(e); + } + }); + div.appendChild(divIns); + } + + return div; + }, + + // ################################################################### // + // ################### Methods to the form points #################### // + // ################# OVERWRITTEN BY LOCATIONSELECTOR ! ################# // + + /** + * Create Point + * see event ! + * OVERWRITTEN BY LOCATIONSELECTOR ! + * (version initial without LOCATIONSELECTOR PLUGIN) + * @param {Integer} n - n + * @param {String} text - text + * @param {Boolean} visibility - visibility + * + * @returns {DOMElement} DOM element + */ + _createRoutePanelFormPointElement : function (n, text, visibility) { + // contexte d'execution + var context = this; + + var div = document.createElement("div"); + div.id = "GProutePoint" + n; + div.className = (visibility) ? "GPflexInput GProuteStageFlexInput" : "GPflexInput GProuteStageFlexInputHidden"; + + var labelOrigin = document.createElement("label"); + labelOrigin.id = "GProuteOriginLabel" + n; + labelOrigin.htmlFor = "GProuteOrigin" + n; + labelOrigin.innerHTML = text; + labelOrigin.addEventListener("click", function () { + var i = this.id.charAt(this.id.length - 1); + document.getElementById("GProuteOriginCoords" + i).value = ""; + for (var j = 1; j < 8; j++) { + document.getElementById("GProutePoint" + j).style.display = "flex"; + } + document.getElementById("GProuteForm").className = ""; + document.getElementById("GProuteOriginPointer" + i).checked = false; + document.getElementById("GProuteOrigin" + i).className = "GProuteOriginVisible"; + document.getElementById("GProuteOriginCoords" + i).className = "GProuteOriginHidden"; + }); + div.appendChild(labelOrigin); + + var inputOrigin = document.createElement("input"); + inputOrigin.id = "GProuteOrigin" + n; + inputOrigin.className = "GProuteOriginVisible"; + inputOrigin.type = "text"; + inputOrigin.placeholder = "Saisir une adresse"; + inputOrigin.addEventListener("keyup", function (e) { + var charCode = e.which || e.keyCode; + if (charCode === 13 || charCode === 10) { + return; + } + var i = this.id.charAt(this.id.length - 1); + if (document.getElementById("GProuteOrigin" + i).value.length > 2) { + document.getElementById("GProuteAutoCompleteList" + i).style.display = "block"; + } else { + document.getElementById("GProuteAutoCompleteList" + i).style.display = "none"; + } + // gestionnaire d'evenement : + // on récupère la valeur de saisie pour une requête sur le service d'autocompletion. + // le resultat de la requête nous permet de recuperer les coordonnées du point... + context.onAutoCompleteSearchText(e); + }); + inputOrigin.addEventListener("blur", function () { + var i = this.id.charAt(this.id.length - 1); + document.getElementById("GProuteAutoCompleteList" + i).style.display = "none"; + }); + div.appendChild(inputOrigin); + + var inputOriginCoord = document.createElement("input"); + inputOriginCoord.id = "GProuteOriginCoords" + n; + inputOriginCoord.className = "GProuteOriginHidden"; + inputOriginCoord.type = "text"; + inputOriginCoord.disabled = true; + div.appendChild(inputOriginCoord); + + var inputOriginPointer = document.createElement("input"); + inputOriginPointer.id = "GProuteOriginPointer" + n; + inputOriginPointer.type = "checkbox"; + div.appendChild(inputOriginPointer); + + var labelOriginPointer = document.createElement("label"); + labelOriginPointer.id = "GProuteOriginPointerImg" + n; + labelOriginPointer.htmlFor = "GProuteOriginPointer" + n; + labelOriginPointer.className = "GProuteOriginPointerImg"; + labelOriginPointer.title = "Pointer un lieu sur la carte"; + labelOriginPointer.addEventListener("click", function (evt) { + evt.preventDefault(); + evt.stopPropagation(); + var i = this.id.charAt(this.id.length - 1); + var j; + for (j = 1; j < 8; j++) { + if (i !== j) { + document.getElementById("GProuteOriginPointer" + j).checked = false; + if (document.getElementById("GProuteOriginCoords" + j).value === "Pointer un lieu sur la carte") { + document.getElementById("GProuteOriginCoords" + j).value = ""; + document.getElementById("GProuteOrigin" + j).className = "GProuteOriginVisible"; + document.getElementById("GProuteOriginCoords" + j).className = "GProuteOriginHidden"; + } + } + } + if (document.getElementById("GProuteOriginPointer" + i).checked) { + document.getElementById("GProuteOriginCoords" + i).value = ""; + for (j = 1; j < 8; j++) { + document.getElementById("GProutePoint" + j).style.display = "flex"; + } + document.getElementById("GProuteForm").className = ""; + document.getElementById("GProuteOriginPointer" + i).checked = false; + document.getElementById("GProuteOrigin" + i).className = "GProuteOriginVisible"; + document.getElementById("GProuteOriginCoords" + i).className = "GProuteOriginHidden"; + } else { + document.getElementById("GProuteOriginCoords" + i).value = "Pointer un lieu sur la carte"; + for (j = 1; j < 8; j++) { + if (i === j) { + document.getElementById("GProutePoint" + j).style.display = "flex"; + } else { + document.getElementById("GProutePoint" + j).style.display = "none"; + } + } + document.getElementById("GProuteForm").className = "GProuteFormMini"; + document.getElementById("GProuteOriginPointer" + i).checked = true; + document.getElementById("GProuteOrigin" + i).className = "GProuteOriginHidden"; + document.getElementById("GProuteOriginCoords" + i).className = "GProuteOriginVisible"; + } + // gestionnaire d'evenement : + // on stocke la valeur du point, utilisée pour la requête sur le service de calcul d'itiniraire + context.onRouteMapPointClick(evt); + }); + div.appendChild(labelOriginPointer); + + return div; + }, + + /** + * Create Remove Point tag + * see event ! + * OVERWRITTEN BY LOCATIONSELECTOR ! + * (version initial without LOCATIONSELECTOR PLUGIN) + * @param {Integer} n - n + * + * @returns {DOMElement} DOM element + */ + _createRoutePanelFormRemoveStageElement : function (n) { + // contexte d'execution + var context = this; + + var divRm = document.createElement("div"); + divRm.id = "GProuteStageRemove" + n; + divRm.className = "GProuteStageRemove"; + divRm.title = "Supprimer l'étape"; + if (n !== 1 && n !== 7) { + divRm.addEventListener("click", function (e) { + var i = this.id.charAt(this.id.length - 1); + document.getElementById("GProutePoint" + i).className = "GPflexInput GProuteStageFlexInputHidden"; + document.getElementById("GProuteOrigin" + i).value = ""; + document.getElementById("GProuteOrigin" + i).className = "GProuteOriginVisible"; + document.getElementById("GProuteOriginCoords" + i).value = ""; + document.getElementById("GProuteOriginCoords" + i).className = "GProuteOriginHidden"; + document.getElementById("GProuteStageAdd").style.display = ""; + // Moving up exclusions picto + // var exclusionsPictoTop = document.getElementById("GPshowRouteExclusionsPicto").style.top; + // document.getElementById("GPshowRouteExclusionsPicto").style.top = (parseInt(exclusionsPictoTop, 10) - 33).toString() + "px"; + // gestionnaire d'evenement : + // on supprime le point, utilisé pour la requête sur le service d'itiniraire + context.onRouteRemovePointClick(e); + }); + } + return divRm; + }, + + /** + * Create Add Point tag + * see event ! + * OVERWRITTEN BY LOCATIONSELECTOR ! + * (version initial without LOCATIONSELECTOR PLUGIN) + * + * @returns {DOMElement} DOM element + */ + _createRoutePanelFormAddStageElement : function () { + // contexte d'execution + var context = this; + + var divAdd = document.createElement("div"); + divAdd.id = "GProuteStageAdd"; + divAdd.title = "Ajouter une étape"; + divAdd.addEventListener("click", function (e) { + var lastStage = 1; + var nbStages = 0; + for (var i = 2; i < 7; i++) { + if (document.getElementById("GProutePoint" + i).className === "GPflexInput GProuteStageFlexInputHidden") { + if (lastStage === 1) { + lastStage = i; + } + } else { + nbStages++; + } + } + if (lastStage < 7) { + document.getElementById("GProutePoint" + lastStage).className = "GPflexInput GProuteStageFlexInput"; + // Moving down exclusions picto + // var exclusionsPictoTop = document.getElementById("GPshowRouteExclusionsPicto").style.top; + // document.getElementById("GPshowRouteExclusionsPicto").style.top = (parseInt(exclusionsPictoTop, 10) + 33).toString() + "px"; + } + if (nbStages === 4) { + document.getElementById("GProuteStageAdd").style.display = "none"; + } + // gestionnaire d'evenement : + // on ajoute le point, utilisé pour la requête sur le service d'itiniraire + context.onRouteAddPointClick(e); + }); + + return divAdd; + }, + + /** + * Create Results autocompletion to the point + * see event! + * OVERWRITTEN BY LOCATIONSELECTOR ! + * (version initial without LOCATIONSELECTOR PLUGIN) + * @param {Integer} n - n + * + * @returns {DOMElement} DOM element + */ + _createRoutePanelFormAutoCompleteListElement : function (n) { + // contexte d'execution + var context = this; + + var div = document.createElement("div"); + div.id = "GProuteAutoCompleteList" + n; + div.className = "GPadvancedAutoCompleteList"; + + if (div.addEventListener) { + div.addEventListener("click", function (e) { + context.onAutoCompletedResultsItemClick(e); + document.getElementById("GProuteAutoCompleteList" + n).style.display = "none"; + }, false); + } else if (div.attachEvent) { + div.attachEvent("onclick", function (e) { + context.onAutoCompletedResultsItemClick(e); + document.getElementById("GProuteAutoCompleteList" + n).style.display = "none"; + }); + } + + // Proposals are dynamically filled in Javascript by autocomplete service + //
...
+ + return div; + }, + + /** + * Autocompletion result to a point. + * Proposals are dynamically filled in Javascript by autocomplete service + * OVERWRITTEN BY LOCATIONSELECTOR ! + * (version initial without LOCATIONSELECTOR PLUGIN) + * + * + * @param {Object} location - suggested location results + * @param {Number} n - number of the point + * @param {Number} id - ID + */ + _createRouteAutoCompletedLocationElement : function (location, n, id) { + var container = document.getElementById("GProuteAutoCompleteList" + n); + + var div = document.createElement("div"); + div.id = "AutoCompletedLocation" + id; + div.className = "GPautoCompleteProposal"; + div.innerHTML = location.fullText; + + container.appendChild(div); + }, + + // ################################################################### // + // ############## Methods to the choice mode into form ############### // + // ################################################################### // + + /** + * Create Container to Mode choice transport + * + * @returns {DOMElement} DOM element + */ + _createRoutePanelFormModeChoiceElement : function () { + var div = document.createElement("div"); + div.id = this._addUID("GProuteModeChoice"); + + // div.appendChild(this._createRoutePanelFormModeChoiceTransportElement()); + // div.appendChild(this._createRoutePanelFormModeChoiceComputeElement()); + + return div; + }, + + /** + * Create Mode choice transport + * see event ! + * FIXME event not useful + * @param {String[]} transports - transports + * + * @returns {DOMElement} DOM element + */ + _createRoutePanelFormModeChoiceTransportElement : function (transports) { + // contexte d'execution + var context = this; + + var div = document.createElement("div"); + div.id = this._addUID("GProuteTransportChoice"); + + var span = document.createElement("span"); + span.className = "GProuteModeLabel"; + span.innerHTML = "Mode de transport"; + div.appendChild(span); + + /* jshint -W083 */ + for (var i = 0; i < transports.length; i++) { + var transport = transports[i]; + + if (transport === "Voiture") { + var inputCar = document.createElement("input"); + inputCar.id = this._addUID("GProuteTransportCar"); + inputCar.type = "radio"; + inputCar.name = "GProuteTransport"; + inputCar.value = "Voiture"; + if (i === 0) { + inputCar.checked = true; + } + // gestionnaire d'evenement : + // on stocke le mode de transport, + // utilisation pour la requête sur le service de calcul d'itiniraire + if (inputCar.addEventListener) { + inputCar.addEventListener("change", function (e) { + context.onRouteModeTransportChange(e); + }); + } else if (inputCar.attachEvent) { + inputCar.attachEvent("onchange", function (e) { + context.onRouteModeTransportChange(e); + }); + } + div.appendChild(inputCar); + + var labelCar = document.createElement("label"); + labelCar.className = "GProuteTransportImg"; + labelCar.htmlFor = this._addUID("GProuteTransportCar"); + labelCar.title = "Voiture"; + div.appendChild(labelCar); + } + + if (transport === "Pieton") { + var inputPedestrian = document.createElement("input"); + inputPedestrian.id = this._addUID("GProuteTransportPedestrian"); + inputPedestrian.type = "radio"; + inputPedestrian.name = "GProuteTransport"; + inputPedestrian.value = "Pieton"; + if (i === 0) { + inputPedestrian.checked = true; + } + // gestionnaire d'evenement : + // on stocke le mode de transport, + // utilisation pour la requête sur le service de calcul d'itiniraire + if (inputPedestrian.addEventListener) { + inputPedestrian.addEventListener("change", function (e) { + context.onRouteModeTransportChange(e); + }); + } else if (inputPedestrian.attachEvent) { + inputPedestrian.attachEvent("onchange", function (e) { + context.onRouteModeTransportChange(e); + }); + } + div.appendChild(inputPedestrian); + + var labelPedestrian = document.createElement("label"); + labelPedestrian.className = "GProuteTransportImg"; + labelPedestrian.htmlFor = this._addUID("GProuteTransportPedestrian"); + labelPedestrian.title = "Piéton"; + div.appendChild(labelPedestrian); + } + } + + return div; + }, + + /** + * Create Mode choice computation + * see event! + * + * @returns {DOMElement} DOM element + */ + _createRoutePanelFormModeChoiceComputeElement : function () { + // contexte d'execution + var context = this; + + var div = document.createElement("div"); + div.id = this._addUID("GProuteComputationChoice"); + + var span = document.createElement("span"); + span.className = "GProuteModeLabel"; + span.innerHTML = "Mode de calcul"; + div.appendChild(span); + + var select = document.createElement("select"); + select.id = this._addUID("GProuteComputationSelect"); + select.className = "GPinputSelect"; + // gestionnaire d'evenement : + // on stocke la valeur du mode de calcul, + // utilisation pour la requête sur le service de calcul d'itiniraire + select.addEventListener("change", function (e) { + context.onRouteModeComputationChange(e); + }); + + var computes = [{ + code : "fastest", + label : "Plus rapide" + }, { + code : "shortest", + label : "Plus court" + }]; + + for (var i = 0; i < computes.length; i++) { + var option = document.createElement("option"); + option.value = computes[i].code; + option.text = computes[i].label; + select.appendChild(option); + } + div.appendChild(select); + + return div; + }, + + // ################################################################### // + // ################# Methods to the choice exclusions ################ // + // ################################################################### // + + /** + * Hidden checkbox for minimizing/maximizing Exclusions Options + * + * @returns {DOMElement} DOM element + */ + _createShowRouteExclusionsElement : function () { + var input = document.createElement("input"); + input.id = this._addUID("GPshowRouteExclusions"); + input.type = "checkbox"; + return input; + }, + + /** + * Label to Exclusions Options + * see event ! + * FIXME event not useful + * + * @returns {DOMElement} DOM element + */ + _createShowRouteExclusionsPictoElement : function () { + // contexte d'execution + var context = this; + + var label = document.createElement("label"); + label.id = this._addUID("GPshowRouteExclusionsPicto"); + label.className = "GPshowMoreOptionsImage GPshowMoreOptions GPshowRouteExclusionsPicto"; + label.htmlFor = this._addUID("GPshowRouteExclusions"); + label.title = "Exclusions"; + // label.style.top = "185px"; + + // gestionnaire d'evenement : + // on ouvre le menu des options des exclusions + if (label.addEventListener) { + label.addEventListener("click", function (e) { + context.onShowRouteExclusionsClick(e); + }); + } else if (label.attachEvent) { + label.attachEvent("onclick", function (e) { + context.onShowRouteExclusionsClick(e); + }); + } + + return label; + }, + + /** + * Create Container to Exclusions + * + * @returns {DOMElement} DOM element + */ + _createRoutePanelFormExclusionsElement : function () { + var div = document.createElement("div"); + div.id = this._addUID("GProuteExclusions"); + + var span = document.createElement("span"); + span.className = "GProuteExclusionsLabel"; + span.innerHTML = "Passages autorisés"; + div.appendChild(span); + + // div.appendChild(this._createRoutePanelFormExclusionOptionsElement()); + + return div; + }, + + /** + * Create Exclusions Options + * see event ! + * FIXME event not useful + * @param {Object[]} exclusions - exclusions + * + * @returns {DOMElement} DOM element + */ + _createRoutePanelFormExclusionOptionsElement : function (exclusions) { + // contexte d'execution + var context = this; + + var div = document.createElement("div"); + div.className = "GProuteExclusionsOptions"; + + /* jshint -W083 */ + for (var value in exclusions) { + if (exclusions.hasOwnProperty(value)) { + var status = exclusions[value]; + switch (value) { + case "toll": + var inputToll = document.createElement("input"); + inputToll.id = this._addUID("GProuteExclusionsToll"); + inputToll.type = "checkbox"; + inputToll.value = "Toll"; + inputToll.checked = !status; + // gestionnaire d'evenement : + // on stocke l'exclusion, + // utilisation pour la requête sur le service de calcul d'itiniraire + if (inputToll.addEventListener) { + inputToll.addEventListener("change", function (e) { + context.onRouteExclusionsChange(e); + }); + } else if (inputToll.attachEvent) { + inputToll.attachEvent("onchange", function (e) { + context.onRouteExclusionsChange(e); + }); + } + div.appendChild(inputToll); + + var labelToll = document.createElement("label"); + labelToll.className = "GProuteExclusionsOption"; + labelToll.htmlFor = this._addUID("GProuteExclusionsToll"); + labelToll.innerHTML = "Péages"; + div.appendChild(labelToll); + break; + + case "tunnel": + var inputTunnel = document.createElement("input"); + inputTunnel.id = this._addUID("GProuteExclusionsTunnel"); + inputTunnel.type = "checkbox"; + inputTunnel.value = "Tunnel"; + inputTunnel.checked = !status; + // gestionnaire d'evenement : + // on stocke l'exclusion, + // utilisation pour la requête sur le service de calcul d'itiniraire + if (inputTunnel.addEventListener) { + inputTunnel.addEventListener("change", function (e) { + context.onRouteExclusionsChange(e); + }); + } else if (inputTunnel.attachEvent) { + inputTunnel.attachEvent("onchange", function (e) { + context.onRouteExclusionsChange(e); + }); + } + div.appendChild(inputTunnel); + + var labelTunnel = document.createElement("label"); + labelTunnel.className = "GProuteExclusionsOption"; + labelTunnel.htmlFor = this._addUID("GProuteExclusionsTunnel"); + labelTunnel.innerHTML = "Tunnels"; + div.appendChild(labelTunnel); + break; + + case "bridge": + var inputBridge = document.createElement("input"); + inputBridge.id = this._addUID("GProuteExclusionsBridge"); + inputBridge.type = "checkbox"; + inputBridge.value = "Bridge"; + inputBridge.checked = !status; + // gestionnaire d'evenement : + // on stocke l'exclusion, + // utilisation pour la requête sur le service de calcul d'itiniraire + if (inputBridge.addEventListener) { + inputBridge.addEventListener("change", function (e) { + context.onRouteExclusionsChange(e); + }); + } else if (inputBridge.attachEvent) { + inputBridge.attachEvent("onchange", function (e) { + context.onRouteExclusionsChange(e); + }); + } + div.appendChild(inputBridge); + + var labelBridge = document.createElement("label"); + labelBridge.className = "GProuteExclusionsOption"; + labelBridge.htmlFor = this._addUID("GProuteExclusionsBridge"); + labelBridge.innerHTML = "Ponts"; + div.appendChild(labelBridge); + break; + } + } + } + + return div; + }, + + // ################################################################### // + // ############################### Submit Form ####################### // + // ################################################################### // + + /** + * Create Submit Form Element + * + * @returns {DOMElement} DOM element + */ + _createRouteSubmitFormElement : function () { + var input = document.createElement("input"); + input.id = this._addUID("GProuteSubmit"); + input.className = "GPinputSubmit"; + input.type = "submit"; + input.value = "Calculer"; + + return input; + }, + + // ################################################################### // + // ############################### Reset picto ####################### // + // ################################################################### // + + /** + * Create Reset Picto Element + * + * @returns {DOMElement} DOM element + */ + _createRouteFormResetElement : function () { + var self = this; + + var divReset = document.createElement("div"); + divReset.id = this._addUID("GProuteReset"); + divReset.title = "Réinitialiser les paramètres"; + divReset.addEventListener("click", function (e) { + self.onRouteResetClick(e); + }); + + return divReset; + } +}; + +export default RouteDOM; diff --git a/src/Common-review/Controls/ScaleDOM.js b/src/Common-review/Controls/ScaleDOM.js new file mode 100644 index 000000000..826eb2a8f --- /dev/null +++ b/src/Common-review/Controls/ScaleDOM.js @@ -0,0 +1,26 @@ +var ScaleDOM = { + + /** + * Add uuid to the tag ID + * @param {String} id - id selector + * @returns {String} uid - id selector with an unique id + */ + _addUID : function (id) { + var uid = (this._uid) ? id + "-" + this._uid : id; + return uid; + }, + + /** + * Main container (DOM) + * + * @returns {DOMElement} DOM element + */ + _createMainContainerElement : function () { + var container = document.createElement("div"); + container.id = this._addUID("GPscaleContainer"); + container.className = "GPwidget"; + return container; + } +}; + +export default ScaleDOM; diff --git a/src/Common-review/Controls/SearchEngineDOM.js b/src/Common-review/Controls/SearchEngineDOM.js new file mode 100644 index 000000000..c9dfbb5b7 --- /dev/null +++ b/src/Common-review/Controls/SearchEngineDOM.js @@ -0,0 +1,747 @@ +import ID from "../Utils/SelectorID"; + +var SearchEngineDOM = { + + /** + * Add uuid to the tag ID + * @param {String} id - id selector + * @returns {String} uid - id selector with an unique id + */ + _addUID : function (id) { + var uid = (this._uid) ? id + "-" + this._uid : id; + return uid; + }, + + /** + * Main container (DOM) + * + * @returns {DOMElement} DOM element + */ + _createMainContainerElement : function () { + var container = document.createElement("div"); + container.id = this._addUID("GPsearchEngine"); + container.className = "GPwidget"; + return container; + }, + + // ################################################################### // + // ################### Methods of main container ##################### // + // ################################################################### // + + /** + * Hidden checkbox for minimizing/maximizing + * + * @returns {DOMElement} DOM element + */ + _createShowSearchEngineElement : function () { + var input = document.createElement("input"); + input.id = this._addUID("GPshowSearchEngine"); + input.type = "checkbox"; + return input; + }, + + /** + * Show search engine + * + * @returns {DOMElement} DOM element + */ + _createShowSearchEnginePictoElement : function () { + // contexte d'execution + var self = this; + + var label = document.createElement("label"); + label.id = this._addUID("GPshowSearchEnginePicto"); + label.className = "GPshowAdvancedToolPicto"; + label.htmlFor = this._addUID("GPshowSearchEngine"); + label.title = "Afficher/masquer la recherche par lieux"; + + // Close all results and panels when minimizing the widget + label.addEventListener("click", function () { + document.getElementById(self._addUID("GPautoCompleteList")).style.display = "none"; + document.getElementById(self._addUID("GPgeocodeResultsList")).style.display = "none"; + var showAdvancedSearch = document.getElementById(self._addUID("GPshowAdvancedSearch")); + if (showAdvancedSearch) { + showAdvancedSearch.style.display = null; + document.getElementById(self._addUID("GPadvancedSearchPanel")).style.display = "none"; + } + var id = "#GPsearchInput-" + self._uid; + document.querySelector(id + " input").disabled = false; // FIXME form[id^=GPsearchInput] = #GPsearchInput ? + self.onShowSearchEngineClick(); + }); + + var spanOpen = document.createElement("span"); + spanOpen.id = this._addUID("GPshowSearchEngineOpen"); + spanOpen.className = "GPshowAdvancedToolOpen"; + label.appendChild(spanOpen); + + return label; + }, + + /** + * Simple search input + * @param {String} placeholder - placeholder + * + * @returns {DOMElement} DOM element + */ + _createSearchInputElement : function (placeholder) { + // contexte d'execution + var self = this; + + var form = document.createElement("form"); + form.id = this._addUID("GPsearchInput"); + // Open geocode results panel when submitting the input + form.addEventListener("submit", function (e) { + e.preventDefault(); + document.getElementById(self._addUID("GPgeocodeResultsList")).style.display = "block"; + document.getElementById(self._addUID("GPautoCompleteList")).style.display = "none"; + // cf. FIXME + // document.querySelector("#GPsearchInput input").blur (); + + // gestionnaire d'evenement : + // on récupère la valeur de saisie pour requête sur le service de geocodage + self.onGeocodingSearchSubmit(e); + return false; + }); + + var input = document.createElement("input"); + input.id = this._addUID("GPsearchInputText"); + input.type = "text"; + input.placeholder = placeholder; + input.autocomplete = "off"; + // Manage autocomplete list appearance when filling the address input + input.addEventListener("keyup", function (e) { + var charCode = e.which || e.keyCode; + if (charCode === 13 || charCode === 10 || charCode === 38 || charCode === 40) { + return; + } + document.getElementById(self._addUID("GPgeocodeResultsList")).style.display = "none"; + if (input.value.length > 2) { + document.getElementById(self._addUID("GPautoCompleteList")).style.display = "block"; + } else { + document.getElementById(self._addUID("GPautoCompleteList")).style.display = "none"; + } + // gestionnaire d'evenement : + // on récupère la valeur de saisie pour requête sur le service d'autocompletion + self.onAutoCompleteSearchText(e); + }); + + // FIXME ce code interfere avec le click sur la liste des suggested locations ! + // input.addEventListener("blur", function(e) { + // document.getElementById(self._addUID("GPautoCompleteList")).style.display = "none"; + // }); + + input.addEventListener("keydown", function (e) { + // FIXME + // l'action clavier 'enter (13)' lance le submit de la form ! + // Ce comportement n'est pas souhaité car le submit execute un geocodage ! + // Il faut donc trouver le moyen d'eviter le submit sur un return venant + // seulement d'une selection de suggestion... + + var charCode = e.which || e.keyCode; + + var container = document.getElementById(self._addUID("GPautocompleteResults")); + + // si aucun container !? + if (!container) { + return; + } + + var curr = container.getElementsByClassName("GPautoCompleteProposal current"); + var list = container.getElementsByClassName("GPautoCompleteProposal"); + + // si aucune suggestion, on ne va pas plus loin ! + var length = list.length; + if (!length) { + return; + } + + var current = null; + + // si aucun item courant, on prend le 1er ! + if (!curr.length) { + current = list[0]; + current.className = "GPautoCompleteProposal current"; + current.style.color = "#000000"; + current.style["background-color"] = "#CEDBEF"; + return; + } else { + current = curr[0]; + } + + var index = parseInt(ID.index(current.id), 10); + var next = (index === length - 1) ? list[0] : list[index + 1]; + var prev = (index === 0) ? list[length - 1] : list[index - 1]; + + current.style["background-color"] = ""; + current.style.color = ""; + prev.style["background-color"] = ""; + prev.style.color = ""; + next.style["background-color"] = ""; + next.style.color = ""; + + switch (charCode) { + case 38: // arrow up + current.className = "GPautoCompleteProposal"; + prev.className = "GPautoCompleteProposal current"; + prev.style.color = "#000000"; + prev.style["background-color"] = "#CEDBEF"; + break; + case 40: // arrow down + current.className = "GPautoCompleteProposal"; + next.className = "GPautoCompleteProposal current"; + next.style.color = "#000000"; + next.style["background-color"] = "#CEDBEF"; + break; + case 13: // enter + // cf. FIXME + e.preventDefault(); + current.click(e); + break; + } + + current.focus(); + }); + + form.appendChild(input); + + var div = document.createElement("div"); + div.id = this._addUID("GPsearchInputReset"); + // Reset input + div.addEventListener("click", function () { + document.getElementById(self._addUID("GPsearchInputText")).value = ""; + document.getElementById(self._addUID("GPautoCompleteList")).style.display = "none"; + document.getElementById(self._addUID("GPgeocodeResultsList")).style.display = "none"; + self.onSearchResetClick(); + }); + form.appendChild(div); + + return form; + }, + + /** + * Show advanced search panel + * + * @returns {DOMElement} DOM element + */ + _createShowAdvancedSearchElement : function () { + // contexte d'execution + var self = this; + + var div = document.createElement("div"); + div.id = this._addUID("GPshowAdvancedSearch"); + div.className = "GPshowAdvancedToolPicto"; + div.title = "Ouvrir la recherche avancée"; + + // Open advanced search + div.addEventListener("click", function () { + var id = "#GPsearchInput-" + self._uid; + document.querySelector(id + " input").disabled = true; + document.getElementById(self._addUID("GPautoCompleteList")).style.display = "none"; + document.getElementById(self._addUID("GPgeocodeResultsList")).style.display = "none"; + document.getElementById(self._addUID("GPshowAdvancedSearch")).style.display = "none"; + document.getElementById(self._addUID("GPadvancedSearchPanel")).style.display = "inline-block"; + }); + + var span = document.createElement("span"); + span.id = this._addUID("GPshowAdvancedSearchOpen"); + span.className = "GPshowAdvancedToolOpen"; + div.appendChild(span); + + return div; + }, + + /** + * Advanced search panel + * + * FIXME + * don't call this._createAdvancedSearchPanelHeaderElement + * don't call this._createAdvancedSearchPanelFormElement + * + * @returns {DOMElement} DOM element + */ + _createAdvancedSearchPanelElement : function () { + var div = document.createElement("div"); + div.id = this._addUID("GPadvancedSearchPanel"); + div.className = "GPpanel"; + div.style.display = "none"; + + // FIXME on decompose la fonction pour les besoins du controle, + // on ajoutera ces childs à la main... + // div.appendChild(this._createAdvancedSearchPanelHeaderElement ()); + // div.appendChild(this._createAdvancedSearchPanelFormElement ()); + + return div; + }, + + /** + * Geocoding results + * + * FIXME + * don't call this._createGeocodeResultsListElement + * + * @returns {DOMElement} DOM element + */ + _createGeocodeResultsElement : function () { + var div = document.createElement("div"); + div.id = this._addUID("GPgeocodeResultsList"); + div.className = "GPpanel"; + div.style.display = "none"; + + div.appendChild(this._createGeocodeResultsHeaderElement()); + + // FIXME on decompose la fonction pour les besoins du controle, + // on ajoutera ces childs à la main... + // div.appendChild(this._createGeocodeResultsListElement ()); + + return div; + }, + + /** + * Autocompletion results + * + * FIXME + * don't call this._createAutoCompleteListElement + * + * @returns {DOMElement} DOM element + */ + _createAutoCompleteElement : function () { + var div = document.createElement("div"); + div.id = this._addUID("GPautoCompleteList"); + div.className = "GPautoCompleteList"; // GPpanel ? + div.style.display = "none"; + + // FIXME on decompose la fonction pour les besoins du controle, + // on ajoutera ces childs à la main... + // div.appendChild(this._createAutoCompleteListElement ()); + + return div; + }, + + // ################################################################### // + // ################### Autocompletion container ###################### // + // ################################################################### // + + /** + * Autocompletion results list. + * + * @returns {DOMElement} DOM element + */ + _createAutoCompleteListElement : function () { + // contexte d'execution + var self = this; + + var container = document.createElement("div"); + container.id = this._addUID("GPautocompleteResults"); + + if (container.addEventListener) { + container.addEventListener("click", function (e) { + self.onAutoCompletedResultsItemClick(e); + document.getElementById(self._addUID("GPautoCompleteList")).style.display = "none"; + }, false); + } else if (container.attachEvent) { + container.attachEvent("onclick", function (e) { + self.onAutoCompletedResultsItemClick(e); + document.getElementById(self._addUID("GPautoCompleteList")).style.display = "none"; + }); + } + + // Proposals are dynamically filled in Javascript by autocomplete service + //
...
+ + return container; + }, + + /** + * Autocompletion result. + * Proposals are dynamically filled in Javascript by autocomplete service + * + * TODO formaliser le contenu des reponse + * + * @param {Object} location - suggested or geocoded location results + * @param {Number} id - ID + */ + _createAutoCompletedLocationElement : function (location, id) { + var container = document.getElementById(this._addUID("GPautocompleteResults")); + + var div = document.createElement("div"); + div.id = this._addUID("AutoCompletedLocation_" + id); + div.className = "GPautoCompleteProposal"; + div.innerHTML = location.fullText; + if (div.addEventListener) { + div.addEventListener("click", function (e) { + container.click(e); + }, false); + } else if (div.attachEvent) { + div.attachEvent("onclick", function (e) { + container.click(e); + }); + } + + container.appendChild(div); + }, + + // ################################################################### // + // ############### Geocoding with advanced container ################# // + // ################################################################### // + + /** + * @returns {DOMElement} DOM element + */ + _createAdvancedSearchPanelHeaderElement : function () { + // contexte d'execution + var self = this; + + var container = document.createElement("div"); + container.className = "GPpanelHeader"; + + var divTitle = document.createElement("div"); + divTitle.className = "GPpanelTitle"; + divTitle.innerHTML = "Recherche avancée"; + container.appendChild(divTitle); + + var divClose = document.createElement("div"); + divClose.id = this._addUID("GPadvancedSearchClose"); + divClose.className = "GPpanelClose"; + divClose.title = "Fermer la recherche avancée"; + + if (divClose.addEventListener) { + divClose.addEventListener("click", function () { + var id = "#GPsearchInput-" + self._uid; + document.querySelector(id + " input").disabled = false; + document.getElementById(self._addUID("GPgeocodeResultsList")).style.display = "none"; + document.getElementById(self._addUID("GPshowAdvancedSearch")).style.display = "inline-block"; + document.getElementById(self._addUID("GPadvancedSearchPanel")).style.display = "none"; + }, false); + } else if (divClose.attachEvent) { + divClose.attachEvent("onclick", function () { + var id = "#GPsearchInput-" + self._uid; + document.querySelector(id + " input").disabled = false; + document.getElementById(self._addUID("GPgeocodeResultsList")).style.display = "none"; + document.getElementById(self._addUID("GPshowAdvancedSearch")).style.display = "inline-block"; + document.getElementById(self._addUID("GPadvancedSearchPanel")).style.display = "none"; + }); + } + + container.appendChild(divClose); + + return container; + }, + + /** + * @param {Object[]} advancedSearchCodes - codes + * + * @returns {DOMElement} DOM element + */ + _createAdvancedSearchPanelFormElement : function (advancedSearchCodes) { + // contexte d'execution + var self = this; + + var form = document.createElement("form"); + form.id = this._addUID("GPadvancedSearchForm"); + form.addEventListener("submit", function (e) { + e.preventDefault(); + // data + var data = []; + // liste des attributs de la ressource de geocodage + var id = "#GPadvancedSearchFilters-" + self._uid; + var matchesFilters = document.querySelectorAll(id + " > div > div > input"); + for (var i = 0; i < matchesFilters.length; i++) { + var element = matchesFilters[i]; + data.push({ + key : element.name, + value : element.value + }); + } + + // gestionnaire d'evenement : + // on récupère les valeurs de saisies pour requête sur le service de geocodage + self.onGeocodingAdvancedSearchSubmit(e, data); + document.getElementById(self._addUID("GPgeocodeResultsList")).style.display = "block"; + + return false; + }); + + var div = document.createElement("div"); + div.className = "GPflexInput"; + + var label = document.createElement("label"); + label.className = "GPadvancedSearchCodeLabel"; + label.innerHTML = "Recherche par"; + div.appendChild(label); + + var select = this._createAdvancedSearchFormCodeElement(advancedSearchCodes); + div.appendChild(select); + + // FIXME on decompose la fonction pour les besoins du controle, + // on ajoutera ces childs à la main... + + // var filters = this._createAdvancedSearchFormFiltersElement (); + // form.appendChild(filters); + + // var input = this._createAdvancedSearchFormInputElement (); + // form.appendChild(input); + + form.appendChild(div); + + return form; + }, + + /** + * @param {Object[]} codes - codes + * @returns {DOMElement} DOM element + */ + _createAdvancedSearchFormCodeElement : function (codes) { + // contexte d'execution + var self = this; + + var select = document.createElement("select"); + select.id = this._addUID("GPadvancedSearchCode"); + select.className = "GPadvancedSearchCode"; + select.addEventListener("change", function (e) { + // var idx = e.target.selectedIndex; + // var value = e.target.options[idx].value; + // gestionnaire d'evenement : + // permet de recuperer des informations diverses... + self.onGeocodingAdvancedSearchCodeChange(e); + }, false); + + // liste statique au cas où des codes n'ont pas été passés en entrée + if (!codes) { + codes = [{ + id : "PositionOfInterest", + title : "Lieux/toponymes" + }, { + id : "StreetAddress", + title : "Adresses" + }, { + id : "CadastralParcel", + title : "Parcelles cadastrales" + }, { + id : "Administratif", + title : "Administratif" + }]; + } + + for (var i = 0; i < codes.length; i++) { + var option = document.createElement("option"); + option.value = codes[i].id; + option.text = codes[i].title; + select.appendChild(option); + } + + return select; + }, + + /** + * @returns {DOMElement} DOM element + */ + _createAdvancedSearchFormInputElement : function () { + var input = document.createElement("input"); + input.type = "submit"; + input.id = this._addUID("GPadvancedSearchSubmit"); + input.className = "GPinputSubmit"; + input.value = "Chercher"; + + return input; + }, + + /** + * Filters geocoding. + * + * @returns {DOMElement} DOM element + */ + _createAdvancedSearchFormFiltersElement : function () { + var container = document.createElement("div"); + container.id = this._addUID("GPadvancedSearchFilters"); + return container; + }, + + /** + * Create filter container for resources : + * "PositionOfInterest", "StreetAddress", ... + * + * @param {String} code - code of geocoding resource + * @param {Boolean} display - display + * + * @returns {DOMElement} DOM element + */ + _createAdvancedSearchFiltersTableElement : function (code, display) { + var container = document.createElement("div"); + container.id = this._addUID(code); + if (!display) { + container.style.display = "none"; + } + + return container; + }, + + /** + * Create filter attribut for a resource : + * "PositionOfInterest", "StreetAddress", ... + * Research filters are filled in Javascript depending on developer choice + * + * @param {Object} filterAttributes - filter attributes : + * @param {String} filterAttributes.code - code of geocoding resource + * @param {String} filterAttributes.name - ID + * @param {String} filterAttributes.title - label + * @param {String} filterAttributes.description - description + * @param {String} filterAttributes.value - value + * + * @returns {DOMElement} DOM element + */ + _createAdvancedSearchFiltersAttributElement : function (filterAttributes) { + // INFORMATION + // cette methode peut être appelée si le document n'existe pas, elle + // permet ainsi de creer une div sans insertion dans le container... + + var container = null; + var name = filterAttributes.name; + var title = filterAttributes.title; + var description = filterAttributes.description; + var code = filterAttributes.code; + var value = filterAttributes.value; + + var div = document.createElement("div"); + div.className = "GPflexInput"; + + var label = document.createElement("label"); + label.className = "GPadvancedSearchFilterLabel"; + label.htmlFor = name; + label.title = description || title; + label.innerHTML = title; + div.appendChild(label); + + var input = document.createElement("input"); + input.id = name; + input.className = "GPadvancedSearchFilterInput"; + input.type = "text"; + input.name = name; + if (value) { + input.value = value; + } + div.appendChild(input); + + container = document.getElementById(this._addUID(code)); + + if (container) { + container.appendChild(div); + } else { + // le container, c'est la div ! + container = div; + } + + return container; + }, + + // ################################################################### // + // ################## Geocoding results container #################### // + // ################################################################### // + + /** + * @returns {DOMElement} DOM element + */ + _createGeocodeResultsHeaderElement : function () { + var self = this; + + var container = document.createElement("div"); + container.className = "GPpanelHeader"; + + var divTitle = document.createElement("div"); + divTitle.className = "GPpanelTitle"; + divTitle.innerHTML = "Résultats de la recherche"; + container.appendChild(divTitle); + + var divClose = document.createElement("div"); + divClose.id = this._addUID("GPgeocodeResultsClose"); + divClose.className = "GPpanelClose"; + divClose.title = "Fermer la fenêtre de résultats"; + + if (divClose.addEventListener) { + divClose.addEventListener("click", function () { + document.getElementById(self._addUID("GPgeocodeResultsList")).style.display = "none"; + }, false); + } else if (divClose.attachEvent) { + divClose.attachEvent("onclick", function () { + document.getElementById(self._addUID("GPgeocodeResultsList")).style.display = "none"; + }); + } + container.appendChild(divClose); + + return container; + }, + + /** + * Geocoding results list. + * + * @returns {DOMElement} DOM element + */ + _createGeocodeResultsListElement : function () { + // contexte d'execution + var self = this; + + var container = document.createElement("div"); + container.id = this._addUID("GPgeocodeResults"); + + if (container.addEventListener) { + container.addEventListener("click", function (e) { + if (!e.ctrlKey) { + document.getElementById(self._addUID("GPgeocodeResultsList")).style.display = "none"; + } + self.onGeocodedResultsItemClick(e); + }, false); + } else if (container.attachEvent) { + container.attachEvent("onclick", function (e) { + if (!e.ctrlKey) { + document.getElementById(self._addUID("GPgeocodeResultsList")).style.display = "none"; + } + self.onGeocodedResultsItemClick(e); + }); + } + // Results are dynamically filled in Javascript by geocoding service + //
...
+ + return container; + }, + + /** + * Geocoding result. + * Results are dynamically filled in Javascript by geocoding service + * + * TODO formaliser le contenu des reponses + * FIXME formater la reponse en amont ! + * + * @param {Object} location - suggested or geocoded location results + * @param {Number} id - ID + */ + _createGeocodedLocationElement : function (location, id) { + var container = document.getElementById(this._addUID("GPgeocodeResults")); + + var div = document.createElement("div"); + div.id = this._addUID("GeocodedLocation_" + id); + div.className = "GPautoCompleteProposal"; + + if (typeof location === "string") { + div.innerHTML = location; + } else { + var places = location.placeAttributes; + + if (places.freeform) { + // reponse en freeForm + div.innerHTML = places.freeform; + } else if (places.postalCode) { + // cas des StreetAddress, PositionOfInterest, Administratif + // on affiche uniquement ce qui est commun aux ressources ... + div.innerHTML = places.postalCode + " " + places.commune; + } else if (places.cadastralParcel) { + // cas des CadastralParcel + div.innerHTML = places.cadastralParcel; + } else { + div.innerHTML = "..."; + } + } + + container.appendChild(div); + } +}; + +export default SearchEngineDOM; diff --git a/src/Common-review/Styles.js b/src/Common-review/Styles.js new file mode 100644 index 000000000..ad280fa0f --- /dev/null +++ b/src/Common-review/Styles.js @@ -0,0 +1,17 @@ +import "./CSS/GPboostRelief.css"; +import "./CSS/GPdrawing.css"; +import "./CSS/GPelevationPath.css"; +import "./CSS/GPgeneralWidget.css"; +import "./CSS/GPgetFeatureInfo.css"; +import "./CSS/GPisochron.css"; +import "./CSS/GPlayerSwitcher.css"; +import "./CSS/GPlocation.css"; +import "./CSS/GPmeasureArea.css"; +import "./CSS/GPmeasureAzimuth.css"; +import "./CSS/GPmeasureLength.css"; +import "./CSS/GPmeasureToolTip.css"; +import "./CSS/GPmousePosition.css"; +import "./CSS/GPreverseGeocoding.css"; +import "./CSS/GProute.css"; +import "./CSS/GPsearchEngine.css"; +import "./CSS/GPwaiting.css"; diff --git a/src/Common-review/Utils.js b/src/Common-review/Utils.js new file mode 100644 index 000000000..a303fb92c --- /dev/null +++ b/src/Common-review/Utils.js @@ -0,0 +1,98 @@ +/** +* @module Utils +* @alias Gp.olUtils +* @description +* ... +* +* @example +* detectSupport(); +* assign(); +* mergeParams(); +*/ +var Utils = { + + /** + * this method is called by the constructor. + * this information is useful to switch to touch mode. + * Detection : test for desktop or tactile + * + * @returns {Boolean} isDesktop - true for desktop userAgent, false for mobile + */ + detectSupport : function () { + var isDesktop = true; + var userAgent = window.navigator.userAgent.toLowerCase(); + + if (userAgent.indexOf("iphone") !== -1 || + userAgent.indexOf("ipod") !== -1 || + userAgent.indexOf("ipad") !== -1 || + userAgent.indexOf("android") !== -1 || + userAgent.indexOf("mobile") !== -1 || + userAgent.indexOf("blackberry") !== -1 || + userAgent.indexOf("tablet") !== -1 || + userAgent.indexOf("phone") !== -1 || + userAgent.indexOf("touch") !== -1) { + isDesktop = false; + } + + if (userAgent.indexOf("msie") !== -1 || + userAgent.indexOf("trident") !== -1) { + isDesktop = true; + } + + return isDesktop; + }, + + /** + * Copies all source object members to dest + * + * @param {Object} dest - destination object where properties and method will be copied + * @param {Object} source - source object from which properties and method will be copied + * @returns {Object} dest + */ + assign : function (dest, source) { + dest = dest || {}; + for (var prop in source) { + if (source.hasOwnProperty(prop)) { + dest[prop] = source[prop]; + } + } + return dest; + }, + + /** + * Merge two objects parameters (deeper than assign) + * + * @param {Object} dest - destination object where properties and method will be merge + * @param {Object} source - source object from which properties and method will be merge + * @param {Boolean} replace - replace destination value by source if exists or not (true by default) + */ + mergeParams : function (dest, source, replace) { + if (!dest || !source) { + return; + } + if (typeof replace === "undefined") { + replace = true; + } + for (var param in source) { + if (source.hasOwnProperty(param)) { + if (typeof source[param] === "object") { + if (dest.hasOwnProperty(param)) { + this.mergeParams(dest[param], source[param], replace); + } else { + dest[param] = source[param]; + } + } else { + if (dest.hasOwnProperty(param)) { + if (replace) { + dest[param] = source[param]; + } + } else { + dest[param] = source[param]; + } + } + } + } + } +}; + +export default Utils; diff --git a/src/Common-review/Utils/AutoLoadConfig.js b/src/Common-review/Utils/AutoLoadConfig.js new file mode 100644 index 000000000..36122b19b --- /dev/null +++ b/src/Common-review/Utils/AutoLoadConfig.js @@ -0,0 +1,58 @@ +import Gp from "geoportal-access-lib"; + +(function () { + var scripts = document.getElementsByTagName("script"); + + var key = scripts[scripts.length - 1].getAttribute("data-key"); + // in case of several keys + if (key) { + var splitKeys = key.split(/;|,|\|/); + if (key && splitKeys.length > 1) { + var keys = []; + for (var i = 0; i < splitKeys.length; i++) { + keys.push(splitKeys[i]); + } + key = keys; + } + } + var url = scripts[scripts.length - 1].getAttribute("data-url"); + var timeout = scripts[scripts.length - 1].getAttribute("data-timeout"); + + // callback + var success = function () { + // Pas de messages en mode prod + // console.log("GetConfig success!"); + }; + + // callback + var error = function (e) { + throw new Error("Configuration load failed : " + e.message); + }; + + if (!key && !url) { + // pas de message d'information ! + // console.log("WARNING : parameters missing 'data-key' and 'data-url', the loading of configuration can not be done !"); + return; + } + + var options = { + apiKey : key, + onSuccess : success, + onFailure : error + }; + + if (url) { + options.serverUrl = url; + options.callbackSuffix = ""; + } + + if (timeout) { + options.timeOut = timeout; + } + + // test d'existance de la varibale globale Gp.Config + if (!Gp.Config) { + // appel du service + Gp.Services.getConfig(options); + } +})(); diff --git a/src/Common-review/Utils/CheckRightManagement.js b/src/Common-review/Utils/CheckRightManagement.js new file mode 100644 index 000000000..e6c2a1b16 --- /dev/null +++ b/src/Common-review/Utils/CheckRightManagement.js @@ -0,0 +1,172 @@ +import Logger from "../../Common/Utils/LoggerByDefault"; +import Config from "./Config"; + +export default { + /** + * Contrôle des droits sur les ressources. + * + * @param {Object} options - liste des options + * @param {String} options.key - clef API + * @param {Array} options.resources - liste des ressources + * @param {Array} options.services - liste des services + * @returns {Object} rightManagement - undefined ou { + * key : "", + * service-1 : [resource-1, resource-2], + * service-2 : [resource-1, resource-2] + * } + */ + check : function (options) { + // logger + + var logger = Logger.getLogger("checkrightmanagement"); + + // si aucune option n'est renseignée... + if (!options) { + // message orienté pour le developpeur ! + logger.error("WARNING : " + + "no parameter specified !"); + return; + } + + // les options + var _key = options.key; + var _resources = options.resources || []; + var _services = options.services || []; + + // si aucune information sur les ressources, + // il est impossible de controler quelquechose !!! + if (!_resources || _resources.length === 0) { + // message orienté pour le developpeur ! + logger.error("WARNING : " + + "no parameter 'resources' specified !"); + return; + } + + // si aucune information sur les services, + // il est impossible de controler quelquechose !!! + if (!_services || _services.length === 0) { + // message orienté pour le developpeur ! + logger.error("WARNING : " + + "no parameter 'services' specified !"); + return; + } + + // les ressources controlées : + // Ex. + // { + // "Itineraire" : ["Pieton", "Voiture"], + // "Geocode" : ["PositionOfInterest", "StreetAddress", "CadastralParcel", "Administratif"], + // "AutoCompletion" : ["PositionOfInterest", "StreetAddress", "CadastralParcel", "Administratif"], + // "Elevation" : ["SERVICE_CALCUL_ALTIMETRIQUE_RSC"] + // } + var _rightManagement = {}; + + // la clef API n'est pas renseignée + if (!_key) { + // on verifie si l'autoconfiguration est disponible + + if (!Config.isConfigLoaded()) { + // si l'autoconfiguration n'est pas chargée, + // aucune vérification des droits est possible... + + logger.warn("WARNING : " + + "The 'apiKey' parameter is missing, " + + "and the contract key configuration has not been loaded, " + + "so impossible to check yours rights !"); + + return; + } else { + // si l'autoconfiguration est chargée, + // on recupere la clef API, et on en profitera ensuite pour controler + // les droits sur les ressources. + + // FIXME par defaut, on recupere toujours la première... + _key = Object.keys(Config.configuration.generalOptions.apiKeys)[0]; + logger.log(_key); + } + } + + // la clef API est renseignée ou recuperée de l'autoconfiguration + if (_key) { + // on verifie si l'autoconfiguration est disponible + + if (!Config.isConfigLoaded()) { + // si l'autoconfiguration n'est pas chargée, + // il est toujours possible de requeter le service avec une clef API, + // mais les droits sur les ressources ne sont pas garantis, on risque + // d'obtenir des erreurs 403 forbidden... + // la responsabilité revient à l'utilisateur (message d'information)... + + logger.warn("WARNING : " + + "the contract key configuration has not been loaded, " + + "so be carefull !"); + + // les ressouces non controlées + var _noRightManagement = {}; + + for (var i = 0; i < _services.length; i++) { + var service = _services[i]; + _noRightManagement[service] = []; + + for (var j = 0; j < _resources.length; j++) { + var resource = _resources[j]; + _noRightManagement[service].push(resource); + } + } + + // on ajoute la clef + _noRightManagement.key = _key; + + logger.log("right management not checked", _noRightManagement); + + return _noRightManagement; + } else { + // si l'autoconf est chargée, + // on verifie la correspondance entre la clef et l'autoconfiguration, + // on previent l'utilisateur (message d'information) s'il n'a + // pas de droits sur certaines ressources ... + + // doit on ecarter les ressources sans droit ? + // oui, si possible avec un message d'information pour l'utilisateur... + + for (var k = 0; k < _resources.length; k++) { + var _resource = _resources[k]; + + for (var l = 0; l < _services.length; l++) { + var _service = _services[l]; + + var params = Config.getServiceParams(_resource, _service, _key); + if (!params || Object.keys(params).length === 0) { + logger.warn("WARNING : " + + "The contract key configuration has no rights to load this geoportal " + + "resource (" + _resource + ") " + + "for this service (" + _service + ") "); + continue; + } + + if (!_rightManagement[_service]) { + _rightManagement[_service] = []; + } + + _rightManagement[_service].push(_resource); + } + } + + if (!_rightManagement || Object.keys(_rightManagement).length === 0) { + logger.warn("WARNING : " + + "The contract key configuration has been loaded, " + + "and the 'apiKey' parameter has been set, " + + "but, there is a problem on the mapping between the contract and the key !"); + return; + } + + // on ajoute la clef + _rightManagement.key = _key; + + logger.log("right management checked", _rightManagement); + + return _rightManagement; + } + } + } +}; diff --git a/src/Common-review/Utils/ColorUtils.js b/src/Common-review/Utils/ColorUtils.js new file mode 100644 index 000000000..3b51b62c2 --- /dev/null +++ b/src/Common-review/Utils/ColorUtils.js @@ -0,0 +1,75 @@ +/** +* @module ColorUtils +* @alias Gp.ColorUtils +* @description +* ... +* +* @example +* rgbaToHex(); +* hexToRgba(); +*/ +var ColorUtils = { + /** + * Converts rgba String to #RRGGBBAA + * (Code adapted from : https://gist.github.com/mstssk/afda4ce9e5c335fd79cd) + * + * @param {String} rgba - A color of RGB or RGBA format. + * @returns {Object} hex and opacity formated values + */ + rgbaToHex : function (rgba) { + // number to hex conversion + function hex (number) { + if (number > 255) { + throw new Error("'" + number + "'' is greater than 255(0xff);"); + } + var str = Number(number).toString(16); + return ("0" + str).slice(-2); + } + var regex = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*(0?.?\d+)\s*)?\)/; + var parsed = regex.exec(rgba); + if (!parsed) { + throw new Error("Invalid format: " + rgba); + } + var red = parsed[1]; + var green = parsed[2]; + var blue = parsed[3]; + var alpha = parsed[4]; + var elems = [hex(red), hex(green), hex(blue)]; + var result = {}; + result.hex = "#" + elems.join(""); + if (alpha) { + // elems.push(hex(alpha)); + result.opacity = parseFloat(alpha); + } + return result; + }, + + /** + * Converts hex color and opacity value to rgba String. + * (Code adapted from : http://stackoverflow.com/a/5624139) + * @param {String} hex - A color value on RGB format (hexa). + * @param {Number} opacity - A opacity value. + * @returns {String} A color of RGB or RGBA format + */ + hexToRgba : function (hex, opacity) { + // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") + var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; + if (!hex) { + throw new Error("Invalid format"); + } + hex = hex.replace(shorthandRegex, function (m, r, g, b) { + return r + r + g + g + b + b; + }); + + var rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + rgb = rgb ? { + r : parseInt(rgb[1], 16), + g : parseInt(rgb[2], 16), + b : parseInt(rgb[3], 16) + } : null; + var result = rgb ? "rgba(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ", " + opacity + ")" : null; + return result; + } +}; + +export default ColorUtils; diff --git a/src/Common-review/Utils/Config.js b/src/Common-review/Utils/Config.js new file mode 100644 index 000000000..fc63876f4 --- /dev/null +++ b/src/Common-review/Utils/Config.js @@ -0,0 +1,265 @@ +import Logger from "../../Common/Utils/LoggerByDefault"; + +var logger = Logger.getLogger("config"); + +var Config = { + + /** autoconf */ + configuration : null, + + /** + * Controle du chargement de l'autoconf + * + * @returns {Boolean} isConfigLoaded - True si l'autoconf a déjà été chargée, False sinon. + */ + isConfigLoaded : function () { + var scope = typeof window !== "undefined" ? window : typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : {}; + if (scope.Gp && scope.Gp.Config && Object.keys(scope.Gp.Config).length !== 0) { + this.configuration = scope.Gp.Config; + return true; + } + return false; + }, + + /** + * Recuperation de l'identifiant d'une couche donnée + * + * @param {String} layerName - nom de la couche (par ex. "ORTHOIMAGERY.ORTHOPHOTOS") + * @param {String} service - nom du service (par ex. "WMS" ou "WMTS") + * @returns {String} layerId - identifiant de la couche (par ex. "ORTHOIMAGERY.ORTHOPHOTOS$GEOPORTAIL:OGC:WMTS") + */ + getLayerId : function (layerName, service) { + var layerId = null; + + // layer + // key : [layerName]$[contexte]:OGC:[service] + // ex : "ORTHOIMAGERY.ORTHOPHOTOS$GEOPORTAIL:OGC:WMTS" + + // service + // key : [layerName]$[contexte];[service] + // ex : PositionOfInterest$OGC:OPENLS;ReverseGeocode + + if (this.configuration) { + var layers = this.configuration["layers"]; + for (var key in layers) { + if (layers.hasOwnProperty(key)) { + var parts = key.split("$"); + if (layerName === parts[0]) { + if (parts[1]) { + var servicePartsLayer = parts[1].split(":"); + var servicePartsService = parts[1].split(";"); + + if (servicePartsService[1] === service) { + layerId = key; + break; + } + if (servicePartsLayer[2] === service) { + layerId = key; + break; + } + } + } + } + } + } + if (!layerId) { + logger.error("ERROR layer id (layer name: " + layerName + " / service: " + service + ") was not found !?"); + } + + return layerId; + }, + + /** + * Récupération des paramètres nécessaires à l'affichage d'une couche WMS ou WMTS + * + * @param {String} layerName - nom de la couche (par ex. "ORTHOIMAGERY.ORTHOPHOTOS") + * @param {String} service - nom du service (par ex. "WMS" ou "WMTS") + * @param {String} [apiKey] - Clé de contrat API + * @returns {Object} params - paramètres du service (WMS ou WMTS) pour la couche donnée + * @returns {String} params.url - Url du service à requêter pour afficher la couche + * @returns {String} params.version - Version du service + * @returns {String} params.styles - Style par défaut de la couche + * @returns {String} params.format - Format par défaut de la couche + * @returns {String} params.projection - Projection par défaut de la couche + * @returns {Number} params.minScale - Dénominateur d'échelle minimum de la couche + * @returns {Number} params.maxScale - Dénominateur d'échelle maximum de la couche + * @returns {Gp.BBox} params.extent - Etendue de la couche, dans la projection de la couche + * @returns {Array} params.legends - Tableau des légendes associées à la couche + * @returns {Array} params.metadata - Tableau des métadonnées associées à la couche + * @returns {Array} params.originators - Tableau des originators associés à la couche + * @returns {Array} params.title - Nom de la resource, lisible par un humain. + * @returns {Array} params.description - Url de l'image d'aperçu rapide de la ressource. + * @returns {Array} params.quicklookUrl- Tableau des originators associés à la couche + * @returns {String} params.[TMSLink] - Identifiant de la pyramide (TMS), dans le cas d'une couche WMTS + * @returns {Gp.Point} params.[matrixOrigin] - Origine de la matrice (top left corner), dans le cas d'une couche WMTS + * @returns {Array} params.[nativeResolutions] - Tableau regroupant les résolutions de chaque niveau de la matrice, dans le cas d'une couche WMTS + * @returns {Array} params.[matrixIds] - Tableau regroupant les identifiants de chaque niveau de la matrice, dans le cas d'une couche WMTS + */ + getLayerParams : function (layerName, service, apiKey) { + var params = {}; + + if (this.configuration) { + // récupération de l'identifiant complet de la couche. + var layerId = this.getLayerId(layerName, service); + + if (layerId) { + // récupération de l'objet de configuration de la couche + var layerConf = this.configuration.layers[layerId]; + + // controle de la clef + var key = layerConf.apiKeys[0]; + if (apiKey) { + if (apiKey !== key) { + logger.error("ERROR different keys (" + apiKey + " !== " + key + ") !?"); + return; + } + } + + apiKey = apiKey || key; + params.key = apiKey; + // récupération des paramètres du service + params.url = layerConf.getServerUrl(apiKey); + params.version = layerConf.getServiceParams().version; + params.styles = layerConf.getDefaultStyle(); + params.format = layerConf.getDefaultFormat(); + params.projection = layerConf.getDefaultProjection(); + + // récupération des infos de la couche + params.minScale = layerConf.getMinScaleDenominator(); + params.maxScale = layerConf.getMaxScaleDenominator(); + params.extent = layerConf.getBBOX(); + params.legends = layerConf.getLegends(); + params.metadata = layerConf.getMetadata(); + params.originators = layerConf.getOriginators(); + params.title = layerConf.getTitle(); + params.description = layerConf.getDescription(); + params.quicklookUrl = layerConf.getQuicklookUrl(); + + // WMTS : récupération des tileMatrixSetLimits + if (layerConf.wmtsOptions) { + params.tileMatrixSetLimits = layerConf.wmtsOptions.tileMatrixSetLimits; + } + + // WMTS : récupération des paramètres de la pyramide (TMS) + var TMSLink = layerConf.getTMSID(); + if (TMSLink) { + params.TMSLink = TMSLink; + var tmsConf = this.configuration.getTMSConf(TMSLink); + // Get matrix origin : Gp.Point = Object{x:Float, y:Float} + params.matrixOrigin = tmsConf.getTopLeftCorner(); + params.nativeResolutions = tmsConf.nativeResolutions; + params.matrixIds = tmsConf.matrixIds; + params.tileMatrices = tmsConf.tileMatrices; + } + } + } + + return params; + }, + + /** + * Recuperation des parametres d'un service + * + * @param {String} [resource] - "PositionOfInterest", "StreetAddress", "Voiture", "Pieton", ... + * @param {String} [service] - Geocode, Itineraire, ... + * @param {String} [apiKey] - Clé de contrat API + * @returns {Object} params - paramètres de la ressource + * @returns {String} params. - + * @returns {String} params. - + * @returns {String} params. - + */ + getServiceParams : function (resource, service, apiKey) { + var params = {}; + + if (this.configuration) { + // récupération de l'identifiant complet de la couche. + var layerId = this.getLayerId(resource, service); + + if (layerId) { + // récupération de l'objet de configuration de la couche + var layerConf = this.configuration.layers[layerId]; + + // controle de la clef + var key = layerConf.apiKeys[0]; + if (apiKey) { + if (apiKey !== key) { + return; + } + } + + apiKey = apiKey || key; + params.key = apiKey; + // récupération des paramètres du service + params.url = layerConf.getServerUrl(apiKey); + params.version = layerConf.getServiceParams().version; + + // récupération des infos de la couche + params.extent = layerConf.getBBOX(); + params.title = layerConf.getTitle(); + params.description = layerConf.getDescription(); + } + } + + return params; + }, + + /** + * Resolution en geographique + * + * @returns {Array} resolutions + */ + getResolutions : function () { + var resolutions = []; + + if (this.configuration) { + resolutions = this.configuration["generalOptions"]["wgs84Resolutions"]; + } + + return resolutions; + }, + + /** + * Recuperation des parametres TMS de la configuration + * @param {String} tmsName - tile matrix set name + * + * @returns {Object} tile matrix set + */ + getTileMatrix : function (tmsName) { + var tms = {}; + + if (this.configuration) { + if (tmsName) { + tms = this.configuration["tileMatrixSets"][tmsName.toUpperCase()]; + } + } + + return tms; + }, + + /** + * Récupération des contraintes générales d'une couche donnée : extent, minScale, maxScale, projection + * + * @param {String} layerId - identifiant de la couche + * @returns {Object} params - contraintes de la couche + * @returns {String} params.projection - Projection par défaut de la couche + * @returns {Number} params.minScale - Dénominateur d'échelle minimum de la couche + * @returns {Number} params.maxScale - Dénominateur d'échelle maximum de la couche + * @returns {Gp.BBox} params.extent - Etendue de la couche, dans la projection de la couche + */ + getGlobalConstraints : function (layerId) { + var params = {}; + + if (layerId) { + // récupération de l'objet de configuration de la couche + var layerConf = this.configuration.layers[layerId]; + params.projection = layerConf.getDefaultProjection(); + params.minScale = layerConf.getMinScaleDenominator(); + params.maxScale = layerConf.getMaxScaleDenominator(); + params.extent = layerConf.getBBOX(); + } + + return params; + } +}; + +export default Config; diff --git a/src/Common-review/Utils/Draggable.js b/src/Common-review/Utils/Draggable.js new file mode 100644 index 000000000..61920f09e --- /dev/null +++ b/src/Common-review/Utils/Draggable.js @@ -0,0 +1,120 @@ +import Logger from "./LoggerByDefault"; + +var logger = Logger.getLogger("draggable"); + +var Draggable = { + /** + * A draggable HTML element with JavaScript and CSS. + * + * @param {DOMElement} element - element + * @param {DOMElement} header - header (optional) + * @param {DOMElement} container - container (optional) + * @see https://www.w3schools.com/howto/howto_js_draggable.asp + * @see https://stackoverflow.com/questions/52231588/how-to-constrain-div-drag-space-no-jquery + * @example + * // CSS : + * // #element { position: absolute; } + * // HTML : + * //
+ * //
+ * // + * //
+ * // JS : + * var element = document.getElementById("element"); + * Draggable.dragElement(element, header, container); + */ + dragElement : function (element, header, container) { + var offsetX, offsetY; + + var isDragReady = false; + + var dragoffset = { + x : 0, + y : 0 + }; + + if (header) { + header.addEventListener("mousedown", dragMouseDown, true); + } else { + element.addEventListener("mousedown", dragMouseDown, true); + } + + // TODO mettre en place les contraintes + // var constraints = {}; + // if (container) { + // constraints = { + // width : container.clientWidth, + // height : container.clientHeight, + // top : container.offsetTop, + // left : container.offsetLeft + // }; + // } + + function dragMouseDown (e) { + e = e || window.event; + e.preventDefault(); + + isDragReady = true; + + // get the mouse cursor position at startup + e._pageX = e._pageX || e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); + e._pageY = e._pageY || e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); + dragoffset.x = e._pageX - element.offsetLeft; + dragoffset.y = e._pageY - element.offsetTop; + + document.addEventListener("mouseup", closeDragElement, true); + document.addEventListener("mousemove", elementDrag, true); + } + + function closeDragElement () { + /* stop moving when mouse button is released: */ + isDragReady = false; + document.removeEventListener("mouseup", closeDragElement, true); + document.removeEventListener("mousemove", elementDrag, true); + } + + function elementDrag (e) { + e = e || window.event; + // e.preventDefault(); + + // cf. https://jsfiddle.net/nbbg08mg/2/ + if (isDragReady) { + e._pageX = e._pageX || e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); + e._pageY = e._pageY || e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); + + var parentLeft = element.parentElement.offsetLeft; + var parentTop = element.parentElement.offsetTop; + logger.trace("parent offset", parentLeft, parentTop); + + // left/right constraint + if (e._pageX - dragoffset.x < 0 - parentLeft) { + offsetX = 0 - parentLeft; + } else if (e._pageX - dragoffset.x + element.clientWidth > document.body.clientWidth) { + offsetX = document.body.clientWidth - element.clientWidth; + } else { + offsetX = e._pageX - dragoffset.x; + } + logger.trace("left/right constraint", offsetX); + + // top/bottom constraint + if (e._pageY - dragoffset.y < 0 - parentTop) { + offsetY = 0 - parentTop; + } else if (e._pageY - dragoffset.y + element.clientHeight > document.body.clientHeight) { + offsetY = document.body.clientHeight - element.clientHeight; + } else { + offsetY = e._pageY - dragoffset.y; + } + logger.trace("top/bottom constraint", offsetY); + + // set the element's new position: + element.style.top = offsetY + "px"; + element.style.left = offsetX + "px"; + } + } + } +}; + +export default Draggable; diff --git a/src/Common-review/Utils/LayerUtils.js b/src/Common-review/Utils/LayerUtils.js new file mode 100644 index 000000000..477f76da9 --- /dev/null +++ b/src/Common-review/Utils/LayerUtils.js @@ -0,0 +1,312 @@ +/** +* @module LayerUtils +* @alias Gp.LayerUtils +* @description +* ... +* +* @example +* getZoomLevelFromScaleDenominator(); +* getAttributions(); +* intersects(); +*/ +var LayerUtils = { + + /** + * Obtenir le ZoomLevel à partir du ScaleDenominator + * @param {Number} scaleDenominator - the scale denominator + * @param {String} crs - the crs + * + * @returns {Integer} zoom level + */ + getZoomLevelFromScaleDenominator : function (scaleDenominator, crs) { + // ------------------------------------------------- // + // Code issu de l'API Geoportal/Catalogue/Config.js // + // ------------------------------------------------- // + // var configuration = Gp.Config; + // var general = configuration.generalOptions; + // var layers = configuration.layersContext; + // + // for (var tms in general.tileMatrixSets) { + // var tileMatrixSet = general.tileMatrixSets[tms]; + // // IGN's WMTS bug : epsg:nnnn instead of EPSG:nnnn + // var crs = tileMatrixSet.supportedCRS = tileMatrixSet.supportedCRS.replace(/epsg/,"EPSG"); + // + // if (!Geoportal.Catalogue.CRSRESOLUTIONS.hasOwnProperty(crs)) { + // var p= new OpenLayers.Projection(crs); + // Geoportal.Catalogue.CRSRESOLUTIONS[crs]= []; + // var matrixIds= tileMatrixSet.matrixIds; + // for (var i= 0, li= matrixIds.length; i} params.extent - map current geographical extent (EPSG:4326) : [top, left, bottom, right] = [maxy, minx, miny, maxx] + * @param {Number} params.zoom - map current zoom + * @param {String} params.crs - map current projection code (ex "EPSG:2154") + * @param {Boolean} params.visibility - layer visibility + * @param {Gp.Services.Config.Originator} params.originators - resource originators (from Gp.Config.layers[].originators) + * @returns {Object} attributions - associative array, mapping originators url (keys) with their properties : html attributions elements + */ + getAttributions : function (params) { + var zoom = params.zoom; + + var attributions = []; + + if (params.originators != null && params.visibility) { + // drawLogo = boolean, true if attribution should be displayed (zoom, extent), false otherwise + var drawLogo; + for (var j = 0, jl = params.originators.length; j < jl; j++) { + drawLogo = true; + var originator = params.originators[j]; + + var constraints = params.originators[j].constraints || []; + for (var k = 0, kl = constraints.length; k < kl; k++) { + var constraint = constraints[k]; + drawLogo = true; + + var minZoomLevel = this.getZoomLevelFromScaleDenominator(constraint.maxScaleDenominator, params.crs); + var maxZoomLevel = this.getZoomLevelFromScaleDenominator(constraint.minScaleDenominator, params.crs) || 21; + + // min zoom constraints + if (minZoomLevel && (minZoomLevel > zoom)) { + drawLogo = false; + } + + // max zoom constraints + if (drawLogo && maxZoomLevel !== null && (maxZoomLevel < zoom)) { + drawLogo = false; + } + + // bbox constraints + var bbox = constraint.bbox; + if (drawLogo && bbox) { + drawLogo = false; + var viewExtent = params.extent; + if (viewExtent) { + var bounds = [bbox.top, bbox.left, bbox.bottom, bbox.right]; + if (this.intersects(viewExtent, bounds)) { + // at least one constraint matches the map ones + drawLogo = true; + break; + } + } + } + } + + if (drawLogo) { + // on a un originator qui correspond au zoom et à l'étendue. + + var logo = originator.logo; + var url = originator.url; + var name = originator.name ? originator.name : ""; + var text = originator.attribution; + + var container = document.createElement("div"); + container.className = "gp-control-attribution"; + + // on crée un lien dans tous les cas (même s'il ne pointe pas vers une référence), pour avoir accès à la class CSS (pour surcharge) + var link = null; + link = document.createElement("a"); + link.className = "gp-control-attribution-link"; + link.target = "_blank"; + container.appendChild(link); + if (url) { + link.href = url; + } + + var bImage = !!(logo); + var image = null; + // si on a un logo, on l'affiche à l'interieur du lien + if (bImage) { + image = document.createElement("img"); + if (link) { + image.className = "gp-control-attribution-image"; + link.appendChild(image); + } else { + image.className = ""; + container.appendChild(image); + } + image.src = logo; // FIXME : mixContent ! + image.title = text || name; + image.style.height = "30px"; + image.style.width = "30px"; + } else { + // sinon, on affiche le nom de l'originator, ou sa description ou l'url. + if (name) { + link.textContent = name; + } else if (text) { + link.textContent = text; + } else if (url) { + link.textContent = url; + } else { + link.textContent = ""; + } + } + + attributions.push(container.innerHTML + " "); + } + } + } + + return attributions; + }, + + /** + * Determines if one extent (extent1) intersects another (extent2) + * + * @param {Array.} extent1 - First extent : [top, left, bottom, right] = [maxy, minx, miny, maxx] + * @param {Array.} extent2 - Second extent : [top, left, bottom, right] = [maxy, minx, miny, maxx] + * @return {Boolean} intersects - True if the two extents intersect, false otherwise. + */ + intersects : function (extent1, extent2) { + var intersectsX = (extent1[1] <= extent2[3]) && (extent2[1] <= extent1[3]); + var intersectsY = (extent1[2] <= extent2[0]) && (extent2[2] <= extent1[0]); + return intersectsX && intersectsY; + } +}; + +export default LayerUtils; diff --git a/src/Common-review/Utils/LoggerByDefault.js b/src/Common-review/Utils/LoggerByDefault.js new file mode 100644 index 000000000..d6c973443 --- /dev/null +++ b/src/Common-review/Utils/LoggerByDefault.js @@ -0,0 +1,21 @@ +import * as Log from "loglevel"; + +var LoggerByDefault = { + /** + *logger statique + * @param {String} [name="default"] - the logger name + * + * @returns {Object} logger + */ + getLogger : function (name) { + // Substitute global constants configured at compile time + // cf. webpack.config.js + // on masque cette constante afin d'eviter "referenceerror not defined" + ("__PRODUCTION__".match(/true/)) + ? Log.disableAll() : Log.enableAll(); + var logname = name || "default"; + return Log.getLogger(logname); + } +}; + +export default LoggerByDefault; diff --git a/src/Common-review/Utils/MathUtils.js b/src/Common-review/Utils/MathUtils.js new file mode 100644 index 000000000..8b5f7b648 --- /dev/null +++ b/src/Common-review/Utils/MathUtils.js @@ -0,0 +1,111 @@ +/** +* @module MathUtils +* @alias Gp.MathUtils +* @description +* ... +* +* @example +* modulo(); +* decimalToDMS(); +* toInteger(); +* isInteger(); +* toFloat(); +*/ +var MathUtils = { + /** + * Reste de la division euclidienne + * @param {Number} a - divisor + * @param {Number} b - quotient + * @returns {Number} Modulo + */ + modulo : function (a, b) { + var r = a % b; + return r * b < 0 ? r + b : r; + }, + + /** + * Transform degrees, minutes, seconds form decimal degrees - + * Largely inspired by the private function degreesToStringHDMS from ol/coordinate.js + * + * @param {Number} degrees - decimal degrees + * @param {Array} hemispheres - "NS" ou "EO" + * @param {Number} numDigits - number of digits for seconds + * @returns {Object} DMS coordinate + */ + decimalToDMS : function (degrees, hemispheres, numDigits) { + var normalizedDegrees = this.modulo(degrees + 180, 360) - 180; + var x = Math.abs(3600 * normalizedDegrees); + var dflPrecision = numDigits || 0; + var precision = Math.pow(10, dflPrecision); + + var deg = Math.floor(x / 3600); + var min = Math.floor((x - deg * 3600) / 60); + var sec = x - (deg * 3600) - (min * 60); + sec = Math.ceil(sec * precision) / precision; + + if (sec >= 60) { + sec = 0; + min += 1; + } + + if (min >= 60) { + min = 0; + deg += 1; + } + + var direction = hemispheres.charAt(normalizedDegrees < 0 ? 1 : 0); + return { + d : deg, + m : min, + s : sec, + direction : direction + }; + }, + + /** + * Converts string to Integer + * + * @param {String} s - string number + * @param {Numeric} base - between 2 and 36 + * @returns {null|Numeric} result + */ + toInteger : function (s, base) { + var _base = base || 10; + var n = parseInt(s, _base); + if (!isNaN(n) && isFinite(n)) { + return n; + } + return null; + }, + + /** + * check if s represents an integer + * + * @param {String} s - string number + * @returns {Boolean} is integer + */ + isInteger : function (s) { + if (isNaN(s)) { + return false; + } + + var v = parseFloat(s); + return ((v | 0) === v); + }, + + /** + * Converts s to float + * + * @param {String} s - string number + * @returns {null|Numeric} result + */ + toFloat : function (s) { + var n = parseFloat(s); + if (!isNaN(n) && isFinite(n)) { + return n; + } + return null; + } +}; + +export default MathUtils; diff --git a/src/Common-review/Utils/ProxyUtils.js b/src/Common-review/Utils/ProxyUtils.js new file mode 100644 index 000000000..ca9acda12 --- /dev/null +++ b/src/Common-review/Utils/ProxyUtils.js @@ -0,0 +1,50 @@ +import Logger from "../../Common/Utils/LoggerByDefault"; + +/** +* @module ProxyUtils +* @alias Gp.ProxyUtils +* @description +* ... +* +* @example +* proxifyUrl(); +*/ +var ProxyUtils = { + /** + * Ajoute un proxy aux url des couches vecteurs si besoin. + * + * @param {String} url - Url to proxify. + * @param {Object} [proxyOptions] - Object defining proxy options. + * @param {String} proxyOptions.proxyUrl - Proxy URL. + * @param {Array.} [proxyOptions.noProxyDomains] - Proxy will not be used for this list of domain names. + * + * @returns {String} proxy url + */ + proxifyUrl : function (url, proxyOptions) { + // logger + + var logger = Logger.getLogger("proxifyUrl"); + + if (!proxyOptions || + !proxyOptions.hasOwnProperty("proxyUrl") || + proxyOptions.proxyUrl === null || + proxyOptions.proxyUrl.trim().length === 0) { + return url; + } + // on regarde si l'url nest pas dans les domaines sans proxy + if (proxyOptions.noProxyDomains && + Array.isArray(proxyOptions.noProxyDomains) && + proxyOptions.noProxyDomains.length > 0) { + for (var i in proxyOptions.noProxyDomains) { + logger.trace("[ProxyUtils] proxifyUrl : analyzing " + proxyOptions.noProxyDomains[i]); + if (url.indexOf(proxyOptions.noProxyDomains[i]) !== -1) { + logger.info("[ProxyUtils] proxifyUrl : " + url + " found in noProxyDomains list (" + proxyOptions.noProxyDomains[i] + ")."); + return url; + } + } + } + return proxyOptions.proxyUrl + encodeURIComponent(url); + } +}; + +export default ProxyUtils; diff --git a/src/Common-review/Utils/Register.js b/src/Common-review/Utils/Register.js new file mode 100644 index 000000000..bd4e6f510 --- /dev/null +++ b/src/Common-review/Utils/Register.js @@ -0,0 +1,643 @@ +// FIXME +// - exception lors du register IGNF des projections geocent ? +// Ex. Transforming EPSG:4978 geocent projection fails? +// cf. https://github.com/proj4js/proj4js/issues/195 +// - probleme de performance avec le chargement des projections (env. 4s), +// et ceci bloque le rendu graphique... + +/** + * Register definition for IGNF, and EPSG CRS. + * @example + * Gp.Register.IGNF.AMST63 + * // return : "+title=Amsterdam 1963 +proj=geocent +towgs84=109.753,-528.133,-362.244,0,0,0,0 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs" + * Gp.Register.get("IGNF:AMST63") + * // same as Gp.Register.IGNF.AMST63 + */ +var Register = { + + /** + * instance already loaded into proj4 + */ + isLoaded : false, + + /** + * get the definition for a code + * + * @param {String} name - ie. EPSG:2154 (Lambert) + * @returns {Object} definition + * @example + * Register.get("EPSG:2154"); + * // "+title=RGF93 / Lambert-93 +proj=lcc +lat_1=49 ..." + */ + get : function (name) { + if (name === "" || name === null || typeof name === "undefined") { + return; + } + + var s = name.split(":"); + if (s.length !== 2) { + return; + } + + var _register = s[0]; + var _code = s[1]; + + if (!this.hasOwnProperty(_register)) { + return; + } + + if (!this[_register].hasOwnProperty(_code)) { + return; + } + + return this[_register][_code]; + }, + + /** + * does projection code exist ? + * + * @param {String} name - ie. EPSG:2154 (Lambert) + * @returns {Boolean} true/false + * @example + * Register.exist("EPSG:2154"); // true + */ + exist : function (name) { + if (name === "" || name === null || typeof name === "undefined") { + return false; + } + + var s = name.split(":"); + if (s.length !== 2) { + return false; + } + + var _register = s[0]; + var _code = s[1]; + + if (!this.hasOwnProperty(_register)) { + return false; + } + + if (!this[_register].hasOwnProperty(_code)) { + return false; + } + + return true; + }, + + /** + * load all defs to proj4 + * @param {Object} Proj4 - proj4 instance + */ + load : function (Proj4) { + // un flag pour savoir si le chargement est déjà realisé + // (car ceci peut être couteux !) + if (!this.isLoaded) { + var registers = [ + "IGNF", // exception lors du register IGNF ? + "EPSG", + "CRS" + ]; + for (var i = 0; i < registers.length; i++) { + var _register = registers[i]; + var codes = this[_register]; + for (var _code in codes) { + if (codes.hasOwnProperty(_code)) { + var name = _register + ":" + _code; + Proj4.defs(name, this.get(name)); + // on enlève la dependance à OpenLayers... + // la fonction register est donc à appeller afin d'enregistrer + // les definitions dans OpenLayers : + // import { get } from "ol/proj"; + // import proj4 from "proj4"; + // import { register } from "ol/proj/proj4"; + // Register.load(); + // // Make projections defined in proj4 (with proj4.defs()) available in OpenLayers. + // // see ol/proj/proj4.register (https://openlayers.org/en/latest/apidoc/module-ol_proj_proj4.html) + // register(proj4); + // console.log(get("CRS:84").getCode()); // "CRS:84" + } + } + } + this.isLoaded = true; + } + }, + + /** + * load defs by default to proj4 + * + * include into proj4 : + * - WGS84 + * - ['EPSG:4326'] + * - ['EPSG:3785'], ['EPSG:3857'], GOOGLE, ['EPSG:900913'], ['EPSG:102113'] + * + + * - ["EPSG:2154"], ["EPSG:27571"], ["EPSG:27572"], ["EPSG:27573"], ["EPSG:2757"], + * - ["CRS:84"], + * - ["IGNF:LAMB93"], + * - ["IGNF:LAMBE"], ["IGNF:LAMB1"], ["IGNF:LAMB2"], ["IGNF:LAMB3"], ["IGNF:LAMB4"], + * - ["IGNF:RGF93G"], + * - ["IGNF:WGS84G"] + * + * @param {Object} Proj4 - proj4 instance + */ + loadByDefault : function (Proj4) { + // FIXME definir la liste de projections par defaut... + var registers = { + EPSG : { + 2154 : Register["EPSG"]["2154"], + 27571 : Register["EPSG"]["27571"], + 27572 : Register["EPSG"]["27572"], + 27573 : Register["EPSG"]["27573"], + 27574 : Register["EPSG"]["27574"] + }, + CRS : { + 84 : Register["CRS"]["84"] + }, + IGNF : { + LAMB93 : Register["IGNF"]["LAMB93"], + LAMBE : Register["IGNF"]["LAMBE"], + LAMB1 : Register["IGNF"]["LAMB1"], + LAMB2 : Register["IGNF"]["LAMB2"], + LAMB3 : Register["IGNF"]["LAMB3"], + LAMB4 : Register["IGNF"]["LAMB4"], + RGF93G : Register["IGNF"]["RGF93G"], + WGS84G : Register["IGNF"]["WGS84G"] + } + }; + + for (var register in registers) { + if (registers.hasOwnProperty(register)) { + var codes = registers[register]; + for (var code in codes) { + if (codes.hasOwnProperty(code)) { + var name = register + ":" + code; + Proj4.defs(name, codes[code]); + } + } + } + } + }, + + /** + * load only a def to proj4 + * @param {Object} Proj4 - proj4 instance + * @param {String} name - ie. EPSG:2154 (Lambert) + * @returns {Boolean} true/false + */ + loadByName : function (Proj4, name) { + if (!this.exist(name)) { + return false; + } + + try { + Proj4.defs(name, this.get(name)); + } catch (e) { + // FIXME !? + return false; + } + + return true; + }, + + // definitions + EPSG : { + // 4978 : "+proj=geocent +datum=WGS84 +units=m +no_defs ", + 3857 : "+title=WGS 84 / Pseudo-Mercator +proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs", + 3785 : "+title=WGS 84 / Pseudo-Mercator (deprecated) +proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs", + 4149 : "+title=CH1903 +proj=longlat +ellps=bessel +towgs84=674.374,15.056,405.346,0,0,0,0 +no_defs ", + 4150 : "+title=CH1903plus +proj=longlat +ellps=bessel +towgs84=674.374,15.056,405.346,0,0,0,0 +no_defs ", + 4151 : "+title=CHTRF95 +proj=longlat +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +no_defs ", + 4171 : "+title=RGF93 +proj=longlat +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +no_defs ", + 4230 : "+title=ED50 +proj=longlat +ellps=intl +no_defs ", + 4235 : "+title=Guyane Francaise +proj=longlat +ellps=intl +no_defs ", + 4258 : "+title=ETRS89 +proj=longlat +ellps=GRS80 +no_defs ", + 4275 : "+title=NTF +proj=longlat +a=6378249.2 +b=6356515 +towgs84=-168,-60,320,0,0,0,0 +no_defs ", + 4322 : "+title=WGS 72 +proj=longlat +ellps=WGS72 +no_defs ", + 4326 : "+title=WGS 84 +proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs ", + 4467 : "+proj=utm +zone=21 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 4470 : "+proj=longlat +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +no_defs ", + 4471 : "+proj=utm +zone=38 +south +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 4474 : "+proj=utm +zone=38 +south +ellps=intl +towgs84=-382,-59,-262,0,0,0,0 +units=m +no_defs ", + 4558 : "+proj=longlat +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +no_defs ", + 4559 : "+proj=utm +zone=20 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 4621 : "+title=Fort Marigot +proj=longlat +ellps=intl +towgs84=137,248,-430,0,0,0,0 +no_defs ", + 4622 : "+title=Guadeloupe 1948 +proj=longlat +ellps=intl +no_defs ", + 4623 : "+title=CSG67 +proj=longlat +ellps=intl +towgs84=-186,230,110,0,0,0,0 +no_defs ", + 4624 : "+title=RGFG95 +proj=longlat +ellps=GRS80 +towgs84=2,2,-2,0,0,0,0 +no_defs ", + 4625 : "+title=Martinique 1938 +proj=longlat +ellps=intl +no_defs ", + 4626 : "+title=Reunion 1947 +proj=longlat +ellps=intl +no_defs ", + 4627 : "+title=RGR92 +proj=longlat +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +no_defs ", + 4628 : "+title=Tahiti 52 +proj=longlat +ellps=intl +towgs84=162,117,154,0,0,0,0 +no_defs ", + 4629 : "+title=Tahaa 54 +proj=longlat +ellps=intl +no_defs ", + 4630 : "+title=IGN72 Nuku Hiva +proj=longlat +ellps=intl +no_defs ", + 4632 : "+title=Combani 1950 +proj=longlat +ellps=intl +towgs84=-382,-59,-262,0,0,0,0 +no_defs ", + 4633 : "+title=IGN56 Lifou +proj=longlat +ellps=intl +no_defs ", + 4634 : "+title=IGN72 Grand Terre +proj=longlat +ellps=intl +no_defs ", + 4637 : "+title=Perroud 1950 +proj=longlat +ellps=intl +towgs84=325,154,172,0,0,0,0 +no_defs ", + 4638 : "+title=Saint Pierre et Miquelon 1950 +proj=longlat +ellps=clrk66 +towgs84=30,430,368,0,0,0,0 +no_defs ", + 4640 : "+title=RRAF 1991 +proj=longlat +ellps=WGS84 +towgs84=0,0,0,0,0,0,0 +no_defs ", + 4641 : "+title=IGN53 Mare +proj=longlat +ellps=intl +no_defs ", + 4645 : "+title=RGNC 1991 +proj=longlat +ellps=intl +towgs84=0,0,0,0,0,0,0 +no_defs ", + 4687 : "+proj=longlat +ellps=GRS80 +no_defs ", + 4662 : "+title=IGN72 Grande Terre +proj=longlat +ellps=intl +no_defs ", + 4689 : "+title=IGN63 Hiva Oa +proj=longlat +ellps=intl +no_defs ", + 4690 : "+title=Tahiti 79 +proj=longlat +ellps=intl +no_defs ", + 4691 : "+title=Moorea 87 +proj=longlat +ellps=intl +towgs84=215.525,149.593,176.229,-3.2624,-1.692,-1.1571,10.4773 +no_defs ", + 4692 : "+title=Maupiti 83 +proj=longlat +ellps=intl +towgs84=217.037,86.959,23.956,0,0,0,0 +no_defs ", + 4698 : "+title=IGN 1962 Kerguelen +proj=longlat +ellps=intl +towgs84=145,-187,103,0,0,0,0 +no_defs ", + 4749 : "+title=RGNC91-93 +proj=longlat +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +no_defs ", + 4750 : "+title=ST87 Ouvea +proj=longlat +ellps=WGS84 +towgs84=-56.263,16.136,-22.856,0,0,0,0 +no_defs ", + 4807 : "+title=NTF (Paris) +proj=longlat +a=6378249.2 +b=6356515 +towgs84=-168,-60,320,0,0,0,0 +pm=paris +no_defs ", + 2056 : "+title=CH1903+ / LV95 +proj=somerc +lat_0=46.95240555555556 +lon_0=7.439583333333333 +x_0=2600000 +y_0=1200000 +ellps=bessel +towgs84=674.374,15.056,405.346,0,0,0,0 +units=m +no_defs ", + 2154 : "+title=RGF93 / Lambert-93 +proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 2213 : "+title=ETRS89 / TM 30 NE +proj=tmerc +lat_0=0 +lon_0=30 +k=0.9996 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs ", + 2969 : "+title=Fort Marigot / UTM zone 20N +proj=utm +zone=20 +ellps=intl +towgs84=137,248,-430,0,0,0,0 +units=m +no_defs ", + 2970 : "+title=Guadeloupe 1948 / UTM zone 20N +proj=utm +zone=20 +ellps=intl +units=m +no_defs ", + 2971 : "+title=CSG67 / UTM zone 22N +proj=utm +zone=22 +ellps=intl +towgs84=-186,230,110,0,0,0,0 +units=m +no_defs ", + 2972 : "+title=RGFG95 / UTM zone 22N +proj=utm +zone=22 +ellps=GRS80 +towgs84=2,2,-2,0,0,0,0 +units=m +no_defs ", + 2973 : "+title=Martinique 1938 / UTM zone 20N +proj=utm +zone=20 +ellps=intl +units=m +no_defs ", + 2975 : "+title=RGR92 / UTM zone 40S +proj=utm +zone=40 +south +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 2976 : "+title=Tahiti 52 / UTM zone 6S +proj=utm +zone=6 +south +ellps=intl +towgs84=162,117,154,0,0,0,0 +units=m +no_defs ", + 2977 : "+title=Tahaa 54 / UTM zone 5S +proj=utm +zone=5 +south +ellps=intl +units=m +no_defs ", + 2978 : "+title=IGN72 Nuku Hiva / UTM zone 7S +proj=utm +zone=7 +south +ellps=intl +units=m +no_defs ", + 2980 : "+title=Combani 1950 / UTM zone 38S +proj=utm +zone=38 +south +ellps=intl +towgs84=-382,-59,-262,0,0,0,0 +units=m +no_defs ", + 2981 : "+title=IGN56 Lifou / UTM zone 58S +proj=utm +zone=58 +south +ellps=intl +units=m +no_defs ", + 2982 : "+title=IGN72 Grand Terre / UTM zone 58S (deprecated) +proj=utm +zone=58 +south +ellps=intl +units=m +no_defs ", + 2984 : "+title=RGNC 1991 / Lambert New Caledonia (deprecated) +proj=lcc +lat_1=-20.66666666666667 +lat_2=-22.33333333333333 +lat_0=-21.5 +lon_0=166 +x_0=400000 +y_0=300000 +ellps=intl +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 2986 : "+title=Terre Adelie 1950 +proj=stere +towgs84=324.9120,153.2820,172.0260 +a=6378388.0000 +rf=297.0000000000000 +lat_0=-90.000000000 +lon_0=140.000000000 +lat_ts=-67.000000000 +k=0.96027295 +x_0=300000.000 +y_0=-2299363.482 +units=m +no_defs", + 2987 : "+title=Saint Pierre et Miquelon 1950 / UTM zone 21N +proj=utm +zone=21 +ellps=clrk66 +towgs84=30,430,368,0,0,0,0 +units=m +no_defs ", + 2989 : "+title=RRAF 1991 / UTM zone 20N +proj=utm +zone=20 +ellps=WGS84 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 2990 : "+title=Reunion 1947 / TM Reunion (deprecated) +proj=tmerc +lat_0=-21.11666666666667 +lon_0=55.53333333333333 +k=1 +x_0=50000 +y_0=160000 +ellps=intl +units=m +no_defs ", + 2995 : "+title=IGN53 Mare / UTM zone 58S +proj=utm +zone=58 +south +ellps=intl +units=m +no_defs ", + 3038 : "+proj=utm +zone=26 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 3039 : "+proj=utm +zone=27 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 3040 : "+proj=utm +zone=28 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 3041 : "+proj=utm +zone=29 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + // 3042 : "+proj=utm +zone=30 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + // 3043 : "+proj=utm +zone=31 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + // 3044 : "+proj=utm +zone=32 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 3045 : "+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 3046 : "+proj=utm +zone=34 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 3047 : "+proj=utm +zone=35 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 3048 : "+proj=utm +zone=36 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 3049 : "+proj=utm +zone=37 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 3050 : "+proj=utm +zone=38 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 3051 : "+proj=utm +zone=39 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 3034 : "+title=ETRS89 / ETRS-LCC +proj=lcc +lat_1=35 +lat_2=65 +lat_0=52 +lon_0=10 +x_0=4000000 +y_0=2800000 +ellps=GRS80 +units=m +no_defs ", + 3035 : "+title=ETRS89 / ETRS-LAEA +proj=laea +lat_0=52 +lon_0=10 +x_0=4321000 +y_0=3210000 +ellps=GRS80 +units=m +no_defs ", + 3042 : "+title=ETRS89 / ETRS-TM30 +proj=utm +zone=30 +ellps=GRS80 +units=m +no_defs ", + 3043 : "+title=ETRS89 / ETRS-TM31 +proj=utm +zone=31 +ellps=GRS80 +units=m +no_defs ", + 3044 : "+title=ETRS89 / ETRS-TM32 +proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs ", + 25828 : "+proj=utm +zone=28 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 25829 : "+proj=utm +zone=29 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + // 25830 : "+proj=utm +zone=30 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + // 25831 : "+proj=utm +zone=31 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + // 25832 : "+proj=utm +zone=32 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 25833 : "+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 25834 : "+proj=utm +zone=34 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 25835 : "+proj=utm +zone=35 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 25836 : "+proj=utm +zone=36 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 25837 : "+proj=utm +zone=37 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 25838 : "+proj=utm +zone=38 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 3060 : "+title=IGN72 Grande Terre / UTM zone 58S +proj=utm +zone=58 +south +ellps=intl +units=m +no_defs ", + 3163 : "+title=RGNC91-93 / Lambert New Caledonia +proj=lcc +lat_1=-20.66666666666667 +lat_2=-22.33333333333333 +lat_0=-21.5 +lon_0=166 +x_0=400000 +y_0=300000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 3164 : "+title=ST87 Ouvea / UTM zone 58S +proj=utm +zone=58 +south +ellps=WGS84 +towgs84=-56.263,16.136,-22.856,0,0,0,0 +units=m +no_defs ", + 3165 : "+title=NEA74 Noumea / Noumea Lambert +proj=lcc +lat_1=-22.24469175 +lat_2=-22.29469175 +lat_0=-22.26969175 +lon_0=166.44242575 +x_0=0.66 +y_0=1.02 +ellps=intl +units=m +no_defs ", + 3166 : "+title=NEA74 Noumea / Noumea Lambert 2 +proj=lcc +lat_1=-22.24472222222222 +lat_2=-22.29472222222222 +lat_0=-22.26972222222222 +lon_0=166.4425 +x_0=8.313000000000001 +y_0=-2.354 +ellps=intl +units=m +no_defs ", + 3169 : "+title=RGNC91-93 / UTM zone 57S +proj=utm +zone=57 +south +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 3170 : "+title=RGNC91-93 / UTM zone 58S +proj=utm +zone=58 +south +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 3171 : "+title=RGNC91-93 / UTM zone 59S +proj=utm +zone=59 +south +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ", + 3172 : "+title=IGN53 Mare / UTM zone 59S +proj=utm +zone=59 +south +ellps=intl +units=m +no_defs ", + 3296 : "+title=RGPF / UTM zone 5S +proj=utm +zone=5 +south +ellps=GRS80 +units=m +no_defs ", + 3297 : "+title=RGPF / UTM zone 6S +proj=utm +zone=6 +south +ellps=GRS80 +units=m +no_defs ", + 3298 : "+title=RGPF / UTM zone 7S +proj=utm +zone=7 +south +ellps=GRS80 +units=m +no_defs ", + 3299 : "+title=RGPF / UTM zone 8S +proj=utm +zone=8 +south +ellps=GRS80 +units=m +no_defs ", + 3302 : "+title=IGN63 Hiva Oa / UTM zone 7S +proj=utm +zone=7 +south +ellps=intl +units=m +no_defs ", + 3303 : "+title=Fatu Iva 72 / UTM zone 7S +proj=utm +zone=7 +south +ellps=intl +towgs84=347.103,1078.12,2623.92,-33.8875,70.6773,-9.3943,186.074 +units=m +no_defs ", + 3304 : "+title=Tahiti 79 / UTM zone 6S +proj=utm +zone=6 +south +ellps=intl +units=m +no_defs ", + 3305 : "+title=Moorea 87 / UTM zone 6S +proj=utm +zone=6 +south +ellps=intl +towgs84=215.525,149.593,176.229,-3.2624,-1.692,-1.1571,10.4773 +units=m +no_defs ", + 3306 : "+title=Maupiti 83 / UTM zone 5S +proj=utm +zone=5 +south +ellps=intl +towgs84=217.037,86.959,23.956,0,0,0,0 +units=m +no_defs ", + 3312 : "+title=CSG67 / UTM zone 21N +proj=utm +zone=21 +ellps=intl +towgs84=-186,230,110,0,0,0,0 +units=m +no_defs ", + 3313 : "+title=RGFG95 / UTM zone 21N +proj=utm +zone=21 +ellps=GRS80 +towgs84=2,2,-2,0,0,0,0 +units=m +no_defs ", + 3336 : "+title=IGN 1962 Kerguelen / UTM zone 42S +proj=utm +zone=42 +south +ellps=intl +towgs84=145,-187,103,0,0,0,0 +units=m +no_defs ", + 3395 : "+title=WGS 84 / World Mercator +proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 3727 : "+title=Reunion 1947 / TM Reunion +proj=tmerc +lat_0=-21.11666666666667 +lon_0=55.53333333333333 +k=1 +x_0=160000 +y_0=50000 +ellps=intl +units=m +no_defs ", + 21781 : "+title=CH1903 / LV03 +proj=somerc +lat_0=46.95240555555556 +lon_0=7.439583333333333 +x_0=600000 +y_0=200000 +ellps=bessel +towgs84=674.374,15.056,405.346,0,0,0,0 +units=m +no_defs ", + 25830 : "+title=ETRS89 / UTM zone 30N +proj=utm +zone=30 +ellps=GRS80 +units=m +no_defs ", + 25831 : "+title=ETRS89 / UTM zone 31N +proj=utm +zone=31 +ellps=GRS80 +units=m +no_defs ", + 25832 : "+title=ETRS89 / UTM zone 32N +proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs ", + 27561 : "+title=NTF (Paris) / Lambert Nord France +proj=lcc +lat_1=49.50000000000001 +lat_0=49.50000000000001 +lon_0=0 +k_0=0.999877341 +x_0=600000 +y_0=200000 +a=6378249.2 +b=6356515 +towgs84=-168,-60,320,0,0,0,0 +pm=paris +units=m +no_defs ", + 27562 : "+title=NTF (Paris) / Lambert Centre France +proj=lcc +lat_1=46.8 +lat_0=46.8 +lon_0=0 +k_0=0.99987742 +x_0=600000 +y_0=200000 +a=6378249.2 +b=6356515 +towgs84=-168,-60,320,0,0,0,0 +pm=paris +units=m +no_defs ", + 27563 : "+title=NTF (Paris) / Lambert Sud France +proj=lcc +lat_1=44.10000000000001 +lat_0=44.10000000000001 +lon_0=0 +k_0=0.9998774990000001 +x_0=600000 +y_0=200000 +a=6378249.2 +b=6356515 +towgs84=-168,-60,320,0,0,0,0 +pm=paris +units=m +no_defs ", + 27564 : "+title=NTF (Paris) / Lambert Corse +proj=lcc +lat_1=42.16500000000001 +lat_0=42.16500000000001 +lon_0=0 +k_0=0.9999447100000001 +x_0=234.358 +y_0=185861.369 +a=6378249.2 +b=6356515 +towgs84=-168,-60,320,0,0,0,0 +pm=paris +units=m +no_defs ", + 27571 : "+title=NTF (Paris) / Lambert zone I +proj=lcc +lat_1=49.50000000000001 +lat_0=49.50000000000001 +lon_0=0 +k_0=0.999877341 +x_0=600000 +y_0=1200000 +a=6378249.2 +b=6356515 +towgs84=-168,-60,320,0,0,0,0 +pm=paris +units=m +no_defs ", + 27572 : "+title=NTF (Paris) / Lambert zone II +proj=lcc +lat_1=46.8 +lat_0=46.8 +lon_0=0 +k_0=0.99987742 +x_0=600000 +y_0=2200000 +a=6378249.2 +b=6356515 +towgs84=-168,-60,320,0,0,0,0 +pm=paris +units=m +no_defs ", + 27573 : "+title=NTF (Paris) / Lambert zone III +proj=lcc +lat_1=44.10000000000001 +lat_0=44.10000000000001 +lon_0=0 +k_0=0.9998774990000001 +x_0=600000 +y_0=3200000 +a=6378249.2 +b=6356515 +towgs84=-168,-60,320,0,0,0,0 +pm=paris +units=m +no_defs ", + 27574 : "+title=NTF (Paris) / Lambert zone IV +proj=lcc +lat_1=42.16500000000001 +lat_0=42.16500000000001 +lon_0=0 +k_0=0.9999447100000001 +x_0=234.358 +y_0=4185861.369 +a=6378249.2 +b=6356515 +towgs84=-168,-60,320,0,0,0,0 +pm=paris +units=m +no_defs ", + 27581 : "+title=NTF (Paris) / France I (deprecated) +proj=lcc +lat_1=49.50000000000001 +lat_0=49.50000000000001 +lon_0=0 +k_0=0.999877341 +x_0=600000 +y_0=1200000 +a=6378249.2 +b=6356515 +towgs84=-168,-60,320,0,0,0,0 +pm=paris +units=m +no_defs ", + 27582 : "+title=NTF (Paris) / France II (deprecated) +proj=lcc +lat_1=46.8 +lat_0=46.8 +lon_0=0 +k_0=0.99987742 +x_0=600000 +y_0=2200000 +a=6378249.2 +b=6356515 +towgs84=-168,-60,320,0,0,0,0 +pm=paris +units=m +no_defs ", + 27583 : "+title=NTF (Paris) / France III (deprecated) +proj=lcc +lat_1=44.10000000000001 +lat_0=44.10000000000001 +lon_0=0 +k_0=0.9998774990000001 +x_0=600000 +y_0=3200000 +a=6378249.2 +b=6356515 +towgs84=-168,-60,320,0,0,0,0 +pm=paris +units=m +no_defs ", + 27584 : "+title=NTF (Paris) / France IV (deprecated) +proj=lcc +lat_1=42.16500000000001 +lat_0=42.16500000000001 +lon_0=0 +k_0=0.9999447100000001 +x_0=234.358 +y_0=4185861.369 +a=6378249.2 +b=6356515 +towgs84=-168,-60,320,0,0,0,0 +pm=paris +units=m +no_defs ", + 27591 : "+title=NTF (Paris) / Nord France (deprecated) +proj=lcc +lat_1=49.50000000000001 +lat_0=49.50000000000001 +lon_0=0 +k_0=0.999877341 +x_0=600000 +y_0=200000 +a=6378249.2 +b=6356515 +towgs84=-168,-60,320,0,0,0,0 +pm=paris +units=m +no_defs ", + 27592 : "+title=NTF (Paris) / Centre France (deprecated) +proj=lcc +lat_1=46.8 +lat_0=46.8 +lon_0=0 +k_0=0.99987742 +x_0=600000 +y_0=200000 +a=6378249.2 +b=6356515 +towgs84=-168,-60,320,0,0,0,0 +pm=paris +units=m +no_defs ", + 27593 : "+title=NTF (Paris) / Sud France (deprecated) +proj=lcc +lat_1=44.10000000000001 +lat_0=44.10000000000001 +lon_0=0 +k_0=0.9998774990000001 +x_0=600000 +y_0=200000 +a=6378249.2 +b=6356515 +towgs84=-168,-60,320,0,0,0,0 +pm=paris +units=m +no_defs ", + 27594 : "+title=NTF (Paris) / Corse (deprecated) +proj=lcc +lat_1=42.16500000000001 +lat_0=42.16500000000001 +lon_0=0 +k_0=0.9999447100000001 +x_0=234.358 +y_0=185861.369 +a=6378249.2 +b=6356515 +towgs84=-168,-60,320,0,0,0,0 +pm=paris +units=m +no_defs ", + 32601 : "+proj=utm +zone=1 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32602 : "+proj=utm +zone=2 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32603 : "+proj=utm +zone=3 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32604 : "+proj=utm +zone=4 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32605 : "+proj=utm +zone=5 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32606 : "+proj=utm +zone=6 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32607 : "+proj=utm +zone=7 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32608 : "+proj=utm +zone=8 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32609 : "+proj=utm +zone=9 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32610 : "+proj=utm +zone=10 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32611 : "+proj=utm +zone=11 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32612 : "+proj=utm +zone=12 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32613 : "+proj=utm +zone=13 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32614 : "+proj=utm +zone=14 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32615 : "+proj=utm +zone=15 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32616 : "+proj=utm +zone=16 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32617 : "+proj=utm +zone=17 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32618 : "+proj=utm +zone=18 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32619 : "+proj=utm +zone=19 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32620 : "+proj=utm +zone=20 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32621 : "+proj=utm +zone=21 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32622 : "+proj=utm +zone=22 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32623 : "+proj=utm +zone=23 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32624 : "+proj=utm +zone=24 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32625 : "+proj=utm +zone=25 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32626 : "+proj=utm +zone=26 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32627 : "+proj=utm +zone=27 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32628 : "+proj=utm +zone=28 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32629 : "+proj=utm +zone=29 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32630 : "+proj=utm +zone=30 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32631 : "+proj=utm +zone=31 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32632 : "+proj=utm +zone=32 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32633 : "+proj=utm +zone=33 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32634 : "+proj=utm +zone=34 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32635 : "+proj=utm +zone=35 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32636 : "+proj=utm +zone=36 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32637 : "+proj=utm +zone=37 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32638 : "+proj=utm +zone=38 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32639 : "+proj=utm +zone=39 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32640 : "+proj=utm +zone=40 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32641 : "+proj=utm +zone=41 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32642 : "+proj=utm +zone=42 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32643 : "+proj=utm +zone=43 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32644 : "+proj=utm +zone=44 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32645 : "+proj=utm +zone=45 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32646 : "+proj=utm +zone=46 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32647 : "+proj=utm +zone=47 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32648 : "+proj=utm +zone=48 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32649 : "+proj=utm +zone=49 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32650 : "+proj=utm +zone=50 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32651 : "+proj=utm +zone=51 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32652 : "+proj=utm +zone=52 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32653 : "+proj=utm +zone=53 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32654 : "+proj=utm +zone=54 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32655 : "+proj=utm +zone=55 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32656 : "+proj=utm +zone=56 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32657 : "+proj=utm +zone=57 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32658 : "+proj=utm +zone=58 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32659 : "+proj=utm +zone=59 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32660 : "+proj=utm +zone=60 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32661 : "+proj=stere +lat_0=90 +lat_ts=90 +lon_0=0 +k=0.994 +x_0=2000000 +y_0=2000000 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32662 : "+title=WGS 84 / Plate Carree +proj=eqc +lat_ts=0 +lon_0=0 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32701 : "+proj=utm +zone=1 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32702 : "+proj=utm +zone=2 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32703 : "+proj=utm +zone=3 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32704 : "+proj=utm +zone=4 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32705 : "+proj=utm +zone=5 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32706 : "+proj=utm +zone=6 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32707 : "+proj=utm +zone=7 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32708 : "+proj=utm +zone=8 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32709 : "+proj=utm +zone=9 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32710 : "+proj=utm +zone=10 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32711 : "+proj=utm +zone=11 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32712 : "+proj=utm +zone=12 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32713 : "+proj=utm +zone=13 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32714 : "+proj=utm +zone=14 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32715 : "+proj=utm +zone=15 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32716 : "+proj=utm +zone=16 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32717 : "+proj=utm +zone=17 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32718 : "+proj=utm +zone=18 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32719 : "+proj=utm +zone=19 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32720 : "+proj=utm +zone=20 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32721 : "+proj=utm +zone=21 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32722 : "+proj=utm +zone=22 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32723 : "+proj=utm +zone=23 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32724 : "+proj=utm +zone=24 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32725 : "+proj=utm +zone=25 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32726 : "+proj=utm +zone=26 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32727 : "+proj=utm +zone=27 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32728 : "+proj=utm +zone=28 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32729 : "+proj=utm +zone=29 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32730 : "+proj=utm +zone=30 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32731 : "+proj=utm +zone=31 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32732 : "+proj=utm +zone=32 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32733 : "+proj=utm +zone=33 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32734 : "+proj=utm +zone=34 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32735 : "+proj=utm +zone=35 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32736 : "+proj=utm +zone=36 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32737 : "+proj=utm +zone=37 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32738 : "+proj=utm +zone=38 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32739 : "+proj=utm +zone=39 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32740 : "+proj=utm +zone=40 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32741 : "+proj=utm +zone=41 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32742 : "+proj=utm +zone=42 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32743 : "+proj=utm +zone=43 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32744 : "+proj=utm +zone=44 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32745 : "+proj=utm +zone=45 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32746 : "+proj=utm +zone=46 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32747 : "+proj=utm +zone=47 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32748 : "+proj=utm +zone=48 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32749 : "+proj=utm +zone=49 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32750 : "+proj=utm +zone=50 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32751 : "+proj=utm +zone=51 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32752 : "+proj=utm +zone=52 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32753 : "+proj=utm +zone=53 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32754 : "+proj=utm +zone=54 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32755 : "+proj=utm +zone=55 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32756 : "+proj=utm +zone=56 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32757 : "+proj=utm +zone=57 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32758 : "+proj=utm +zone=58 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32759 : "+proj=utm +zone=59 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32760 : "+proj=utm +zone=60 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 32761 : "+proj=stere +lat_0=-90 +lat_ts=-90 +lon_0=0 +k=0.994 +x_0=2000000 +y_0=2000000 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ", + 310024802 : "+title=Geoportail - France metropolitaine +proj=eqc +nadgrids=null +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=0.000000000 +lat_ts=46.500000000 +x_0=0.000 +y_0=0.000 +units=m +no_defs", + 310915814 : "+title=Geoportail - Antilles francaises +proj=eqc +nadgrids=null +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=0.000000000 +lat_ts=15.000000000 +x_0=0.000 +y_0=0.000 +units=m +no_defs", + 310486805 : "+title=Geoportail - Guyane +proj=eqc +nadgrids=null +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=0.000000000 +lat_ts=4.000000000 +x_0=0.000 +y_0=0.000 +units=m +no_defs", + 310700806 : "+title=Geoportail - Reunion et dependances +proj=eqc +nadgrids=null +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=0.000000000 +lat_ts=-21.000000000 +x_0=0.000 +y_0=0.000 +units=m +no_defs", + 310702807 : "+title=Geoportail - Mayotte +proj=eqc +nadgrids=null +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=0.000000000 +lat_ts=-12.000000000 +x_0=0.000 +y_0=0.000 +units=m +no_defs", + 310706808 : "+title=Geoportail - Saint-Pierre et Miquelon +proj=eqc +nadgrids=null +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=0.000000000 +lat_ts=47.000000000 +x_0=0.000 +y_0=0.000 +units=m +no_defs", + 310547809 : "+title=Geoportail - Nouvelle-Caledonie +proj=eqc +nadgrids=null +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=0.000000000 +lat_ts=-22.000000000 +x_0=0.000 +y_0=0.000 +units=m +no_defs", + 310642810 : "+title=Geoportail - Wallis et Futuna +proj=eqc +nadgrids=null +towgs84=0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.000000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=0.000000000 +lat_ts=-14.000000000 +x_0=0.000 +y_0=0.000 +units=m +no_defs", + 310032811 : "+title=Geoportail - Polynesie francaise +proj=eqc +nadgrids=null +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=0.000000000 +lat_ts=-15.000000000 +x_0=0.000 +y_0=0.000 +units=m +no_defs", + 310642812 : "+title=Geoportail - Kerguelen +proj=eqc +nadgrids=null +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=0.000000000 +lat_ts=-49.500000000 +x_0=0.000 +y_0=0.000 +units=m +no_defs", + 310642801 : "+title=Geoportail - Crozet +proj=eqc +nadgrids=null +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=0.000000000 +lat_ts=-46.000000000 +x_0=0.000 +y_0=0.000 +units=m +no_defs", + 310642813 : "+title=Geoportail - Amsterdam et Saint-Paul +proj=eqc +nadgrids=null +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=0.000000000 +lat_ts=-38.000000000 +x_0=0.000 +y_0=0.000 +units=m +no_defs", + 310642901 : "+title=Geoportail - Monde +proj=mill +towgs84=0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.000000 +a=6378137.0000 +rf=298.2572221010000 +lon_0=0.000000000 +x_0=0.000 +y_0=0.000 +units=m +no_defs", + 5489 : "+title=RGAF09 geographiques (dms) +proj=longlat +nadgrids=@null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137 +rf=298.257222101 +units=m +no_defs", + 5490 : "+title=RGAF09 UTM Nord Fuseau 20 +proj=tmerc +nadgrids=@null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137 +rf=298.257222101 +lat_0=0.000000000 +lon_0=-63.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=0.000 +units=m +no_defs" + }, + CRS : { + 84 : "+title=WGS 84 longitude-latitude +proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs " + }, + IGNF : { + // AMST63 : "+title=Amsterdam 1963 +proj=geocent +towgs84=109.753,-528.133,-362.244,0,0,0,0 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + // CROZ63 : "+title=Crozet 1963 +proj=geocent +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + // CSG67 : "+title=Guyane CSG67 +proj=geocent +towgs84=-193.0660,236.9930,105.4470,0.4814,-0.8074,0.1276,1.564900 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + // ED50 : "+title=ED50 +proj=geocent +towgs84=-84.0000,-97.0000,-117.0000 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + // ETRS89 : "+title=Systeme de reference terrestre Europeen (1989) +proj=geocent +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +units=m +no_defs", + // GUAD48 : "+title=Guadeloupe Ste Anne +proj=geocent +towgs84=-472.2900,-5.6300,-304.1200,0.4362,-0.8374,0.2563,1.898400 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + // GUADFM49 : "+title=Guadeloupe Fort Marigot +proj=geocent +towgs84=136.5960,248.1480,-429.7890 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + // IGN63 : "+title=IGN 1963 (Hiva Oa, Tahuata, Mohotani) +proj=geocent +towgs84=410.7210,55.0490,80.7460,-2.5779,-2.3514,-0.6664,17.331100 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + // IGN72 : "+title=IGN 1972 Grande-Terre / Ile des Pins +proj=geocent +towgs84=-11.6400,-348.6000,291.6800 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + // KERG62CAR : "+title=Kerguelen - K0 +proj=geocent +towgs84=144.8990,-186.7700,100.9230 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + // MART38 : "+title=Martinique Fort-Desaix +proj=geocent +towgs84=126.9260,547.9390,130.4090,-2.7867,5.1612,-0.8584,13.822650 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + // MAYO50 : "+title=Mayotte Combani +proj=geocent +towgs84=-599.9280,-275.5520,-195.6650,-0.0835,-0.4715,0.0602,49.281400 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + // MOOREA87 : "+title=Moorea 1987 +proj=geocent +towgs84=215.9820,149.5930,176.2290,3.2624,1.6920,1.1571,10.477300 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + // NTF : "+title=Nouvelle Triangulation Francaise +proj=geocent +nadgrids=ntf_r93.gsb,null +wktext +towgs84=-168.0000,-60.0000,320.0000 +a=6378249.2000 +rf=293.4660210000000 +units=m +no_defs", + // NUKU72 : "+title=IGN 1972 Nuku Hiva +proj=geocent +towgs84=165.7320,216.7200,180.5050,-0.6434,-0.4512,-0.0791,7.420400 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + // REUN47 : "+title=Reunion 1947 +proj=geocent +towgs84=789.5240,-626.4860,-89.9040,0.6006,76.7946,-10.5788,-32.324100 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + // RGF93 : "+title=Reseau geodesique francais 1993 +proj=geocent +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +units=m +no_defs", + // RGFG95 : "+title=Reseau geodesique francais de Guyane 1995 +proj=geocent +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +units=m +no_defs", + // RGM04 : "+title=RGM04 (Reseau Geodesique de Mayotte 2004) +proj=geocent +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +units=m +no_defs", + // RGNC : "+title=Reseau Geodesique de Nouvelle-Caledonie +proj=geocent +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +units=m +no_defs", + // RGPF : "+title=RGPF (Reseau Geodesique de Polynesie Francaise) +proj=geocent +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +units=m +no_defs", + // RGR92 : "+title=Reseau geodesique Reunion 1992 +proj=geocent +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +units=m +no_defs", + // RGSPM06 : "+title=Reseau Geodesique Saint-Pierre-et-Miquelon (2006) +proj=geocent +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +units=m +no_defs", + // RGTAAF07 : "+title=Reseau Geodesique des TAAF (2007) +proj=geocent +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +units=m +no_defs", + // RRAF91 : "+title=RRAF 1991 (Reseau de Reference des Antilles Francaises) +proj=geocent +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +units=m +no_defs", + // STPL69 : "+title=Saint-Paul 1969 +proj=geocent +towgs84=225.571,-346.608,-46.567,0,0,0,0 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + // STPM50 : "+title=St Pierre et Miquelon 1950 +proj=geocent +towgs84=-95.5930,573.7630,173.4420,-0.9602,1.2510,-1.3918,42.626500 +a=6378206.4000 +rf=294.9786982000000 +units=m +no_defs", + // TAHAA : "+title=Raiatea - Tahaa 51-54 (Tahaa, Base Terme Est) +proj=geocent +towgs84=72.4380,345.9180,79.4860,-1.6045,-0.8823,-0.5565,1.374600 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + // TAHI79 : "+title=IGN79 (Tahiti) Iles de la Societe +proj=geocent +towgs84=221.5250,152.9480,176.7680,2.3847,1.3896,0.8770,11.474100 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + // TERA50 : "+title=Pointe Geologie - Perroud 1950 +proj=geocent +towgs84=324.9120,153.2820,172.0260 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + // WALL78 : "+title=Wallis-Uvea 1978 (MOP78) +proj=geocent +towgs84=253.0000,-133.0000,-127.0000 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + // WGS72 : "+title=World Geodetic System 1972 +proj=geocent +towgs84=0.0000,12.0000,6.0000 +a=6378135.0000 +rf=298.2600000000000 +units=m +no_defs", + // WGS84 : "+title=World Geodetic System 1984 +proj=geocent +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +units=m +no_defs", + AMST63GEO : "+title=Amsterdam 1963 +proj=longlat +towgs84=109.753,-528.133,-362.244,0,0,0,0 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + CROZ63GEO : "+title=Crozet 1963 +proj=longlat +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + CSG67GEO : "+title=Guyane CSG67 +proj=longlat +towgs84=-193.0660,236.9930,105.4470,0.4814,-0.8074,0.1276,1.564900 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + ED50G : "+title=ED50 +proj=longlat +towgs84=-84.0000,-97.0000,-117.0000 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + GUAD48GEO : "+title=Guadeloupe Ste Anne +proj=longlat +towgs84=-472.2900,-5.6300,-304.1200,0.4362,-0.8374,0.2563,1.898400 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + GUADFM49GEO : "+title=Guadeloupe Fort Marigot +proj=longlat +towgs84=136.5960,248.1480,-429.7890 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + IGN63GEO : "+title=IGN 1963 (Hiva Oa, Tahuata, Mohotani) +proj=longlat +towgs84=410.7210,55.0490,80.7460,-2.5779,-2.3514,-0.6664,17.331100 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + IGN72GEO : "+title=IGN 1972 Grande-Terre / Ile des Pins +proj=longlat +towgs84=-11.6400,-348.6000,291.6800 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + KERG62GEO : "+title=Kerguelen - K0 +proj=longlat +towgs84=144.8990,-186.7700,100.9230 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + MART38GEO : "+title=Martinique Fort-Desaix +proj=longlat +towgs84=126.9260,547.9390,130.4090,-2.7867,5.1612,-0.8584,13.822650 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + MAYO50GEO : "+title=Mayotte Combani +proj=longlat +towgs84=-599.9280,-275.5520,-195.6650,-0.0835,-0.4715,0.0602,49.281400 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + MOOREA87GEO : "+title=Moorea 1987 +proj=longlat +towgs84=215.9820,149.5930,176.2290,3.2624,1.6920,1.1571,10.477300 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + NTFG : "+title=Nouvelle Triangulation Francaise Greenwich degres sexagesimaux +proj=longlat +nadgrids=ntf_r93.gsb,null +wktext +towgs84=-168.0000,-60.0000,320.0000 +a=6378249.2000 +rf=293.4660210000000 +units=m +no_defs", + NTFP : "+title=Nouvelle Triangulation Francaise Paris grades +proj=longlat +nadgrids=ntf_r93.gsb,null +wktext +towgs84=-168.0000,-60.0000,320.0000 +a=6378249.2000 +rf=293.4660210000000 +pm=2.337229167 +units=m +no_defs", + NUKU72GEO : "+title=IGN 1972 Nuku Hiva +proj=longlat +towgs84=165.7320,216.7200,180.5050,-0.6434,-0.4512,-0.0791,7.420400 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + REUN47GEO : "+title=Reunion 1947 +proj=longlat +towgs84=789.5240,-626.4860,-89.9040,0.6006,76.7946,-10.5788,-32.324100 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + RGF93G : "+title=Reseau geodesique francais 1993 +proj=longlat +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +units=m +no_defs", + RGFG95GEO : "+title=Reseau geodesique francais de Guyane 1995 +proj=longlat +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +units=m +no_defs", + RGM04GEO : "+title=RGM04 (Reseau Geodesique de Mayotte 2004) +proj=longlat +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +units=m +no_defs", + RGNCGEO : "+title=Reseau Geodesique de Nouvelle-Caledonie +proj=longlat +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +units=m +no_defs", + RGPFGEO : "+title=RGPF (Reseau Geodesique de Polynesie Francaise) +proj=longlat +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +units=m +no_defs", + RGR92GEO : "+title=Reseau geodesique de la Reunion 1992 +proj=longlat +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +units=m +no_defs", + RGSPM06GEO : "+title=Saint-Pierre-et-Miquelon (2006) +proj=longlat +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +units=m +no_defs", + RGTAAF07G : "+title=Reseau Geodesique des TAAF (2007) (dms) +proj=longlat +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +units=m +no_defs", + STPL69GEO : "+title=Saint-Paul 1969 +proj=longlat +towgs84=225.571,-346.608,-46.567,0,0,0,0 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + STPM50GEO : "+title=St Pierre et Miquelon 1950 +proj=longlat +towgs84=-95.5930,573.7630,173.4420,-0.9602,1.2510,-1.3918,42.626500 +a=6378206.4000 +rf=294.9786982000000 +units=m +no_defs", + TAHAAGEO : "+title=Raiatea - Tahaa 51-54 (Tahaa, Base Terme Est) +proj=longlat +towgs84=72.4380,345.9180,79.4860,-1.6045,-0.8823,-0.5565,1.374600 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + TAHI79GEO : "+title=IGN79 (Tahiti) Iles de la Societe +proj=longlat +towgs84=221.5250,152.9480,176.7680,2.3847,1.3896,0.8770,11.474100 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + TERA50G : "+title=Pointe Geologie - Perroud 1950 +proj=longlat +towgs84=324.9120,153.2820,172.0260 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + WALL78GEO : "+title=Wallis - Uvea 1978 (MOP78) +proj=longlat +towgs84=253.0000,-133.0000,-127.0000 +a=6378388.0000 +rf=297.0000000000000 +units=m +no_defs", + WGS72G : "+title=WGS72 +proj=longlat +towgs84=0.0000,12.0000,6.0000 +a=6378135.0000 +rf=298.2600000000000 +units=m +no_defs", + WGS84G : "+title=World Geodetic System 1984 +proj=longlat +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +units=m +no_defs", + WGS84RRAFGEO : "+title=Reseau de reference des Antilles francaises (1988-1991) +proj=longlat +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +units=m +no_defs", + XGEO : "+title=Systeme CIO-BIH +proj=longlat +towgs84=0.0000,0.0000,0.5000,0.0000,0.0000,0.0140,-0.100000 +a=6378137.0000 +rf=298.2572221010000 +units=m +no_defs", + AMST63UTM43S : "+title=Amsterdam 1963 UTM fuseau 43 Sud +proj=tmerc +towgs84=109.753,-528.133,-362.244,0,0,0,0 +a=6378388.0000 +rf=297.0000000000000 +lat_0=0.000000000 +lon_0=75.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=10000000.000 +units=m +no_defs", + CROZ63UTM39S : "+title=Crozet 1963 +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378388.0000 +rf=297.0000000000000 +lat_0=0.000000000 +lon_0=51.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=10000000.000 +units=m +no_defs", + CSG67UTM21 : "+title=Guyane CSG67 UTM fuseau 21 +proj=tmerc +towgs84=-193.0660,236.9930,105.4470,0.4814,-0.8074,0.1276,1.564900 +a=6378388.0000 +rf=297.0000000000000 +lat_0=0.000000000 +lon_0=-57.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=0.000 +units=m +no_defs", + CSG67UTM22 : "+title=Guyane CSG67 UTM fuseau 22 +proj=tmerc +towgs84=-193.0660,236.9930,105.4470,0.4814,-0.8074,0.1276,1.564900 +a=6378388.0000 +rf=297.0000000000000 +lat_0=0.000000000 +lon_0=-51.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=0.000 +units=m +no_defs", + GEOPORTALANF : "+title=Geoportail - Antilles francaises +proj=eqc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=0.000000000 +lat_ts=15.000000000 +x_0=0.000 +y_0=0.000 +units=m +no_defs", + GEOPORTALASP : "+title=Geoportail - Amsterdam et Saint-Paul +proj=eqc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=0.000000000 +lat_ts=-38.000000000 +x_0=0.000 +y_0=0.000 +units=m +no_defs", + GEOPORTALCRZ : "+title=Geoportail - Crozet +proj=eqc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=0.000000000 +lat_ts=-46.000000000 +x_0=0.000 +y_0=0.000 +units=m +no_defs", + GEOPORTALFXX : "+title=Geoportail - France metropolitaine +proj=eqc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=0.000000000 +lat_ts=46.500000000 +x_0=0.000 +y_0=0.000 +units=m +no_defs", + GEOPORTALGUF : "+title=Geoportail - Guyane +proj=eqc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=0.000000000 +lat_ts=4.000000000 +x_0=0.000 +y_0=0.000 +units=m +no_defs", + GEOPORTALKER : "+title=Geoportail - Kerguelen +proj=eqc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=0.000000000 +lat_ts=-49.500000000 +x_0=0.000 +y_0=0.000 +units=m +no_defs", + GEOPORTALMYT : "+title=Geoportail - Mayotte +proj=eqc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=0.000000000 +lat_ts=-12.000000000 +x_0=0.000 +y_0=0.000 +units=m +no_defs", + GEOPORTALNCL : "+title=Geoportail - Nouvelle-Caledonie +proj=eqc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=0.000000000 +lat_ts=-22.000000000 +x_0=0.000 +y_0=0.000 +units=m +no_defs", + GEOPORTALPYF : "+title=Geoportail - Polynesie francaise +proj=eqc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=0.000000000 +lat_ts=-15.000000000 +x_0=0.000 +y_0=0.000 +units=m +no_defs", + GEOPORTALREU : "+title=Geoportail - Reunion et dependances +proj=eqc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=0.000000000 +lat_ts=-21.000000000 +x_0=0.000 +y_0=0.000 +units=m +no_defs", + GEOPORTALSPM : "+title=Geoportail - Saint-Pierre et Miquelon +proj=eqc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=0.000000000 +lat_ts=47.000000000 +x_0=0.000 +y_0=0.000 +units=m +no_defs", + GEOPORTALWLF : "+title=Geoportail - Wallis et Futuna +proj=eqc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=0.000000000 +lat_ts=-14.000000000 +x_0=0.000 +y_0=0.000 +units=m +no_defs", + GUAD48UTM20 : "+title=Guadeloupe Ste Anne +proj=tmerc +towgs84=-472.2900,-5.6300,-304.1200,0.4362,-0.8374,0.2563,1.898400 +a=6378388.0000 +rf=297.0000000000000 +lat_0=0.000000000 +lon_0=-63.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=0.000 +units=m +no_defs", + GUADFM49U20 : "+title=Guadeloupe Fort Marigot +proj=tmerc +towgs84=136.5960,248.1480,-429.7890 +a=6378388.0000 +rf=297.0000000000000 +lat_0=0.000000000 +lon_0=-63.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=0.000 +units=m +no_defs", + IGN63UTM7S : "+title=IGN 1963 - Hiva Oa, Tahuata, Mohotani - UTM fuseau 7 Sud +proj=tmerc +towgs84=410.7210,55.0490,80.7460,-2.5779,-2.3514,-0.6664,17.331100 +a=6378388.0000 +rf=297.0000000000000 +lat_0=0.000000000 +lon_0=-141.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=10000000.000 +units=m +no_defs", + IGN72UTM58S : "+title=IGN 1972 - UTM fuseau 58 Sud +proj=tmerc +towgs84=-11.6400,-348.6000,291.6800 +a=6378388.0000 +rf=297.0000000000000 +lat_0=0.000000000 +lon_0=165.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=10000000.000 +units=m +no_defs", + KERG62UTM42S : "+title=Kerguelen 1962 +proj=tmerc +towgs84=144.8990,-186.7700,100.9230 +a=6378388.0000 +rf=297.0000000000000 +lat_0=0.000000000 +lon_0=69.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=10000000.000 +units=m +no_defs", + LAMB1 : "+title=Lambert I +proj=lcc +nadgrids=ntf_r93.gsb,null +wktext +towgs84=-168.0000,-60.0000,320.0000 +a=6378249.2000 +rf=293.4660210000000 +pm=2.337229167 +lat_0=49.500000000 +lon_0=0.000000000 +k_0=0.99987734 +lat_1=49.500000000 +x_0=600000.000 +y_0=200000.000 +units=m +no_defs", + LAMB1C : "+title=Lambert I Carto +proj=lcc +nadgrids=ntf_r93.gsb,null +wktext +towgs84=-168.0000,-60.0000,320.0000 +a=6378249.2000 +rf=293.4660210000000 +pm=2.337229167 +lat_0=49.500000000 +lon_0=0.000000000 +k_0=0.99987734 +lat_1=49.500000000 +x_0=600000.000 +y_0=1200000.000 +units=m +no_defs", + LAMB2 : "+title=Lambert II +proj=lcc +nadgrids=ntf_r93.gsb,null +wktext +towgs84=-168.0000,-60.0000,320.0000 +a=6378249.2000 +rf=293.4660210000000 +pm=2.337229167 +lat_0=46.800000000 +lon_0=0.000000000 +k_0=0.99987742 +lat_1=46.800000000 +x_0=600000.000 +y_0=200000.000 +units=m +no_defs", + LAMB2C : "+title=Lambert II Carto +proj=lcc +nadgrids=ntf_r93.gsb,null +wktext +towgs84=-168.0000,-60.0000,320.0000 +a=6378249.2000 +rf=293.4660210000000 +pm=2.337229167 +lat_0=46.800000000 +lon_0=0.000000000 +k_0=0.99987742 +lat_1=46.800000000 +x_0=600000.000 +y_0=2200000.000 +units=m +no_defs", + LAMB3 : "+title=Lambert III +proj=lcc +nadgrids=ntf_r93.gsb,null +wktext +towgs84=-168.0000,-60.0000,320.0000 +a=6378249.2000 +rf=293.4660210000000 +pm=2.337229167 +lat_0=44.100000000 +lon_0=0.000000000 +k_0=0.99987750 +lat_1=44.100000000 +x_0=600000.000 +y_0=200000.000 +units=m +no_defs", + LAMB3C : "+title=Lambert III Carto +proj=lcc +nadgrids=ntf_r93.gsb,null +wktext +towgs84=-168.0000,-60.0000,320.0000 +a=6378249.2000 +rf=293.4660210000000 +pm=2.337229167 +lat_0=44.100000000 +lon_0=0.000000000 +k_0=0.99987750 +lat_1=44.100000000 +x_0=600000.000 +y_0=3200000.000 +units=m +no_defs", + LAMB4 : "+title=Lambert IV +proj=lcc +nadgrids=ntf_r93.gsb,null +wktext +towgs84=-168.0000,-60.0000,320.0000 +a=6378249.2000 +rf=293.4660210000000 +pm=2.337229167 +lat_0=42.165000000 +lon_0=0.000000000 +k_0=0.99994471 +lat_1=42.165000000 +x_0=234.358 +y_0=185861.369 +units=m +no_defs", + LAMB4C : "+title=Lambert IV Carto +proj=lcc +nadgrids=ntf_r93.gsb,null +wktext +towgs84=-168.0000,-60.0000,320.0000 +a=6378249.2000 +rf=293.4660210000000 +pm=2.337229167 +lat_0=42.165000000 +lon_0=0.000000000 +k_0=0.99994471 +lat_1=42.165000000 +x_0=234.358 +y_0=4185861.369 +units=m +no_defs", + LAMB93 : "+title=Lambert 93 +proj=lcc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=46.500000000 +lon_0=3.000000000 +lat_1=44.000000000 +lat_2=49.000000000 +x_0=700000.000 +y_0=6600000.000 +units=m +no_defs", + RGF93CC42 : "+title=Lambert conique conforme Zone 1 +proj=lcc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=42.000000000 +lon_0=3.000000000 +lat_1=41.200000000 +lat_2=42.800000000 +x_0=1700000.000 +y_0=1200000.000 +units=m +no_defs", + RGF93CC43 : "+title=Lambert conique conforme Zone 2 +proj=lcc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=43.000000000 +lon_0=3.000000000 +lat_1=42.200000000 +lat_2=43.800000000 +x_0=1700000.000 +y_0=2200000.000 +units=m +no_defs", + RGF93CC44 : "+title=Lambert conique conforme Zone 3 +proj=lcc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=44.000000000 +lon_0=3.000000000 +lat_1=43.200000000 +lat_2=44.800000000 +x_0=1700000.000 +y_0=3200000.000 +units=m +no_defs", + RGF93CC45 : "+title=Lambert conique conforme Zone 4 +proj=lcc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=45.000000000 +lon_0=3.000000000 +lat_1=44.200000000 +lat_2=45.800000000 +x_0=1700000.000 +y_0=4200000.000 +units=m +no_defs", + RGF93CC46 : "+title=Lambert conique conforme Zone 5 +proj=lcc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=46.000000000 +lon_0=3.000000000 +lat_1=45.200000000 +lat_2=46.800000000 +x_0=1700000.000 +y_0=5200000.000 +units=m +no_defs", + RGF93CC47 : "+title=Lambert conique conforme Zone 6 +proj=lcc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=47.000000000 +lon_0=3.000000000 +lat_1=46.200000000 +lat_2=47.800000000 +x_0=1700000.000 +y_0=6200000.000 +units=m +no_defs", + RGF93CC48 : "+title=Lambert conique conforme Zone 7 +proj=lcc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=48.000000000 +lon_0=3.000000000 +lat_1=47.200000000 +lat_2=48.800000000 +x_0=1700000.000 +y_0=7200000.000 +units=m +no_defs", + RGF93CC49 : "+title=Lambert conique conforme Zone 8 +proj=lcc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=49.000000000 +lon_0=3.000000000 +lat_1=48.200000000 +lat_2=49.800000000 +x_0=1700000.000 +y_0=8200000.000 +units=m +no_defs", + RGF93CC50 : "+title=Lambert conique conforme Zone 9 +proj=lcc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=50.000000000 +lon_0=3.000000000 +lat_1=49.200000000 +lat_2=50.800000000 +x_0=1700000.000 +y_0=9200000.000 +units=m +no_defs", + LAMBE : "+title=Lambert II etendu +proj=lcc +nadgrids=ntf_r93.gsb,null +wktext +towgs84=-168.0000,-60.0000,320.0000 +a=6378249.2000 +rf=293.4660210000000 +pm=2.337229167 +lat_0=46.800000000 +lon_0=0.000000000 +k_0=0.99987742 +lat_1=46.800000000 +x_0=600000.000 +y_0=2200000.000 +units=m +no_defs", + MART38UTM20 : "+title=Martinique Fort-Desaix +proj=tmerc +towgs84=126.9260,547.9390,130.4090,-2.7867,5.1612,-0.8584,13.822650 +a=6378388.0000 +rf=297.0000000000000 +lat_0=0.000000000 +lon_0=-63.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=0.000 +units=m +no_defs", + MAYO50UTM38S : "+title=Mayotte Combani +proj=tmerc +towgs84=-599.9280,-275.5520,-195.6650,-0.0835,-0.4715,0.0602,49.281400 +a=6378388.0000 +rf=297.0000000000000 +lat_0=0.000000000 +lon_0=45.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=10000000.000 +units=m +no_defs", + MILLER : "+title=Geoportail - Monde +proj=mill +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lon_0=0.000000000 +x_0=0.000 +y_0=0.000 +units=m +no_defs", + MOOREA87U6S : "+title=Moorea 1987 - UTM fuseau 6 Sud +proj=tmerc +towgs84=215.9820,149.5930,176.2290,3.2624,1.6920,1.1571,10.477300 +a=6378388.0000 +rf=297.0000000000000 +lat_0=0.000000000 +lon_0=-147.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=10000000.000 +units=m +no_defs", + NUKU72U7S : "+title=IGN 1972 Nuku Hiva - UTM fuseau 7 Sud +proj=tmerc +towgs84=165.7320,216.7200,180.5050,-0.6434,-0.4512,-0.0791,7.420400 +a=6378388.0000 +rf=297.0000000000000 +lat_0=0.000000000 +lon_0=-141.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=10000000.000 +units=m +no_defs", + // REUN47GAUSSL : "+title=Reunion Gauss Laborde +proj=gstmerc +towgs84=789.5240,-626.4860,-89.9040,0.6006,76.7946,-10.5788,-32.324100 +a=6378388.0000 +rf=297.0000000000000 +lat_0=-21.116666667 +lon_0=55.533333333 +k_0=1.00000000 +x_0=160000.000 +y_0=50000.000 +units=m +no_defs", + RGM04UTM38S : "+title=UTM fuseau 38 Sud (Reseau Geodesique de Mayotte 2004) +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=45.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=10000000.000 +units=m +no_defs", + RGNCUTM57S : "+title=Reseau Geodesique de Nouvelle-Caledonie - UTM fuseau 57 Sud +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=159.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=10000000.000 +units=m +no_defs", + RGNCUTM58S : "+title=Reseau Geodesique de Nouvelle-Caledonie - UTM fuseau 58 Sud +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=165.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=10000000.000 +units=m +no_defs", + RGNCUTM59S : "+title=Reseau Geodesique de Nouvelle-Caledonie - UTM fuseau 59 Sud +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=171.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=10000000.000 +units=m +no_defs", + RGPFUTM5S : "+title=RGPF - UTM fuseau 5 Sud +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=-153.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=10000000.000 +units=m +no_defs", + RGPFUTM6S : "+title=RGPF - UTM fuseau 6 Sud +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=-147.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=10000000.000 +units=m +no_defs", + RGPFUTM7S : "+title=RGPF - UTM fuseau 7 Sud +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=-141.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=10000000.000 +units=m +no_defs", + RGR92UTM40S : "+title=RGR92 UTM fuseau 40 Sud +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=57.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=10000000.000 +units=m +no_defs", + RGSPM06U21 : "+title=Saint-Pierre-et-Miquelon (2006) UTM Fuseau 21 Nord +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=-57.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=0.000 +units=m +no_defs", + STPL69UTM43S : "+title=Saint-Paul 1969 UTM fuseau 43 Sud +proj=tmerc +towgs84=225.571,-346.608,-46.567,0,0,0,0 +a=6378388.0000 +rf=297.0000000000000 +lat_0=0.000000000 +lon_0=75.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=10000000.000 +units=m +no_defs", + STPM50UTM21 : "+title=St Pierre et Miquelon 1950 +proj=tmerc +towgs84=-95.5930,573.7630,173.4420,-0.9602,1.2510,-1.3918,42.626500 +a=6378206.4000 +rf=294.9786982000000 +lat_0=0.000000000 +lon_0=-57.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=0.000 +units=m +no_defs", + TAHAAUTM05S : "+title=Tahaa 1951 +proj=tmerc +towgs84=72.4380,345.9180,79.4860,-1.6045,-0.8823,-0.5565,1.374600 +a=6378388.0000 +rf=297.0000000000000 +lat_0=0.000000000 +lon_0=-153.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=10000000.000 +units=m +no_defs", + TAHI51UTM06S : "+title=Tahiti-Terme Nord UTM fuseau 6 Sud +proj=tmerc +towgs84=162.0000,117.0000,154.0000 +a=6378388.0000 +rf=297.0000000000000 +lat_0=0.000000000 +lon_0=-147.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=10000000.000 +units=m +no_defs", + TAHI79UTM6S : "+title=Tahiti 1979 +proj=tmerc +towgs84=221.5250,152.9480,176.7680,2.3847,1.3896,0.8770,11.474100 +a=6378388.0000 +rf=297.0000000000000 +lat_0=0.000000000 +lon_0=-147.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=10000000.000 +units=m +no_defs", + TERA50STEREO : "+title=Terre Adelie 1950 +proj=stere +towgs84=324.9120,153.2820,172.0260 +a=6378388.0000 +rf=297.0000000000000 +lat_0=-90.000000000 +lon_0=140.000000000 +lat_ts=-67 +k=0.96027295 +x_0=300000.000 +y_0=-2299363.482 +units=m +no_defs", + UTM01SW84 : "+title=World Geodetic System 1984 UTM fuseau 01 Sud +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=-177.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=10000000.000 +units=m +no_defs", + UTM20W84GUAD : "+title=World Geodetic System 1984 UTM fuseau 20 Nord-Guadeloupe +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=-63.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=0.000 +units=m +no_defs", + UTM20W84MART : "+title=World Geodetic System 1984 UTM fuseau 20 Nord-Martinique +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=-63.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=0.000 +units=m +no_defs", + UTM22RGFG95 : "+title=RGFG95 UTM fuseau 22 Nord-Guyane +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=-51.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=0.000 +units=m +no_defs", + UTM39SW84 : "+title=World Geodetic System 1984 UTM fuseau 39 Sud +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=51.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=10000000.000 +units=m +no_defs", + UTM42SW84 : "+title=World Geodetic System 1984 UTM fuseau 42 Sud +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=69.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=10000000.000 +units=m +no_defs", + UTM43SW84 : "+title=World Geodetic System 1984 UTM fuseau 43 Sud +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=75.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=10000000.000 +units=m +no_defs", + WALL78UTM1S : "+title=Wallis-Uvea 1978 (MOP78) UTM 1 SUD +proj=tmerc +towgs84=253.0000,-133.0000,-127.0000 +a=6378388.0000 +rf=297.0000000000000 +lat_0=0.000000000 +lon_0=-177.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=10000000.000 +units=m +no_defs", + ETRS89GEO : "+title=ETRS89 geographiques (dms) +proj=longlat +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +units=m +no_defs", + ETRS89LAEA : "+title=ETRS89 Lambert Azimutal Equal Area +proj=laea +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=52.000000000 +lon_0=10.000000000 +x_0=4321000.000 +y_0=3210000.000 +units=m +no_defs", + ETRS89LCC : "+title=ETRS89 Lambert Conformal Conic +proj=lcc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=52.000000000 +lon_0=9.999999995 +lat_1=35.000000000 +lat_2=65.000000000 +x_0=4000000.000 +y_0=2800000.000 +units=m +no_defs", + UTM26ETRS89 : "+title=Europe - de 30d a 24d Ouest +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=-27.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=0.000 +units=m +no_defs", + UTM27ETRS89 : "+title=Europe - de 24d a 18d Ouest +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=-21.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=0.000 +units=m +no_defs", + UTM28ETRS89 : "+title=Europe - de 18d a 12d Ouest +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=-15.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=0.000 +units=m +no_defs", + UTM29ETRS89 : "+title=Europe - de 12d a 6d Ouest +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=-9.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=0.000 +units=m +no_defs", + UTM30ETRS89 : "+title=Europe - de -6d a 0d Ouest +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=-3.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=0.000 +units=m +no_defs", + UTM31ETRS89 : "+title=Europe - de 0d a 6d Est +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=3.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=0.000 +units=m +no_defs", + UTM32ETRS89 : "+title=Europe - de 6d a 12d Est +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=9.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=0.000 +units=m +no_defs", + UTM33ETRS89 : "+title=Europe - de 12d a 18d Est +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=15.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=0.000 +units=m +no_defs", + UTM34ETRS89 : "+title=Europe - de 18d a 24d Est +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=21.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=0.000 +units=m +no_defs", + UTM35ETRS89 : "+title=Europe - de 24d a 30d Est +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=27.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=0.000 +units=m +no_defs", + UTM36ETRS89 : "+title=Europe - de 30d a 36d Est +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=33.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=0.000 +units=m +no_defs", + UTM37ETRS89 : "+title=Europe - de 36d a 42d Est +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=39.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=0.000 +units=m +no_defs", + UTM38ETRS89 : "+title=Europe - de 42d a 48d Est +proj=tmerc +nadgrids=null +wktext +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=45.000000000 +k_0=0.99960000 +x_0=500000.000 +y_0=0.000 +units=m +no_defs" + } +}; + +export default Register; diff --git a/src/Common-review/Utils/SearchEngineUtils.js b/src/Common-review/Utils/SearchEngineUtils.js new file mode 100644 index 000000000..666a72f6d --- /dev/null +++ b/src/Common-review/Utils/SearchEngineUtils.js @@ -0,0 +1,145 @@ +var SearchEngineUtils = { + /** + * Advanced Search Filters by default + */ + advancedSearchFiltersByDefault : { + PositionOfInterest : [{ + name : "importance", + title : "Importance" + }, { + name : "nature", + title : "Nature" + }, { + name : "territory", + title : "Territoire" + }, { + name : "insee", + title : "Code INSEE" + }, { + name : "municipality", + title : "Ville" + }, { + name : "department", + title : "Département" + }], + StreetAddress : [ + // INFO + // ce ne sont pas des filtres mais une location dite structurée ! + // {name : "number", title : "Numéro"}, + // {name : "street", title : "Rue"}, + // {name : "postalCode", title : "Code Postal"}, + // {name : "city", title : "Commune"}, + { + name : "territory", + title : "Territoire" + }, { + name : "insee", + title : "Code INSEE" + }, { + name : "municipality", + title : "Ville" + }, { + name : "department", + title : "Département" + } + ], + CadastralParcel : [{ + name : "department", + title : "Département", + description : "Numéro du département (ex: 01, 94)" + }, { + name : "commune", + title : "Code commune (INSEE)", + description : "Code commune (INSEE) : 3 chiffres (ex: 067)" + }, + // { + // name : "insee", + // title : "Code INSEE" + // }, + { + name : "absorbedCity", + title : "Commune absorbée", + description : "Commune absorbée : 3 chiffres (ex: 000, 001)" + }, { + name : "section", + title : "Section", + description : "Section : 2 caractères (ex: AA, 0D)" + }, { + name : "number", + title : "Numéro", + description : "Numéro de la parcelle : 4 chiffres (ex: 0041, 0250)" + } + ], + Administratif : [{ + name : "prefecture", + title : "Préfecture" + }, { + name : "inseeRegion", + title : "Code région (INSEE)" + }, { + name : "inseeDepartment", + title : "Code département (INSEE)" + }, { + name : "municipality", + title : "Ville" + }] + }, + + /** + * Provides default zoom based on results. + * + * @param {Object} info - location information + * @returns {Integer} zoom level + */ + zoomToResultsByDefault : function (info) { + // FIXME + // la classification du geocodage est differente de l'importance de l'autocompletion ! + + var zoom = 15; + + var service = info.service; + var fields = info.fields; + var type = info.type; + + var importance = { + 1 : 11, + 2 : 12, + 3 : 13, + 4 : 14, + 5 : 15, + 6 : 16, + 7 : 17, + 8 : 17 + }; + + // AutoCompletion POI + if (service === "SuggestedLocation") { + if (type === "PositionOfInterest") { + zoom = importance[fields.classification]; + } + } + + // Geocodage POI + if (service === "DirectGeocodedLocation") { + if (type === "PositionOfInterest") { + zoom = importance[fields.importance] || 14; // au cas où la recherche est en freeform ! + } + } + + if (type === "StreetAddress") { + zoom = 17; + } + + if (type === "CadastralParcel") { + zoom = 17; + } + + if (type === "Administratif") { + zoom = 12; + } + + return zoom; + } +}; + +export default SearchEngineUtils; diff --git a/src/Common-review/Utils/SelectorID.js b/src/Common-review/Utils/SelectorID.js new file mode 100644 index 000000000..d5b0dc6d1 --- /dev/null +++ b/src/Common-review/Utils/SelectorID.js @@ -0,0 +1,80 @@ +/** + * formalisme d'un tag ID : + * -> NAME(_ORDER)-1460636385836 + * + * Ex. + * GProutePoints-1460636385836 + * GProutePoint_10-1460636385836 + */ +var SelectorID = { + + /** + * Construction d'un identifiant statique basé sur le timestamp, + * et qui s'incremente de +1 à chaque appel + */ + generate : (function () { + var timestamp = Math.floor(Date.now()); + return function () { + return timestamp++; + }; + })(), + + /** + * nom du tag + * @param {String} id - the id + * + * @returns {String} index + */ + name : function (id) { + var name = null; + + var i = id.lastIndexOf("-"); + if (i === -1) { + name = id; + } else { + name = id.substring(0, i); + } + + return name; + }, + + /** + * numero d'identifiant du tag + * @param {String} id - the id + * + * @returns {String} index + */ + index : function (id) { + var index = null; + + var name = this.name(id); + // if (name !== id) { + var i = name.lastIndexOf("_"); + if (i !== -1) { + index = name.substring(i + 1); + } + // } + + return index; + }, + + /** + * uuid du tag + * @param {String} id - the id + * + * @returns {String} uuid + */ + uuid : function (id) { + var uuid = null; + + var i = id.lastIndexOf("-"); + if (i !== -1) { + uuid = parseInt(id.substring(i + 1), 10); + } + + return uuid; + } + +}; + +export default SelectorID; diff --git a/src/Itowns-review/CRS/CRS.js b/src/Itowns-review/CRS/CRS.js new file mode 100644 index 000000000..b38835df4 --- /dev/null +++ b/src/Itowns-review/CRS/CRS.js @@ -0,0 +1,204 @@ +var CRS = { + + /** + * CRS : WGS84 + * + * @property EPSG:4326 + * @private + */ + "EPSG:4326" : "+title=WGS 84 (long/lat) +proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs +units=degrees", + + /** + * CRS : PseudoMercator + * + * @property EPSG:3857 + * @private + */ + "EPSG:3857" : "+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs", + + /** + * CRS : Lambert 93 + * + * @property EPSG:2154 + * @private + */ + "EPSG:2154" : "+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs", + + /** + * CRS : Lambert 2 extended + * + * @property EPSG:27572 + * @private + */ + "EPSG:27572" : "+proj=lcc +lat_1=46.8 +lat_0=46.8 +lon_0=0 +k_0=0.99987742 +x_0=600000 +y_0=2200000 +a=6378249.2 +b=6356515 +towgs84=-168,-60,320,0,0,0,0 +pm=paris +units=m +no_defs", + + /** + * CRS : UTM 20N (Guadeloupe, Martinique) + * + * @property EPSG:32620 + * @private + */ + "EPSG:32620" : "+proj=utm +zone=20 +ellps=WGS84 +datum=WGS84 +units=m +no_defs", + + /** + * CRS : UTM 21N (Saint-Pierre-et-Miquelon) + * + * @property EPSG:4467 + * @private + */ + "EPSG:4467" : "+proj=utm +zone=21 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs", + + /** + * CRS : UTM 22N (Guyane) + * + * @property EPSG:2972 + * @private + */ + "EPSG:2972" : "+proj=utm +zone=22 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs", + + /** + * CRS : UTM 30N (France métropolitaine) + * + * @property EPSG:32630 + * @private + */ + "EPSG:32630" : "+proj=utm +zone=30 +datum=WGS84 +units=m +no_defs", + + /** + * CRS : UTM 31N (France métropolitaine) + * + * @property EPSG:32631 + * @private + */ + "EPSG:32631" : "+proj=utm +zone=31 +datum=WGS84 +units=m +no_defs", + + /** + * CRS : UTM 32N (France métropolitaine) + * + * @property EPSG:32632 + * @private + */ + "EPSG:32632" : "+proj=utm +zone=32 +datum=WGS84 +units=m +no_defs", + + /** + * CRS : UTM 38S (Mayotte) + * + * @property EPSG:4471 + * @private + */ + "EPSG:4471" : "+proj=utm +zone=38 +south +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs", + + /** + * CRS : UTM 40S (Réunion) + * + * @property EPSG:2975 + * @private + */ + "EPSG:2975" : "+proj=utm +zone=40 +south +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs", + + /** + * CRS : UTM 5S (Polynésie) + * + * @property EPSG:3296 + * @private + */ + "EPSG:3296" : "+proj=utm +zone=5 +south +ellps=GRS80 +towgs84=0.072,-0.507,-0.245,-0.0183,0.0003,-0.007,-0.0093 +units=m +no_defs", + + /** + * CRS : UTM 6S (Polynésie) + * + * @property EPSG:3297 + * @private + */ + "EPSG:3297" : "+proj=utm +zone=6 +south +ellps=GRS80 +towgs84=0.072,-0.507,-0.245,-0.0183,0.0003,-0.007,-0.0093 +units=m +no_defs", + + /** + * CRS : UTM 7S (Polynésie) + * + * @property EPSG:32707 + * @private + */ + "EPSG:32707" : "+proj=utm +zone=7 +south +datum=WGS84 +units=m +no_defs", + + /** + * CRS : UTM 8S (Polynésie) + * + * @property EPSG:32708 + * @private + */ + "EPSG:32708" : "+proj=utm +zone=8 +south +datum=WGS84 +units=m +no_defs", + + /** + * CRS : UTM 12N (Ile de Clipperton) + * + * @property EPSG:26912 + * @private + */ + "EPSG:26912" : "+proj=utm +zone=12 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs", + + /** + * CRS : UTM 42S (Iles Kerguelen) + * + * @property EPSG:32742 + * @private + */ + "EPSG:32742" : "+proj=utm +zone=42 +south +datum=WGS84 +units=m +no_defs", + + /** + * CRS : UTM 39S (Iles Crozet) + * + * @property EPSG:32739 + * @private + */ + "EPSG:32739" : "+proj=utm +zone=39 +south +datum=WGS84 +units=m +no_defs", + + /** + * CRS : UTM 43S (Iles St-Paul et Amsterdam) + * + * @property EPSG:32743 + * @private + */ + "EPSG:32743" : "+proj=utm +zone=43 +south +datum=WGS84 +units=m +no_defs", + + /** + * CRS : Stéréographique polaire (Terre Adelie) + * + * @property EPSG:2986 + * @private + */ + "EPSG:2986" : "", + + /** + * CRS : UTM 37S (Iles du canal de Mozambique) + * + * @property EPSG:32737 + * @private + */ + "EPSG:32737" : "+proj=utm +zone=37 +south +datum=WGS84 +units=m +no_defs", + + /** + * CRS : UTM 38S (Iles du canal de Mozambique) + * + * @property EPSG:32738 + * @private + */ + "EPSG:32738" : "+proj=utm +zone=38 +south +datum=WGS84 +units=m +no_defs", + + /** + * CRS : UTM 1S (Wallis-et-Futuna) + * + * @property EPSG:2988 + * @private + */ + "EPSG:2988" : "+proj=utm +zone=1 +south +ellps=intl +towgs84=253,-132,-127,0,0,0,0 +units=m +no_defs", + + /** + * CRS : RGNC91-93 (Nouvelle-Calédonie) + * + * @property EPSG:3163 + * @private + */ + "EPSG:3163" : "+proj=lcc +lat_1=-20.66666666666667 +lat_2=-22.33333333333333 +lat_0=-21.5 +lon_0=166 +x_0=400000 +y_0=300000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs" +}; + +export default CRS; diff --git a/src/Itowns-review/CSS/Controls/Attribution/GPattributionItowns.css b/src/Itowns-review/CSS/Controls/Attribution/GPattributionItowns.css new file mode 100644 index 000000000..686655603 --- /dev/null +++ b/src/Itowns-review/CSS/Controls/Attribution/GPattributionItowns.css @@ -0,0 +1,66 @@ +div[id^=GPAttribution-] { + display: flex; + bottom: 8px; + right: 8px; + width: calc(90% - 1.3em); +} + +div[id^=GPAttributionsListContainer-] { + display: none; + width: 80%; + height: 80%; + background: white; + opacity: 0.5; + border-radius: 4px; + z-index: 0; + position: absolute; +} + +div[id^=GPAttributionsListContainer-] ul { + display: flex; + margin: auto; + list-style: none; +} + +label[id^=GPshowAttributionsListPicto-] { + display: flex; + z-index: 1; + position: relative; + margin-left: auto; +} + +input[id^=GPshowAttributionsList-]:checked + div[id^=GPAttributionsListContainer-] { + display: flex; +} + +input[id^=GPshowAttributionsList-]:checked + div[id^=GPAttributionsListContainer-] + label[id^=GPshowAttributionsListPicto-] { + background-color: transparent; +} + +span[id^=GPshowAttributionsListOpenClose-] { + color: #fff; + font-size: 1.6em; + font-weight: 700; + text-align: center; + line-height: 1.2em; +} + +div[id^=GPAttributionsListContainer-] li:before { + content: " | "; +} + +div[id^=GPAttributionsListContainer-] ul li:nth-child(1):before { + content: ""; +} + +div[id^=GPAttributionsListContainer-] ul li:first-child:before { + content: ""; +} + +div[id^=GPAttributionsListContainer-] a:link { + text-decoration: none; +} + +div[id^=GPAttributionsListContainer-] a:visited { + text-decoration: none; +} diff --git a/src/Itowns-review/CSS/Controls/BoostRelief/GPboostReliefItowns.css b/src/Itowns-review/CSS/Controls/BoostRelief/GPboostReliefItowns.css new file mode 100644 index 000000000..a183b9068 --- /dev/null +++ b/src/Itowns-review/CSS/Controls/BoostRelief/GPboostReliefItowns.css @@ -0,0 +1,74 @@ +/* BOOST RELIEF ITOWNS */ + +div[id^=GPboostRelief-] { + top: 8px; + left: 8px; +} + +/* Showing/hiding boostRelief panel */ +label[id^=GPshowBoostReliefPicto-] { + display: flex; + z-index: 1; + position: relative; + margin-left: auto; +} + +label[id^=GPshowBoostReliefListPicto-] { + display: flex; + z-index: 1; + position: relative; +} + +/* +span[id^=GPshowBoostReliefOpenClose-] { + color: #fff; + font-size: 1.6em; + font-weight: 700; + text-align: center; + line-height: 1.2em; +}*/ + +span[id^="GPshowBoostReliefOpenClose-"] { + background-image: url("img/GPboostReliefOpen.png"); +} + +.spanClose span[id^="GPshowBoostReliefOpenClose-"] { + background-position: 0 0; +} + +.spanOpen span[id^="GPshowBoostReliefOpenClose-"] { + background-position: -26px 0; +} + +/* +div[id^=GPboostRelief-] input[type="checkbox"]:checked + div + label[id^=GPshowBoostReliefPicto] span[id^=GPshowBoostReliefOpen] { + opacity: 0.7; +} + +div[id^=GPboostRelief-] input[type="checkbox"]:checked + div + label[id^=GPshowBoostReliefPicto] span[id^=GPshowBoostReliefClose] { + background-color: rgba(0,60,136,0.3); +} + +div[id^=GPboostRelief-] input[type="checkbox"]:checked + div + label[id^=GPshowBoostReliefPicto] :hover span[id^=GPshowBoostReliefClose] { + background-color: rgba(0,60,136,0.4); +} + +*/ + +/* Relief slider : Chrome, Safari, Opera */ + +.GPlayerRelief input[type="range"]::-webkit-slider-runnable-track { + background: url("img/GPreliefSlider.png"); +} + +/* Relief slider : Firefox */ + +.GPlayerRelief input[type="range"]::-moz-range-track { + background: url("img/GPreliefSlider.png"); +} + +/* Relief slider : IE */ + +.GPlayerRelief input[type="range"]::-ms-track { + background: url("img/GPreliefSlider.png"); +} diff --git a/src/Itowns-review/CSS/Controls/BoostRelief/img/GPboostReliefOpen.png b/src/Itowns-review/CSS/Controls/BoostRelief/img/GPboostReliefOpen.png new file mode 100644 index 0000000000000000000000000000000000000000..d083722cc7cbc56cbf7a04275c13c11edfce028f GIT binary patch literal 306 zcmeAS@N?(olHy`uVBq!ia0vp^QXtI11|(N{`J4k%oCO|{#X$M%Ak65bF}ngN_{7u2 zF~sBe+o`_%O$Guk_rpxuDn9@JAIRIo-o5gMo~rAkgO-l>{p{H`nKF1X3M3pj5Pa~A zNF{rZ1H-$C@@I0^e607lWU_JDbKRfOfxqVUZTO7Zb)R#{tf*-x#{d>&W3@%qy1uHOIN*~I-by}KY}w$bd^ znwv+9_iS6IHTM?B?5YR1-fsz!|Mq9;+OH<2``AOurn^Y3zGDRRFN3G6pUXO@geCyd C|ANK< literal 0 HcmV?d00001 diff --git a/src/Itowns-review/CSS/Controls/BoostRelief/img/GPreliefSlider.png b/src/Itowns-review/CSS/Controls/BoostRelief/img/GPreliefSlider.png new file mode 100644 index 0000000000000000000000000000000000000000..301e289bcd7e7da06b0af316a37550ef626aaeea GIT binary patch literal 179 zcmeAS@N?(olHy`uVBq!ia0vp^0YJ>c!3HEH`F8k#IK@t$Asj$Z!;#Vf2?p zUk71ECym(^Ahji~5hcO-X(i=}MX3zs<>h*rdD+Fui3O>8`9N=3Y5X9leJi&>9fp5#Z*77^| RR|54ic)I$ztaD0e0sssXISv2- literal 0 HcmV?d00001 diff --git a/src/Itowns-review/CSS/Controls/LayerSwitcher/GPlayerSwitcherItowns.css b/src/Itowns-review/CSS/Controls/LayerSwitcher/GPlayerSwitcherItowns.css new file mode 100644 index 000000000..ecc932010 --- /dev/null +++ b/src/Itowns-review/CSS/Controls/LayerSwitcher/GPlayerSwitcherItowns.css @@ -0,0 +1,91 @@ +/* LAYER SWITCHER OL3 */ + +div[id^=GPlayerSwitcher-] { + top: 8px; + right: 8px; +} + +/* Showing/hiding layers list */ + +label[id^=GPshowLayersListPicto] { + width: 38px; + height: 38px; +} + +span[id^=GPshowLayersListOpen] , +span[id^=GPshowLayersListClose] { + top: 3px; + left: 3px; + width: 32px; + height: 32px; + background-image: url("img/GPshowLayersList.png"); +} + +span[id^=GPshowLayersListClose] { + background-position: -32px 0; +} + + +div[id^=GPlayerSwitcher-] input[type="checkbox"]:checked + div + label[id^=GPshowLayersListPicto] span[id^=GPshowLayersListOpen] { + opacity: 0.7; +} + +div[id^=GPlayerSwitcher-] input[type="checkbox"]:checked + div + label[id^=GPshowLayersListPicto] span[id^=GPshowLayersListClose] { + background-color: rgba(0,60,136,0.3); +} + +div[id^=GPlayerSwitcher-] input[type="checkbox"]:checked + div + label[id^=GPshowLayersListPicto] :hover span[id^=GPshowLayersListClose] { + background-color: rgba(0,60,136,0.4); +} + +/* Layers list */ + +.GPlayerVisibility, +.GPshowLayerAdvancedTools, +.GPlayerInfo, +.GPlayerInfoOpened, +.GPlayerRemove { + background-image: url("img/GPlayerTools.png"); +} + +/* Opacity slider : Chrome, Safari, Opera */ + +.GPlayerOpacity input[type="range"]::-webkit-slider-runnable-track { + background: url("img/GPopacitySlider.png"); +} + +/* Opacity slider : Firefox */ + +.GPlayerOpacity input[type="range"]::-moz-range-track { + background: url("img/GPopacitySlider.png"); +} + +/* Opacity slider : IE */ + +.GPlayerOpacity input[type="range"]::-ms-track { + background: url("img/GPopacitySlider.png"); +} + +/* Layer info panel */ + +div[id^=GPlayerInfoPanel] { + right: 190px; +} + +div[id^=GPlayerInfoTitle] { + color: #366291; + border-bottom: 1px solid #366291; +} + +div[id^=GPlayerInfoQuicklook] { + background-image: url("img/GPlayerInfo.png"); +} + +div[id^=GPlayerInfoClose] { + background-image: url("img/GPlayerInfoClose.png"); +} + +.GPlayerInfoLink, +.GPlayerInfoPopup { + background-image: url("img/GPlayerInfo.png"); +} diff --git a/src/Itowns-review/CSS/Controls/LayerSwitcher/img/GPlayerInfo.png b/src/Itowns-review/CSS/Controls/LayerSwitcher/img/GPlayerInfo.png new file mode 100644 index 0000000000000000000000000000000000000000..b7d5a0be86eb538881ed366cc2d6cbd564bc8ad3 GIT binary patch literal 726 zcmV;{0xA88P)rGGHj>jiiHZ4@SYmRXPv3r1S8Kd0F+r#wXnY~H{$a}YNFAue4&3$>-G2dtE#HD6~-nP zE%k3_tldj_r3Ij_#(00&x-^`awT6Wdk(ZVam+9*>N&+_{cOcda+y?PL3ti|2ApvTt z1%8P~UK~1iX&1<=2i+g-nRw(0Y_avUpr=o^<34-CH#3}iwKZiDVAQssuR}HWU@KsXPj{bA~0gJA|dH!B+)&Kwi07*qo IM6N<$g3o3~Pyhe` literal 0 HcmV?d00001 diff --git a/src/Itowns-review/CSS/Controls/LayerSwitcher/img/GPlayerInfoClose.png b/src/Itowns-review/CSS/Controls/LayerSwitcher/img/GPlayerInfoClose.png new file mode 100644 index 0000000000000000000000000000000000000000..1d61d5dec4a4151c77e2122983e60772c059515f GIT binary patch literal 535 zcmV+y0_gpTP)j0BKLeeY)Ak{q}O3`9e-pGpk_W8|%+?xfE zcaPSxg`QjaE!;}?eHUri>8?8YSH=4~Jrq4laakxD2U051Z z?8z@{%+8pc*=e>jPkW+LKw!8g)I1EiEX6E9V7PorZ)Mcr7b04nzG{CGhe^2s;2xm- zmmIO=0^)F~o$i+U2g7Gl@BmT z7KJ1q{0Si#AetG1R7!+eMajq-CVMFvoms+yNKGxb7Y(Jz&NRpO>;tjOOMv)=uBqo^sF$4y0ik&-m&NZ9OE1qtPMx%eO zt*!m%XrGZW)||d}?V9}Nn{SvkYZgUCMQK}LH8nNwj2ky@hm>+1kU!kq3w#oZL>hPR z-u-Pl{aC*1@;jysb|Ce2Ao2ku^a}VykBY|6|FG%Xu`W=v*}OtZX%|A=0FYAJ&1N&e zs0BLaBIvel+vL4__c(OuP}&4~^5n^Pfm6Vwmt68#O1ZVFs>+=XdxiThzl)Twv?nB6 zZ&a7L$I{%?)z!^1nM@^8$`asLuki0bLWmA2gvi<73r`zUu#ban(TWnm5(Kn3L*NWl%u&cYgoi3!`F+HBWPV+o%DLWtXZ>$qM{)@7S?JOL|*3%NOk3IKBx0`@YN1 z-66jdCVlpe-m7 zC1hu3i&%S0OA7#Rzx_4zs>Hh~G^aG^_UgO^%r0?faV)ebDTd0y~l;X-by{fVV~&aR;1E=ag5D z+3Oy1_Uu{0;V{RJ9TQJ)r(Um@4I4H{x7$rcMFs8c?N}@pcJADXrfD2KdQ>LkV0U*n zkw}En(ozuAc-uP1Cz*Y(no+Ux7_a~Dd;@_C@wCJH{|B#k(-+r{~qg;Qa*U?qJC9pb91xwcsx{8RK%lcPfw2o*tl_{ zuv)G7d_JySyN1nXqrbnO88c>xEnBwW@puvzO;=Z!3&~e?pj^lzgP#rW5@f$V8Y5JF3h6n6523COWg(%=q!+p+{|xvLd(bd)%(Vy_fE!L!c&;=>fpt;2;)@ z<%NEW#S%a8rYumK&4$nCqpPdynL$z%1-IKB7oe)DXqtwiC{I>vM~BojjiREWgq+LC z$wAXJ?%lg5pLgnuFTMaEJ3AXiQ3!{_Sglq7dU|?fI2`P(}`clwmU*d`u zeW`~vE=nP`O&K(Q8qFZuQC(KpQC(IT%^*5u(EO5QPEQ0TP+O?ivoxN)Pf z*=)F6F8qGKR8*H{CqS`WAfz51cO0&>((uDa&nkIe}19|rK?HI z!N(~SVv?{YK2B9MKV%Lng!meGCV)K6gb5QE92|V++LR7S@4fdPilR_kTT3_`MpaeL zoH;{9MFm%`ToDe31DDH%s;U6g*4CmZ3I`7!OzITBV8H^cRx6#IokSuL6h)!CyPHRk z9s#gw)hfJRZ#-Iec6MU5S`%Ij0Fg+f5qO-y;13K94K*e^d3sbNWDgj~9Lj7=hj4zV z98}l!uVY*Mgb5Q~=(k#}@ziWI0!^q6+TPxd!{I>Fv}f|mSRJ&brG+(X)}*Zt+TY)g zs;cz$^>O<2X(mpb$olo`Q4|G5QMh~eF8TTSN!LM#{c;E)nnp1eQcCHls;au2ieL6U zmmE?sN_)cbm+DQINh8I(o3e+5*$t2(qmH(k@?bij-_X#oK-cwKQ>RX4?%cU_c6Ksn zP5}VDy*(^nzMMOE?!*Glg38Luzo%3OjZsxqB>)@_hxGY;&-BF(N9WI<7w6BPPm7}~ zSFRMXH%VW9`DHx+jO916w^ymYNvf)l?x$Gy{vvGgc#6ueQT=X1h`RM=C<#- zR4#=)1>$A(!T~A8)^v*#U|5iaydg{`(*s@CM|DWjb^SrwBIy5TOr{`>D! zUS9r2ese=ZgA$EKw+kWG0dt0%dx5J%LqmiM0XY%F0UXPePy@Hf)fgP>6c!3HEH`F8k#IK@t$Asj$Z!;#Vf2?p zUk71ECym(^Ahji~5hcO-X(i=}MX3zs<>h*rdD+Fui3O>8`9N=3Y5X9leJi&>9fp5#Z*77^| RR|54ic)I$ztaD0e0sssXISv2- literal 0 HcmV?d00001 diff --git a/src/Itowns-review/CSS/Controls/LayerSwitcher/img/GPshowLayersList.png b/src/Itowns-review/CSS/Controls/LayerSwitcher/img/GPshowLayersList.png new file mode 100644 index 0000000000000000000000000000000000000000..9f4c4fd30a136670e07a0caa369977d629aa2b5d GIT binary patch literal 571 zcmV-B0>u4^P)#avb~ky>~Ur_sT~x{biW z%>2$I7hW*7RwHmHcpp_Nya`6&D8Ar3W=1Wxh>eVZ*XaI5oo>9_#|9P?8So%D?$)~c zb#wtv;0HeANF^Iz!`lB@aNQ`o@b0Y|F-&;BRs!+ogYP}|msPYIV)7!Ua2@Lzp-P0(eH>sE1pDn z@a)CAsDCc?0ppKGR4F{ecQZJiV@KJ=`z!kxvzg!Luu|~7=l6vb%w^u2jat7uWyJX% z#;5q}>!ffue-K*E8IkXZ!W9qU%Vi&ga4+iJPucc^T6(^qBl0WWO?4K)aeTv99IN7j zG1Q1Egl9OOMD5#E-?Q6TD*7}AwE9xnNfAzE_MSs^1rD_YB9ZgG2%alV$lWT9#Bedh zzr~&=1(3-@(a8DM!hnU=c0*jWHcQX>{xK7#M^1Xi7-Nhg`~=R5f4l}1J5K-r002ov JPDHLkV1mp}437W+ literal 0 HcmV?d00001 diff --git a/src/Itowns-review/CSS/Controls/MiniGlobe/GPminiGlobeItowns.css b/src/Itowns-review/CSS/Controls/MiniGlobe/GPminiGlobeItowns.css new file mode 100644 index 000000000..5da731735 --- /dev/null +++ b/src/Itowns-review/CSS/Controls/MiniGlobe/GPminiGlobeItowns.css @@ -0,0 +1,8 @@ +div[id^=GPminiglobeContainer-] { + display: block; + width:100px; + height:100px; + left: 20px; + bottom: 20px; + color: white; +} diff --git a/src/Itowns-review/CSS/Controls/MousePosition/GPmousePositionItowns.css b/src/Itowns-review/CSS/Controls/MousePosition/GPmousePositionItowns.css new file mode 100644 index 000000000..ffe326dc0 --- /dev/null +++ b/src/Itowns-review/CSS/Controls/MousePosition/GPmousePositionItowns.css @@ -0,0 +1,30 @@ +/* MOUSE POSITION */ + +div[id^=GPmousePosition-] { + bottom: 8px; + left: 10px; +} + +/* Showing/hiding mouse position panel */ + +span[id^=GPshowMousePositionOpen] { + background-image: url("img/GPmousePositionOpen.png"); +} + +/* General panels */ + +div[id^=GPmousePositionPanel-] { + position: relative; + left: 0px; + top: 0px; +} + +div[id^=GPmousePositionPanelClose] { + background-image: url("img/GPmousePositionOpen.png"); +} + +/* Map center localisation */ + +#GPmapCenter { + background-image: url("img/GPmapCenter.png"); +} diff --git a/src/Itowns-review/CSS/Controls/MousePosition/img/GPmapCenter.png b/src/Itowns-review/CSS/Controls/MousePosition/img/GPmapCenter.png new file mode 100644 index 0000000000000000000000000000000000000000..a10837a90df7b82cb7010cfc6bc22a7840f9b2d4 GIT binary patch literal 1975 zcmV;o2T1sdP)eyvCgwn-7XH#mww0=t9VzOEAU6mOr&5A(OI=0As%0xRRehw56l(hn z*j6a0sd+IC25$Gb7q4$;rXP4I5MFM{!6iTGKHR)L|Nrgo?99!BIOh-xrWzcHfLRGg zBo`4O6*#1D&XR$%t%x(kvG6%UcoYzfaHPP>8O%l2CTL@eT?FJnY$u%u%|NK4D9~!T^9h^vYE2m-*CvnFU6jbn;Fr4-91i61qXx zE-+5p<=XK54K?Cxwx$ub`7JYXyN@Dm*12-)^*r={?nYuNG4u+gAP5_n(^{jIu4f6!To z0N$lxbXu}f zm?eGP6t9G)3W4^b3a0d1gGkx4oEf}ae=C>IVQEK5EdS^GaWeq`V3u_8<*xUzoDmX1 zJ`aGc3!Qs=;;ukg3*Ia?u^v zE3p`}q}xg^x)By!YNP$fi>ntH@iiw%oS1%REv(=02Rj;YQoi3(__iA%(x}us$-Xz>E<>$pP%l=mw*!*LWgs(}?ri-58NlfEgo*m=2m!U%V4vWyTRwU+4wF{1N~F znshrQ!sxK$r~m#1m=h!M7H0@;!sLJNTfad%PsfBsijjT$y|0}K0047h1c|A40kaYe zfOnIGoS}GYS}PT=|v;gVzw3I)WM=V88PJf=uBbGi-OL;^KkXXhdQij4gOU8)lPv9;2F*VZFdNSWB zVn~$!zm!XqFgQgFv$tBTz+3Va#PlaHN0=|WyZRb{0btq#!ejbFue@px1MIFi<@E&^ zOsH(GY(iz=3ov-*(CJ&TjHN&H%7E~gfDj&~%BM~Ne)xH;1~-{Snps%c_E%3!xl^3} zPrw&okXcyS7VDXdDxW$L!lMEp7~z3oDVBo+0PL+f`|9eoY-&l{aXJLU+C#U)#24G!uqIX@4Yy@niidEE0(7GUAFz1Ba0 z0RT9Se4yX|FgxDDjG_--%K=@x05G$$qJ&e^|PKh=8*iDH(_(uW7 zk6xcGn=@jm4vioL&01$&aeU-OkJedNi~!EgKcZW(Uep11QZ~!`GZ33BZnX4pl<(p3cqte%le#6priF z&+8+dg$Th}9q^mZs>!H-tTiRogqy4>Ix?T)h?f#6qen=8@s4@d(Ys*X`qw$ literal 0 HcmV?d00001 diff --git a/src/Itowns-review/CSS/Controls/MousePosition/img/GPmousePositionOpen.png b/src/Itowns-review/CSS/Controls/MousePosition/img/GPmousePositionOpen.png new file mode 100644 index 0000000000000000000000000000000000000000..142f8f98af6d27f8e2a31237e78c314b18f35a6b GIT binary patch literal 377 zcmeAS@N?(olHy`uVBq!ia0vp^CO|C3!3HFM+^b&;q*#ibJVQ8upoSx*1IXtr@Q5r1 zs=p4xj7}P}D}aKMC9V-A!TD(=<%vb94CUqJdYO6I#mR{Use1WE>9gP2NC6dn^K@|x ziD-R0?IK^30gtQX{Z;%f|J@7&>n4X=?wevUJ&#Gu{e<5k=H$%k%kMU=(t5+wa;Nmj ziem8qjhe(>V-}f4YXMuP24=kjH;uOMR1o|;Wy4%GuOl(3=M(f!2`zX!S^B}A_kP!E zZp|@O|LAsdIrFOp#>)LyGR}FfNm`((s`X}GuY{-7rPIl39*?pYP3z|5?%DJGUbTJV zf1QJzfvX}jay~A5ptkPsvH5O#CJnB!vt|Vx)hIi2_K<0GVD