How to display Bing map dynamically in an ASP.NET website based on the address provided. I do not have latitude and longitude for the address so I have to pass address directly and display the map.
In the ASP.Net mark up page, I have a hidden field which contains address. Based on this address, bing map gets loaded using the script mentioned below. A pushpin is placed on the address for easy identification of the address.
var map = null;
var pinid = 0;
function GetMap() {
map = new VEMap('theMap');
map.LoadMap();
map.SetZoomLevel(10);
FindLoc();
}
function FindLoc() {
try {
map.Find("<b>Property Address:</b>",
document.getElementById('ctl00_head_HiddenField1').value,
null,
null,
1,
1,
true,
true,
true,
true,
ProcessResults);
}
catch (e) {
alert(e.message);
}
}
function ProcessResults(layer, results, places, hasmore)
{
CreatePin("Default", places[0].LatLong);
}
function CreatePin(type, point)
{
if (point != 'Unavailable')
{
var pin = new VEShape(VEShapeType.Pushpin, point);
pin.SetTitle('<b>Property Address:</b>');
pin.SetDescription(document.getElementById('ctl00_head_HiddenField1').value);
map.AddShape(pin);
}
}
Related
I am just trying out the SDK Lite API and I am wondering how I can achieve to drag a MapMarker object from one place to another. I suggest, it works somehow with disabling the default onPan gesture, but actually the problem starts with picking an existing object.
Here is my code so far:
public void pickMarker(Point2D p) {
map.getGestures().disableDefaultAction(GestureType.PAN);
map.pickMapItems(p, 20f, pickMapItemsResult -> {
if (pickMapItemsResult != null) {
pickedMarker = pickMapItemsResult.getTopmostMarker();
} else {
map.getGestures().enableDefaultAction(GestureType.PAN);
}
});
}
public void dragMarker(Point2D p) {
if (pickedMarker != null) {
pickedMarker.setCoordinates(map.getCamera().viewToGeoCoordinates(p));
}
}
public boolean releaseMarker(Point2D p) {
map.getGestures().enableDefaultAction(GestureType.PAN);
if (pickedMarker != null) {
GeoCoordinates newCoordinates = map.getCamera().viewToGeoCoordinates(p);
pickedMarker.setCoordinates(newCoordinates);
pickedMarker = null;
return true;
}
return false;
}
while these functions are called on the three states of the onPanListener:
mapView.getGestures().setPanListener((gestureState, point2D, point2DUpdate, v) -> {
if (gestureState.equals(GestureState.BEGIN)) {
mapViewUIEngine.pickMarker(point2D);
}
if (gestureState.equals(GestureState.UPDATE)) {
mapViewUIEngine.dragMarker(point2DUpdate);
}
if (gestureState.equals(GestureState.END)) {
if (mapViewUIEngine.releaseMarker(point2DUpdate)) {
regionController.movePoint(0,
updateNewLocation(point2D, point2DUpdate);
}
}
});
From one of the developer in Github I now know, that the polygon is returned instead of the marker (which is lying on a polygon line, but how can I get the marker instead?
You can use map markers to precisely point to a location on the map.
The following method will add a custom map marker to the map:
MapImage mapImage = MapImageFactory.fromResource(context.getResources(), R.drawable.here_car);
MapMarker mapMarker = new MapMarker(geoCoordinates);
mapMarker.addImage(mapImage, new MapMarkerImageStyle());
mapView.getMapScene().addMapMarker(mapMarker);
For more details, please refer
https://developer.here.com/documentation/android-sdk/dev_guide/topics/map-items.html#add-map-markers
We are using geocoding service to get geocodeAddress (latitude/longitude) but we are getting the "The service method is not found" error. Below are my code.
public static double[] GeocodeAddress(string address, string virtualearthKey)
{
net.virtualearth.dev.GeocodeRequest geocodeRequest = new net.virtualearth.dev.GeocodeRequest
{
// Set the credentials using a valid Bing Maps key
Credentials = new net.virtualearth.dev.Credentials { ApplicationId = virtualearthKey },
// Set the full address query
Query = address
};
// Set the options to only return high confidence results
net.virtualearth.dev.ConfidenceFilter[] filters = new net.virtualearth.dev.ConfidenceFilter[1];
filters[0] = new net.virtualearth.dev.ConfidenceFilter
{
MinimumConfidence = net.virtualearth.dev.Confidence.High
};
// Add the filters to the options
net.virtualearth.dev.GeocodeOptions geocodeOptions = new net.virtualearth.dev.GeocodeOptions { Filters = filters };
geocodeRequest.Options = geocodeOptions;
// Make the geocode request
net.virtualearth.dev.GeocodeService geocodeService = new net.virtualearth.dev.GeocodeService();
net.virtualearth.dev.GeocodeResponse geocodeResponse = geocodeService.Geocode(geocodeRequest);
if (geocodeResponse.Results.Length > 0)
{
return new[] { geocodeResponse.Results[0].Locations[0].Latitude, geocodeResponse.Results[0].Locations[0].Longitude };
}
return new double[] { };
} // GeocodeAddress
Key is used for URL for bing map geocode service in we.config
<add key="net.virtualearth.dev.GeocodeService" value="http://dev.virtualearth.net/webservices/v1/geocodeservice/GeocodeService.svc" />
Looks like you are trying to use the old Virtual Earth SOAP Services which were deprecated and shut down last year. These were replaced by the Bing Maps REST services 7 or 8 years ago. Since you are working in .NET, take a look at the Bing Maps .NET REST Toolkit. It makes it easy to use the REST services in .NET. There is a NuGet package available as well. You can find details here: https://github.com/Microsoft/BingMapsRESTToolkit
Once you have the NuGet package added to your project, you can geocode like this:
//Create a request.
var request = new GeocodeRequest()
{
Query = "New York, NY",
IncludeIso2 = true,
IncludeNeighborhood = true,
MaxResults = 25,
BingMapsKey = "YOUR_BING_MAPS_KEY"
};
//Execute the request.
var response = await request.Execute();
if(response != null &&
response.ResourceSets != null &&
response.ResourceSets.Length > 0 &&
response.ResourceSets[0].Resources != null &&
response.ResourceSets[0].Resources.Length > 0)
{
var result = response.ResourceSets[0].Resources[0] as BingMapsRESTToolkit.Location;
//Do something with the result.
}
I know this is probably not the most performant code possible, but if anyone can help I'd really appreciate that.
I'm working on a web-application that's supposed to locate the user's position with the google maps api. For this I created an UI control that starts the tracking of the user's current position and starts a timeout function that should update the position of the user. Everything works fine, but I testet the app when moving around and the geolocation doesn't change with the timeout, it always just shows the position of the first loop. I have to click on the UI control again to update the position.
These are the functions I adapted from the Google developer sites:
The function to detect the position:
//locate the user via GPS by checking geopositioning
function locateUser(geoLoc) {
var geoSuccess = function(position, map) {
startPos = position;
userLat = startPos.coords.latitude;
userLon = startPos.coords.longitude;
geoLoc = {lat : userLat ,lng : userLon};
};
var geoError = function(error, map) {
geoLoc = null;
//console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};
locateUser(geoLoc);
I'm using the variable "geoLoc" to get latitude and longitude within the map api.
This is the function that is called by a click on the UI-control and that starts the timeout:
//set the marker for the current position to the geolocation, when geolocation is possible
function setUserPosition(map, geoLoc, controlUI) {
//get the geolocation
locateUser(geoLoc);
//check if the position marker for the user position is already attached
if (positionSet == false) {
//if the position marker is not attached (first time user hits the UI control), generate and attach it nad notify the user that it's position is tracked
positionSet = true;
var userpos = {
url: "https://myhost.com/mygraphic.png", // url
scaledSize: new google.maps.Size(45,45), // scaled size
origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(23,23) // anchor
};
positionMarker = new google.maps.Marker({
position: geoLoc,
map: map,
zIndex: 100,
icon: userpos
});
}
//Check if geolocation is possible.
//If geolocation is not possible, hide the location marker and change the UI control's state back to default, but try again in three seconds.
if(geoLoc == null) {
controlUI.style.backgroundColor = '#4485F8';
controlUI.style.backgroundImage = "url('https://myhost.com/oldbackgroundimage.png')";
moveControl = false;
} else {
//If geolocation is possible, make the position marker visible, set it to the located position and cahnge the UI's state to "active".
posMark = positionMarker;
posMark.setPosition(geoLoc);
controlUI.style.backgroundColor = '#eeeef4';
controlUI.style.backgroundImage = "url('https://myhost.com/newbackgroundimage.png')";
moveControl = true;
}
map.panTo(geoLoc);
//check if the user hit the button to start the positiontracking and loop the function if so
if(moveControl == true) {
timeoutControl = setTimeout(function(){setUserPosition(map, geoLoc, controlUI)}, 3000);
} else if(moveControl == false) {
clearTimeout(timeoutControl);
}
}
And this is the function for the UI-control within the init-map function:
controlUI.addEventListener('click', function() {
//check if the user tapped the UI to locate the current position
if(moveControl == false) {
moveControl = true;
locateUser();
//if geolocation is not possible, open an alert to notify the user
if(geoLoc == null) {
alert("No geolocation :(");
} else {
//if geolocation is possible, set the UI control to the "active" state and start the interval to locate the user permanently (every three seconds)
controlUI.style.backgroundColor = '#eeeef4';
controlUI.style.backgroundImage = "url('https://myhost.com/newbackgroundimage.png')";
setUserPosition(map, geoLoc, controlUI);
//Show the Position marker
posMark.setMap(map);
}
//if the user has tapped the UI control and is in "location-mode" this tap stops the location mode and sets everything back into default state
} else if(moveControl == true) {
clearTimeout(timeoutControl);
moveControl = false;
controlUI.style.backgroundColor = '#4485F8';
controlUI.style.backgroundImage = "url('https://myhost.com/oldbackgroundimage.png')";
//Hide the Position marker
posMark.setMap(null);
}
});
I ran the script with an alert to display geoLoc within the geoSucess function of the locateUser function and it gets executed every time the timeout runs over the code and always fires geoLoc with data, but always only the position the user had when he first clicked the UI control.
Can anybody help and does know why the position is not updated within the timeout or maybe know how it would be updated?
Thanks a lot & kind regards,
Philipp
I have a lot of POIs in my database including location property. How can I add those POIs based on my location on my Map? I found HERE SDK has api like 'Explore Popular Places by Category', but these categories are predefined by HERE. I don't think I can add my POIs to HERE and search by these APIs.
I knew a solution that by adding cluster Marker on Map. but It's difficult and expensive if I retrieve POIs in my database every time. like finding all the POIs which within a circle region(radius is 10 miles). Do you have any better solution for adding custom POIs on HERE map?
Thanks
You may be looking for the Custom Location Extension.
You can add your custom POIs(markers) with custom images using HERE maps, here is the code:
After initialisation map onButtonClick,
SearchRequest searchRequest = new SearchRequest("Water");
searchRequest.execute(discoveryResultPageListener);
then add this method:
private ResultListener<DiscoveryResultPage> discoveryResultPageListener = new ResultListener<DiscoveryResultPage>() {
#Override
public void onCompleted(DiscoveryResultPage discoveryResultPage, ErrorCode errorCode) {
if (errorCode == ErrorCode.NONE) {
List<DiscoveryResult> s_ResultList = discoveryResultPage.getItems();
for (DiscoveryResult item : s_ResultList) {
/*
* Add a marker for each result of PlaceLink type.For best usability, map can be
* also adjusted to display all markers.This can be done by merging the bounding
* box of each result and then zoom the map to the merged one.
*/
if (item.getResultType() == DiscoveryResult.ResultType.PLACE) {
PlaceLink placeLink = (PlaceLink) item;
addMarkerAtPlace(placeLink);
Log.e("nameeee ",""+placeLink.getTitle());
}
}
} else {
Toast.makeText(m_activity,
"ERROR:Discovery search request returned return error code+ " + errorCode,
Toast.LENGTH_SHORT).show();
}
}
};
after this add a method for custom marker,
private void addMarkerAtPlace(PlaceLink placeLink) {
Image img = new Image();
try {
img.setImageResource(R.drawable.camping);
} catch (Exception e) {
e.printStackTrace();
}
MapMarker mapMarker = new MapMarker();
mapMarker.setIcon(img);
mapMarker.setTitle(placeLink.getTitle());
mapMarker.setCoordinate(new GeoCoordinate(placeLink.getPosition()));
m_map.addMapObject(mapMarker);
m_map.setCenter(new GeoCoordinate(placeLink.getPosition()), Map.Animation.NONE);
m_map.setZoomLevel(13);
List<MapObject> m_mapObjectList = new ArrayList<>();
m_mapObjectList.add(mapMarker);
}
I face some problems to get back the elevation value from a function. I'm not able to get that value. Would be great if somebody has a solution for that.
Here is my code:
function getElevation(latLng) {
seaLevel = 'Error';
var locations = [];
locations.push(latLng);
//Create a LocationElevationRequest object using the array[0] value
var positionalRequest = {
'locations': locations
}
//Initiate the location request
elevationService.getElevationForLocations(positionalRequest, function(results, status) {
if (status == google.maps.ElevationStatus.OK) {
// Retrieve the first result
if (results[0]) {
var seaLvl = parseFloat(results[0].elevation.toFixed(1));
}
dropElevation(seaLvl);
}
document.getElementById("response").innerHTML = seaLevel;
});
function dropElevation(tmpLevel) {
//alert(tmpLevel); at this point the value is correct
seaLevel = tmpLevel;
}
return seaLevel; //at this point the value is always as defined above
} //End function (getElevation)
The call of it looks like this:
var seaLvl = getElevation(latLng);
Thanks in advance to show me what I'm doing wrong
Guido
The elevations service is asynchronous. You must use the value inside the callback routine. Something like this:
elevationService.getElevationForLocations(positionalRequest, function(results, status)
{
if (status == google.maps.ElevationStatus.OK) {
// Retrieve the first result
if (results[0]) {
var seaLvl = parseFloat(results[0].elevation.toFixed(1));
dropElevation(seaLvl);
document.getElementById("response").innerHTML = seaLevel;
} else {
alert("no result");
}
}
});
And something like this:
var seaLvl = getElevation(latLng);
won't work (the value is not available until the message returns from the server).