Layer

Add a vector layer

To add a vector layer and to display it on the map, follow the below steps:

  • Create a new instance of ol.Feature class 
var point_feature = new ol.Feature({});
  • Create a new instance of ol.geom.Point class and push the X and Y 
var point_geom = new ol.geom.Point([260803,6250829]);
  • Set the geometry of the ol feature as the ol.geom.Point class 
point_feature.setGeometry(point_geom);
  • Create a new instance of GCUI.Layer.StandardVector class and map the source of the vector to the ol feature 
var vector_layer = new GCUI.Layer.StandardVector({
                   source: new ol.source.Vector({
                   features: [point_feature]
             })
        });
  • Add the layer to the existing map using map.addLayer method and push the vector layer created 
map.addLayer(vector_layer);
  • Define the style of the point using ol.style.Fill and ol.style.Stroke classes 
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
       });
  • Create a new instance of the ol.style.Style class and set the style of the layer using vector_layer.setStyle() 
var style = new ol.style.Style({
               image: new ol.style.Circle({
               fill: fill,
               stroke: stroke,
               radius: 5
         }),
               fill: fill,
               stroke: stroke
         });
vector_layer.setStyle(style);
  • Zoom to the added vector layer using map.zoomToExtent() method 
map.zoomToExtent(point_feature.getGeometry().getExtent());

HTML  

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

JavaScript  

var options = {
    server : 'https://api.geoconcept.com/EU/GCW/geoconcept-web/wmts',
    layer : 'STANDARD'
};
var map = new GCUI.Map('map', options);
map.onEvent("load", onMapLoaded);
function onMapLoaded() {
                        var point_geom = new ol.geom.Point([260803,6250829]);
                                point_feature = new ol.Feature({});
                                point_feature.setGeometry(point_geom);
                                vector_layer = new GCUI.Layer.StandardVector({
                                source: new ol.source.Vector({
                                        features: [point_feature]
                                                })
                                        });
                                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: 5
                                }),
                                fill: fill,
                                stroke: stroke
                                });
                                vector_layer.setStyle(style);
                                map.zoomToExtent(point_feature.getGeometry().getExtent());
                                map.getView().setZoom(8);
}

Add a vector layer with custom icon

To add a vector layer and to display it on the map, follow the below steps:

  • Create a new instance of ol.Feature class 
var point_feature = new ol.Feature({});
  • Create a new instance of ol.geom.Point class and push the X and Y 
var point_geom = new ol.geom.Point([258353.06,6240408.91]);
  • Set the geometry of the ol feature as the ol.geom.Point 
point_feature.setGeometry(point_geom);
  • Create a new instance of GCUI.Layer.StandardVector class and map the source of the vector to the ol feature 
var vector_layer = new GCUI.Layer.StandardVector({
                   source: new ol.source.Vector({
                   features: [point_feature]
             })
        });
  • Add the layer to the existing map using map.addLayer method and push the vector layer created 
map.addLayer(vector_layer);
  • Define the style of the point using ol.style.Fill and ol.style.Stroke classes 
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
       });
  • Create a new instance of the ol.style.Style class and set the source of the ol.style.Icon an image URL and set the style using vector_layer.setStyle() 
        var point_style = new ol.style.Style({
                                        image: new ol.style.Icon({
                                        crossOrigin: 'anonymous',
                                        src: 'https://i.ibb.co/SBRmrF5/show-Image.png'
                                        })
                                });
                                vector_layer.setStyle(point_style);
  • Zoom to the added vector layer using map.zoomToExtent() method 
map.zoomToExtent(point_feature.getGeometry().getExtent());

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="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 vectorSource = new ol.source.Vector({});
                                var point_feature_1 = new ol.Feature({
                                geometry: new ol.geom.Point([258353.06,6240408.91]),
                                Name: "Groupe Geoconcept",
                                Address: "152 Avenue Aristide Briand, 92220 Bagneux, France"
                                });
                        vectorSource.addFeature(point_feature_1);
                        vector_layer = GCUI.Layer.StandardVector({
                                source: vectorSource
                                        });
                                map.addLayer(vector_layer);
//Set the source of the point style to a custom image
                                var point_style = new ol.style.Style({
                                        image: new ol.style.Icon({
                                        crossOrigin: 'anonymous',
                                        src: 'https://i.ibb.co/SBRmrF5/show-Image.png'
                                        })
                                });
                                vector_layer.setStyle(point_style);
                                extent = vectorSource.getExtent();
                                map.getView().fit(extent);
                                map.getView().setZoom(12);
                                //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'>Name</div></td><td><div class='content'>" + feature[0].values_.Name + "</div></td></tr><tr><td class='right aligned'><div class='content'>Address</div></td><td><div class='content'>" + feature[0].values_.Address + "</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);
                                          }
                                        });
          }
}

