Skip to content

Commit

Permalink
2434 point markers (#2447)
Browse files Browse the repository at this point in the history 
* feat(event): Event added for map added to div

Also removes padding from initial settings zoom to extent

* feat(point markers): point markers added

Closes #2434
  • Loading branch information
@DamonU2
DamonU2 authored Aug 27, 2024
1 parent e58fac1 commit 986ff4c
Show file tree
Hide file tree
Showing 17 changed files with 623 additions and 33 deletions.
22 changes: 22 additions & 0 deletions packages/geoview-core/public/configs/navigator/06-basic-footer.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,28 @@
"shaded": true,
"labeled": true
},
"overlayObjects": {
"pointMarkers": {
"group1": [
{
"id": "1",
"coordinate": [-100, 60],
"color": "blue",
"opacity": 0.5
},
{
"id": "2",
"coordinate": [-80, 65],
"color": "rgb(0, 226, 0)"
},
{
"id": "3",
"coordinate": [-115, 66],
"color": "#C52022"
}
]
}
},
"listOfGeoviewLayerConfig": [
{
"geoviewLayerId": "airborne_radioactivity",
Expand Down
Binary file added packages/geoview-core/public/img/marker-icon36.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
88 changes: 79 additions & 9 deletions packages/geoview-core/public/templates/demos/demo-function-event.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,11 +123,11 @@ <h3>API Functions:</h3>
cgpv.api.maps.Map1.appBarApi.selectAppBarTab('AppbarPanelButtonGeolocator', 'geolocator')
</li>
<li><button id="Disable-hover">Disable hover query for Top 100</button><button id="Enable-hover">Enable hover query for Top 100</button><br />
cgpv.api.maps.Map1.layer.hoverFeatureInfoLayerSet.disableHoverListener('esriFeatureLYR5/0')
cgpv.api.maps.Map1.layer.hoverFeatureInfoLayerSet.disableHoverListener('esriFeatureLYR5/0')<br />
cgpv.api.maps.Map1.layer.hoverFeatureInfoLayerSet.enableHoverListener('esriFeatureLYR5/0')
</li>
<li><button id="Disable-feature-info">Disable feature query for Top 100</button><button id="Enable-feature-info">Enable feature query for Top 100</button><br />
cgpv.api.maps.Map1.layer.featureInfoLayerSet.disableClickListener('esriFeatureLYR5/0')
cgpv.api.maps.Map1.layer.featureInfoLayerSet.disableClickListener('esriFeatureLYR5/0')<br />
cgpv.api.maps.Map1.layer.featureInfoLayerSet.enableClickListener('esriFeatureLYR5/0')
</li>
<li><button id="Show-collapsed-state">Show collapsed legend state for Water Quantity</button><br />
Expand All @@ -140,17 +140,18 @@ <h3>API Functions:</h3>
cgpv.api.maps.Map1.getMapLayerOrderInfo()
</li>
<li><button id="Language-en">Change language to English</button><button id="Language-fr">Change language to French</button><br />
cgpv.api.maps.Map1.getMapLayerOrderInfo()
cgpv.api.maps.Map1.setLanguage('en')<br />
cgpv.api.maps.Map1.setLanguage('fr')
</li>
<li><button id="Change-basemap">Change basemap</button><br />
const basemap = await cgpv.api.maps.Map1.basemap.createCoreBasemap(basemapOptions = {basemapId: 'simple'})
const basemap = await cgpv.api.maps.Map1.basemap.createCoreBasemap(basemapOptions = {basemapId: 'simple'})<br />
cgpv.api.maps.Map1.basemap.setBasemap(basemap)
</li>
<li><button id="Set-layer">Set selected layer in layers panel to Nonmetal mines</button><br />
cgpv.api.maps.Map1.stateApi.setSelectedLayersTabLayer('nonmetalmines/5')
</li>
<li><button id="Swiper-add">Add Nonmetal mines to swiper</button><button id="Swiper-remove">Remove Nonmetal mines from swiper</button><br />
cgpv.api.maps.Map1.plugins['swiper'].activateForLayer('nonmetalmines/5')
cgpv.api.maps.Map1.plugins['swiper'].activateForLayer('nonmetalmines/5')<br />
cgpv.api.maps.Map1.plugins['swiper'].deActivateForLayer('nonmetalmines/5')
</li>
<li><button id="Calc-dist">Calculate distance</button>
Expand All @@ -167,6 +168,16 @@ <h3>API Functions:</h3>
<li><button id="Reload-map">Reload map with current state</button><br />
cgpv.api.maps.Map1.reloadWithCurrentState()
</li>
<li><button id="Add-marker">Add markers to map</button><button id="Remove-marker">Remove markers from map</button><br />
cgpv.api.maps.Map1.layer.featureHighlight.pointMarkers.addPointMarkers('group1', markers)<br />
cgpv.api.maps.Map1.layer.featureHighlight.pointMarkers.removePointMarkersOrGroup('group1');
</li>
<li><button id="Zoom-to-markers">Zoom to markers 1 and 3</button><br />
cgpv.api.maps.Map1.layer.featureHighlight.pointMarkers.zoomToPointMarkers('group1', ['1', '3']);
</li>
<li><button id="Zoom-to-marker-group">Zoom to marker group</button><br />
cgpv.api.maps.Map1.layer.featureHighlight.pointMarkers.zoomToPointMarkerGroup('group1');
</li>
</ul>
<h3>Events that will generate notifications:</h3>
<ul>
Expand All @@ -184,6 +195,7 @@ <h3>Events that will generate notifications:</h3>
<li>onBasemapChanged</li>
<li>onLayersReordered</li>
<li>onLayerOpacityChanged for Water Quantity</li>
<li>onMapAddedToDiv</li>
</ul>
</div>
<br>
Expand Down Expand Up @@ -283,8 +295,11 @@ <h3>Events that will generate notifications:</h3>
cgpv.api.maps.Map1.notifications.addNotificationSuccess(`${payload.layerPath} opacity changed to ${payload.opacity}`);
});

});

