Event

Map loading event

The GCUI.Map constructor with server and layer options arguments gets asynchronously map informations (extent, resolutions, …) from the Geoptimization server. The map events system trigger a load event to notify that the map is loaded :

HTML  

<div id="map1" style="height:300px"></div>

JavaScript  

var options = {
    server : 'https://api.geoconcept.com/EU/GCW/geoconcept-web/wmts',
    layer : 'STANDARD'
};
var map = new GCUI.Map('map1', options);
map.onEvent("load", onMapLoaded);

function onMapLoaded() {
    var map = GCUI.getMap('map1');
    alert("Map is loaded. Map extent is : " + map.getExtent());
}

The following code registers a callback function that will be called when map is ready :

map.onEvent("load",onMapLoaded);

In this example, the callback function display the map extent :

function onMapLoaded() {
    var map = GCUI.getMap('map1');
    alert("Map is loaded. Map extent is : "+ map.getExtent());
}

Map moveend event

This example shows how to listen to the map moveend event :

HTML  

<div id="map2" style="height:300px"></div>

JavaScript  

var options = {
    server : 'https://api.geoconcept.com/EU/GCW/geoconcept-web/wmts',
    layer : 'STANDARD'
};
var map = new GCUI.Map('map2', options);
map.on('moveend', onMoveEnd);
function onMoveEnd(evt) {
        alert("End move, map extent is : "+ map.getExtent()+ " and zoom level is " + map.getZoom());
      }

Map click event

You can add a control to the map to register and define an action on the click event :

HTML  

<div id="map4" style="height:300px"></div>

JavaScript  

var options = {
    server : 'https://api.geoconcept.com/EU/GCW/geoconcept-web/wmts',
    layer : 'STANDARD'
};
var map = new GCUI.Map('map4', options);
map.on('singleclick', onClick);
function onClick(evt) {
                  var coordinate = evt.coordinate;
          alert("You clicked near x: " + coordinate[0] + " , y: " + coordinate[1]);
      }

Feature select event

You can add a control to the map to register and define an action on the feature selected event :

HTML  

<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css" />
<style>
.anchorright#ol-popup {
    right: -30px;
}

.anchorright#ol-popup:after {
    right: 20px;
}

.anchorright#ol-popup:before {
    right: 20px;
}

.anchorbottom#ol-popup {
    bottom: 11px;
}

.anchorbottom#ol-popup:after, .anchorbottom#ol-popup:before {
    top: 100%;
}

#ol-popup-content.content {
    max-height: 25em;
    overflow-y: auto;
}

.#ol-popup{
    padding-top: 2em;
    padding-right: 0.35em;
}

.anchorbottom#ol-popup:after {
    border-top-color: white;
}

.anchorbottom#ol-popup:before {
    border-top-color: #cccccc;
}

.anchorleft#ol-popup {
    left: -25px;
}

.anchorleft#ol-popup:after {
    left: 25px;
}

.anchorleft#ol-popup:before {
    left: 25px;
}

.anchortop#ol-popup {
    top: 11px;
}

.anchortop#ol-popup:after, .anchortop#ol-popup:before {
    bottom: 100%;
}

.anchortop#ol-popup:after {
    border-bottom-color: white;
}

.anchortop#ol-popup:before {
    border-bottom-color: #cccccc;
}

#ol-popup {
    position: absolute;
    background-color: white;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #cccccc;
    min-width: 280px;
}

#ol-popup:after, #ol-popup:before {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

#ol-popup:after {
    border-width: 10px;
    margin-left: -10px;
}

#ol-popup:before {
    border-width: 11px;
    margin-left: -11px;
}

#ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
    font-family: Icons;
}

#ol-popup-closer:hover {
    cursor: pointer;
    color: #004687;
}

#ol-popup-closer:after {
  content: "✖";
}

#ol-popup .pages {
        text-align: right;
    position: relative;
    right: -1em;
    bottom: -0.8em;
}

#ol-popup .pages i {
    cursor: pointer;
}

#ol-popup .pages > * {
    display: inline-block;
}

#ol-popup .pages i.disabled {
    cursor: default;
}

