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

Add popup on click (not hover). Clean mapService.

parent ff11b761
......@@ -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;
}
}
}
......@@ -18,8 +18,9 @@ export class MapService {
mapOptions: MapOptions;
eventPopupAdded = false;
eventsData = false;
mapIsConstructed: boolean = false;
popup: mapboxgl.Popup;
// popup: mapboxgl.Popup;
// Map features colors
featureColor: string = '#1d92ff';
......@@ -111,6 +112,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
......@@ -131,7 +133,7 @@ fpc_fond_plan_communaut.fpctoit&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}
type: 'geojson',
data: this.mapOptions.geojson,
});
// this.addDataLayer();
this.addDataLayer();
}
} else {
if (this.mapOptions.vectorService && this.mapOptions.vectorService.url) {
......@@ -144,10 +146,88 @@ fpc_fond_plan_communaut.fpctoit&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}
tiles: [url],
});
// this.addDataLayer();
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();
}
}
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,
},
});
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) => {
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('<h3>Deux couches orthophotographiques</h3>' +
'<p>Deux couches co-existent pour l\'affichage de cette vue aérienne:</br> ' +
'<ul><li> la couche orthophotographique 2018 de la Métropole de Lyon</li><li> la couche IGN pour le reste du territoire</ul></p>')
.addTo(this._map);
});
this._map.on('mouseleave', 'polygon-metropole', () => {
this._map.getCanvas().style.cursor = '';
});
this.eventPopupAdded = true;
}
}
addClickEventOnLayer(layer: string) {
......@@ -218,89 +298,6 @@ fpc_fond_plan_communaut.fpctoit&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}
// Add the raster (WMS) layer
addWMSLayer() {
// const polygonShape = polygon([[
// [1647472.538427598774433, 3867539.236738075967878],
// [1656149.591045931447297, 3925253.242399890907109], [1673432.08156061777845, 3922604.02275731228292],
// [1672548.20371083682403, 3916819.587899864651263], [1678303.04124740511179, 3915930.268553881905973],
// [1677416.643843154655769, 3910150.66299252351746], [1694663.155232969438657, 3907464.046523998957127],
// [1691977.944659303408116, 3890157.666010212618858], [1697713.46819336945191, 3889258.274896244518459],
// [1694134.930576886516064, 3866238.741810463834554], [1671244.189017552649602, 3869795.743182665668428],
// [1670367.001061368035153, 3864045.317551260814071], [1647472.538427598774433, 3867539.236738075967878]
// ]]);
// console.log(polygonShape);
// const converted = projection.toWgs84(polygonShape);
// console.log(converted);
// 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,
},
});
const popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false,
closeOnMove: true,
});
this._map.on('mouseenter', 'polygon-metropole', (e) => {
// Change the cursor style as a UI indicator.
this._map.getCanvas().style.cursor = 'pointer';
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.
popup
.setLngLat(coordinates)
.setHTML('<p>Deux couches ortho existent pour l\'affichage de la vue staellite:</br> ' +
'* la couche de la métropole de Lyon</br> * la couche IGN pour le reste du territoire.</p>')
.addTo(this._map);
});
this._map.on('mouseleave', 'polygon-metropole', () => {
this._map.getCanvas().style.cursor = '';
popup.remove();
});
this._map.addSource('wms-source', {
type: 'raster',
tiles: [
......@@ -310,12 +307,12 @@ fpc_fond_plan_communaut.fpctoit&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}
tileSize: 256,
});
// this._map.addLayer({
// id: 'wms-layer',
// type: 'raster',
// source: 'wms-source',
// paint: {},
// });
this._map.addLayer({
id: 'wms-layer',
type: 'raster',
source: 'wms-source',
paint: {},
});
}
......@@ -419,7 +416,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) => {
......@@ -454,7 +451,7 @@ fpc_fond_plan_communaut.fpctoit&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}
);
}
});
this.eventPopupAdded = true;
this.eventsData = true;
}
}
......
......@@ -7,8 +7,7 @@
"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"
],
"minzoom": 9,
"maxzoom": 21,
"attribution": "© <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
"maxzoom": 21
},
"raster-tiles-ign": {
"type": "raster",
......
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