// listen to map added to div event
cgpv.api.onMapAddedToDiv((sender, payload) => {
cgpv.api.maps[payload.mapId].notifications.addNotificationSuccess(`Map ${payload.mapId} added`);
});
})
// Add WMS Button======================================================================================================
// find the button element by ID
var addLayerButton = document.getElementById('Add-layer');
Expand Down Expand Up @@ -518,7 +533,7 @@ <h3>Events that will generate notifications:</h3>

// add an event listener when a button is clicked
changeLanguageEnglishButton.addEventListener('click', async () => {
console.log(cgpv.api.maps.Map1.setLanguage('en'));
cgpv.api.maps.Map1.setLanguage('en');
});

// Enable language fr Button================================================================================================
Expand All @@ -527,7 +542,7 @@ <h3>Events that will generate notifications:</h3>

// add an event listener when a button is clicked
changeLanguageFrenchButton.addEventListener('click', async () => {
console.log(cgpv.api.maps.Map1.setLanguage('fr'));
cgpv.api.maps.Map1.setLanguage('fr');
});

// Change basemap Button================================================================================================
Expand Down Expand Up @@ -607,6 +622,61 @@ <h3>Events that will generate notifications:</h3>
reloadMapButton.addEventListener('click', () => {
cgpv.api.maps.Map1.reloadWithCurrentState();
});

// Add-marker Button================================================================================================
// find the button element by ID
var addMarkerButton = document.getElementById('Add-marker');

const markers = [
{
"id": "1",
"coordinate": [-100, 60],
"color": "blue",
"opacity": 0.5
},
{
"id": "2",
"coordinate": [-80, 65],
"color": "rgb(0, 226, 0)"
},
{
"id": "3",
"coordinate": [-115, 66],
"color": "#C52022"
}
]

// add an event listener when a button is clicked
addMarkerButton.addEventListener('click', () => {
cgpv.api.maps.Map1.layer.featureHighlight.pointMarkers.addPointMarkers('group1', markers);
});

// Remove-marker Button================================================================================================
// find the button element by ID
var removeMarkerButton = document.getElementById('Remove-marker');

// add an event listener when a button is clicked
removeMarkerButton.addEventListener('click', () => {
cgpv.api.maps.Map1.layer.featureHighlight.pointMarkers.removePointMarkersOrGroup('group1');
});

// Zoom-to-markers Button================================================================================================
// find the button element by ID
var zoomToMarkersButton = document.getElementById('Zoom-to-markers');

// add an event listener when a button is clicked
zoomToMarkersButton.addEventListener('click', () => {
cgpv.api.maps.Map1.layer.featureHighlight.pointMarkers.zoomToPointMarkers('group1', ['1', '3']);
});

// Zoom-to-marker-group Button================================================================================================
// find the button element by ID
var zoomToMarkerGroupButton = document.getElementById('Zoom-to-marker-group');

// add an event listener when a button is clicked
zoomToMarkerGroupButton.addEventListener('click', () => {
cgpv.api.maps.Map1.layer.featureHighlight.pointMarkers.zoomToPointMarkerGroup('group1');
});

