Search Box in Openlayers

Untuk menambahkan search box pada map dengan tambahkan .css dan .js dari ol dan ol-geocoder. Sebagai contoh dapat di lihat di project PGE.AIMS di form Fixed Asset.
Berikut adalah contoh implementasi code search box openlayers :

<div id="map" class="map-form"></div>
 <script type="text/javascript">
        $(function () {
            //init long lat center
            var lat = 117.0148634;
            var long = - 2.148926;

            // init map
            var olview = new ol.View({ center: [lat, long], zoom: 5 }),
                baseLayer = new ol.layer.Tile({ source: new ol.source.OSM() }),
                map = new ol.Map({
                    target: document.getElementById('map'),
                    view: olview,
                    layers: [baseLayer]
                });

            //init search box
            var geocoder = new Geocoder('nominatim', {
                provider: 'osm',
                lang: 'en',
                placeholder: 'Search for ...',
                limit: 5,
                debug: true,
                autoComplete: true,
                keepOpen: true
            });
            map.addControl(geocoder);
            $(".gcd-gl-control").addClass("gcd-gl-expanded");

            //function after chose address
            geocoder.on('addresschosen', function (evt) {
                //get long lat
                var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');

                // get address
                var address = evt.address.details['name'];
            });
        });
        
    </script>