If one zooms out and in on a map with mousewheel, Here Maps breaks or at least its coordinate system goes asunder.
I added map.screenToGeo(ev.currentPointer.viewportX, ev.currentPointer.viewportY) to my map.addEventListener('tap') function, and the lat,lon results varied after mousewheel zooming even though I didn't change the physical X,Y coords (viewportX and viewportY stayed constant).
Some debug:
Screencoord: 660, 660
mg {lat: 61.48160495921855, lng: 23.7620574375982}
mousewheel
mousewheel
Screencoord: 660, 660
mg {lat: 61.47521004787344, lng: 23.76205743759826}
Any suggestions how to circumvent this? Implement my own screentogeo?
Related
I have a simple Google Map. I've added a marker at a given lat, lng.
I want to use turf.js to calculate a 1km buffer which I can then display as a Google Maps polygon.
The path that turf.buffer() returns is an ellipse. The distance from the marker to the boundary is correct latitudinally. However it is short of 1km longitudinally. It looks like there is a problem with the projection, however both the Google Maps API and turf.js documents state WGS84 is the default projection.
The end game is using turf.js to buffer Points, Polylines and Polygons so I can't just draw a Google Maps circle as a workaround unfortunately. I would consider migrating to Leaflet, however we are already quite invested in developing for the Google Maps API
I've created an htm file here showing the problem
I'm not going nuts. The buffer isnt geodesic so at the equator you get a round buffer and as you move north or south your buffer becomes squashed longitudinally towards the poles. The turf.js team are aware. See https://github.com/Turfjs/turf/issues/110 for full details.
I'm looking at using clipper.js instead. This is a cartesian library (2d) so in the uk i can use osgb eastings and northings. I will also have to flip north and south as clipper assumes we are dealing with standard graphics i.e. The y axis is inverted like in css with 0,0 being the top left.
Im going to use geotools to transform between osgb and wgs.
I am trying to use resolution passed into the StyleFunction to work out the size of my image Icons. Using tests, at a zoom where the scale line is 100m the resolution reported to the styling function is 2.3886.
I've take screenshots of the scale line and measured its length in pixels. A 100m scaleline is 68 pixels, or 1.4705 metres per pixel.
1.4705 !== 2.3886, so what is the resolution unit? The API documentation does not explain it and says it is just a number, but without an idea of units it is difficult to work out.
This is to accurately scale the icon to real world length BTW.
Using this jsfiddle.net/dz9gL0g0/ I find that 200m scaleline reports the 2.38, but 100m returns less (1.19). Is the resolution I'm getting from the previous zoomlevel? If I use the resolution passed in OR call the getResolution function directly, 100m scaleline always returns 2.83 for me, not the 1.19 I think it should, although 1.19 * 84 is mostly correct (scale line is bigger in example than my app, which gives me a 68 pixel scale line for 100m).
Moving the window alters the resolution - resize the jsfiddle and the resolution unit changes. My 100m scaleline still fits the geographical feature I use to test, but now reports 2.38.
The resolution is the size of 1 pixel in map units. Let's say your map projection is EPSG:3857 whose unit is meters. For example if the current resolution is 20000 m/px, this means that 1 px represents 20000m.
Maybe it also helps taking a look at this example.
After posting a bug request at github (https://github.com/openlayers/ol3/issues/3770) it was suggested that ol.proj.Projection.getPointResolution() be used to gather the correct resolution for the projection (which I assumed was being passed into the styling function at run-time - assumptions, eh?).
var view = map.getView();
var coords = view.getCenter();
var resolution = view.getResolution();
var projection = view.getProjection();
var resolutionAtCoords = projection.getPointResolution(resolution, coords);
This results in a much closer 1.50XXXX resolution being returned, which is dependant on the latitude. It remains to be seen if my tiled map source is scaled appropriately to the projection, but this means that my pixels per metre are now within a margin of error, correct.
AFAIK the resolution is in meters per pixel. Here is a feature from my application that is styled as ol.style.Circle with radius 3 / resolution:
Is your scale line working correctly? Using a non standard projection i had to use ol.proj.addProjection(...) and ol.proj.addCoordinateTransforms(...) in addition to just defining the projection via proj4.defs(...) to get it working.
I have a leaflet map with lots of basic markers (about 1000 in germany, to be precise). The map is at
http://geotools.gurkensalat.com/osm-mosques/map
I will add a better link when I get permalinks to work, until then, the node which I am asking about is the one slightly to the east and north of the red marker.
When I create a marker for coordinates lat="48.1364" lon="11.3872928" and put it on the map, the marker is shown slightly to the left and bottom. The coordinates are exactly those of the OSM node itself. Any ideas how I can move the marker so the tip of the marker is exactly on the node, or at least pretty close to it?
It's impossible to tell without a live example, but my best bet would be that you have some CSS on your page that is interfering with the map and shifting your tiles up and to the right, or your markers down and to the left.
Nope, that's not it - you're truncating the numbers.
Desired:
[48.1364, 11.3872928, "OSM / Germering / Germering Camii"],
On this page:
[48.136, 11.387, "OSM / Germering / Germering Camii"],
So, the thing causing the problem is your source data, not Leaflet.
Using LeafletJS which is ace, well until now :P We don't have a JSON object or anything, so I am taking the values out of the HTML (title, latlng) and creating markers. Generally that works ok, however there is an issue with the plotting of them. When the map is really zoomed in they seem to be ok, but when you zoom out (like the map is initially), they are way off. They then move on zoom.
So, what am I doing wrong?
http://jsbin.com/edegox/1
http://jsbin.com/edegox/1/edit
Cheers
Tom
The solution to this is quite simple. Leads should have posted it.
when your markers are moving around your map it's because the map doesn't know the size of your marker and/or it doesn't know the point of your marker that marks the location.
your marker icon code might look like this:
var locationIcon = L.icon({iconUrl:'location_marker_icon.png'});
now, let's suppose your image is 24px wide and 36px tall. To keep your marker from moving around, you simply specify the size of the marker, and the "anchor point"...
var locationIcon = L.icon({
iconUrl:'location_marker_icon.png',
iconSize: [24,36],
iconAnchor: [12,36]
});
This will make the center pixel on the bottom represent the exact lat/lng point you specified the marker for, and it will keep it anchored there!
Given an icon that looks like this, with an overall size of 98px wide by 114px tall:
iconSize will be [98, 114]. This is the overall size of the icon.
Your iconAnchor will be [49, 114]. The icon anchors first numeral can be calculated by taking the first numeral in the iconSize and dividing by 2 (i.e., 98 ÷ 2 = 49)
If you wanted to use this icon example, your final code should look like this:
var locationIcon = L.icon({
iconUrl:'location_marker_icon.png',
iconSize: [98, 114],
iconAnchor: [49, 114]
});
Here's a Gist example you can test with (I highlighted the lines in question) https://gist.github.com/anonymous/fe19008c911e1e6b6490#file-index-html-L38-L44
I have a map, which is accurate (enough) to the real world map, as viewed in google maps.
I'm projecting the drawn image using the google.maps.ImageMapType class, thus the corners of the new, drawn, map are (sw)-90,-180 and (ne)90,180.
Now, knowing the coordinates of the south-west and north-east of the overlay in the real-world map, how do I convert GPS coordinates to this new scale?
OK, I added a marker in "Paris" to your jsFiddle, but the marker is clearly not where it should be.
I think you might be mixing google.maps.MapType object and google.maps.ImageMapType
google.maps.ImageMapType uses a google.maps.ImageMapTypeOptions object, which should have a getTileUrl() method, but instead you have a getTile() method which is breaking the projection.