Embed a video or an image

To embed a video or an image to the vector layer, follow the below steps:

  • Follow all the steps mentioned in the above section (Add a vector layer with custom icon)
  • Define the popup with video URL and image URL as below 
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'>Name</div></td><td><div class='content'>" + feature[0].values_.Name + "</div></td></tr><tr><td class='right aligned'><div class='content'>Address</div></td><td><div class='content'>" + feature[0].values_.Address + "</div></td></tr><tr><td class='right aligned'><div class='content'>Company logo</div></td><td><div class='content'><img src='https://en.geoconcept.com/sites/all/themes/geoevo/assets/images/logo.png' alt='Italian Trulli'></div></td></tr><tr><td class='right aligned'><div class='content'>Corporate Video</div></td><td><div class='content'><iframe width='300' height='200' src='https://www.youtube.com/embed/zYZHuYipOjM'></iframe></div></td></tr></tbody></table></div>";

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

JavaScript  

var options = {
    server : 'https://api.geoconcept.com/EU/GCW/geoconcept-web/wmts',
    layer : 'STANDARD'
};
var map = new GCUI.Map('map2', 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([258353.06,6240408.91]),
                                Name: "Groupe Geoconcept",
                                Address: "152 Avenue Aristide Briand, 92220 Bagneux, France"
                                });
                        vectorSource.addFeature(point_feature_1);
                        vector_layer = new GCUI.Layer.StandardVector({
                                source: vectorSource
                                        });
                                map.addLayer(vector_layer);
//Set the source of the point style to a custom image
                                var point_style = new ol.style.Style({
                                        image: new ol.style.Icon({
                                        crossOrigin: 'anonymous',
                                        src: 'https://i.ibb.co/SBRmrF5/show-Image.png'
                                        })
                                });
                                vector_layer.setStyle(point_style);
                                extent = vectorSource.getExtent();
                                map.getView().fit(extent);
                                map.getView().setZoom(12);
                                //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'>Name</div></td><td><div class='content'>" + feature[0].values_.Name + "</div></td></tr><tr><td class='right aligned'><div class='content'>Address</div></td><td><div class='content'>" + feature[0].values_.Address + "</div></td></tr><tr><td class='right aligned'><div class='content'>Company logo</div></td><td><div class='content'><img src='https://en.geoconcept.com/sites/all/themes/geoevo/assets/images/logo.png' alt='Italian Trulli'></div></td></tr><tr><td class='right aligned'><div class='content'>Corporate Video</div></td><td><div class='content'><iframe width='300' height='200' src='https://www.youtube.com/embed/zYZHuYipOjM'></iframe></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);
                                          }
                                        });
          }
}

Add an external popover

To add an external popover to the map, follow the below steps:

  • Create a new instance of ol.Overlay and push the position and HTML element to it and add the overlay object to the existing map. 
 var pos = ol.proj.fromLonLat([2.320825, 48.7965412]);
                                                          var geoconcept = new ol.Overlay({
                                                          position: pos,
                                                          element: document.getElementById('geoconcept')
                                                          });
                                                          map.addOverlay(geoconcept);

HTML  

<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css" />
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
#geoconcept {
                 font-family: "Open Sans";
        background-color:white;
        color: #104685;
        font-size: 12pt;
        font-weight: bold;
      }
.popover-content {
        min-width: 180px;
      }
</style>
<div id="map3" style="height:300px"></div>
<div style="display: none;" >
      <!-- Clickable label for Geoconcept -->
      <a class="overlay" id="geoconcept" target="_blank" href="https://en.geoconcept.com/">Groupe Geoconcept</a>
    </div>

JavaScript  

