get course between two point in google maps - javascript

I have two point in Google Maps
pointA = -6.468151012664202, 106.77200317382812
pointB = -6.121438675500974, 106.47125244140625
How can I get the course/bearing using JavaScript or MySQL Query?

What you need is to use the Google Maps API's geometry library. When you load in the JS, you need to add the libraries=geometry URL parameter to the JS script.
Then, you can do:
var pointA = new google.maps.LatLng(-6.468151012664202, 106.77200317382812);
var pointB = new google.maps.LatLng(-6.121438675500974, 106.47125244140625);
var bearing = google.maps.geometry.spherical.computeHeading(pointA, pointB);
See:
- https://developers.google.com/maps/documentation/javascript/geometry
- https://developers.google.com/maps/documentation/javascript/reference#spherical

Related

Create multiple marker points on Google Maps In a Web Application from C# objects

I've got a Web Application with C# code that creates a list of objects with their long and lat. I want to then create marker points on Google Maps for them using Javascript. I've currently got this code:
var marker;
for (var i = 0; i < ('<%= Buses.Count %>' - 1); i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng('<%= Buses['i'].latitude %>', '<%= Buses['i'].longitude %>'),
map: map
});
}
Which does not work, I believe the error is with where I reference "i" to say which object in the list to use.
If I manually set a marker point without a for loop and change ['i'] to [0] it will place a marker fine. However, due to the number of items changing and reaching up to 100 I require using a for loop. I have tried removing the '' around i and this generates an error saying
"i does not exist in the current context."
I have seen these posts:
Add two marker points in google maps
Google Maps JS API v3 - Simple Multiple Marker Example
Google Maps JS API v3 - Simple Multiple Marker Example
However, all of these are using locations inside of the JavaScript. My objects are contained within the C# code as a custom object defined as:
public static List<Bus> Buses = new List<Bus>();
This is my C# Code in full:
https://pastebin.com/2M1hWjnM
You're mixing a javascript for with data in code-behind/C#. It not works.
First, you've to put the marks data on a javascript array. Then make your for without webforms tags <%%>
put something like this on your page code behind (C#)
public static string getBusesJson()
{
var buses = new List<Bus>();
buses.Add(new Bus() {latitude = 10, longitude = 20 });
buses.Add(new Bus() { latitude = 15, longitude = 30 });
buses.Add(new Bus() { latitude = 5, longitude = 40 });
return JsonConvert.SerializeObject(buses);
}
put this on your aspx header:
<script type="text/javascript">
var points = <%= WebApplication3.WebForm1.getBusesJson()%>;
for (var i = 0; i < points.length; i++) {
//pass points[i].latitude and points[i].longitude to google maps
}
</script>

Google Maps Javascript API cluster some marker and some not

I would like to show on Google Map using Javascript API v3 some markers. I have two types of data - vehicle positions and building positions. There's a lot of buildings but only few vehicles. I would like to use clustering algorithm for building markers but not for vehicles. Is it possible using offical Google JS API or using some external library?
If you can distinguish the two different types of markers then you can just do this for the markers regarding buildings (using https://github.com/googlemaps/js-marker-clusterer)
var buildingsMarkersArray = [];
...
buildingsMarkersArray.push(someMarker);
// when you are done creating markers then
var clusterOptions = {
imagePath: 'the/path/to/images/m'
};
var buildingsCluster = new MarkerClusterer(map, buildingsMarkersArray, clusterOptions);
This will cluster only the markers you provide.

Arcgis API for JS : change spatial reference of graphic layer

I have an app with features layers and graphics layers which don't have the same spatial reference (i.e 102110 and 4326).
My map has the same spatial reference as my features layers (102110).
I can't turn the spatial reference of my graphics layers (4326) into the one of my map and features layers.
Do you have any idea to help me ?
Thanks.
GraphicsLayer or FeatureLayer does not have any SpatialReference information in them. Spatial references are part of the geometry/graphic objects and Map also.
The SpatialReference of FeatureLayer matches with map:
When requests are made for features from a service, the map's spatial
reference will be included which tells the service to re-project
features before sending them to the client.
Whereas, GraphicsLayer are maintained entirely within the application. The developer needs to ensure that projections match before adding the graphics on the map. To change the projection system, you can use GeometryService, below is a sample.
require(["dojo/_base/array", "esri/tasks/GeometryService", "esri/tasks/ProjectParameters", "esri/SpatialReference"], function(GeometryService, ProjectParameters, array) {
var geometries = array.map(graphicsLayer.graphics, function(graphic){
return graphic.geometry;
});
var gsvc = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
var outSR = new SpatialReference({wkid:102110});
var params = new ProjectParameters();
params.geometries = geometries ;
params.outSR = outSR;
params.transformation = transformation;
gsvc.project(params, function(projectedGeometries){
for(var i = 0; i < projectedGeometries.length;i++){
graphicsLayer.graphics[i].setGeometry(projectedGeometries[i]);
}
});
});

How to set a Custom Icon on clustered Push Pins in Bing Maps?

What I'm trying to do is to change the default icon that is displayed when you set the Clustering Configuration for a Bing Map using the Bing Maps Ajax Control 6.3.
I have a function that loads a Bing Map like this:
function getMap() {
map = new VEMap('map_canvas');
map.SetDashboardSize(VEDashboardSize.Tiny);
var latLong = new VELatLong(21.983801, -101.557617);
map.LoadMap();
var customPin = '<div style="position:relative; left:-10px;top:-20px;"><img src="../Content/images/icons/pin1.png" style="width:40px; height:40px"></div>';
icon.CustomHTML = custom;
var options = new VEClusteringOptions(icon, null);
map.GetShapeLayerByIndex(0).SetClusteringConfiguration(VEClusteringType.Grid, options);
map.SetCenterAndZoom(latLong, 6);
map.SetMouseWheelZoomToCenter(false);
map.EnableShapeDisplayThreshold(true);
map.AttachEvent("onclick", singleMouseHandler);
map.AttachEvent("ondoubleclick", doubleClickMouseHandler);
}
But so far it keeps displaying the same default icon. What am I missing here?
Another thing I was wondering is if there's a way to change the custom icon if a pin in the cluster changes, like if I have 5 green Push Pins but one of them is updated to be a blue Push Pin, is there a way to change the icon that represents that cluster?
I found the reason my approach wasn't working, I keep thinking I'm dealing with classes with constructors that receive parameters, which in this case the VEClusteringOptions class doesn't receive parameters in its constructor. I had to set the Icon property separately:
function getMap() {
map = new VEMap('map_canvas');
map.SetDashboardSize(VEDashboardSize.Tiny);
var latLong = new VELatLong(21.983801, -101.557617);
map.LoadMap();
var customPin = '<div style="position:relative; left:-10px;top:-20px;"><img src="../Content/images/icons/pin1.png" style="width:40px; height:40px"></div>';
icon.CustomHTML = custom;
var options = new VEClusteringOptions();
options.Icon = icon; // here's the "big" difference
map.GetShapeLayerByIndex(0).SetClusteringConfiguration(VEClusteringType.Grid, options);
map.SetCenterAndZoom(latLong, 6);
map.SetMouseWheelZoomToCenter(false);
map.EnableShapeDisplayThreshold(true);
map.AttachEvent("onclick", singleMouseHandler);
map.AttachEvent("ondoubleclick", doubleClickMouseHandler);
}
Now my custom cluster icons are being loaded great, I need to get used to more to the concept of property in the future.
I did the development long time ago for our company site. Did you try the interactive SDK available here?
http://www.bingmapsportal.com/isdk/ajaxv7#Pushpins15
I have added the reference for pushpin development
http://www.microsoft.com/maps/developers/web.aspx

Google Maps GDirections - Route directions between two points on a map

Does this look like it should work? I'm wanting to generate directions from one latitude/longitude to another latitude/longitude.
var dirMap = new GMap2($("#dirMap").get(0));
var wp = new Array(2);
wp[0] = new GLatLng(35.742149,139.337218);
wp[1] = new GLatLng(35.735347,139.328485);
var marker = new GMarker(wp[1]);
dirMap.addOverlay(marker);
dirMap.setCenter(wp[0], 12);
dirMap.setUIToDefault();
// load directions
directions = new GDirections(dirMap);
directions.load("from: Waypoint1#21.742149,100.337218 to: Waypoint2#15.740815,100.3267");
The map loads fine, but the directions don't come in. I've tried it this way too:
var dirMap = new GMap2($("#dirMap").get(0));
var wp = new Array(2);
wp[0] = new GLatLng(32.742149,119.337218);
wp[1] = new GLatLng(32.735347,119.328485);
var marker = new GMarker(wp[1]);
dirMap.addOverlay(marker);
dirMap.setCenter(wp[0], 12);
dirMap.setUIToDefault();
// load directions
directions = new GDirections(dirMap);
directions.loadFromWaypoints(wp);
Same thing... map but no directions. Any help is greatly appreciated, thank you in advance!
I can't see anything obvious at first glance at your code, so my first guess is a failure coming back in for the GDirections request (I am also assuming you have checked the javascript error log for any errors, Tools/Error Console if you haven't already done this).
I suggest you add an error handler for your GDirections object, this will give you some indication what is happening with your request:
GEvent.addListener(directions, "error", handleErrors);
and in the handleErrors callback have a look in:
directions.getStatus().code
Compare with the Geo Status Codes.
EDIT: Ok, I just tried out your code here and it works perfectly. I can only assume that there is some other problem on your page that is causing the issue. Can you post a link in the question so we can check it out ?
Checking the status (604) I got when I tried in the Google Maps API Reference says:
The GDirections object could not
compute directions between the points
mentioned in the query. This is
usually because there is no route
available between the two points, or
because we do not have data for
routing in that region.
and this is the code I used (slightly modified):
$(function ()
{
if (GBrowserIsCompatible())
{
var wp = [new GLatLng(35.742149,139.337218), new GLatLng(35.735347,139.328485)];
var map = new GMap2(document.getElementById('map-canvas'));
map.setCenter(wp[0], 12);
map.setUIToDefault();
var marker = new GMarker(wp[1]);
map.addOverlay(marker);
var directions = new GDirections(map);
GEvent.addListener(
directions,
'error',
function ()
{
console.log(directions.getStatus().code);
}
);
directions.load('from: Waypoint1#21.742149,100.337218 to: Waypoint2#15.740815,100.3267');
}
});

Categories

Resources