// create snippets
window.addEventListener('load', () => {
Expand Down
59 changes: 58 additions & 1 deletion packages/geoview-core/schema.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -565,7 +565,7 @@
},
"dataProjection": {
"type": "string",
"description": "The projection code of the source. Used only for GeoJSON format. Default value is EPSG:4326. "
"description": "The projection code of the source. Used only for GeoJSON format. Default value is EPSG:4326."
},
"featureInfo": {
"$ref": "#/definitions/TypeFeatureInfoLayerConfig"
Expand Down Expand Up @@ -1346,6 +1346,9 @@
"highlightColor": {
"$ref": "#/definitions/TypeHighlightColors"
},
"overlayObjects": {
"$ref": "#/definitions/TypeOverlayObjects"
},
"extraOptions": {
"type": "object",
"description": "Additional options used for OpenLayers map options"
Expand Down Expand Up @@ -1388,6 +1391,60 @@
"default": "black",
"description": "Color to use for feature highlights."
},
"TypeOverlayObjects": {
"type": "object",
"properties": {
"pointMarkers": {
"$ref": "#/definitions/TypePointMarkers"
}
}
},
"TypePointMarkers": {
"type": "object",
"patternProperties": {
"[^]*": {
"type": "array",
"items": {
"$ref": "#/definitions/TypePointMarker"
}
}
}
},
"TypePointMarker": {
"additionalProperties": false,
"type": "object",
"properties": {
"id": {
"type": "string",
"description": "ID for point marker. Must be unique in group."
},
"coordinate": {
"type": "array",
"minItems": 2,
"maxItems": 2,
"items": {
"type": "number"
},
"description": "The coordinates of the marker."
},
"color": {
"type": "string",
"default": "green",
"description": "Marker color."
},
"opacity": {
"type": "number",
"minimum": 0,
"maximum": 1,
"default": 1
},
"projection": {
"type": "number",
"description": "The projection code of the coordinates. Default value is 4326."
}
},
"required": ["id", "coordinate"]
},
"TypeListOfGeoviewLayerConfig": {
"description": "List of GeoView Layers in the order which they should be added to the map.",
"type": "array",
Expand Down
46 changes: 46 additions & 0 deletions packages/geoview-core/src/api/api.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { MapViewer } from '@/geo/map/map-viewer';
import * as GeoUtilities from '@/geo/utils/utilities';

import { initMapDivFromFunctionCall } from '@/app';
import EventHelper, { EventDelegateBase } from './events/event-helper';

/**
* Class used to handle api calls (events, functions etc...)
Expand All @@ -32,6 +33,9 @@ export class API {
// utilities object
utilities;

// Keep all callback delegates references
#onMapAddedToDivHandlers: MapAddedToDivDelegate[] = [];

/**
* Initiate the event and projection objects
*/
Expand Down Expand Up @@ -110,9 +114,51 @@ export class API {
if (mapDiv) {
// Init by function call
await initMapDivFromFunctionCall(mapDiv, mapConfig);
this.#emitMapAddedToDiv({ mapId: divId });
return Promise.resolve();
}

return Promise.reject(new Error(`Div with id ${divId} does not exist`));
}

/**
* Emits an event to all handlers.
* @param {MapAddedToDivEvent} event - The event to emit
* @private
*/
#emitMapAddedToDiv(event: MapAddedToDivEvent): void {
// Emit the event for all handlers
EventHelper.emitEvent(this, this.#onMapAddedToDivHandlers, event);
}

/**
* Registers a map added to div event handler.
* @param {MapAddedToDivDelegate} callback - The callback to be executed whenever the event is emitted
*/
onMapAddedToDiv(callback: MapAddedToDivDelegate): void {
// Register the event handler
EventHelper.onEvent(this.#onMapAddedToDivHandlers, callback);
}

/**
* Unregisters a map added to div event handler.
* @param {MapAddedToDivdDelegate} callback - The callback to stop being called whenever the event is emitted
*/
offMapAddedToDiv(callback: MapAddedToDivDelegate): void {
// Unregister the event handler
EventHelper.offEvent(this.#onMapAddedToDivHandlers, callback);
}
}

/**
* Define a delegate for the event handler function signature
*/
type MapAddedToDivDelegate = EventDelegateBase<API, MapAddedToDivEvent, void>;

/**
* Define an event for the delegate
*/
export type MapAddedToDivEvent = {
// The added layer
mapId: string;
};
3 changes: 3 additions & 0 deletions packages/geoview-core/src/api/config/types/config-constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,9 @@ export const CV_DEFAULT_MAP_FEATURE_CONFIG = Cast<MapFeatureConfig>({
interaction: 'dynamic',
listOfGeoviewLayerConfig: [],
highlightColor: 'black',
overlayObjects: {
pointMarkers: {},
},
viewSettings: {
initialView: {
zoomAndCenter: [3.5, CV_MAP_CENTER[3978]],
Expand Down
Loading

0 comments on commit 986ff4c

Please sign in to comment.