var apikey = "584b2fa686f14ba283874318b3b8d6b0";
var url = "https://api.hkmapservice.gov.hk/ags/gc/composite";
var hk80 = "+proj=tmerc +lat_0=22.31213333333334 +lon_0=114.1785555555556 +k=1 +x_0=836694.05 +y_0=819069.8 +ellps=intl +towgs84=-162.619,-276.959,-161.764,0.06774,-2.243665,-1.158834,-1.09425 +units=m +no_defs";
proj4.defs("EPSG:2326", hk80);
var vectorSource = new ol.source.Vector({});
var attributions = new ol.Attribution({
html: "<a href='https://api.portal.hkmapservice.gov.hk/disclaimer' target='_blank'>© Map from Lands Department</a><div style='width:25px;height:25px;display:inline-flex;background:url(https://api.hkmapservice.gov.hk/mapapi/landsdlogo.jpg);background-size:25px;margin-left:4px'></div>"
});
var selectGeocode = document.getElementById("SelectGeocode")
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
var curpos = undefined;
var overlay = new ol.Overlay(({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
}));
closer.onclick = function() {
overlay.setPosition(undefined);
closer.blur();
return false;
};
$(document).ready(function() {
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: attributions,
projection: "EPSG:3857",
url: "https://api.hkmapservice.gov.hk/osm/xyz/basemap/WGS84/tile/{z}/{x}/{y}.png?key=" + apikey
})
}),
new ol.layer.Tile({
source: new ol.source.XYZ({
projection: "EPSG:3857",
url: "https://api.hkmapservice.gov.hk/osm/xyz/label-tc/WGS84/tile/{z}/{x}/{y}.png?key=" + apikey
})
}),
new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
opacity: 1,
src: 'https://mapapis01.blob.core.windows.net/images/location.png'
})
})
}),
],
overlays: [overlay],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
interactions: ol.interaction.defaults().extend([
new ol.interaction.DragRotateAndZoom()
]),
view: new ol.View({
center: ol.proj.fromLonLat([114.20847, 22.29227]),
zoom: 17,
minZoom: 10,
maxZoom: 19
})
});
map.on('singleclick', function(evt) {
overlay.setPosition(curpos);
});
SelectGeocode.addEventListener("change", function(evt) {
if (SelectGeocode.selectedIndex != undefined) {
url = SelectGeocode[SelectGeocode.selectedIndex].value;
} else {
url = SelectGeocode.selectedOptions[0].value;
}
});
$("#suggest").autocomplete({
delay: 100,
source: function(request, response) {
// Suggest URL
var suggestURL = url + "/suggest?f=json"
suggestURL += "&maxSuggestions=10"
suggestURL += "&text=" + encodeURI(request.term.trim())
suggestURL += "&key=" + apikey;
// JSONP Request
$.ajax({
method: 'GET',
dataType: 'jsonp',
jsonpCallback: 'jsonCallback',
url: suggestURL
})
.success(function(data) {
var conent = [];
for (var i = 0; i < data.suggestions.length; i++) {
var obj = {
label: data.suggestions[i].text,
value: data.suggestions[i].text,
magicKey: data.suggestions[i].magicKey
};
conent[i] = obj
}
response(conent);
});
},
select: function(event, suggestion) {
var magicKey = suggestion.item.magicKey;
var FindAddressURL = "";
if (magicKey != "") {
var FindAddressURL = url + '/findAddressCandidates?f=json&outFields=*';
FindAddressURL += '&maxLocations=20';
FindAddressURL += '&outFields=*';
FindAddressURL += '&outSR=4326';
FindAddressURL += '&magicKey=';
FindAddressURL += magicKey + '&key=' + apikey;
$.ajax({
method: 'GET',
dataType: 'jsonp',
jsonpCallback: 'jsonCallback',
url: FindAddressURL
})
.success(function(data) {
var extent;
var location = [];
vectorSource.clear();
for (var intI = 0; intI < data.candidates.length; intI++) {
var lat = data.candidates[intI].location.y;
var lon = data.candidates[intI].location.x;
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857'))
})
location.push(iconFeature);
vectorSource.addFeature(iconFeature);
extent = iconFeature.getGeometry();
content.innerHTML = "Location:<br><hr>";
content.innerHTML += data.candidates[intI].attributes.Match_addr;
content.innerHTML += '<br><hr>' + data.candidates[intI].attributes.Descr
content.innerHTML += '<br><hr>' + ol.coordinate.toStringXY([lon, lat], 4);
var hk80pos = ol.proj.transform(extent.getCoordinates(), 'EPSG:3857', 'EPSG:2326');
content.innerHTML += '<br>' + ol.coordinate.toStringXY(hk80pos, 4);
}
curpos = extent.getCoordinates()
overlay.setPosition(extent.getCoordinates());
map.getView().fit(extent, map.getSize());
map.getView().setZoom(18);
});
}
}
});
});
body {
padding: 30px;
}
#suggest {
position: absolute;
top: 0px;
left: 20px;
padding: 2px;
width: 220px;
font-size: 14px;
}
.ui-menu {
font-size: 10px
}
#map {
top: 0px;
left: 0px;
width: 100%;
height: 100%;
position: absolute;
padding: 0px;
}
#searchPanel {
position: absolute;
top: 50px;
left: 50px;
width: 500px;
max-width: 600px;
z-index: 99999;
}
#SelectGeocode {
position: absolute;
top: 0px;
left: 0px;
padding: 2px;
width: 20px;
font-size: 14px;
}
#places-search {
position: absolute;
top: 0px;
left: 20px;
padding: 2px;
font-size: 14px;
}
.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: 5px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 250px;
}
.ol-popup:after,
.ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: "✖";
}
#popup-content {
font-size: 12px
}
.ol-attribution.ol-uncollapsible {
bottom: 13px;
}
.ol-attribution:not(.ol-collapsed) {
background: transparent;
}
<div id="map" class="map">
<div id="searchPanel">
<select id="SelectGeocode">
<option value="https://api.hkmapservice.gov.hk/ags/gc/composite">All</option>
<option value="https://api.hkmapservice.gov.hk/ags/gc/loc/address">Address</option>
<option value="https://api.hkmapservice.gov.hk/ags/gc/ib1000/buildings/building">Building</option>
<option value="https://api.hkmapservice.gov.hk/ags/gc/loc/geocomm">Geo Community</option>
<option value="https://api.hkmapservice.gov.hk/ags/gc/ib5000/poi/placepoint">Place Point</option>
<option value="https://api.hkmapservice.gov.hk/ags/gc/ib5000/poi/poipoint">POI</option>
<option value="https://api.hkmapservice.gov.hk/ags/gc/ib1000/buildings/site">Site</option>
<option value="https://api.hkmapservice.gov.hk/ags/gc/ib1000/buildings/subsite">SubSite</option>
<option value="https://api.hkmapservice.gov.hk/ags/gc/loc/streetintersection">Streets</option>
<option value="https://api.hkmapservice.gov.hk/ags/gc/ib1000/utilities/utilitypoint">Utility Point</option>
</select>
<input id="suggest" autofocus type="search" name="q" placeholder=" Places ..." style="width:100%;max-width:300px;outline:1">
</div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
</div>
External resources loaded into this fiddle: