Openlayers Address Geocode

by LandsD Map API

HTML

<script src="https://landsvm.cbpmshk.info/openlayers/build/ol.js"></script>
<link rel="stylesheet" href="https://landsvm.cbpmshk.info/openlayers/css/ol.css">
<script src="https://landsvm.cbpmshk.info/openlayers/build/ol.js"></script>
<div id="mapContainer">
  <div id="map">
  </div>
  <div class="box">
    <div class="search-container">
      <form id="searchForm">
        <input type="search" id="search" placeholder="Search..." />
      </form>
      <button class="icon search"><i class="fa fa-search"></i></button>
    </div>
  </div>
</div>

CSS

<link rel="stylesheet" href="https://landsvm.cbpmshk.info/openlayers/css/ol.css" type="text/css">
/* SEARCH BOX */

#mapContainer {
  width: 100%;
  height: 400px;
}

#map {
  width: 100%;
  height: 100%;
  border: 1px solid #999;
}

.box {
  position: absolute;
  top: 15px;
  right: 50px;
  z-index: 1000;
}

.ol-touch .box {
  top: 1.5em;
  right: 70px;
}

.search-container {
  overflow: hidden;
  width: 250px;
  vertical-align: middle;
  white-space: nowrap;
}

.ol-touch .search-container {
  width: 200px;
}

.search-container input#search {
  width: 250px;
  height: 30px;
  background: rgba(255, 255, 255, 0.75);
  border: none;
  font-size: 12pt;
  float: left;
  color: #1e6aa8;
  padding-left: 15px;
  padding-right: 60px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.ol-touch .search-container input#search {
  width: 200px;
}

.search-container input#search::-webkit-input-placeholder {
  color: #1e6aa8;
}

.search-container input#search:-moz-placeholder {
  /* Firefox 18- */
  color: #1e6aa8;
}

.search-container input#search::-moz-placeholder {
  /* Firefox 19+ */
  color: #1e6aa8;
}

.search-container input#search:-ms-input-placeholder {
  color: #1e6aa8;
}

.search-container button.icon {
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border: none;
  background: #1e6aa8;
  height: 30px;
  width: 50px;
  color: #4f5b66;
  opacity: 0;
  font-size: 12pt;
  -webkit-transition: all .1s ease;
  -moz-transition: all .1s ease;
  -ms-transition: all .1s ease;
  -o-transition: all .1s ease;
  transition: all .1s ease;
}

.search-container:hover button.icon,
.search-container:active button.icon,
.search-container:focus button.icon {
  outline: none;
  opacity: 1;
  margin-left: -50px;
  color: #fff;
}

.search-container:hover button.icon:hover {
 ...

JavaScript

var map = new ol.Map({
       target: 'map',
       layers: [
         new ol.layer.Tile({
           source: new ol.source.XYZ({
             //attributions: [attribution],
             url: 'https://landsapi.azure-api.net/HKMapServiceBase' +
               '/{z}/{y}/{x}.png?Key=e68810d810e144358961d2295b515f60'
           })
         })
       ],
       view: new ol.View({
         center: ol.proj.fromLonLat([114.20847, 22.29227]),
         zoom: 16,
         minZoom: 10,
         maxZoom: 20
       })
     });

     document.querySelector('button.search').addEventListener('click', function(e) {
       geocodeSearch(document.querySelector('#search').value);
     });

     /*  geocodeSearch() requires:
      * jQuery -> rewrite AJaX request using your own method
      * map
      */
     function geocodeSearch(searchStr) {
       //var bbox = ol.proj.transform($.OLMAP.view.calculateExtent($.OLMAP.map.getSize()),
       //                             'EPSG:3857', 'EPSG:4326').toString(),
       //var bbox = map.getExtent().toBBOX();
       //var center = map.getCenter().transform(
       //                map.getProjectionObject(), //4326
       //                new OpenLayers.Projection("EPSG:3857")
       //            );
       //    var distance = map.getExtent().transform(
       //                   map.getProjectionObject(), new //OpenLayers.Projection("EPSG:3857")
       //                ).getWidth();
       var url = 'https://landsvm.cbpmshk.info/arcgis/rest/services/MapAPI/ADDRESSGEOCODE/GeocodeServer/findAddressCandidates' +
         '?SingleLine=' + searchStr +
         '&f=json' +
         //'&location=' + center +
         //'&distance=' + distance + // '3218.69' = 2 meters
         //'&outSR=102100'+ // web mercator
         //'&searchExtent='+bbox+
         '&outSR=3857' +
         '&outFields=*' +
         '&maxLocations=1';
       var parser = new ol.format.GeoJSON();
       var req = window.superagent;
       var xhr = new XMLHttpRequest();
 ...