var options = {
    server : 'https://api.geoconcept.com/EU/GCW/geoconcept-web/wmts',
    layer : 'STANDARD'
};
var map = new GCUI.Map('map3', options);
map.onEvent("load", onMapLoaded);
function onMapLoaded() {
                                var vectorSource = new ol.source.Vector({});
                                var point_feature_1 = new ol.Feature({
//Create a new point by pushing the X & Y
                                geometry: new ol.geom.Point([258353.06,6240408.91]),
                                Name: "Groupe Geoconcept",
                                Address: "152 Avenue Aristide Briand, 92220 Bagneux, France"
                                });
                                vectorSource.addFeature(point_feature_1);
                                vector_layer = new GCUI.Layer.StandardVector({
                                source: vectorSource
                                });
                                map.addLayer(vector_layer);
//Set the source of the point style to a custom image
                                var point_style = new ol.style.Style({
                                        image: new ol.style.Icon({
                                        crossOrigin: 'anonymous',
                                        src: 'https://i.ibb.co/SBRmrF5/show-Image.png'
                                        })
                                });
                                vector_layer.setStyle(point_style);
                                extent = vectorSource.getExtent();
                                map.getView().fit(extent);
                                map.getView().setZoom(12);
//Add a label overlay (with hyperlink) on the map
                                var pos = ol.proj.fromLonLat([2.320825, 48.7965412]);
                                var geoconcept = new ol.Overlay({
                                position: pos,
                                element: document.getElementById('geoconcept')
                                });
                                map.addOverlay(geoconcept);
}

HERE maps tiles API

To add a HERE maps tile to the existing Geoconcept map, follow the below steps:

  • Generate the HERE maps tile URL and append it with HERE maps appId and appCode
  • Create a new instance of ol.layer.Tile and push the HERE maps tile URL, required tile scheme (normal, transit, satellite, pedestrian, terrain or hybrid) and its attributions and add the layer to the existing map. 
var urlTpl = 'https://{1-4}.{base}.maps.cit.api.here.com' +
        '/{type}/2.1/maptile/newest/{scheme}/{z}/{x}/{y}/256/png' +
        '?app_id={app_id}&app_code={app_code}';
var layers = [];
var layerDesc = hereLayers[0];
      layers.push(new ol.layer.Tile({
                  name: 'HERE-NORMAL',
          visible: false,
          preload: Infinity,
          source: new ol.source.XYZ({
            url: createUrl(urlTpl, layerDesc),
            attributions: 'Map Tiles &copy; ' + new Date().getFullYear() + ' ' +
              '<a href="http://developer.here.com">HERE</a>'
          })
        }));
map.addLayer(layers[0]);

HTML  

 <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
<style>
.checkbox {
margin-left: 25px;
margin-top: 0px;
}
.checkbox, .radio {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: -20px;
}
.layerSwitcher .item.layer:hover {
background-color: #000000;
}
.layerSwitcher .layer > .label,
.layerSwitcher .group > .label {
    display: inline-block;
    margin-right: 0em;
}
.layman {
  position: absolute;
  width: 15%;
  background:rgba(0,0,0,0.5);
  z-index: 50;
}
</style>
<div>
<div id="layers" class="layman" ></div>
<div id="map4" style="height:300px;"></div>
</div>

JavaScript  

