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
9172ae7e
Commit
9172ae7e
authored
May 15, 2019
by
Sergio Adrian Gongora Euan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
controlMap added to proyect
parent
a363db4e
Changes
11
Hide whitespace changes
Inline
Side-by-side
Showing
11 changed files
with
230 additions
and
3 deletions
+230
-3
map.html
catalog/templates/map.html
+0
-1
Streets.png
reports/static/images/Streets.png
+0
-0
cycle.png
reports/static/images/cycle.png
+0
-0
light.png
reports/static/images/light.png
+0
-0
night.png
reports/static/images/night.png
+0
-0
satellite.png
reports/static/images/satellite.png
+0
-0
traffic.png
reports/static/images/traffic.png
+0
-0
control-map.css
reports/static/reports/css/control-map.css
+69
-0
minimap.js
reports/static/reports/js/minimap.js
+145
-2
aside.html
reports/templates/aside.html
+12
-0
sclData.html
reports/templates/sclData.html
+4
-0
No files found.
catalog/templates/map.html
View file @
9172ae7e
...
@@ -437,7 +437,6 @@
...
@@ -437,7 +437,6 @@
}
}
],
],
end
:
function
()
{
end
:
function
()
{
console
.
log
(
"Finished"
)
$
(
'.main-header'
).
removeClass
(
'activateMainHeader'
);
$
(
'.main-header'
).
removeClass
(
'activateMainHeader'
);
}
}
});
});
...
...
reports/static/images/Streets.png
0 → 100644
View file @
9172ae7e
176 KB
reports/static/images/cycle.png
0 → 100644
View file @
9172ae7e
183 KB
reports/static/images/light.png
0 → 100644
View file @
9172ae7e
164 KB
reports/static/images/night.png
0 → 100644
View file @
9172ae7e
209 KB
reports/static/images/satellite.png
0 → 100644
View file @
9172ae7e
565 KB
reports/static/images/traffic.png
0 → 100644
View file @
9172ae7e
201 KB
reports/static/reports/css/control-map.css
0 → 100644
View file @
9172ae7e
.mapControl
{
width
:
auto
;
height
:
auto
;
position
:
absolute
;
right
:
0
;
top
:
14em
;
z-index
:
2
;
}
.controlContainer
{
width
:
auto
;
overflow-y
:
scroll
;
max-height
:
60vh
;
border-radius
:
8px
;
padding
:
3px
;
padding-right
:
5px
;
}
.controlContainer
::-webkit-scrollbar
{
background-color
:
#ffffff
;
border-radius
:
20px
;
width
:
10px
;
}
.controlContainer
::-webkit-scrollbar-track
{
border-radius
:
20px
;
}
.controlContainer
::-webkit-scrollbar-thumb
{
background-color
:
#A6A6A6
;
border
:
2px
solid
#ffffff
;
border-radius
:
10px
;
}
.baseMap
{
height
:
158px
;
width
:
296px
;
padding
:
3px
;
cursor
:
pointer
;
background-color
:
white
;
border-radius
:
2px
;
}
.mapSelector
input
[
type
=
"radio"
]
{
margin-right
:
2px
;
vertical-align
:
sub
;
}
.mapSelector
span
{
font-weight
:
bold
;
}
.baseMap
img
{
border-radius
:
8px
;
}
.mapSelector
{
position
:
relative
;
bottom
:
2em
;
padding
:
4px
;
background-color
:
rgba
(
0
,
0
,
0
,
0.7
);
color
:
white
;
}
#mapId
{
width
:
500px
;
height
:
500px
;
}
\ No newline at end of file
reports/static/reports/js/minimap.js
View file @
9172ae7e
...
@@ -10,13 +10,48 @@ const polygonFeature = wktFormat.readFeature(polygon, {
...
@@ -10,13 +10,48 @@ const polygonFeature = wktFormat.readFeature(polygon, {
});
});
// Create layers
// Create layers
const
mapLayer
=
new
ol
.
layer
.
Tile
({
const
light
=
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
streets
=
new
ol
.
layer
.
Tile
({
name
:
'mapbox'
,
source
:
new
ol
.
source
.
XYZ
({
url
:
'http://tile.openstreetmap.org/{z}/{x}/{y}.png'
})
});
const
cycle
=
new
ol
.
layer
.
Tile
({
name
:
'mapbox'
,
source
:
new
ol
.
source
.
XYZ
({
url
:
'https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=6ca0387fb7d64c68b9af3a636f384d53'
})
});
const
traffic
=
new
ol
.
layer
.
Tile
({
name
:
'mapbox'
,
source
:
new
ol
.
source
.
XYZ
({
url
:
'https://api.mapbox.com/styles/v1/mapbox/traffic-day-v2/tiles/256/{z}/{x}/{y}?access_token='
+
MAPBOX_ACCESS_TOKEN
})
});
const
night
=
new
ol
.
layer
.
Tile
({
name
:
'mapbox'
,
source
:
new
ol
.
source
.
XYZ
({
url
:
'https://api.mapbox.com/styles/v1/mapbox/navigation-guidance-night-v2/tiles/256/{z}/{x}/{y}?access_token='
+
MAPBOX_ACCESS_TOKEN
})
});
const
satellite
=
new
ol
.
layer
.
Tile
({
name
:
'mapbox'
,
source
:
new
ol
.
source
.
XYZ
({
url
:
'https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v10/tiles/256/{z}/{x}/{y}?access_token='
+
MAPBOX_ACCESS_TOKEN
})
});
const
polygonLayer
=
new
ol
.
layer
.
Vector
({
const
polygonLayer
=
new
ol
.
layer
.
Vector
({
name
:
'polygon'
,
name
:
'polygon'
,
source
:
new
ol
.
source
.
Vector
({
source
:
new
ol
.
source
.
Vector
({
...
@@ -29,7 +64,7 @@ const layers = new Map();
...
@@ -29,7 +64,7 @@ const layers = new Map();
// create map
// create map
const
map
=
new
ol
.
Map
({
const
map
=
new
ol
.
Map
({
target
:
'minimap'
,
target
:
'minimap'
,
layers
:
[
mapLayer
,
polygonLayer
],
layers
:
[
light
,
polygonLayer
],
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
,
...
@@ -250,3 +285,111 @@ function setCompareDirection(direction){
...
@@ -250,3 +285,111 @@ function setCompareDirection(direction){
}
}
// Fin funciones de comparacion
// Fin funciones de comparacion
//******************************
//******************************
/************************* Functions de layer Sources ******************************/
let
currentMap
=
light
;
function
initControlMap
(){
let
baseMaps
=
{
"light"
:
{
layer
:
light
,
name
:
"Claro"
,
imgURL
:
"../../static/images/light.png"
,
active
:
true
},
"streets"
:
{
layer
:
streets
,
name
:
"Calles"
,
imgURL
:
"../../static/images/Streets.png"
,
active
:
true
},
"cycle"
:
{
layer
:
cycle
,
name
:
"Rutas"
,
imgURL
:
"../../static/images/cycle.png"
,
active
:
false
},
"traffic"
:
{
layer
:
traffic
,
name
:
"Trafico"
,
imgURL
:
"../../static/images/traffic.png"
,
active
:
false
},
"night"
:
{
layer
:
night
,
name
:
"Oscuro"
,
imgURL
:
"../../static/images/night.png"
,
active
:
false
},
"satellite"
:
{
layer
:
satellite
,
name
:
"Satelital"
,
imgURL
:
"../../static/images/satellite.png"
,
active
:
false
}
};
let
controlMap
=
$
(
'#controlMap'
);
for
(
let
map
in
baseMaps
)
{
let
htmlString
=
''
;
htmlString
=
'<div class="baseMap" onclick="changeMap(
\'
'
+
map
+
'
\'
)">'
;
htmlString
+=
'<img src="'
+
baseMaps
[
map
].
imgURL
+
'" width="100%" height="100%"/>'
;
htmlString
+=
'<span class="mapSelector">'
;
if
(
map
===
'light'
)
{
htmlString
+=
'<input id="'
+
map
+
'" type="radio" name="layerOption" checked><span>'
+
baseMaps
[
map
].
name
+
'</span>'
;
}
else
{
htmlString
+=
'<input id="'
+
map
+
'" type="radio" name="layerOption"><span>'
+
baseMaps
[
map
].
name
+
'</span>'
;
}
htmlString
+=
'</span>'
;
htmlString
+=
'</div>'
;
controlMap
.
append
(
htmlString
);
}
}
initControlMap
();
function
changeMap
(
selectedMap
)
{
map
.
getLayers
().
getArray
().
forEach
(
function
(
layer
)
{
if
(
layer
.
values_
.
name
==
"mapbox"
)
{
map
.
removeLayer
(
layer
)
}
})
$
(
'#'
+
selectedMap
).
prop
(
'checked'
,
true
);
switch
(
selectedMap
)
{
case
'light'
:
map
.
getLayers
().
insertAt
(
0
,
light
);
currentMap
=
light
;
break
;
case
'streets'
:
map
.
getLayers
().
insertAt
(
0
,
streets
);
currentMap
=
streets
;
break
;
case
'cycle'
:
map
.
getLayers
().
insertAt
(
0
,
cycle
);
currentMap
=
cycle
;
break
;
case
'traffic'
:
map
.
getLayers
().
insertAt
(
0
,
traffic
);
currentMap
=
traffic
;
break
;
case
'night'
:
map
.
getLayers
().
insertAt
(
0
,
night
);
currentMap
=
night
;
break
;
case
'satellite'
:
map
.
getLayers
().
insertAt
(
0
,
satellite
);
currentMap
=
satellite
;
break
;
}
}
function
showControlMap
(){
if
(
$
(
'#showControlMap'
).
is
(
':visible'
))
{
$
(
"#showControlMap"
).
hide
();
$
(
"#hideControlMap"
).
show
();
$
(
".mapControl"
).
show
();
}
else
{
$
(
"#showControlMap"
).
show
();
$
(
"#hideControlMap"
).
hide
();
$
(
".mapControl"
).
hide
();
}
}
\ No newline at end of file
reports/templates/aside.html
View file @
9172ae7e
...
@@ -284,6 +284,18 @@
...
@@ -284,6 +284,18 @@
</ul>
</ul>
</li>
</li>
<li>
<a
class=
"treeview "
href=
"#"
onclick=
"showControlMap()"
>
<i
class=
"fa fa-globe"
></i>
<i
class=
"fa fa-globe"
style=
"display:none"
></i>
<span
id=
"showControlMap"
>
Show Maps
</span>
<span
id=
"hideControlMap"
style=
"display:none"
>
Hide Maps
</span>
<span
class=
"pull-right-container"
>
<span
class=
"label label-primary pull-right"
></span>
</span>
</a>
</li>
<!-- <li>
<!-- <li>
<a class="treeview " href="#" onclick="showComparisons()">
<a class="treeview " href="#" onclick="showComparisons()">
...
...
reports/templates/sclData.html
View file @
9172ae7e
...
@@ -5,6 +5,7 @@
...
@@ -5,6 +5,7 @@
<link
rel=
"stylesheet"
href=
"{% static 'catalog/css/body.css' %}"
type=
"text/css"
>
<link
rel=
"stylesheet"
href=
"{% static 'catalog/css/body.css' %}"
type=
"text/css"
>
<link
rel=
"stylesheet"
href=
"{% static 'reports/css/scldata.css' %}"
type=
"text/css"
>
<link
rel=
"stylesheet"
href=
"{% static 'reports/css/scldata.css' %}"
type=
"text/css"
>
<link
rel=
"stylesheet"
href=
"{% static 'reports/css/crossrange.css' %}"
type=
"text/css"
>
<link
rel=
"stylesheet"
href=
"{% static 'reports/css/crossrange.css' %}"
type=
"text/css"
>
<link
rel=
"stylesheet"
href=
"{% static 'reports/css/control-map.css' %}"
type=
"text/css"
>
<link
rel=
"stylesheet"
href=
"{% static 'reports/css/ol-ext.css' %}"
type=
"text/css"
>
<link
rel=
"stylesheet"
href=
"{% static 'reports/css/ol-ext.css' %}"
type=
"text/css"
>
<script
src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"
></script>
<script
src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"
></script>
<link
rel=
"stylesheet"
href=
"https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css"
<link
rel=
"stylesheet"
href=
"https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css"
...
@@ -157,6 +158,9 @@
...
@@ -157,6 +158,9 @@
<div
id=
"reportPage"
class=
"wrapper"
style=
"background-color: #ecf0f5"
>
<div
id=
"reportPage"
class=
"wrapper"
style=
"background-color: #ecf0f5"
>
<div
id=
"minimap"
class=
"minimap"
></div>
<div
id=
"minimap"
class=
"minimap"
></div>
<div
class=
"mapControl"
style=
"display: none"
>
<div
id=
"controlMap"
class=
"controlContainer"
></div>
</div>
<section
class=
"content"
>
<section
class=
"content"
>
<div
class=
"row col-lg-11 title"
>
<div
class=
"row col-lg-11 title"
>
...
...
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