Geocoding

To geocode an address and to display it on the map, follow the below steps:

  • Create a geocoding webservice request and pass the address field to get back a geocoded JSON file 
const url = 'https://api.geoconcept.com/EU/GCW/geoconcept-web/api/lbs/geocode/v2.json?addressLine=' + document.getElementById("address").value + '&postCode=' + document.getElementById("postcode").value + '&city=' + document.getElementById("city").value + '&countryCode=' + document.getElementById("country").value + '&maxResponses=5&srs=epsg:3857&appkey=' + apikey + '&apptoken=' + apptoken;
  • 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([parsedjson.geocodedAddresses[0].x,parsedjson.geocodedAddresses[0].y]);
  • 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);

HTML  

<div style="position: absolute; z-index: 5000; left: 65px;">
        <input type="text" id="address" placeholder="Address" value="152-160 avenue Aristide Briand">
        <input type="text" id="city" placeholder="City" value="BAGNEUX">
        <input type="text" id ="postcode" placeholder="Postcode" value="92220">
        <input type="text" id ="country" placeholder="Country" value="FR">
        <button type="button" onclick="GCUI.examples.getGeocode()">Geocode</button>
</div>
<div id="map1" 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('map1', options);
GCUI.examples = {
getGeocode      : function () {
                        const request = new XMLHttpRequest();
                        const url = 'https://api.geoconcept.com/EU/GCW/geoconcept-web/api/lbs/geocode/v2.json?addressLine=' + document.getElementById("address").value + '&postCode=' + document.getElementById("postcode").value + '&city=' + document.getElementById("city").value + '&countryCode=' + document.getElementById("country").value + '&maxResponses=5&srs=epsg:3857&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;
                                parsedjson = JSON.parse(request.responseText);
// Adding a vector layer to the map
                                if (parsedjson.geocodedAddresses.length >= 1) {
                                if (map.getLayers().array_.length > 1){
                                vector_layer.getSource().removeFeature(point_feature);
                                }
                                var point_geom = new ol.geom.Point([parsedjson.geocodedAddresses[0].x,parsedjson.geocodedAddresses[0].y]);
                                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);
                                extent = point_feature.getGeometry().getExtent();
                                if (parsedjson.geocodedAddresses[0].geocodeType > 1)
                                {
                                map.getView().fit(extent);
                                map.getView().setZoom(18);
                                }
                                else
                                {
                                map.getView().fit(extent);
                                map.getView().setZoom(12);
                        }
                                }
                        }
                }
        }
}

Prev  Up  Next
  Home