var options = {
    server : 'https://api.geoconcept.com/EU/GCW/geoconcept-web/wmts',
    layer : 'STANDARD',
    x : 260803,
    y : 6250829,
    scale : 1
};
var map = new GCUI.Map('map4', options);
if(document.getElementById('layers').innerHTML == "") {
var layerSwitcher  = new GCUI.Control.LayerSwitcher({
        target: document.getElementById('layers'),
        noOptions: true,
        noDrag: true,
        noMenu: true
});
map.addControl(layerSwitcher);
  var appId = 'kDm0Jq1K4Ak7Bwtn8uvk';
  var appCode = 'xnmvc4dKZrDfGlvQHXSvwQ';
  var hereLayers = [
    {
      base: 'base',
      type: 'maptile',
      scheme: 'normal.day',
      app_id: appId,
      app_code: appCode
    },
    {
      base: 'base',
      type: 'maptile',
      scheme: 'normal.day.transit',
      app_id: appId,
      app_code: appCode
    },
    {
      base: 'base',
      type: 'maptile',
      scheme: 'pedestrian.day',
      app_id: appId,
      app_code: appCode
    },
    {
      base: 'aerial',
      type: 'maptile',
      scheme: 'terrain.day',
      app_id: appId,
      app_code: appCode
    },
    {
      base: 'aerial',
      type: 'maptile',
      scheme: 'satellite.day',
      app_id: appId,
      app_code: appCode
    },
    {
      base: 'aerial',
      type: 'maptile',
      scheme: 'hybrid.day',
      app_id: appId,
      app_code: appCode
    }
  ];
  var urlTpl = 'https://{1-4}.{base}.maps.cit.api.here.com' +
    '/{type}/2.1/maptile/newest/{scheme}/{z}/{x}/{y}/256/png' +
    '?app_id={app_id}&app_code={app_code}';
  var layers = [];
  var layerDesc = hereLayers[0];
  layers.push(new ol.layer.Tile({
          name: 'HERE-NORMAL',
      visible: false,
      preload: Infinity,
      source: new ol.source.XYZ({
        url: createUrl(urlTpl, layerDesc),
        attributions: 'Map Tiles &copy; ' + new Date().getFullYear() + ' ' +
          '<a href="http://developer.here.com">HERE</a>'
      })
    }));
  map.addLayer(layers[0]);
  var layerDesc = hereLayers[1];
  layers.push(new ol.layer.Tile({
          name: 'HERE-TRANSIT',
      visible: false,
      preload: Infinity,
      source: new ol.source.XYZ({
        url: createUrl(urlTpl, layerDesc),
        attributions: 'Map Tiles &copy; ' + new Date().getFullYear() + ' ' +
          '<a href="http://developer.here.com">HERE</a>'
      })
    }));
  map.addLayer(layers[1]);
  var layerDesc = hereLayers[2];
  layers.push(new ol.layer.Tile({
          name: 'HERE-PEDASTRIAN',
      visible: false,
      preload: Infinity,
      source: new ol.source.XYZ({
        url: createUrl(urlTpl, layerDesc),
        attributions: 'Map Tiles &copy; ' + new Date().getFullYear() + ' ' +
          '<a href="http://developer.here.com">HERE</a>'
      })
    }));
  map.addLayer(layers[2]);
  var layerDesc = hereLayers[3];
  layers.push(new ol.layer.Tile({
          name: 'HERE-TERRAIN',
      visible: false,
      preload: Infinity,
      source: new ol.source.XYZ({
        url: createUrl(urlTpl, layerDesc),
        attributions: 'Map Tiles &copy; ' + new Date().getFullYear() + ' ' +
          '<a href="http://developer.here.com">HERE</a>'
      })
    }));
  map.addLayer(layers[3]);
  var layerDesc = hereLayers[4];
  layers.push(new ol.layer.Tile({
          name: 'HERE-SATELLITE',
      visible: false,
      preload: Infinity,
      source: new ol.source.XYZ({
        url: createUrl(urlTpl, layerDesc),
        attributions: 'Map Tiles &copy; ' + new Date().getFullYear() + ' ' +
          '<a href="http://developer.here.com">HERE</a>'
      })
    }));
  map.addLayer(layers[4]);
  var layerDesc = hereLayers[5];
  layers.push(new ol.layer.Tile({
          name: 'HERE-HYBRID',
      visible: false,
      preload: Infinity,
      source: new ol.source.XYZ({
        url: createUrl(urlTpl, layerDesc),
        attributions: 'Map Tiles &copy; ' + new Date().getFullYear() + ' ' +
          '<a href="http://developer.here.com">HERE</a>'
      })
    }));
  map.addLayer(layers[5]);
}
else{
map.refresh();
}
      function createUrl(tpl, layerDesc) {
        return tpl
          .replace('{base}', layerDesc.base)
          .replace('{type}', layerDesc.type)
          .replace('{scheme}', layerDesc.scheme)
          .replace('{app_id}', layerDesc.app_id)
          .replace('{app_code}', layerDesc.app_code);
      }

Add a GeoJSON

To add a GeoJSON file to the existing Geoconcept map, follow the below steps:

  • Define the look and feel of the GeoJSON object for different types of features like point, line and polygon 
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 image = new ol.style.Circle({
        radius: 5,
        fill: fill,
        stroke: stroke
      });

 var styles = {
    'Point': new ol.style.Style({
      image: image
    }),
    'LineString': new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'red',
        width: 1
      })
    })
  };
  • Define the GeoJSON object with different geographical types 
var geojsonObject = {
        'type': 'FeatureCollection',
        'crs': {
          'type': 'name',
          'properties': {
            'name': 'EPSG:3857'
          }
        },
        'features': [{
          'type': 'Feature',
          'geometry': {
            'type': 'Point',
            'coordinates': [260803, 6250829]
          }
        }, {
          'type': 'Feature',
          'geometry': {
            'type': 'Point',
            'coordinates': [8937009.2400000002, 1469287.27]
          }
        },
                {
          'type': 'Feature',
          'geometry': {
            'type': 'Point',
            'coordinates': [13522429.61, 3664134.81]
          }
        },
                {
          'type': 'Feature',
          'geometry': {
            'type': 'Point',
            'coordinates': [-8927129.20, 2969626.93]
          }
        },
                {
          'type': 'Feature',
          'geometry': {
            'type': 'LineString',
            'coordinates': [[-8927129.20, 2969626.93], [260803, 6250829], [8937009.2400000002, 1469287.27], [13522429.61, 3664134.81]]
          }
        }]
};
  • Create a vector source and set the features of the vector source to the GeoJSON object created 
