On an OSM base layer, I have drawn a line following 3 points, with an array for the points and the object/method OpenLayers.Geometry.LineString
Now, I'd like this line to follow the road. Some hours spent on internet, and impossible to find a solution. Is there an object for this ? Do I have to catch some information from the tiles first ?
May I ask some help please ?
Here under is how I'm drawing the straight line
function init() {
var epsg4326 = new OpenLayers.Projection("EPSG:4326");
var map = new OpenLayers.Map('map');
var osmLayer = new OpenLayers.Layer.OSM("OSM");
map.addLayer(osmLayer);
var center = new OpenLayers.LonLat(-71.6, -33.7).transform(epsg4326,map.getProjectionObject());
map.setCenter(center,4);
var points = new Array(
new OpenLayers.Geometry.Point(-71.26,-32.47),
new OpenLayers.Geometry.Point(-71.30,-32.97),
new OpenLayers.Geometry.Point(-70.81,-32.89)
);
var myLine = new OpenLayers.Geometry.LineString(points).transform(epsg4326, map.getProjectionObject());
var myLineStyle = {strokeColor:"#0500bd", strokeWidth:3};
var myFeature = new OpenLayers.Feature.Vector(myLine, {}, myLineStyle);
var myVector = new OpenLayers.Layer.Vector("line test");
myVector.addFeatures([myFeature]);
map.addLayers([myVector]);
}
Usually OpenLayers just displays raster tiles but you can't extract road geometry information out of them. You need either raw or otherwise pre-processed data for this. Both OpenLayers and Leaflet are able to display GPX files. So once you got a GPX file everything else will become easy.
Unfortunately you didn't tell us whether you want to follow it a specific road (based on a name/address? or based on coordinates?) or whether you want to display a route along several roads or something completely different.
For retrieving raw geoinformation out of OpenStreetMap there is an official API, and there is the Overpass API which is usually a lot faster and allows to specify rather complex queries. But displaying such raw data requires a lot of preprocessing first.
If you want to display a route instead then you can choose one of the available online routers for OSM, for example OSRM. Many of them offer a GPX export of the calculated route which you can then use with OpenLayers.
There are a few more options but presenting them here without knowing what you are actually trying to do would be a waste of time.
Related
I can't get GeoJSON data from a URL to work properly.
I'm trying to create an overlay layer in Leaflet consisting of US counties, and this is what I have done to do so:
var overlays = {
"Counties": L.geoJson('https://github.com/zeke/us-counties/blob/master/county.geo.json?raw=true', {async: true}).on('loaded', function(e) {map.fitBounds(e.target.getBounds());
}
)}
// This adds all layers together.
L.control.layers(baseMaps, overlays).addTo(map);
But it doesn't work at all. The JS console error Looks like this:
Is there any good way to get this working?
L.GeoJSON don't support request, you need to first to load your data manually or use a library like Leaflet.Ajax
var overlays = {
"Counties": L.geoJson.ajax('https://github.com/zeke/us-counties/blob/master/county.geo.json?raw=true').on('data:loaded', function(e) {map.fitBounds(e.target.getBounds());
}
)}
I am in the process of converting my browser based mapping applications from OpenSpace API to OS Maps API. I am using JavaScript.
For a while I’ve had a hybrid system using both API libraries and now wish to eliminate the residual OpenSpace calls.
The on-line conversion guidance from OpenSpace to OS Maps is rather limited and doesn’t tell me how to convert between coordinate systems (Lat/Long to British National Grid and vice versa) which OpenSpace does via a built-in GridProjection function.
For example how would I achieve the following in OS Maps without the GridProjection call?
var gridprojection = new OpenSpace.GridProjection(); // set-up a grid projection
var pt = osMap.getLonLatFromViewPortPx(e.xy); // get a clicked (BNG) point on a map
var lonlat = gridprojection.getLonLatFromMapPoint(pt); // use gridprojection to convert BNG to lat/long
And:
var lonlat = new OpenLayers.LonLat(long,lat); // create a lat/long point
var os = gridprojection.getMapPointFromLonLat(lonlat); // use gridprojection to convert lat/long to BNG
If you are using OpenLayers 2 you will need to include the proj4js version 1 library
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/1.1.0/proj4js-combined.min.js"></script>
Then add a definition for the BNG projection EPSG:27700
Proj4js.defs["EPSG:27700"] = "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs ";
Then you can use the transform method on LonLat objects to convert to and from the lon/lat projection EPSG:4326 and BNG
new OpenLayers.LonLat(long, lat).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:27700"))
My app offers a button to take a screenshot of the current page, which includes a Mapbox map (handled by the nativescript-mapbox plugin). Everything works fine on iOS but on Android, the map is not rendering.
I was pointed from the mapbox team to this example, which addresses their issue with the "regular" Android Graphics Canvas, providing a solution using the Mapbox Snapshot API: https://github.com/mapbox/mapbox-gl-native/blob/master/platform/android/MapboxGLAndroidSDKTestApp/src/main/java/com/mapbox/mapboxsdk/testapp/activity/imagegenerator/SnapshotActivity.java#L52
As I am not a Java developer (I barely can handle the {NS} part :) ), I don't know how to convert the code to my pure Javascript {NS} code.
This is what I have now:
var v = view;
var bmp = android.graphics.Bitmap.createBitmap(v.getMeasuredWidth(), v.getMeasuredHeight()+50, android.graphics.Bitmap.Config.ARGB_8888);
v.android.draw(new android.graphics.Canvas(bmp));
var source = new imageSource.ImageSource();
source.setNativeSource(bmp);
//saves image into Documents folder
var folder = fs.knownFolders.documents().path;
var fileName = "Test.png"
var path = fs.path.join(folder, fileName);
var saved = source.saveToFile(path, "png");
Any ideas on how to convert/use their code to capture my entire view, including the map?
I am trying to import a bunch of KML files from the server and then adding them to the Map. I have an overall count of 23 KML files on the server which i plan to import on the map.
However what i experience is that it would only allow me to import 18 kml layer on the map not more than that. The moment i add an extra one in the list it would just not show anything but than a plan Google map.
Is there a limitation on the number of KML files i can import on a map ? If yes is there a way to work around because i have 23 files in all.
var ctaLayer1 = new google.maps.KmlLayer({
url:'http://www.xyz.com/cfv/maps/1ALL.kml'
});
var ctaLayer2 = new google.maps.KmlLayer({
url:'http://www.xyz.com/cfv/maps/2ALL.kml'
});
ctaLayer1.setMap(map);
ctaLayer2.setMap(map);
ctaLayer3.setMap(map);
ctaLayer4.setMap(map);
ctaLayer5.setMap(map);
ctaLayer6.setMap(map);
ctaLayer7.setMap(map);
ctaLayer8.setMap(map);
ctaLayer9.setMap(map);
ctaLayer10.setMap(map);
ctaLayer11.setMap(map);
ctaLayer12.setMap(map);
ctaLayer13.setMap(map);
ctaLayer14.setMap(map);
ctaLayer15.setMap(map);
ctaLayer16.setMap(map);
//ctaLayer17.setMap(map);
//ctaLayer18.setMap(map);
ctaLayer19.setMap(map);
ctaLayer20.setMap(map);
// ctaLayer21.setMap(map);
// ctaLayer22.setMap(map);
//ctaLayer23.setMap(map);
There is a limit. Check google docs:
There is a limit on the number of KML Layers that can be displayed on a single Google Map. If you exceed this limit, none of your layers will display. The limit is based on the total length of all URLs passed to the KMLLayer class, and consequently will vary by application; on average, you should be able to load between 10 and 20 layers without hitting the limit.
As i red from the readme file, openlayers.js has multiple choices for including files and themes.
What i would like is to use the lightest solution of openlayers.js files.
I included the openlayers.light.js in my app, and it creates maps but do not show them, check this:
do i forgot to include some other file?
my structure structure is this:
/vendor
/js
openlayers.light.js
/img
/theme
how to show maps layers?
Also does the openlayers.light.js will work on mobile devices (once fixed this problem :P )? or i'll need to include openlayers.mobile.js too?
This is the code not working with openlayers.light.js but working with openlayers.js (740kb) :
var _element = "#map";
var map = new OpenLayers.Map (_element, {
controls: [
new OpenLayers.Control.Navigation({
dragPanOptions: {
enableKinetic: true
}
}),
new OpenLayers.Control.Zoom()
],
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
});
var lonLat = new OpenLayers.LonLat(_lon, _lat).transform (
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
// map.getProjectionObject() doesn't work for unknown reason
);
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon(_img_map_marker, size, offset);
markers.addMarker(new OpenLayers.Marker(lonLat, icon.clone()));
var mapnik = new OpenLayers.Layer.OSM("Test");
map.addLayer(mapnik);
map.setCenter (lonLat,3);
PS: my openlayers map js init method is ok, it works using the huge openlayers.js (740KB), but not working with openlayers.light.js as i showed above
html
<div id="map"></div>
css
img{max-width:none;}
#map{
width:300px;
height:300px;
}
if you want to use mobile properties with openlayers as panning or zooming with hand you have to use openlayers.mobile.js.
you can use openlayers.light.js with mobile devices but not mobile functions.
i think your structure should be :
myProject
/js
openlayers.light.js
/img
/theme
and i have tried openlayers.light.js in http://jsfiddle.net/aragon/ZecJj/ and there is no problem with it.
My code:
var map = new OpenLayers.Map({
div: "map",
minResolution: "auto",
maxResolution: "auto",
});
var osm = new OpenLayers.Layer.OSM();
var toMercator = OpenLayers.Projection.transforms['EPSG:4326']['EPSG:3857'];
var center = toMercator({x:-0.05,y:51.5});
map.addLayers([osm]);
map.setCenter(new OpenLayers.LonLat(center.x,center.y), 13);
and try to read Deploying (Shipping OpenLayers in your Application).
OpenLayers comes with pre-configured examples out of the box: simply
download a release of OpenLayers, and you get a full set of easy to
use examples. However, these examples are designed to be used for
development. When you’re ready to deploy your application, you want a
highly optimized OpenLayers distribution, to limit bandwidth and
loading time.
you can change src file with this link and can see it still works.
<script type="text/javascript" src="http://openlayers.org/dev/OpenLayers.light.debug.js"></script>
to
<script type="text/javascript" src="https://view.softwareborsen.dk/Softwareborsen/Vis%20Stedet/trunk/lib/OpenLayers/2.12/OpenLayers.light.js?content-type=text%2Fplain"></script>
i hope it helps you...