I'm working on a pathcreator with osm. Adding lines works fine, but when one makes a very long line and zooms in on it, the line disappears at a high zoom level. It seems that this appears if the viewport is to far away from the start and/or end point of the line. Maybe splitting the line could help, but which is the max size for this?
here is a minified code sample, if you zoom in to level 7 the line is gone:
$(document).ready(function() {
var map = new OpenLayers.Map('map');
var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
map.addLayer(mapnik);
var path = new OpenLayers.Layer.Vector("path");
map.addLayer(path);
var pathStyle = {
strokeColor: "#0033ff",
strokeOpacity: 0.7,
strokeWidth: 5
};
var points = new Array(
new OpenLayers.Geometry.Point(-7856503.5146562, 880554.5664875),
new OpenLayers.Geometry.Point(8502243.5278938, 724011.5325875)
);
var line = new OpenLayers.Geometry.LineString(points);
var lineFeature = new OpenLayers.Feature.Vector(line, null, pathStyle);
path.addFeatures([lineFeature]);
map.zoomToExtent(path.getDataExtent());
});
i'm quite new to osm so maybe im just messing up something.. Any ideas? Thanks in advance
I was playing around with firebug and going through the svg elements. It turned out that osm uses svg polyline for making lines. The values of the line are running out of space with values over 15000 which is to much for there renderer.
I checked in a bug report on this issue:
https://github.com/openlayers/openlayers/issues/617
My current workaround is to split the line into 100 km peaces. This works but takes more calculations.
if someone is intressted here is a site with helpful math:
http://www.movable-type.co.uk/scripts/latlong.html
Related
Let me first explain what i am trying to do:
Every 30 seconds i get array of gps points(lat, long). These points represent a route along which i must move a maker, i'm trying to do it simply by moving a marker from point1 to point2 , then from point2 to point3 and so on. And then when i receive a new array of points i start doing this again. It is guaranteed that the last point of previous array and the first point of current array are the same. This means that routes are connected and each route is a part of one Big Route, which is divided into smaller routes and these smaller routes are sent to me in an order. (If last sentence was too difficult to understand please ignore it, it's not necessary to understand it).
How i implement it
As a marker i use Leaflet's plugin Leaflet Moving Markers
Here as a code: (it's not full, i wrote it as close to my code and as brief as it is possible)
var api = // setting api here..
var marker = L.Marker.movingMarker(
[[0,0],[0,0]],
[0],
{ icon: icons.chosen });
var myPlugin = function(api, marker) {
this._api = api;
this._marker = api;
var that = this.
this._api.on('receive', function(points) { // receiving points here
that.moveMarker(points, 2000);
});
}
myPlugin.prototype.moveMarker = function(points, interval) {
this._marker.initialize(points, interval);
this._marker.start();
}
MyPlugin = new myPlugin(api,marker);
And finally my problem
What happens each time we receive points:
Marker moves as it is supposed to move(from point1 to point2, from point2 to point3 and so on to the last point. Then we wait to receive new points)
We recieved new points.(Cool!). Marker moves correctly, in a correct order, but when it reaches the last point it for some (unclear to me) reasons moves to the first point again and starts moving from point1 to point2, from point2 to point3 and so on. It does a laps. But only twice!
Okay, we received points again and our marker again does laps, 3 laps this time.
We received points again, and our marker does 4 laps...
...And when we receive points for twentieth time our marker does 20 laps. Why?
Thanks for spending your valuable time on reading this and helping me!
This question already has an answer here:
Google Maps API Polygon with "Hole" In Center
(1 answer)
Closed 7 years ago.
First of all, for the issue you're going to read, I used this snippet of code to highlight my polygon :
Highlight polygon and tint rest of map using Google Maps
Here is my code (it's Angular) :
var boundaries = [];
// big area
var overlay = [
new $rootScope.googleApi.LatLng(80.0, -90.0),
new $rootScope.googleApi.LatLng(-60.0, -90.0),
new $rootScope.googleApi.LatLng(-60.0, 90.0),
new $rootScope.googleApi.LatLng(80.0, 90.0)
];
// my polygon
angular.forEach(settings_boundaries, function(val, key) {
boundaries.push(new $rootScope.googleApi.LatLng(val[1], val[0]));
});
// create a polygon with overlay first
var poly = new $rootScope.googleApi.Polygon({
paths: [overlay, boundaries],
strokeColor: "blue",
strokeWeight: "1",
fillColor: "black",
fillOpacity: 0.4,
clickable: false
});
poly.setMap(interactiveMap);
Now, the real problem is,
If I use these coordinates (which I don't remember how I got them in the first place) :
[[1.6101837158203125,49.00274483644452],
[1.6294097900390625,49.01175312475694],
[1.5947341918945312,48.98787759766659],
[1.6101837158203125,49.00274483644452]]
Everything works fine (as you can see here).
But if I use these ones :
[[1.6809940338134766,48.98337149775796],
[1.6791915893554688,48.96849847697763],
[1.7185020446777344,48.995199140974066],
[1.6809940338134766,48.98337149775796]]
This is not working anymore.
As you can see here.
I used this website to generate the coordinates :
http://www.the-di-lab.com/polygon/ (view screenshot)
I searched for a long time what the issue could be, but I have really no idea. It's approximately the same coordinates. The first lat,lon values are the same than the last ones, for both of them.
If you have any idea (I guess there's something special in the coordinates), I would like to know !
Thanks !
Structurally, the coordinates of the triangle are correct. Only a geometrical difference the first triangle (the one functioning) is drawn in a clockwise direction while the latter is drawn counterclockwise. I have already met a situation like this but I do not remember which site. Then try to reverse the direction of drawing of the triangle in this way:
[[1.6809940338134766,48.98337149775796],
[1.7185020446777344,48.995199140974066]
[1.6791915893554688,48.96849847697763]
[1.6809940338134766,48.98337149775796]]
I am working on asp.net mvc 3 project we are using Google maps.I want to display marker at center of poly line.
I am using below code
var start = new google.maps.LatLng(
MyMapCordinates[0].lat(),
MyMapCordinates[0].lng()
);
var End = new google.maps.LatLng(
MyMapCordinates[MyMapCordinates.length - 1].lat(),
MyMapCordinates[MyMapCordinates.length - 1].lng()
);
debugger
var inBetween = google.maps.geometry.spherical.interpolate(start, End, 0.5);
var marker= new google.maps.Marker({
position: inBetween
});
It is working fine with polyline having two coordinates. But it fails for polyline with more than three co-ordinates. Please suggest
The interpolate method is designed only to work with two sets of coordinates. The computeLength() method looks like what you are looking for to calculate the distance of multiple points, and then just do some math to find the middle.
Does that help?
My current OpenLayers looks like the following:
a wrong map http://i1179.photobucket.com/albums/x384/yoyomyo/Picture2.png
It has twice as many continents as there should be.
I was trying to set Bounds to my map, but the entire map just refuses to render:
var map = new OpenLayers.Map('map', {restrictedExtent: new OpenLayers.Bounds(-180, -90, 180, 90)});
var layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
map.addLayers([layer]);
map.setCenter(
new OpenLayers.LonLat(-71.147, -42.472).transform( new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject()),
12);
Does any Map guru know what I did wrong?
WrapDateLine
Try wrapDateLine:false
It sounds like you want to set maxExtent.
http://trac.osgeo.org/openlayers/wiki/SettingZoomLevels
Otherwise I have no clue. :)
It would be easier to answer with an example to work off of. I would zoom in 12 is pretty far out. And yes you can zoom in on OSM http://www.openstreetmap.org/
In that site, they use these values
var centre = new OpenLayers.LonLat(-0.1, 51.5);
var zoom = 5;
setMapCenter(centre, zoom); //It calls map.setCenter()
Okay I give up. I think this is just the way OpenStreetMap displays its map.
I have seen many demos and they are all like the one above.
I develop a simple Google Maps application. I need just to place one marker on the map. For whatever reason, the marker is placed outside of the visible area of the map. It's a little bit strange, because the map is centered to the marker's coordinates. Here is the code:
var point1 = new GLatLng(location1.lat,location1.lon);
map1.setCenter(point1, 15);
var marker1 = new GMarker(point1);
map1.addOverlay(marker1);
map1.setCenter(point1);
When we drag the map a little bit, we can see the marker. What do I need is to center the map in the way the marker will be visible without map dragging.
Can anyone help me?
I believe the GLatLng object would accept String arguments as well - but to be safe I would ensure that they are integers - try using:
new GLatLng(parseInt(location.lat), parseInt(location.lon));
I also noticed you call map.setCenter a second time which ought to not be necessary.
Using the following code really ought to do it
map=new GMap(document.getElementById("map"));
var point = new GLatLng(parseInt(location.lat), parseInt(location.lon));
map.setCenter(point,5);
var marker = new GMarker(point);
map.addOverlay(marker);
If you still are having issues I would check that "location" object to make sure the .lat and .lon values are being populated correctly.
Check this code out:
var map = new GMap(document.getElementById("map"));
/* -- snip -- */
map.centerAndZoom(new GPoint(-1.2736, 53.0705), 8);
From a website I made a while ago. Feel free to check the source:
http://www.primrose-house.co.uk/localattractions
Just click the link in the top right to switch to the map view.