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.
Related
Im implementing a flutter app to display polylines by flutter google maps plugin, But It only shows a straight line between those two points rather than showing actual route, I'm not quite sure what needed to do.
Here my add markers function
void addMarker() {
latlng.add(LatLng(5.973804, 80.429838));
allMarkers.add(Marker(
markerId: MarkerId('busLoc'),
draggable: true,
onTap: () {
print('Marker Tapped');
},
position: LatLng(5.973804, 80.429838),
));
_polyline.add(Polyline(
color: Colors.blue,
visible: true,
points: latlng,
polylineId: PolylineId("distance"),
));
Here my scaffold
GoogleMap(
polylines: _polyline,
markers: Set.from(allMarkers),
initialCameraPosition:
CameraPosition(target: LatLng(widget.la, widget.l0), zoom: 14),
mapType: MapType.normal,
),
And I'll attach screenshot below as well
To get the route from point A to point B you will need to use Directions API that is available on the google_maps_webservice flutter package, which is a service from Google Maps Platform that gives the route information
One of the route information is the overview_polyline that holds an encoded polyline representation of the route.
You can get the overview_polyline by having a function that sends request to Directions API using the google_maps_webservice package like this:
import 'package:google_maps_webservice/directions.dart' as directions;
final _directions = new directions.GoogleMapsDirections(apiKey: "YOUR_API_KEY");
var overviewPolylines;
directions.DirectionsResponse dResponse = await _directions.directionsWithAddress(
_originAddress,
_destinationAddress,
);
if (dResponse.isOkay) {
for (var r in dResponse.routes) {
overviewPolylines = r.overviewPolyline.points
}
}
Then, once you get the overview_polyline from Directions API using the sample code above, you will need to decode it using the PolyUtil(); method from the google_maps_util flutter package like this:
import 'package:google_maps_util/google_maps_util.dart';
PolyUtil myPoints = PolyUtil();
var pointArray = myPoints.decode(overviewPolylines);
Once decoded you can pass the pointArray to your polyline object like this:
_polyline.add(Polyline(
color: Colors.blue,
visible: true,
points: pointArray,
polylineId: PolylineId("distance"),
));
it shows straight line because you have in your polyline only two points, so the expected behavior is to draw a line from one point to the other
you have to use google direction API here is an article explains how to draw route between two points in flutter.
https://medium.com/flutter-community/drawing-route-lines-on-google-maps-between-two-locations-in-flutter-4d351733ccbe
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
How would I display a high-resolution map similar to the one at https://beta.here.com using the HERE Maps API for JavaScript?
From the API reference there is an option to change the pixelRatio when creating a map.
var map = new H.Map(
document.getElementById('map'),
defaultLayers.normal.map,
{ pixelRatio: 2 }
);
This works great and produces a high-resolution map on high-DPI screens, however, this changes the scale of the map and all map objects become small and text becomes difficult to read.
The PPI settings aren't documented very well in the JavaScript API reference, but is documented in the Map Tile API.
Pixels per inch. Resolution that can be requested, valid values are:
72 – normal, used by default if no value provided
250 – mobile
320 – hi-res
You can specify the PPI when creating a default layer (second option).
var defaultLayers = platform.createDefaultLayers(512, 320);
var map = new H.Map(
document.getElementById('map'),
defaultLayers.normal.map,
{ pixelRatio: 2 }
);
You can also ask the window:
var hidpi = ('devicePixelRatio' in window && devicePixelRatio > 1);
and create the default Layers like this:
var defaultLayers = platform.createDefaultLayers(hidpi ? 512 : 256, hidpi ? 320 : null);
For the benefit of anyone using the HereMap tiles without the Javascript API (such as through Leaflet), the crucial parameters are &ppi=250 (&ppi=72 for low-dpi) and /512/ instead of /256/ after the {z}/{x}/{y}.
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.
I want to display a couple of routes on a map, but I would prefer to first draw them with google maps. For example, I got directions from Seattle to San Diego, then moved things a bit, and the link looks like this.
I know that I can use the DirectionsRenderer to draw a polyline connecting Seattle and San Diego like this:
function renderDirections(result) {
var directionsRenderer = new google.maps.DirectionsRenderer;
directionsRenderer.setMap(gMap);
directionsRenderer.setDirections(result);
}
var directionsService = new google.maps.DirectionsService;
function requestDirections(start, end) {
directionsService.route({
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.BICYCLING
}, function(result) {
renderDirections(result);
});
}
requestDirections('Seattle, WA', 'San Diego, CA');
What I would like to know is if there is a way to pass in the link as the directions request. The link contains waypoints, my modifications to the default route.
It is possible and you are on the right track. It is hard to understand the API. I believe that you have to set the waypoints in the DirectionRequest object of the DirectionsService when you call the route method. I don't think you can pass in a link, but you can create an object or Array of waypoints first.
If you want, you can also specify the optimizeWaypoints boolean.
Check out the DirectionsRequest Object.
waypoints Array. Array of intermediate waypoints. Directions will be calculated from the origin to the destination by way of each waypoint in this array. Optional.
Yes, you can use the DirectionsRenderer so long as you pass your start and end points into a DirectionsRequest, and pass that into a DirectionsService object. Once you call .setDirections it'll draw the polyline for you. From the API documentation at.
Set the renderer to use the result from the DirectionsService. Setting a valid set of directions in this manner will display the directions on the renderer's designated map and panel.
If what you were getting at was drawing the polyline yourself (though I don't see why it would be necessary), the individual points in the path can be derived -- DirectionsResult contains an array of DirectionsLegs which contains an array of DirectionsSteps which contains a .path property, which is an array of latlngs. (whew!)