How to draw Polyline on Google Map - google-maps-api-3

Could some one point me how to draw a simple polyline between two geo coding point with custom color.

Everything you need is here:
http://code.google.com/apis/maps/documentation/javascript/examples/index.html
At a high level you want to do this:
Make two requests (using a Geocoder) to geocode two points. You will pass a function to each request that will be called back once the data is available.
You need to wait until BOTH functions complete. You could have two booleans "oneDone, twoDone" and set them to true once the function calls back.
Draw a polyline between the points using the code in the polyline-simple example.

To draw line between two points using the following function to which I pass the map and lat and long in the first point and second point.
var mapOptions = {
zoom: zoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas_'+id), mapOptions);
function poliLines(map, latPointBefore, lonPointBefore, latPointAfter, lonPointAfter){
var routes = [
new google.maps.LatLng(latPointBefore, lonPointBefore)
,new google.maps.LatLng(latPointAfter, lonPointAfter)
];
var polyline = new google.maps.Polyline({
path: routes
, map: map
, strokeColor: '#ff0000'
, strokeWeight: 5
, strokeOpacity: 0.5
, clickable: false
});
}

Related

Graph of elevation from coordinations

I want ask you to one thing about interactive map and geo service. I need to get altitude from my coordinations points and build graph of elevation.
In google maps it looks like this:
https://developers.google.com/maps/documentation/javascript/examples/elevation-paths
I didn't found any example for this. How can I solve this problematic?
Thank you very much.
Best regards Petr Tomasek
You can build a similar elevation graph via the HERE RoutingService JS API by specifying the value of returnelevation of the routeRequestParams to true like in this snippet:
var router = platform.getRoutingService();
var routeRequestParams = {
mode: 'fastest;car',
representation: 'display',
waypoint0: '{lat, lng}', // Start of route
waypoint1: '{lat, lng}', // End of route
returnelevation: true
};
var onResult = function(result) {
var route = result.response.route[0];
/* Now, altitudes are the third values of the each shape point.
Note: Shape points returned as strings. */
var elevation_list = route.shape.map(x => parseFloat(x.split(",")[2]));
/* Now you can use the elevation_list as input data to
draw your elevation graph with any graph tool
*/
};
var onError = function(error) {
console.log(error);
};
router.calculateRoute(
routeRequestParams,
onResult,
onError
);
With the elevation values you can draw your elevation graph with any JS graph library.
Checkout the routing API: https://developer.here.com/documentation/maps/topics/routing.html

Google map. finding shortest path

Im having scenario like.
one place to another place route
if the user in way of that route
we have to fine the which one is shortest path.
Thanks in advance..!
Use the travelling sales-man algorithm to find the shortest path. This algorithm tells that how a salesman can travel all the different places with the total distance traveled equals to minimum from among all other routes.
No one is answered for this question. And finally i got the solution of my own :D
let me tell you!! while creating direction service all the bounds will be stored in "path". so using this array. draw poly-lines then using geometry function "isLocationOnEdge" your_point ,poly-lines array it will return true or false (that's it :D) don't forget to add the degree..! default degree is 10e-10 so change it to 10e-2 or something.
var request = {
origin: document.getElementById("from").value,
destination: document.getElementById("to").value,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}
// Make the directions request
directionService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(result);
// Box around the overview path of the first route
var path = result.routes[0].overview_path;
var my_polyline = new google.maps.Polyline({
path: path,
geodesic: true,
strokeColor: '#black',
strokeOpacity: 1.0,
strokeWeight: 2
});
my_polyline.setMap(map);
var my_position=new google.maps.LatLng(12.9860932,80.1744085);
console.log(google.maps.geometry.poly.isLocationOnEdge(my_position, my_polyline));
var boxes = routeBoxer.box(path, distance);
// alert(boxes.length);
} else {
alert("Directions query failed: " + status);
}
});

openlayers show half wms layer with googlemap v3 api