.gcuiAnchoredContentData {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.gcuiAnchoredContentData .table-width {
    width: 50%;
}

.gcuiAnchoredContentData .ui.table  .right.aligned .content {
    text-align: right;
    margin-right: .2em;
    color: #808080;
}

.gcuiAnchoredContentData .ui.table .content {
    color: #000000;
    border: none !important;
}

.gcuiAnchoredContentData .ui.table td {
    padding: .25em;
    border: none !important;
}
.gcuiAnchoredContentData .ui.table, th, td {
         border: none !important;
}
.ol-custom-overviewmap,
.ol-custom-overviewmap.ol-uncollapsible {
        bottom: auto;
        left: auto;
        right: 0;
        top: 0;
}
.ol-custom-overviewmap:not(.ol-collapsed)  {
        border: 1px solid black;
}
.ol-custom-overviewmap .ol-overviewmap-map {
        border: none;
        width: 300px;
}
.ol-custom-overviewmap .ol-overviewmap-box {
        border: 2px solid red;
}
.ol-custom-overviewmap:not(.ol-collapsed) button{
        bottom: auto;
        left: auto;
        right: 1px;
        top: 1px;
}
.ol-rotate {
        top: 170px;
        right: 0;
}
</style>
<div id="map5" style="height:300px"></div>

JavaScript  

var options = {
    server : 'https://api.geoconcept.com/EU/GCW/geoconcept-web/wmts',
    layer : 'STANDARD'
};
var map = new GCUI.Map('map5', options);
map.onEvent("load", onMapLoaded);

function onMapLoaded() {
        var vectorSource = new ol.source.Vector({});
        var point_feature_1 = new ol.Feature({
        geometry: new ol.geom.Point([255490, 6249610]),
        Name: "My Data 1"
        });
        var point_feature_2 = new ol.Feature({
        geometry: new ol.geom.Point([264433, 6252668]),
        Name: "My Data 2"
        });
        vectorSource.addFeature(point_feature_1);
        vectorSource.addFeature(point_feature_2);
        vector_layer = new GCUI.Layer.StandardVector({
        source: vectorSource
                });
        map.addLayer(vector_layer);
//Adding a style to the vector layer
        var fill = new ol.style.Fill({
          color: [0, 70, 135, 0.9]
        });
        var stroke = new ol.style.Stroke({
          color: [255, 255, 255, 1],
          width: 2
        });
        var style = new ol.style.Style({
          image: new ol.style.Circle({
                fill: fill,
                stroke: stroke,
                radius: 10
          }),
          fill: fill,
          stroke: stroke
        });
        vector_layer.setStyle(style);
        extent = vectorSource.getExtent();
        map.getView().fit(extent);
        //select interaction working on "click"
        var selectClick = new ol.interaction.Select({
          condition: ol.events.condition.click
        });
         if (selectClick !== null) {
                map.addInteraction(selectClick);
                selectClick.on('select', function(e) {
                  var feature = e.target.getFeatures().getArray();
                  if (feature.length >= 1) {
                  var opt_options = "<div class='gcuiAnchoredContentData'><table class='ui very basic table unstackable' cellspacing='0' cellpadding='0'><tbody><tr><td class='right aligned'><div class='content'>X</div></td><td><div class='content'>" + feature[0].values_.geometry.flatCoordinates[0] + "</div></td></tr><tr><td class='right aligned'><div class='content'>Y</div></td><td><div class='content'>" + feature[0].values_.geometry.flatCoordinates[1] + "</div></td></tr><tr><td class='right aligned'><div class='content'>Name</div></td><td><div class='content'>" + feature[0].values_.Name + "</div></td></tr></tbody></table></div>";
                  var popup = new GCUI.Control.Popup(map, feature[0].values_.geometry.flatCoordinates, {content : opt_options});
                  map.addOverlay(popup);
                  popup.initialize(feature[0].values_.geometry.flatCoordinates);
                  }
                });
          }
}

Feature modify event

You can add a control to the map to register and define an action on the feature modified event :

HTML  

<div id="map6" style="height:300px"></div>

JavaScript  

var options = {
    server : 'https://api.geoconcept.com/EU/GCW/geoconcept-web/wmts',
    layer : 'STANDARD'
};
var map = new GCUI.Map('map6', options);
map.onEvent("load", onMapLoaded);

function onMapLoaded() {
        var vectorSource = new ol.source.Vector({});
        var point_feature_1 = new ol.Feature({
        geometry: new ol.geom.Point([255490, 6249610]),
        Name: "My Data 1"
        });
        var point_feature_2 = new ol.Feature({
        geometry: new ol.geom.Point([264433, 6252668]),
        Name: "My Data 2"
        });
        vectorSource.addFeature(point_feature_1);
        vectorSource.addFeature(point_feature_2);
        vector_layer = new GCUI.Layer.StandardVector({
        source: vectorSource
                });
        map.addLayer(vector_layer);
//Adding a style to the vector layer
        var fill = new ol.style.Fill({
          color: [0, 70, 135, 0.9]
        });
        var stroke = new ol.style.Stroke({
          color: [255, 255, 255, 1],
          width: 2
        });
        var style = new ol.style.Style({
          image: new ol.style.Circle({
                fill: fill,
                stroke: stroke,
                radius: 10
          }),
          fill: fill,
          stroke: stroke
        });
        vector_layer.setStyle(style);
        extent = vectorSource.getExtent();
        map.getView().fit(extent);
        var modify = new ol.interaction.Modify({source: vectorSource});
        map.addInteraction(modify);
}

Prev  Up  Next
  Home