var vectorSource = new ol.source.Vector({
    features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
  });
  • Create a vector layer and set the source of the layer to the vector source created and add it to the existing Geoconcept map 
var vectorLayer = new GCUI.Layer.StandardVector({
    source: vectorSource,
    style: styleFunction
  });
  map.addLayer(vectorLayer);

HTML  

<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
<div id="map5" style="height:300px;"></div>

JavaScript  

var options = {
    server : 'https://api.geoconcept.com/EU/GCW/geoconcept-web/wmts',
    layer : 'STANDARD',
    x : 260803,
    y : 6250829
};
var map = new GCUI.Map('map5', options);
map.onEvent("load", onMapLoaded);
function onMapLoaded() {
var map = GCUI.getMap('map5');
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 image = new ol.style.Circle({
        radius: 5,
        fill: fill,
        stroke: stroke
      });

      var styles = {
        'Point': new ol.style.Style({
          image: image
        }),
        'LineString': new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: 'red',
            width: 1
          })
        })
      };

      var styleFunction = function(feature) {
        return styles[feature.getGeometry().getType()];
      };

var geojsonObject = {
        'type': 'FeatureCollection',
        'crs': {
          'type': 'name',
          'properties': {
            'name': 'EPSG:3857'
          }
        },
        'features': [{
          'type': 'Feature',
          'geometry': {
            'type': 'Point',
            'coordinates': [260803, 6250829]
          }
        }, {
          'type': 'Feature',
          'geometry': {
            'type': 'Point',
            'coordinates': [8937009.2400000002, 1469287.27]
          }
        },
                {
          'type': 'Feature',
          'geometry': {
            'type': 'Point',
            'coordinates': [13522429.61, 3664134.81]
          }
        },
                {
          'type': 'Feature',
          'geometry': {
            'type': 'Point',
            'coordinates': [-8927129.20, 2969626.93]
          }
        },
                {
          'type': 'Feature',
          'geometry': {
            'type': 'LineString',
            'coordinates': [[-8927129.20, 2969626.93], [260803, 6250829], [8937009.2400000002, 1469287.27], [13522429.61, 3664134.81]]
          }
        }]
      };
var vectorSource = new ol.source.Vector({
    features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
  });

var vectorLayer = new GCUI.Layer.StandardVector({
    source: vectorSource,
    style: styleFunction
  });
map.addLayer(vectorLayer);
map.zoomToExtent(vectorSource.getExtent());
}

Add a Heatmap layer

To add a Heatmap layer to the existing Geoconcept map, follow the below steps:

  • Create a new instance of ol.layer.Heatmap and push the GIS data as its vector source and set the blur and the radius parameters according to your requirement. 
var vector = new ol.layer.Heatmap({
  source: new ol.source.Vector({
        url: 'https://raw.githubusercontent.com/openlayers/openlayers/master/examples/data/kml/2012_Earthquakes_Mag5.kml',
        format: new ol.format.KML({
          extractStyles: false
        })
  }),
  blur: parseInt(15, 10),
  radius: parseInt(7, 10)
});
  • Add the Heatmap vector layer to the existing Geoconcept map 
vector.getSource().on('addfeature', function(event) {
  var name = event.feature.get('name');
  var magnitude = parseFloat(name.substr(2));
  event.feature.set('weight', magnitude - 5);
});
map.addLayer(vector);

HTML  

<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
<div id="map6" style="height:300px;"></div>

JavaScript  

var options = {
    server : 'https://api.geoconcept.com/EU/GCW/geoconcept-web/wmts',
    layer : 'STANDARD',
    x : 260803,
    y : 6250829,
    scale : 10
};
var map = new GCUI.Map('map6', options);
map.onEvent("load", onMapLoaded);
function onMapLoaded() {
var vector = new ol.layer.Heatmap({
  source: new ol.source.Vector({
        url: 'https://raw.githubusercontent.com/openlayers/openlayers/master/examples/data/kml/2012_Earthquakes_Mag5.kml',
        format: new ol.format.KML({
          extractStyles: false
        })
  }),
  blur: parseInt(15, 10),
  radius: parseInt(7, 10)
});

vector.getSource().on('addfeature', function(event) {
  // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
  // standards-violating <magnitude> tag in each Placemark.  We extract it from
  // the Placemark's name instead.
  var name = event.feature.get('name');
  var magnitude = parseFloat(name.substr(2));
  event.feature.set('weight', magnitude - 5);
});
map.addLayer(vector);
}

Prev  Up  Next
  Home