Hi I need to show some shapefiles over a map, for that I use geoserver, openlayers and google maps V3, it works as far I do not use OpenLayers.Layer.Google, I can see my shapefile.
This is my working code:
var map = new OpenLayers.Map('map');
var ghyb = new OpenLayers.Layer.Google(
"Google Hybrid",
{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 30,srs:'EPSG:2077'}
// used to be {type: G_HYBRID_MAP, numZoomLevels: 20}
);
var wms = new OpenLayers.Layer.WMS( "Italy WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
var regioni_wms = new OpenLayers.Layer.WMS(
"comuni",
"http://localhost:8080/geoserver/wms",
{
layers: "prov2011_g" ,
transparent: "true",
format: "image/png",
srs:'EPSG:2077',
},
{isBaseLayer: false}
);
map.addLayer(regioni_wms);
//map.addLayer(ghyb);
map.addLayer(wms)
map.zoomToMaxExtent();
if I add the layer ghyb to the map, only half of my polygon is rendered and if zoom in it disappears.I do not know if is a problem of mercator nor how to fix it.
Google layers are only projected in EPSG 900913. If you try to use anything else it is doubtful it will work. The good news is that Geoserver will reproject your wms service on the fly to EPSG 9000913. I would suggest chaniging to this projection in both your layers and seeing if that makes a difference.
One thing to note about this is if you are trying to print your layers they will not be to scale along the x axis. Also if you are using a measuring tool on your website you will need to ensure it can operate in a geodesic fassion.

How to overlay GeoJSON on OSM with OpenLayers?

I am trying to create one map. I am using OSM as base layer and now I am trying to overlay my road network as GeoJSON. There is no error in my code (Checked by Firebug). I can view nice map of OSM but problem is there is not any road network on my OSM map. I do not know what I have done worng. Bellow, I have given my code.
I used following command to create GeoJSON from my console. I am using OSGeo Live (Ubuntu).
$ ogr2ogr -f "GeoJSON" roads.json roads.shp roads
JavaScript Code----
//OSM Layer-----------------------------------------------
var map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
map.addLayer(layer);
//GeoJSON Layer-------------------------------------------
var vector_format = new OpenLayers.Format.GeoJSON({});
var vector_protocol = new OpenLayers.Protocol.HTTP({
url: 'ml/roads.json',
format: vector_format
});
var vector_strategies = [new OpenLayers.Strategy.Fixed()];
var vector_layer = new OpenLayers.Layer.Vector('More Advanced Vector Layer',{
protocol: vector_protocol,
strategies: vector_strategies
});
map.addLayer(vector_layer);
//Projection-----------------------------------------------
map.setCenter(
new OpenLayers.LonLat(18.068611, 59.329444).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 10
);
Thanks, in advance.
Is your GeoJSONĀ in EPSG:900913? You should try to set the projection of the map explicitely in your map constructor.
First you may try to set visibility to the layer once added to the map using layer.setVisibility(true)
Second you should look using firebug if the request to ml/road.json is done and that you got data for the part of the map you're looking.
Then you may want to refresh the layer, here is what I used in a pas project :
layer.refresh({force:true});
Finally you may try putting the layers directly in the Map constructor :
//OSM Layer-----------------------------------------------
var layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
//GeoJSON Layer-------------------------------------------
var vector_format = new OpenLayers.Format.GeoJSON({});
var vector_protocol = new OpenLayers.Protocol.HTTP({
url: 'ml/roads.json',
format: vector_format
});
var vector_strategies = [new OpenLayers.Strategy.Fixed()];
var vector_layer = new OpenLayers.Layer.Vector('More Advanced Vector Layer',{
protocol: vector_protocol,
strategies: vector_strategies,
isBaseLayer: false
});
var options = {
layers: [layer, vector_layer]
};
var map = new OpenLayers.Map("Map", options);
//Projection-----------------------------------------------
map.setCenter(
new OpenLayers.LonLat(18.068611, 59.329444).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 10
);
I think your issue is one of projections. You could use OGRINFO to get data about the roads.shp file but probably the easiest for what it sounds like you are doing is to make OGR2OGR use the Spherical Mercator projection. You would do this by running OGR2OGR with the -t switch. This should look like
$ ogr2ogr -f "GeoJSON" roads.json roads.shp roads -t_srs EPSG:900913
Then make sure your map is using the Spherical Mercator projection
var map = new OpenLayers.Map('map',
{projection: new OpenLayers.Projection("EPSG:3857"),
sphericalMercator: true });
This is probably the easiest way to integrate everything with OSM using the same GCS, EPSG900913 and EPSG:3857 should be synonymous.

Googlemaps Reverse GeoCoding Get Country Name, UK Countries

I am using google maps Api V3 and using reverse geocoding to find the name of a country clicked on.
This appears to work fine for most countries except the countries within the UK.
The UK consists of England, Scotland, Wales and Northern Ireland, which are 4 separate countries, but google maps (and most other country things) see them all as just "UK".
I need to know which particular country within the UK has been clicked and not just that the UK has been clicked!
I am using the following javascript and I am currently just using visual studios "watch" feature to dig down into "results[1]" to see what is contained.
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(51.8052184317649, -4.965819906250006);
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function (event) {
if (confirm('Is this the location you would like to you for your company?')) {
geocoder.geocode({ 'latLng': event.latLng }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
}
}
});
}
});
}
If I click when the map is zoomed quite far out the country name (ie Wales) comes back with types "administrative_area_level_1" and "political" but when you zoom in it's no longer there as it just gives the address which doesn't contain "Wales".
Does anyone know how I get round this? I'm sure other Brits have come across this?
Couldn't work out how to reverse geocode to get a UK country as I think it's actually impossible!
Ended up using postcodes and working out countries by that!
Not the best, but it works for me!
UK countries are represented as administrative_area_level_1 results, look at the 2nd last result in this example (do not rely on address_components for this):
https://maps.googleapis.com/maps/api/geocode/json?&latlng=51.641033,-0.647507

Resources