Skip to content

Commit

Permalink
Add Group Param To Geometry Canadian-Geospatial-Platform#2241 (Canadi…
Browse files Browse the repository at this point in the history 
…an-Geospatial-Platform#2263)

* Add Group Param To Geometry Canadian-Geospatial-Platform#2241

* Corrections-Asked
  • Loading branch information
@guichoquette
guichoquette authored Jun 17, 2024
1 parent 31c2980 commit 1cb81c4
Show file tree
Hide file tree
Showing 2 changed files with 119 additions and 9 deletions.
104 changes: 103 additions & 1 deletion packages/geoview-core/public/templates/geometry.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ <h1><strong>Geometry</strong></h1>
<tbody>
<tr>
<td>This page is used to showcase how the viewer may implement different geometry functions</td>
<hr />
</tr>
</tbody>
</table>
Expand Down Expand Up @@ -77,13 +78,39 @@ <h1><strong>Geometry</strong></h1>
'theme': 'geo.ca'
}"></div>
<p></p>

<hr />
<label>
Theses buttons creates a geometry in a group named static which is not the active group.</label>
<div>
<button class="create-polyline-in-static-group-btn">Add Polyline To Static Group</button>
<button class="create-polygon-in-static-group-btn">Add Polygon To Static Group</button>
<button class="create-circle-in-static-group-btn">Add Circle To Static Group</button>
<button class="create-marker-in-static-group-btn">Add Marker To Static Group</button>
</div>
<hr />
<button type="button" class="collapsible">Code Snippet</button>
<pre id="codeSnippet" class="panel"></pre>

<script src="codedoc.js"></script>
<script>
// TODO: for layer.graphic.add* add a optional param to specify the geometry group - UPDATE CODE AND SAMPLE
function addPolylineInStaticGroup(map) {
// call an api function to draw a polyline with default styles
const polyline1 = cgpv.api.maps[map].layer.geometry.addPolyline(
[
[-120, 60],
[-125, 65],
],
{
style: {
strokeColor: 'magenta',
},
},
undefined,
'static'
);
}

function addPolyline(map) {
// call an api function to draw a polyline with default styles
const polyline1 = cgpv.api.maps[map].layer.geometry.addPolyline(
Expand Down Expand Up @@ -123,6 +150,27 @@ <h1><strong>Geometry</strong></h1>
);
}

function addPolygonInStaticGroup(map) {
// call an api function to draw a polygon with default styles
const polygon1 = cgpv.api.maps[map].layer.geometry.addPolygon(
[
[
[-119.05, 55],
[-119.03, 59],
[-112.05, 59],
[-112.04, 55],
],
],
{
style: {
strokeColor: 'magenta',
},
},
undefined,
'static'
);
}

function addPolygon(map) {
// call an api function to draw a polygon with default styles
const polygon1 = cgpv.api.maps[map].layer.geometry.addPolygon(
Expand Down Expand Up @@ -174,6 +222,19 @@ <h1><strong>Geometry</strong></h1>
);
}

function addCircleInStaticGroup(map) {
// call an api function to draw a circle with default style
const circle1 = cgpv.api.maps[map].layer.geometry.addCircle([-90, 55], {
style: {
fillColor: 'magenta',
fillOpacity: 0.5,
radius: 10,
}
},
undefined,
'static'
);
}
function addCircle(map) {
// call an api function to draw a circle with default style
const circle1 = cgpv.api.maps[map].layer.geometry.addCircle([-100, 50], undefined);
Expand Down Expand Up @@ -205,6 +266,14 @@ <h1><strong>Geometry</strong></h1>
});
}

function addMarkerInStaticGroup(map) {
// call an api function to draw a marker icon with default styles
const markerIcon1 = cgpv.api.maps[map].layer.geometry.addMarkerIcon([-100, 55],
undefined,
undefined,
'static'
);
}
function addMarkerIcon(map) {
// call an api function to draw a marker icon with default styles
const markerIcon1 = cgpv.api.maps[map].layer.geometry.addMarkerIcon([-100, 60], undefined);
Expand Down Expand Up @@ -235,6 +304,7 @@ <h1><strong>Geometry</strong></h1>
// get addPolyline button element and add event handler
var addPolylineBtn = document.getElementsByClassName('add-polyline-btn')[0];
addPolylineBtn.addEventListener('click', function (e) {
let groupName = document.getElementById('selectGroupsName').value
addPolyline('mapWM');
});

Expand Down Expand Up @@ -291,6 +361,38 @@ <h1><strong>Geometry</strong></h1>
}
});

// get create GeomtryFromGroup button element and add event handler
const createPolylineInStaticGroup = document.getElementsByClassName('create-polyline-in-static-group-btn')[0];
createPolylineInStaticGroup.addEventListener('click', function (e) {
// create geometry in static group
addPolylineInStaticGroup('mapWM');
}
);

// get create GeomtryFromGroup button element and add event handler
const createPolygonInStaticGroup = document.getElementsByClassName('create-polygon-in-static-group-btn')[0];
createPolygonInStaticGroup.addEventListener('click', function (e) {
// create geometry in static group
addPolygonInStaticGroup('mapWM');
}
);

