Map Overlay

Basic Popup

To get a basic popup to be overlayed on the clicked coordinate, follow the below steps:

  • Add a map click handler to initiate an event to render a popup 
map.on('singleclick', function(evt) {
// Create a block to handle the map click event to render a pop up
};
  • Create a new instance of the GCUI.Control.Popup class and pass the map, clicked coordinate and the information to be displayed on the popup. 
var popup = new GCUI.Control.Popup(map, coordinate, {content : text});
  • Then add the control to the existing map using map.addOverlay() function and pass the popup. 
map.addOverlay(popup);
  • To initialize the popup on the clicked coordinate use popup.initialize() function and pass the coordinate. 
popup.initialize(coordinate);

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="mapDiv" style="height:300px"></div>

JavaScript  

var options = {
           server : 'https://api.geoconcept.com/EU/GCW/geoconcept-web/wmts',
           layer : 'STANDARD',
           x : 260803,
           y : 6250829,
           scale : 8
                };
var map = new GCUI.Map('mapDiv', options);
// Creating a new instance of the zoomslider
var zoomslider = new ol.control.Zoom();
// Adding the zoom control to the existing map
map.addControl(zoomslider);
// Creating a new instance of the overview map
var overviewmap = new ol.control.OverviewMap({
className: 'ol-overviewmap ol-custom-overviewmap'
                                 });
// Adding the overviewmap control to the existing map
map.addControl(overviewmap);
// Creating a new instance of the scale
var scaleline = new ol.control.ScaleLine();
// Adding the scale control to the existing map
map.addControl(scaleline);
/**
* Add a click handler to the map to render the popup.
*/
map.on('singleclick', function(evt) {
        map.getOverlays().clear();
        var coordinate = evt.coordinate;
        var map_precision = map.getLayers().getArray();
        var x = coordinate[0]/map_precision[0].precision;
        var y = coordinate[1]/map_precision[0].precision;
        var epsg = this.getProjection();
        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'>" + x + "</div></td></tr><tr><td class='right aligned'><div class='content'>Y</div></td><td><div class='content'>" + y + "</div></td></tr><tr><td class='right aligned'><div class='content'>EPSG</div></td><td><div class='content'>" + epsg + "</div></td></tr></tbody></table></div>";
        var popup = new GCUI.Control.Popup(map, coordinate, {content : opt_options});
        map.addOverlay(popup);
        popup.initialize(coordinate);
});

Geoconcept Infobox

To get a Geoconcept Infobox to be overlayed on the clicked coordinate, follow the below steps:

  • Create an infobox webservice request and pass the clicked coordinate to get back a JSON file 
const url = 'https://api.geoconcept.com/EU/GCW/geoconcept-web/api/gcis/json/object/info?mapName=HE-ENT-M21-EURO_DOM-map-[20211123-150500]-v[6]/HE-ENT-M21-EURO_DOM_cua&x=' + x + '&y=' + y + '&infoMode=infoboxfields&tabName=STANDARD&appkey=' + apikey + '&apptoken=' + apptoken;
Note: The mapName and the tabName would change based on the continent of interest. To get it    please contact Geoconcept sales support team.
  • Add a map click handler to initiate an event to render a popup 
map.on('singleclick', function(evt) {
// Create a block to handle the map click event to render a pop up
};
  • Create a new instance of the GCUI.Control.Popup class and pass the map, clicked coordinate and the information to be displayed on the infobox. 
var popup = new GCUI.Control.Popup(map, coordinate, {content : text});
  • Then add the control to the existing map using map.addOverlay() function and pass the popup. 
map.addOverlay(popup);
  • To initialize the popup on the clicked coordinate use popup.initialize() function and pass the coordinate. 
popup.initialize(coordinate);

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="mapDiv1" style="height:300px"></div>

JavaScript  

var options = {
           server : 'https://api.geoconcept.com/EU/GCW/geoconcept-web/wmts',
           layer : 'STANDARD',
           x : 260803,
           y : 6250829,
           scale : 8
                };
var map = new GCUI.Map('mapDiv1', options);
// Creating a new instance of the zoomslider
var zoomslider = new ol.control.Zoom();
// Adding the zoom control to the existing map
map.addControl(zoomslider);
// Creating a new instance of the overview map
var overviewmap = new ol.control.OverviewMap({
className: 'ol-overviewmap ol-custom-overviewmap'
                                 });
// Adding the overviewmap control to the existing map
map.addControl(overviewmap);
// Creating a new instance of the scale
var scaleline = new ol.control.ScaleLine();
// Adding the scale control to the existing map
map.addControl(scaleline);
/**
* Add a click handler to the map to render the popup.
*/
map.on('singleclick', function(evt)
        {
                var coordinate = evt.coordinate;
                // Getting the precision of the map
                var map_precision = map.getLayers().getArray();
                var x = coordinate[0]/map_precision[0].precision;
                var y = coordinate[1]/map_precision[0].precision;
                // Creating a HTTP request for getting the underlying information
                const request = new XMLHttpRequest();
                const url = 'https://api.geoconcept.com/EU/GCW/geoconcept-web/api/gcis/json/object/info?mapName=HE-ENT-M21-EURO_DOM-map-[20211123-150500]-v[6]/HE-ENT-M21-EURO_DOM_cua&x=' + x + '&y=' + y + '&infoMode=infoboxfields&tabName=STANDARD&appkey=' + $("input[name=apikey]").val() + '&apptoken=' + $("input[name=apitoken]").val();
                request.open("GET", url);
                request.send();
// Treatment of the output JSON to display the information on the popup
request.onreadystatechange=(e)=>{
           if(request.readyState == 4 && request.status == 200)
                {
                        var responseJson = request.responseText;
                        var infobox = JSON.parse(responseJson);
                        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'>Class</div></td><td><div class='content'>" + infobox.result.fields.Class + "</div></td></tr><tr><td class='right aligned'><div class='content'>SubClass</div></td><td><div class='content'>" + infobox.result.fields.Subclass + "</div></td></tr><tr><td class='right aligned'><div class='content'>Name</div></td><td><div class='content'>" + infobox.result.fields.Name + "</div></td></tr></tbody></table></div>";
                        var infobox = new GCUI.Control.Popup(map, coordinate, {content : opt_options});
                        map.addOverlay(infobox);
                        infobox.initialize(coordinate);
                }
        }
});

Prev  Up  Next
  Home