Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
web-et-numerique
web-et-numerique-internet
data.grandlyon.com
web-portal
components
custom-apps
web-app
Commits
d0321325
Commit
d0321325
authored
Feb 12, 2020
by
ext.sopra.ncastejon
Browse files
Remove interaction for features not selected by the search.
parent
3e0645e5
Pipeline
#3841
passed with stage
in 4 minutes and 45 seconds
Changes
4
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
package-lock.json
View file @
d0321325
...
...
@@ -2021,7 +2021,6 @@
"@babel/helper-plugin-utils"
:
"^7.8.3"
}
},
<<<<<<<
HEAD
"@babel/plugin-transform-literals"
:
{
"version"
:
"7.8.3"
,
"resolved"
:
"https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.8.3.tgz"
,
...
...
@@ -2035,12 +2034,6 @@
"version"
:
"7.8.3"
,
"resolved"
:
"https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.8.3.tgz"
,
"integrity"
:
"sha512-3Wk2EXhnw+rP+IDkK6BdtPKsUE5IeZ6QOGrPYvw52NwBStw9V1ZVzxgK6fSKSxqUvH9eQPR3tm3cOq79HlsKYA=="
,
=======
"@types/mapbox-gl"
:
{
"version"
:
"1.6.2"
,
"resolved"
:
"https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-1.6.2.tgz"
,
"integrity"
:
"sha512-xDRNZhiqleCJuYPzXpp5UUcJzhiKTalKFVTr49I50gyo81qBNMErWeJRZJFjHd05U0onIdDFuX44TGpoVpJhXA=="
,
>>>>>>>
Add
a
search
filter
for
the
map
features
(only
for
type
points
currently).
"dev"
:
true
,
"requires"
:
{
"@babel/helper-plugin-utils"
:
"^7.8.3"
...
...
@@ -2724,9 +2717,9 @@
"dev"
:
true
},
"@types/mapbox-gl"
:
{
"version"
:
"
0.54.1
"
,
"resolved"
:
"https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-
0.54.1
.tgz"
,
"integrity"
:
"sha512-
qRsv6e0KYxJPAjqaxOWFSFm+U5tPBk2EmIxg0wgr1ffoB0sJ5hfnWnljO/XXQjHZrZzXfbf2P1jsDK2zrrq9d
A=="
,
"version"
:
"
1.7.0
"
,
"resolved"
:
"https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-
1.7.0
.tgz"
,
"integrity"
:
"sha512-
XMri+Sumi1Np6p5hCpC76hA+gLU1R9fyFmDaTMZbxVODW5hvo3wjI0+ep3K8Ra1R/5A7IFxidJqonUtYwzZdF
A=="
,
"dev"
:
true
,
"requires"
:
{
"@types/geojson"
:
"*"
...
...
@@ -4465,18 +4458,11 @@
"safe-buffer"
:
"5.1.2"
}
},
<<<<<<<
HEAD
"content-type"
:
{
"version"
:
"1.0.4"
,
"resolved"
:
"https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz"
,
"integrity"
:
"sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
,
"dev"
:
true
=======
"earcut"
:
{
"version"
:
"2.2.1"
,
"resolved"
:
"https://registry.npmjs.org/earcut/-/earcut-2.2.1.tgz"
,
"integrity"
:
"sha512-5jIMi2RB3HtGPHcYd9Yyl0cczo84y+48lgKPxMijliNQaKAHEZJbdzLmKmdxG/mCdS/YD9DQ1gihL8mxzR0F9w=="
>>>>>>>
Add
a
search
filter
for
the
map
features
(only
for
type
points
currently).
},
"convert-source-map"
:
{
"version"
:
"1.7.0"
,
...
...
@@ -4847,18 +4833,11 @@
"assert-plus"
:
"^1.0.0"
}
},
<<<<<<<
HEAD
"date-format"
:
{
"version"
:
"2.1.0"
,
"resolved"
:
"https://registry.npmjs.org/date-format/-/date-format-2.1.0.tgz"
,
"integrity"
:
"sha512-bYQuGLeFxhkxNOF3rcMtiZxvCBAquGzZm6oWA1oZ0g2THUzivaRhv8uOhdr19LmoobSOLoIAxeUK2RdbM8IFTA=="
,
"dev"
:
true
=======
"esprima"
:
{
"version"
:
"1.0.4"
,
"resolved"
:
"https://registry.npmjs.org/esprima/-/esprima-1.0.4.tgz"
,
"integrity"
:
"sha1-n1V+CPw7TSbs6d00+Pv0drYlha0="
>>>>>>>
Add
a
search
filter
for
the
map
features
(only
for
type
points
currently).
},
"debug"
:
{
"version"
:
"2.6.9"
,
...
...
@@ -5208,11 +5187,6 @@
"stream-shift"
:
"^1.0.0"
}
},
"earcut"
:
{
"version"
:
"2.1.5"
,
"resolved"
:
"https://registry.npmjs.org/earcut/-/earcut-2.1.5.tgz"
,
"integrity"
:
"sha512-QFWC7ywTVLtvRAJTVp8ugsuuGQ5mVqNmJ1cRYeLrSHgP3nycr2RHTJob9OtM0v8ujuoKN0NY1a93J/omeTL1PA=="
},
"ecc-jsbn"
:
{
"version"
:
"0.1.2"
,
"resolved"
:
"https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz"
,
...
...
@@ -5478,11 +5452,6 @@
"estraverse"
:
"^4.1.1"
}
},
"esm"
:
{
"version"
:
"3.0.84"
,
"resolved"
:
"https://registry.npmjs.org/esm/-/esm-3.0.84.tgz"
,
"integrity"
:
"sha512-SzSGoZc17S7P+12R9cg21Bdb7eybX25RnIeRZ80xZs+VZ3kdQKzqTp2k4hZJjR7p9l0186TTXSgrxzlMDBktlw=="
},
"esprima"
:
{
"version"
:
"1.0.4"
,
"resolved"
:
"https://registry.npmjs.org/esprima/-/esprima-1.0.4.tgz"
,
...
...
@@ -7921,6 +7890,13 @@
"supercluster"
:
"^7.0.0"
,
"tinyqueue"
:
"^2.0.0"
,
"vt-pbf"
:
"^3.1.1"
},
"dependencies"
:
{
"earcut"
:
{
"version"
:
"2.2.2"
,
"resolved"
:
"https://registry.npmjs.org/earcut/-/earcut-2.2.2.tgz"
,
"integrity"
:
"sha512-eZoZPPJcUHnfRZ0PjLvx2qBordSiO8ofC3vt+qACLM95u+4DovnbYNpQtJh0DNsWj8RnxrQytD4WA8gj5cRIaQ=="
}
}
},
"md5.js"
:
{
...
...
src/app/dataset-detail/components/dataset-detail/dataset-detail.component.scss
View file @
d0321325
...
...
@@ -10,6 +10,17 @@
}
}
.dataset-detail-container
{
height
:
100%
;
display
:
flex
;
flex-direction
:
column
;
}
.details-container
{
height
:
100%
;
flex
:
1
;
}
svg
.tab-icon
{
margin
:
0
0
.625rem
0
0
.625rem
;
width
:
2
.25rem
;
...
...
src/app/dataset-detail/components/dataset-downloads/dataset-downloads.component.scss
View file @
d0321325
...
...
@@ -3,6 +3,7 @@
.downloads-container
{
position
:
relative
;
height
:
100%
;
@media
screen
and
(
min-width
:
$tablet
)
{
max-width
:
unset
;
...
...
src/app/map/services/map.service.ts
View file @
d0321325
...
...
@@ -7,7 +7,7 @@ import { notificationMessages } from '../../../i18n/traductions.fr';
import
{
Notification
}
from
'
../../core/models
'
;
import
{
NotificationService
}
from
'
../../core/services
'
;
import
{
APP_CONFIG
}
from
'
../../core/services/app-config.service
'
;
import
{
DataType
,
MapOptions
}
from
'
../models/map-options
'
;
import
{
MapOptions
}
from
'
../models/map-options
'
;
@
Injectable
()
export
class
MapService
{
...
...
@@ -38,13 +38,9 @@ export class MapService {
private
_mapToUpdate
=
new
Subject
<
any
>
();
private
_featureSelected
=
new
Subject
<
mapboxgl
.
MapboxGeoJSONFeature
>
();
private
COLOR_EXPRESSION
=
[
'
case
'
,
[
'
boolean
'
,
[
'
feature-state
'
,
'
highlight
'
],
false
],
this
.
featureHighlightedColor
,
[
'
boolean
'
,
[
'
feature-state
'
,
'
hover
'
],
false
],
this
.
featureHoverColor
,
'
transparent
'
,
];
// Mapbox expression. Is set differently depending the data type (circle, fill, line)
private
paintExpression
=
{};
private
paintColorPropertyName
=
''
;
constructor
(
private
_notificationService
:
NotificationService
,
...
...
@@ -108,6 +104,7 @@ export class MapService {
// - a WMS layer to display the visual part of the features (WMS service send a png or jpeg)
// - a data layer, created from a geojson or an MVT service. It is used for the features interaction (hover, click)
addLayers
()
{
this
.
addWMSLayer
();
// Add the 3d source. Constructed with MVT tiles from the 'fpc_fond_plan_communaut.fpctoit' dataset
...
...
@@ -234,58 +231,92 @@ fpc_fond_plan_communaut.fpctoit&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}
// Add the data layer (from geojson or MVT)
addDataLayer
()
{
let
layerOptions
=
{};
// Set the paint options depending the geometry type
// For 'Polygon' and 'MultiPolygon' features
if
(
this
.
mapOptions
.
dataType
.
isAreal
)
{
this
.
paintExpression
=
{
'
fill-color
'
:
[
'
case
'
,
[
'
boolean
'
,
[
'
feature-state
'
,
'
highlight
'
],
false
],
this
.
featureHighlightedColor
,
[
'
boolean
'
,
[
'
feature-state
'
,
'
hover
'
],
false
],
this
.
featureHoverColor
,
'
transparent
'
,
],
'
fill-opacity
'
:
0.7
,
'
fill-outline-color
'
:
'
transparent
'
,
};
this
.
paintColorPropertyName
=
'
fill-color
'
;
layerOptions
=
{
type
:
'
fill
'
,
paint
:
{
'
fill-color
'
:
this
.
COLOR_EXPRESSION
,
'
fill-opacity
'
:
0.7
,
'
fill-outline-color
'
:
'
transparent
'
,
},
paint
:
this
.
paintExpression
,
};
}
// For 'Line' and 'MultiLine' features
if
(
this
.
mapOptions
.
dataType
.
isLinear
)
{
this
.
paintExpression
=
{
'
line-color
'
:
[
'
case
'
,
[
'
boolean
'
,
[
'
feature-state
'
,
'
highlight
'
],
false
],
this
.
featureHighlightedColor
,
[
'
boolean
'
,
[
'
feature-state
'
,
'
hover
'
],
false
],
this
.
featureHoverColor
,
'
transparent
'
,
],
'
line-width
'
:
[
'
interpolate
'
,
[
'
linear
'
],
[
'
zoom
'
],
12
,
2
,
13
,
4
,
],
'
line-opacity
'
:
0.8
,
};
this
.
paintColorPropertyName
=
'
line-color
'
;
layerOptions
=
{
type
:
'
line
'
,
paint
:
{
'
line-color
'
:
this
.
COLOR_EXPRESSION
,
'
line-width
'
:
[
'
interpolate
'
,
[
'
linear
'
],
[
'
zoom
'
],
9
,
2
,
13
,
4
,
],
},
paint
:
this
.
paintExpression
,
};
}
// For "Point" features
if
(
this
.
mapOptions
.
dataType
.
isPunctual
)
{
// Set the color expression
this
.
paintExpression
=
{
'
circle-radius
'
:
[
'
case
'
,
[
'
boolean
'
,
[
'
feature-state
'
,
'
highlight
'
],
false
],
2.5
,
5
,
],
'
circle-color
'
:
[
'
case
'
,
[
'
boolean
'
,
[
'
feature-state
'
,
'
highlight
'
],
false
],
'
white
'
,
[
'
boolean
'
,
[
'
feature-state
'
,
'
hover
'
],
false
],
this
.
featureHoverColor
,
'
transparent
'
,
],
'
circle-stroke-width
'
:
[
'
case
'
,
[
'
boolean
'
,
[
'
feature-state
'
,
'
highlight
'
],
false
],
5
,
0
,
],
'
circle-stroke-color
'
:
[
'
case
'
,
[
'
boolean
'
,
[
'
feature-state
'
,
'
highlight
'
],
false
],
this
.
featureHighlightedColor
,
[
'
boolean
'
,
[
'
feature-state
'
,
'
visited
'
],
false
],
'
white
'
,
'
transparent
'
,
],
};
this
.
paintColorPropertyName
=
'
circle-color
'
;
layerOptions
=
{
type
:
'
circle
'
,
paint
:
{
'
circle-radius
'
:
[
'
case
'
,
[
'
boolean
'
,
[
'
feature-state
'
,
'
highlight
'
],
false
],
2.5
,
5
,
],
'
circle-color
'
:
this
.
COLOR_EXPRESSION
,
'
circle-stroke-width
'
:
[
'
case
'
,
[
'
boolean
'
,
[
'
feature-state
'
,
'
highlight
'
],
false
],
5
,
0
,
],
'
circle-stroke-color
'
:
[
'
case
'
,
[
'
boolean
'
,
[
'
feature-state
'
,
'
highlight
'
],
false
],
this
.
featureHighlightedColor
,
'
transparent
'
,
],
},
paint
:
this
.
paintExpression
,
};
}
...
...
@@ -475,30 +506,22 @@ fpc_fond_plan_communaut.fpctoit&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}
// Once this search filter expression is done, we add it to the existing paint options (for hover, selected)
// of the data-layer
const
copyPaintOptions
=
[...
this
.
COLOR_EXPRESSION
];
copyPaintOptions
.
splice
(
copyPaintOptions
.
length
-
1
,
0
,
[
'
all
'
,
...
anyFilter
],
'
green
'
);
const
copyPaintOptions
=
[...
this
.
_map
.
getPaintProperty
(
'
data-layer
'
,
this
.
paintColorPropertyName
)
];
copyPaintOptions
.
splice
(
copyPaintOptions
.
length
-
1
,
0
,
[
'
all
'
,
...
anyFilter
],
this
.
featureHighlightedColor
);
this
.
paintPropertyForLayer
(
'
data-layer
'
,
this
.
mapOptions
.
dataType
,
copyPaintOptions
);
this
.
_map
.
setPaintProperty
(
'
wms-layer
'
,
'
raster-opacity
'
,
0.5
);
this
.
_map
.
setFilter
(
'
data-layer
'
,
[
'
all
'
,
...
anyFilter
]);
this
.
_map
.
setPaintProperty
(
'
data-layer
'
,
this
.
paintColorPropertyName
,
copyPaintOptions
);
this
.
_map
.
setPaintProperty
(
'
wms-layer
'
,
'
raster-opacity
'
,
0.3
);
}
else
{
// If value is empty, remove the search expression and set the opacity for the raster layer back to 1.
this
.
paintPropertyForLayer
(
'
data-layer
'
,
this
.
mapOptions
.
dataType
,
this
.
COLOR_EXPRESSION
);
this
.
_map
.
setFilter
(
'
data-layer
'
,
null
);
this
.
_map
.
setPaintProperty
(
'
data-layer
'
,
this
.
paintColorPropertyName
,
this
.
paintExpression
[
this
.
paintColorPropertyName
]);
this
.
_map
.
setPaintProperty
(
'
wms-layer
'
,
'
raster-opacity
'
,
1
);
}
}
private
paintPropertyForLayer
(
layerId
:
string
,
type
:
DataType
,
expression
:
any
)
{
if
(
type
.
isPunctual
)
{
this
.
_map
.
setPaintProperty
(
layerId
,
'
circle-color
'
,
expression
);
}
else
if
(
type
.
isLinear
)
{
this
.
_map
.
setPaintProperty
(
layerId
,
'
line-color
'
,
expression
);
}
else
if
(
type
.
isAreal
)
{
this
.
_map
.
setPaintProperty
(
layerId
,
'
fill-color
'
,
expression
);
}
}
get
map$
():
Observable
<
void
>
{
return
this
.
_mapSubject
.
asObservable
();
}
...
...
Write
Preview
Supports
Markdown
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