In My Project I am using Nominatim openstreetmap for search text , lat and long it will work on local and test environment but in production sometimes its works sometimes not. Angular 6 is the project version
constant.ts
export class Constants {
static readonly DATE_FMT = "dd/MMM/yyyy";
static readonly DATE_TIME_FMT = `${Constants.DATE_FMT} hh:mm:ss`;
static readonly DOWNLOAD_TEMPLATE_BASE_LINK =
environment.baseTemplateDownloadUrl;
static readonly OSRM = "OSRM";
static readonly OSM_TILE =
"https://mydomain.in/osm/{z}/{x}/{y}.png"
static readonly OSM_CONTRIBUTORS=
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
static readonly OSM_NOMINATIM_Obj = {
url: "https://mydomain.in/nominatim/search?format=json&q={s}",
//url: "https://nominatim.openstreetmap.org/search?format=json&q={s}",
jsonpParam: "json_callback",
propertyName: "display_name",
propertyLoc: ["lat", "lon"],
marker: L.circleMarker([0, 0], {
radius: 25,
color: "#e93f33",
opacity: 0.8
}),
animate: true,
autoCollapse: true,
autoType: false,
minLength: 2
};
static readonly OSM_NOMINATIM_Obj1 = {
url: "https://nominatim.openstreetmap.org/search?format=json&q={s}",
jsonpParam: "json_callback",
propertyName: "display_name",
propertyLoc: ["lat", "lon"],
marker: L.circleMarker([0, 0], {
radius: 25,
color: "#e93f33",
opacity: 0.8
}),
animate: true,
autoCollapse: true,
autoType: false,
minLength: 2
};
static readonly OSM_ROUTING_URL = "https://mydomain.in/route/v1";
}
UsedComponent.ts
getCurrentUser() {
this._mCurrentUserData = this.serviceLocalStorage.getUserObject();
if (this._mCurrentUserData != null) {
this.initForm();
this.getLocation();
this.getRoles();
this.getProjects();
this.getBusinessUnits();
this.getCategory();
if (this.mapType === Constants.OSRM) {
this.map = new L.map("user-map", {
fullscreenControl: true
}).setView([15.0146, 70.5978], 10);
L.tileLayer(Constants.OSM_TILE, { attribution: Constants.OSM_CONTRIBUTORS }).addTo(this.map);
this.map.addControl(
new L.Control.Search(Constants.OSM_NOMINATIM_Obj1)
);
this.loadOSMap();
this.loadHomePointOnOSMap();
} else {
setTimeout(() => {
this.loadmap();
if (this.mIsEdit && this._mUserData != null) {
if (this._mUserData.userInfoDetails.homePoint != null) {
let homeLocation = new google.maps.LatLng(
this._mUserData.userInfoDetails.homePoint.latitude,
this._mUserData.userInfoDetails.homePoint.longitude
);
this.setMarker(homeLocation);
}
}
}, 10);
}
}
}
onMouseOverOnMap() {
if (!(this.mapType === Constants.OSRM)) {
document.getElementById("pac-input").style.display = "block";
}
}
component.html
<mat-card class="example-map-card">
<input *ngIf="mapType!='OSRM'" id="pac-input" class="controls map-search" type="text"
placeholder="Search your place here">
<div id="user-map" (mouseover)='onMouseOverOnMap()'></div>
</mat-card>
It is server issue or my code create this type of issue if code will create issue then local and test environment also we got same issue, but I am not getting any issue on local and test environment . problem came on production. How to fixed this problem. please help me for this.