// get create GeomtryFromGroup button element and add event handler
const createCircleInStaticGroup = document.getElementsByClassName('create-circle-in-static-group-btn')[0];
createCircleInStaticGroup.addEventListener('click', function (e) {
// create geometry in static group
addCircleInStaticGroup('mapWM');
}
);

// get create GeomtryFromGroup button element and add event handler
const createMarkerInStaticGroup = document.getElementsByClassName('create-marker-in-static-group-btn')[0];
createMarkerInStaticGroup.addEventListener('click', function (e) {
// create geometry in static group
addMarkerInStaticGroup('mapWM');
}
);

// listen to geometry added event
cgpv.api.maps['mapWM'].layer.geometry.onGeometryAdded((sender, payload) => {
console.log(`geometry added ${payload.getGeometry().getType()}`);
Expand Down
24 changes: 16 additions & 8 deletions packages/geoview-core/src/geo/layer/geometry/geometry.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@ export class GeometryApi {
* @param {Coordinate} points points of lng/lat to draw a polyline
* @param options polyline options including styling
* @param {string} id an optional id to be used to manage this geometry
* @param {string} groupId an optional group id in witch we want to add the geometry
*
* @returns {Feature} a geometry containing the id and the created geometry
*/
Expand All @@ -110,7 +111,8 @@ export class GeometryApi {
geometryLayout?: 'XY' | 'XYZ' | 'XYM' | 'XYZM';
style?: TypeFeatureStyle;
},
id?: string
id?: string,
groupId?: string
): Feature {
const polylineOptions = options || {};

Expand Down Expand Up @@ -155,7 +157,7 @@ export class GeometryApi {
polyline.set('GeometryGroupIndex', this.activeGeometryGroupIndex);

// add geometry to feature collection
this.geometryGroups[this.activeGeometryGroupIndex].vectorSource.addFeature(polyline);
this.addToGeometryGroup(polyline, groupId);

// add the geometry to the geometries array
this.geometries.push(polyline);
Expand All @@ -172,6 +174,7 @@ export class GeometryApi {
* @param {Coordinate} points array of points to create the polygon
* @param options polygon options including styling
* @param {string} optionalFeatureId an optional id to be used to manage this geometry
* @param {string} groupId an optional group id in witch we want to add the geometry
*
* @returns {Feature} a geometry containing the id and the created geometry
*/
Expand All @@ -182,7 +185,8 @@ export class GeometryApi {
geometryLayout?: 'XY' | 'XYZ' | 'XYM' | 'XYZM';
style?: TypeFeatureStyle;
},
optionalFeatureId?: string
optionalFeatureId?: string,
groupId?: string
): Feature {
const polygonOptions = options || {};

Expand Down Expand Up @@ -227,7 +231,7 @@ export class GeometryApi {
polygon.set('GeometryGroupIndex', this.activeGeometryGroupIndex);

// add geometry to feature collection
this.geometryGroups[this.activeGeometryGroupIndex].vectorSource.addFeature(polygon);
this.addToGeometryGroup(polygon, groupId);

// add the geometry to the geometries array
this.geometries.push(polygon);
Expand All @@ -244,6 +248,7 @@ export class GeometryApi {
* @param {Coordinate} coordinate long lat coordinate of the circle
* @param options circle options including styling
* @param {string} optionalFeatureId an optional id to be used to manage this geometry
* @param {string} groupId an optional group id in witch we want to add the geometry
*
* @returns {Feature} a geometry containing the id and the created geometry
*/
Expand All @@ -254,7 +259,8 @@ export class GeometryApi {
geometryLayout?: 'XY' | 'XYZ' | 'XYM' | 'XYZM';
style?: TypeFeatureCircleStyle;
},
optionalFeatureId?: string
optionalFeatureId?: string,
groupId?: string
): Feature {
const circleOptions = options || {};

Expand Down Expand Up @@ -305,7 +311,7 @@ export class GeometryApi {
circle.set('GeometryGroupIndex', this.activeGeometryGroupIndex);

// add geometry to feature collection
this.geometryGroups[this.activeGeometryGroupIndex].vectorSource.addFeature(circle);
this.addToGeometryGroup(circle, groupId);

// add the geometry to the geometries array
this.geometries.push(circle);
Expand All @@ -322,6 +328,7 @@ export class GeometryApi {
* @param {Coordinate} coordinate the long lat position of the marker
* @param options marker options including styling
* @param {string} optionalFeatureId an optional id to be used to manage this geometry
* @param {string} groupId an optional group id in witch we want to add the geometry
*
* @returns {Feature} a geometry containing the id and the created geometry
*/
Expand All @@ -332,7 +339,8 @@ export class GeometryApi {
geometryLayout?: 'XY' | 'XYZ' | 'XYM' | 'XYZM';
style?: TypeIconStyle;
},
optionalFeatureId?: string
optionalFeatureId?: string,
groupId?: string
): Feature {
// Read the params and set defaults when needed
const markerOptions = options || {
Expand Down Expand Up @@ -369,7 +377,7 @@ export class GeometryApi {
marker.set('GeometryGroupIndex', this.activeGeometryGroupIndex);

// add geometry to feature collection
this.geometryGroups[this.activeGeometryGroupIndex].vectorSource.addFeature(marker);
this.addToGeometryGroup(marker, groupId);

// add the geometry to the geometries array
this.geometries.push(marker);
Expand Down

0 comments on commit 1cb81c4

Please sign in to comment.