Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
GeoInt_SIDT
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Mario Chirinos Colunga
GeoInt_SIDT
Commits
00ad91b1
Commit
00ad91b1
authored
Apr 04, 2019
by
Emmanuel René Huchim Puc
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
add and remove logic in minimap changed
parent
8cf0e2a8
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
141 additions
and
112 deletions
+141
-112
minimap.js
reports/static/reports/js/minimap.js
+66
-81
reportImg.js
reports/static/reports/js/reportImg.js
+6
-3
sclData.html
reports/templates/sclData.html
+69
-28
No files found.
reports/static/reports/js/minimap.js
View file @
00ad91b1
MAPBOX_ACCESS_TOKEN
=
'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
;
MAPBOX_ACCESS_TOKEN
=
'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
;
MAX_OPACITY
=
1
;
FIRST_IMAGE_LAYER_INDEX
=
2
;
// create wkt polygon
// create wkt polygon
const
f
ormat
=
new
ol
.
format
.
WKT
();
const
wktF
ormat
=
new
ol
.
format
.
WKT
();
const
feature
=
f
ormat
.
readFeature
(
polygon
,
{
const
polygonFeature
=
wktF
ormat
.
readFeature
(
polygon
,
{
dataProjection
:
'EPSG:4326'
,
dataProjection
:
'EPSG:4326'
,
featureProjection
:
'EPSG:3857'
featureProjection
:
'EPSG:3857'
});
});
// Create layers
// Create layers
const
map
box
=
new
ol
.
layer
.
Tile
({
const
map
Layer
=
new
ol
.
layer
.
Tile
({
name
:
'mapbox'
,
name
:
'mapbox'
,
source
:
new
ol
.
source
.
XYZ
({
source
:
new
ol
.
source
.
XYZ
({
url
:
'https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token='
+
MAPBOX_ACCESS_TOKEN
url
:
'https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token='
+
MAPBOX_ACCESS_TOKEN
})
})
});
});
const
vecto
r
=
new
ol
.
layer
.
Vector
({
const
polygonLaye
r
=
new
ol
.
layer
.
Vector
({
name
:
'polygon'
,
name
:
'polygon'
,
source
:
new
ol
.
source
.
Vector
({
source
:
new
ol
.
source
.
Vector
({
features
:
[
f
eature
]
features
:
[
polygonF
eature
]
})
})
});
});
const
layers
=
new
Map
();
// create map
// create map
const
map
=
new
ol
.
Map
({
const
map
=
new
ol
.
Map
({
target
:
'minimap'
,
target
:
'minimap'
,
layers
:
[
map
box
,
vecto
r
],
layers
:
[
map
Layer
,
polygonLaye
r
],
view
:
new
ol
.
View
({
view
:
new
ol
.
View
({
center
:
ol
.
proj
.
fromLonLat
([
-
99.19
,
19.61
]),
center
:
ol
.
proj
.
fromLonLat
([
-
99.19
,
19.61
]),
zoom
:
4
,
zoom
:
4
,
...
@@ -34,98 +37,80 @@ const map = new ol.Map({
...
@@ -34,98 +37,80 @@ const map = new ol.Map({
})
})
});
});
// fit to polygon
// fit
(zoom)
to polygon
map
.
getView
().
fit
(
f
eature
.
getGeometry
());
map
.
getView
().
fit
(
polygonF
eature
.
getGeometry
());
// show first layer date
// show first date
let
currentDate
=
labels
[
0
];
let
currentDate
=
labels
[
0
];
addImageLayer
(
currentDate
)
addImageLayer
({
layerDate
:
currentDate
});
// main function to change layers
// data = { layerDate: to change all layers by date }
// data = { layerName: to add single layer }
function
addImageLayer
(
data
)
{
if
(
data
.
layerDate
)
{
currentDate
=
data
.
layerDate
;
}
function
addImageLayer
(
labelDate
)
{
$
.
ajax
({
$
.
ajax
({
type
:
'POST'
,
type
:
'POST'
,
dataType
:
"json"
,
dataType
:
"json"
,
data
:
{
'purchase_id'
:
purchase_id
,
'report'
:
zone
,
'date'
:
label
Date
},
data
:
{
'purchase_id'
:
purchase_id
,
'report'
:
zone
,
'date'
:
current
Date
},
url
:
'/reports/tiles/tileinfo'
,
url
:
'/reports/tiles/tileinfo'
,
success
:
function
(
data
)
{
success
:
response
=>
{
changeLayers
(
data
.
layerName
);
currentDate
=
labelDate
;
setOpacity
(
$
(
'#opacitySlide'
).
val
());
removeImageLayers
()
map
.
getView
().
setMinZoom
(
response
.
zoom
.
min
);
map
.
getView
().
setMaxZoom
(
response
.
zoom
.
max
);
// add layer
getSelectedCheckboxes
().
forEach
(
layer_type
=>
{
const
xyz
=
new
ol
.
layer
.
Tile
({
name
:
layer_type
,
opacity
:
(
layer_type
==
'TCI'
)
?
1
:
$
(
'#opacitySlide'
).
val
(),
source
:
new
ol
.
source
.
XYZ
({
projection
:
'EPSG:3857'
,
url
:
'/reports/tiles/'
+
purchase_id
+
'/'
+
zone
+
'/'
+
layer_type
+
'/'
+
labelDate
+
'/{z}/{x}/{-y}.png'
,
tilePixelRatio
:
2
,
minZoom
:
data
.
zoom
.
min
,
maxZoom
:
data
.
zoom
.
max
})
});
map
.
addLayer
(
xyz
);
})
// fit and zoom
map
.
getView
().
setMinZoom
(
data
.
zoom
.
min
);
map
.
getView
().
setMaxZoom
(
data
.
zoom
.
max
);
}
}
});
});
}
}
function
removeImageLayers
()
{
// remove old layers and add layers with new date
map
.
getLayers
().
getArray
().
slice
().
forEach
(
layer
=>
{
function
changeLayers
(
especific_layerName
)
{
if
(
layer
.
get
(
'name'
)
!=
'mapbox'
&&
layer
.
get
(
'name'
)
!=
'polygon'
)
{
const
layersToChance
=
especific_layerName
?
especific_layerName
.
split
()
:
getSelectedLayersName
();
map
.
removeLayer
(
layer
)
}
})
}
function
setOpacity
(
value
)
{
removeLayer
(
especific_layerName
);
map
.
getLayers
().
getArray
().
slice
().
forEach
(
layer
=>
{
if
(
layer
.
get
(
'name'
)
!=
'mapbox'
&&
layer
.
get
(
'name'
)
!=
'polygon'
&&
layer
.
get
(
'name'
)
!=
'TCI'
)
{
layer
.
setOpacity
(
value
)
}
})
}
function
getSelectedCheckboxes
()
{
layersToChance
.
forEach
(
layerName
=>
{
const
inputs
=
$
(
"input[name=layer_type]:checked"
);
const
xyz
=
new
ol
.
layer
.
Tile
({
let
values
=
[]
name
:
layerName
,
source
:
new
ol
.
source
.
XYZ
({
projection
:
'EPSG:3857'
,
url
:
'/reports/tiles/'
+
purchase_id
+
'/'
+
zone
+
'/'
+
layerName
+
'/'
+
currentDate
+
'/{z}/{x}/{-y}.png'
,
tilePixelRatio
:
2
})
});
Object
.
keys
(
inputs
).
forEach
(
key
=>
{
if
(
layerName
===
'TCI'
)
{
let
value
=
inputs
[
key
].
value
;
map
.
getLayers
().
insertAt
(
FIRST_IMAGE_LAYER_INDEX
,
xyz
);
if
(
value
)
{
values
.
push
(
value
)}
}
else
{
})
map
.
addLayer
(
xyz
);
}
return
values
;
layers
.
set
(
layerName
,
xyz
);
});
}
}
function
getChartDataIndex
(
id
)
{
// remove all if there isn't layername
let
foundIndex
;
function
removeLayer
(
layerName
)
{
if
(
!
layerName
)
{
layers
.
forEach
(
layer
=>
{
map
.
removeLayer
(
layer
);
});
layers
.
clear
();
return
;
}
map
.
removeLayer
(
layers
.
get
(
layerName
));
layers
.
delete
(
layerName
);
}
myChart
.
config
.
data
.
datasets
.
forEach
(
function
(
data
,
index
)
{
// set opacity to layers
let
label
=
'sclcheck-'
+
data
.
label
.
toLowerCase
().
replace
(
' '
,
'-'
);
function
setOpacity
(
value
)
{
if
(
label
===
id
)
{
layers
.
forEach
(
layer
=>
{
foundIndex
=
index
;
if
(
layer
.
get
(
'name'
)
!=
'TCI'
)
{
layer
.
setOpacity
(
value
)
}
}
})
})
return
foundIndex
;
}
}
$
(
'input[name=layer_type]'
).
on
(
'click'
,
function
(){
const
input
=
$
(
this
);
const
index
=
getChartDataIndex
(
input
.
parent
().
attr
(
'id'
));
if
(
index
>
-
1
)
{
myChart
.
getDatasetMeta
(
index
).
hidden
=!
input
.
prop
(
"checked"
);
myChart
.
update
()
}
addImageLayer
(
currentDate
);
});
reports/static/reports/js/reportImg.js
View file @
00ad91b1
...
@@ -25,10 +25,13 @@ document.getElementById("myChart").onclick = function (evt) {
...
@@ -25,10 +25,13 @@ document.getElementById("myChart").onclick = function (evt) {
if
(
activePoint
.
length
>
0
){
if
(
activePoint
.
length
>
0
){
var
firstPoint
=
activePoint
[
0
];
var
firstPoint
=
activePoint
[
0
];
//console.log(firstPoint)
//console.log(firstPoint._datasetIndex) //indice de la clase a la que pertenece (vegetación, agua, etc.)
var
label
=
myChart
.
data
.
labels
[
firstPoint
.
_index
];
var
label
=
myChart
.
data
.
labels
[
firstPoint
.
_index
];
addImageLayer
(
label
)
//console.log(firstPoint._datasetIndex) //indice de la clase a la que pertenece (vegetación, agua, etc.)
addImageLayer
({
layerDate
:
label
});
//console.log(myChart.legend.legendItems[firstPoint._datasetIndex].text) //nombre de la capa a la que pertenece (vegetación, agua, etc.)
//console.log(myChart.legend.legendItems[firstPoint._datasetIndex].text) //nombre de la capa a la que pertenece (vegetación, agua, etc.)
//if (!firstPoint) return;
//if (!firstPoint) return;
activePoints
.
forEach
(
function
(
value
,
index
)
{
activePoints
.
forEach
(
function
(
value
,
index
)
{
...
...
reports/templates/sclData.html
View file @
00ad91b1
...
@@ -275,31 +275,28 @@
...
@@ -275,31 +275,28 @@
{% block scripts %}
{% block scripts %}
<script
id=
"rendered-js"
>
<script
id=
"rendered-js"
>
$
(
'input[id="inputRange"]'
).
on
(
'input'
,
function
()
{
$
(
'input[id="inputRange"]'
).
on
(
'input'
,
function
()
{
let
control
=
$
(
this
);
let
controlMin
=
control
.
attr
(
'min'
);
let
controlMax
=
control
.
attr
(
'max'
);
let
controlVal
=
control
.
val
();
let
controlThumbWidth
=
control
.
data
(
'thumbwidth'
);
let
range
=
controlMax
-
controlMin
;
let
position
=
(
controlVal
-
controlMin
)
/
range
*
100
;
let
positionOffset
=
Math
.
round
(
controlThumbWidth
*
position
/
100
)
-
controlThumbWidth
/
2
;
let
fecha
=
$
(
"option:eq("
+
controlVal
+
")"
).
text
();
let
valor
=
$
(
"option:eq("
+
controlVal
+
")"
).
val
();
addImageLayer
({
layerDate
:
valor
});
var
control
=
$
(
this
),
controlMin
=
control
.
attr
(
'min'
),
controlMax
=
control
.
attr
(
'max'
),
controlVal
=
control
.
val
(),
controlThumbWidth
=
control
.
data
(
'thumbwidth'
);
var
range
=
controlMax
-
controlMin
;
var
position
=
(
controlVal
-
controlMin
)
/
range
*
100
;
var
positionOffset
=
Math
.
round
(
controlThumbWidth
*
position
/
100
)
-
controlThumbWidth
/
2
;
var
fecha
=
$
(
"option:eq("
+
controlVal
+
")"
).
text
();
var
valor
=
$
(
"option:eq("
+
controlVal
+
")"
).
val
();
addImageLayer
(
valor
);
$
(
"#maptitle"
).
empty
();
$
(
"#maptitle"
).
empty
();
$
(
"#maptitle"
).
append
(
"Map Date: "
+
fecha
);
$
(
"#maptitle"
).
append
(
"Map Date: "
+
fecha
);
$
(
"#tooltiptext"
).
empty
();
$
(
"#tooltiptext"
).
empty
();
$
(
"#tooltiptext"
).
append
(
fecha
);
$
(
"#tooltiptext"
).
append
(
fecha
);
});
});
var
slider2
=
document
.
getElementById
(
"inputRange"
);
var
slider2
=
document
.
getElementById
(
"inputRange"
);
var
sliderOffsetX
=
slider2
.
getBoundingClientRect
().
left
-
document
.
documentElement
.
getBoundingClientRect
().
left
;
var
sliderOffsetX
=
slider2
.
getBoundingClientRect
().
left
-
document
.
documentElement
.
getBoundingClientRect
().
left
;
var
sliderOffsetY
=
slider2
.
getBoundingClientRect
().
top
-
document
.
documentElement
.
getBoundingClientRect
().
top
;
var
sliderOffsetY
=
slider2
.
getBoundingClientRect
().
top
-
document
.
documentElement
.
getBoundingClientRect
().
top
;
var
sliderWidth
=
slider2
.
offsetWidth
-
1
;
var
sliderWidth
=
slider2
.
offsetWidth
-
1
;
...
@@ -310,20 +307,19 @@
...
@@ -310,20 +307,19 @@
value
=
sliderValAtPos
-
1
;
value
=
sliderValAtPos
-
1
;
var
fecha
=
$
(
"option:eq("
+
value
+
")"
).
text
();
var
fecha
=
$
(
"option:eq("
+
value
+
")"
).
text
();
var
valor
=
$
(
"option:eq("
+
value
+
")"
).
val
();
var
valor
=
$
(
"option:eq("
+
value
+
")"
).
val
();
$
(
"#tooltiptext"
).
empty
();
$
(
"#tooltiptext"
).
empty
();
$
(
"#tooltiptext"
).
css
({
"margin-left"
:
currentMouseXPos
+
'px'
,
"margin-top"
:
sliderOffsetY
+
'px'
});
$
(
"#tooltiptext"
).
css
({
"margin-left"
:
currentMouseXPos
+
'px'
,
"margin-top"
:
sliderOffsetY
+
'px'
});
$
(
"#tooltiptext"
).
append
(
fecha
);
$
(
"#tooltiptext"
).
append
(
fecha
);
});
});
</script>
</script>
<!-- page script -->
<!-- page script -->
<script>
<script>
var
legendOnClickHandler
=
function
(
e
,
legendItem
)
{
const
legendOnClickHandler
=
function
(
e
,
legendItem
)
{
var
index
=
legendItem
.
datasetIndex
;
const
index
=
legendItem
.
datasetIndex
;
var
ch
=
this
.
chart
;
const
ch
=
this
.
chart
;
le
t
checkbox_id
=
'#sclcheck-'
+
legendItem
.
text
.
toLowerCase
().
replace
(
/
\s
/g
,
'-'
);
cons
t
checkbox_id
=
'#sclcheck-'
+
legendItem
.
text
.
toLowerCase
().
replace
(
/
\s
/g
,
'-'
);
// isDatasetVisible return the opposite status?
// isDatasetVisible return the opposite status?
if
(
ch
.
getDatasetMeta
(
index
).
hidden
===
null
)
{
if
(
ch
.
getDatasetMeta
(
index
).
hidden
===
null
)
{
...
@@ -331,14 +327,22 @@
...
@@ -331,14 +327,22 @@
}
else
{
}
else
{
ch
.
getDatasetMeta
(
index
).
hidden
=
!
ch
.
getDatasetMeta
(
index
).
hidden
;
ch
.
getDatasetMeta
(
index
).
hidden
=
!
ch
.
getDatasetMeta
(
index
).
hidden
;
}
}
ch
.
update
();
ch
.
update
();
$
(
checkbox_id
+
" :input"
).
prop
(
"checked"
,
!
ch
.
getDatasetMeta
(
index
).
hidden
);
const
layerInput
=
$
(
checkbox_id
+
" :input"
);
addImageLayer
(
currentDate
);
layerInput
.
prop
(
"checked"
,
!
ch
.
getDatasetMeta
(
index
).
hidden
);
if
(
layerInput
.
prop
(
"checked"
))
{
addImageLayer
({
layerName
:
layerInput
.
val
()
});
}
else
{
removeLayer
(
layerInput
.
val
());
}
};
};
var
showSCLcheckboxes
=
function
(
datasets
)
{
const
showSCLcheckboxes
=
function
(
datasets
)
{
if
(
!
datasets
||
datasets
.
length
<
1
)
{
if
(
!
datasets
||
datasets
.
length
<
1
)
{
return
;
return
;
}
}
...
@@ -350,6 +354,43 @@
...
@@ -350,6 +354,43 @@
});
});
}
}
const
getSelectedLayersName
=
function
()
{
const
inputs
=
$
(
"input[name=layer_type]:checked"
);
let
values
=
[]
Object
.
keys
(
inputs
).
forEach
(
key
=>
{
let
value
=
inputs
[
key
].
value
;
if
(
value
)
{
values
.
push
(
value
)}
});
return
values
;
}
const
getChartDataIndex
=
function
(
id
)
{
const
datasetsLabels
=
myChart
.
config
.
data
.
datasets
.
map
(
data
=>
'sclcheck-'
+
data
.
label
.
toLowerCase
().
replace
(
' '
,
'-'
)
);
return
datasetsLabels
.
indexOf
(
id
);
}
$
(
'input[name=layer_type]'
).
on
(
'click'
,
function
()
{
const
input
=
$
(
this
);
const
index
=
getChartDataIndex
(
input
.
parent
().
attr
(
'id'
));
if
(
index
>
-
1
)
{
myChart
.
getDatasetMeta
(
index
).
hidden
=!
input
.
prop
(
"checked"
);
myChart
.
update
();
}
if
(
input
.
prop
(
"checked"
))
{
addImageLayer
({
layerName
:
input
.
val
()
});
}
else
{
removeLayer
(
input
.
val
());
}
});
var
label
;
var
label
;
// Recibimos el JSON con los datos desde el View
// Recibimos el JSON con los datos desde el View
{
%
autoescape
off
%
}
{
%
autoescape
off
%
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment