Commit 726b6d7c authored by ext.sopra.ncastejon's avatar ext.sopra.ncastejon
Browse files

Merge branch 'ign-raster' into development

parents 490f684c 3896d6e3
Pipeline #4197 passed with stage
in 8 seconds
This diff is collapsed.
......@@ -14,8 +14,7 @@ export class AppConfig {
catalogue: string;
reuses: string;
geocoder: string;
wms: string;
mvt: string;
proxyMap: string;
seo: string;
};
theFunctionalitiesInterruptor: {
......
......@@ -75,7 +75,7 @@ export class DatasetMapComponent implements OnInit, OnDestroy {
if (this.metadata && !this.mapOptions) {
this.mapOptions = {} as MapOptions;
this.mapOptions.isMVT = true;
this.mapOptions.mvtUrl = APP_CONFIG.backendUrls.mvt;
this.mapOptions.mvtUrl = `${APP_CONFIG.backendUrls.proxyMap}/mvt`;
this.mapOptions.vectorService = { ...this.metadata.link.find((e) => { return e.service === linkFormats.wfs; }) };
this.mapOptions.rasterService = { ...this.metadata.link.find((e) => { return e.service === linkFormats.wms; }) };
const dataType = {
......@@ -101,7 +101,7 @@ export class DatasetMapComponent implements OnInit, OnDestroy {
// If download data, use config url.
if (this.mapOptions.rasterService.url.includes('download.data')) {
const domain = this.mapOptions.rasterService.url.split('wms')[1];
this.mapOptions.rasterService.url = APP_CONFIG.backendUrls.wms + domain;
this.mapOptions.rasterService.url = `${APP_CONFIG.backendUrls.proxyMap}/wms${domain}`;
}
// If the data are just a sample, we will use this sample as geojson to display the interaction layer on the map.
......
......@@ -231,3 +231,28 @@
left: 0;
z-index: 999;
}
::ng-deep .popup {
h3 {
line-height: 1.2rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem
}
ul {
list-style: none;
padding: 0;
margin: 0;
li {
display: flex;
}
li::before {
font-family: "Open sans", sans-serif;
content: "• ";
color: $tomato-color;
font-size: 1.25rem;
margin-right: 0.5rem;
}
}
}
......@@ -153,7 +153,7 @@ export class MapComponent implements OnInit, OnDestroy {
const mapboxOptions = {
container: 'map',
center: [4.85, 45.75] as mapboxgl.LngLatLike,
minZoom: 9,
// minZoom: 9,
zoom: 12,
};
......@@ -249,8 +249,10 @@ export class MapComponent implements OnInit, OnDestroy {
language = navigator.language;
}
if (Array('fr', 'fr-FR', 'fr-CA').includes(language)) {
this._mapService.lang = 'fr';
this.lang = 'fr';
} else {
this._mapService.lang = 'en';
this.lang = 'en';
}
}
......
......@@ -12,13 +12,17 @@ import { MapOptions } from '../models/map-options';
@Injectable()
export class MapService {
lang: string;
private _map: mapboxgl.Map;
private url: string;
selectedBaseLayer: any;
mapOptions: MapOptions;
eventPopupAdded = false;
eventsData = false;
mapIsConstructed: boolean = false;
// popup: mapboxgl.Popup;
// Map features colors
featureColor: string = '#1d92ff';
......@@ -65,6 +69,11 @@ export class MapService {
credentials: 'include',
};
}
if (resourceType === 'Tile' && url.includes('ign')) {
return {
url,
};
}
};
this._map = new mapboxgl.Map(options);
......@@ -105,6 +114,7 @@ export class MapService {
// - a data layer, created from a geojson or an MVT service. It is used for the features interaction (hover, click)
addLayers() {
// Raster layer in charge of displaying the data
this.addWMSLayer();
// Add the 3d source. Constructed with MVT tiles from the 'fpc_fond_plan_communaut.fpctoit' dataset
......@@ -117,7 +127,7 @@ fpc_fond_plan_communaut.fpctoit&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}
});
// Add the data layer only if it comes from the Lyon Metropole
if (this.mapOptions.rasterService.url.includes(APP_CONFIG.backendUrls.wms)) {
if (this.mapOptions.rasterService.url.includes(`${APP_CONFIG.backendUrls.proxyMap}/wms`)) {
// There is two ways to add tha data layers: from a geojson or from a MVT url
if (!this.mapOptions.isMVT) {
if (this.mapOptions.geojson) {
......@@ -139,9 +149,121 @@ fpc_fond_plan_communaut.fpctoit&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}
});
this.addDataLayer();
}
}
}
// If satellite baselayer, then add a line layer to draw in black the frontier
// between Métropole and IGN view images
if (this.selectedBaseLayer.fileName === 'satellite.json') {
this.addSeparationTerritoryLayer();
this.addIgnBaseLayer();
}
}
addIgnBaseLayer() {
// Add this layer below all the other layers (as first in the stack)
const firstLayer = this._map.getStyle().layers[0];
this._map.addSource('raster-tiles-ign', {
type: 'raster',
tiles: [
`${APP_CONFIG.backendUrls.proxyMap}/ign?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1` +
'&request=GetMap&srs=EPSG:3857&width=512&height=512&transparent=true&layers=ORTHOIMAGERY.ORTHOPHOTOS.BDORTHO&styles=normal',
],
maxzoom: 21,
});
this._map.addLayer({
id: 'satellite-tiles-ign',
type: 'raster',
source: 'raster-tiles-ign',
paint: {
'raster-saturation': -0.5,
},
// tslint:disable-next-line: align
}, firstLayer.id);
}
addSeparationTerritoryLayer() {
// Add the Metropole polygon layer
this._map.addSource('polygon-metropole', {
type: 'geojson',
lineMetrics: true,
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
name: 'Métropole',
},
geometry: {
type: 'LineString',
coordinates: [[4.664889456606686, 45.546883237913455], [4.677293671678624, 45.96069089388331],
[4.844965771994277, 45.958104771794908], [4.843771328197183, 45.922124012308018],
[4.908214607359763, 45.921064482585919], [4.906980046164964, 45.885084194120161],
[5.113048045465636, 45.881451508470512], [5.107934333793898, 45.746532535709612],
[5.172169234171356, 45.745323877108788], [5.166227999823527, 45.592416594858285],
[4.884346903146746, 45.597449627708009], [4.882529381431865, 45.543477090694203],
[4.664889456606686, 45.546883237913455]],
},
},
],
},
});
this._map.addLayer({
id: 'polygon-metropole',
type: 'line',
source: 'polygon-metropole',
layout: {
'line-join': 'round',
'line-cap': 'round',
},
paint: {
'line-color': 'black',
'line-width': 3,
'line-offset': -1,
},
minzoom: 9,
});
this._map.on('mouseenter', 'polygon-metropole', (e) => {
// Change the cursor style as a UI indicator.
this._map.getCanvas().style.cursor = 'pointer';
});
// If not already done, add all the events listeners
if (!this.eventPopupAdded) {
this._map.on('click', 'polygon-metropole', (e) => {
// Check the browser language to display the popup message
const popupText = this.lang === 'fr' ?
'<p>Deux orthophotographies constituent la vue aérienne du territoire :</p>' +
'<ul><li>À grande échelle : vue aérienne à très haute résolution réalisée par la Métropole de Lyon en 2018</li>' +
'<li>À moyenne échelle : vue aérienne à haute résolution réalisée par l’IGN en 2017</ul></p>' :
'<p> Two orthophotographs constitute the aerial view of the territory: </p> ' +
'<ul> <li> On a large scale: very high resolution aerial view taken by the Métropole de Lyon in 2018 </li>' +
'<li> On a middle scale: high-resolution aerial view produced by IGN in 2017 </ul> </p>';
const coordinates = e.lngLat;
// Populate the popup and set its coordinates
// based on the feature found.
// Create a popup, but don't add it to the map yet.
new mapboxgl.Popup({ className: 'popup', maxWidth: '350px' })
.setLngLat(coordinates)
.setHTML(popupText)
.addTo(this._map);
});
this._map.on('mouseleave', 'polygon-metropole', () => {
this._map.getCanvas().style.cursor = '';
});
this.eventPopupAdded = true;
}
}
addClickEventOnLayer(layer: string) {
......@@ -211,6 +333,7 @@ fpc_fond_plan_communaut.fpctoit&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}
// Add the raster (WMS) layer
addWMSLayer() {
this._map.addSource('wms-source', {
type: 'raster',
tiles: [
......@@ -329,7 +452,7 @@ fpc_fond_plan_communaut.fpctoit&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}
});
// If not already done, add all the events listeners
if (!this.eventPopupAdded) {
if (!this.eventsData) {
// Manage the cursor and feature state for data layer when mouse events
this._map.on('mousemove', 'data-layer', (e) => {
......@@ -364,7 +487,7 @@ fpc_fond_plan_communaut.fpctoit&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}
);
}
});
this.eventPopupAdded = true;
this.eventsData = true;
}
}
......
{
"backendUrls": {
"organizations": "https://data-reloaded-dev.alpha.grandlyon.com/api/organizations",
"resources": "https://data-reloaded-dev.alpha.grandlyon.com/api/resources",
"changelog": "https://data-reloaded-dev.alpha.grandlyon.com/api/changelog",
"credits": "https://data-reloaded-dev.alpha.grandlyon.com/api/credits/credits",
"auth": "https://data-reloaded-dev.alpha.grandlyon.com/api/authentication/",
"middlewareLegacyAuth": "https://data-reloaded-dev.alpha.grandlyon.com/api/middleware-legacy/",
"email": "http://localhost:3001",
"matomo": "https://matomo-intothesky.alpha.grandlyon.com",
"elasticsearch": "https://data-reloaded-dev.alpha.grandlyon.com/api/es-consumer-aware",
"catalogue": "https://data-reloaded-dev.alpha.grandlyon.com/api/catalogue",
"reuses": "https://data-reloaded-dev.alpha.grandlyon.com/api/reuses/reuses",
"proxyMap": "https://data-reloaded-dev.alpha.grandlyon.com/api/services",
"geocoder": "https://download.data.grandlyon.com/geocoding/photon",
"seo": "/share"
},
"theFunctionalitiesInterruptor": {
"credits": true,
"reuses": true,
"partners": true
}
}
\ No newline at end of file
......@@ -4,10 +4,11 @@
"raster-tiles": {
"type": "raster",
"tiles": [
"https://ortho.data.grandlyon.com/?bbox={bbox-epsg-3857}&format=image/jpeg&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&width=512&height=512&transparent=true&layers=ortho2018"
"https://ortho.data.grandlyon.com/?bbox={bbox-epsg-3857}&format=image/jpeg&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&width=256&height=256&transparent=true&layers=ortho2018"
],
"maxzoom": 21,
"attribution": " © <a href='https://openmaptiles.org/'>OpenMapTiles</a> © <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap contributors</a>"
"attribution":
" © <a href='https://openmaptiles.org/'>OpenMapTiles</a> © <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap contributors</a>"
},
"openmaptiles": {
"type": "vector",
......@@ -18,11 +19,13 @@
"maxzoom": 22
}
},
"glyphs": "https://minio.alpha.grandlyon.com/mapbox-glyphs/{fontstack}/{range}.pbf",
"layers": [{
"id": "simple-tiles",
"glyphs": "https://openmaptiles.geo.data.gouv.fr/fonts/{fontstack}/{range}.pbf",
"layers": [
{
"id": "satellite-tiles",
"type": "raster",
"source": "raster-tiles"
"source": "raster-tiles",
"minzoom": 9
},
{
"id": "road_major_label",
......
......@@ -19,7 +19,6 @@ export const notificationMessages = {
getCredits: 'Impossible de charger la liste des crédits.',
getReuses: 'Impossible de charger la liste des réutilisations.',
news: 'actualité',
},
geosource: {
getResults: 'Impossible de charger la liste de datasets',
......@@ -32,7 +31,6 @@ export const notificationMessages = {
getDatasetData: 'Impossible de récupérer la donnée du jeu de données',
getAggregationsList: 'Impossible de récupérer les aggregations',
getDataFromCoordinates: 'Aucune donnée à ces coordonnées',
},
matomo: {
getViews: 'Impossible de récupérer le nombre de vues',
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment