I am having issues displaying points from KMZ files accurately at small scales when the map is zoomed out (e.g. zoom: 5).
Some of the points from the Farmers Markets KMZ layer for example start out in the water and then as you zoom in the points moves onto land and becomes more accurate as you zoom into the map. The points are only displayed in their accurate positions when zoomed in closely at a certain extent.
How can the points be displayed more accurately at small scale when the map is zoomed out? Thanks!
I've seen similar behavior in regular API markers when a custom icon is placed, that the marker appears to be "bumped" off to a side when zooming out. This effect has to do with where the marker image is anchored. By default, it looks like the KML markers are anchored at the center bottom of the image.
Notice that the farmers' market PNG image below has a lot of blank "padding". Since the anchor to the map is at the bottom of the image, when zooming out, the red dot will appear to move north.
I found a page saying icons need to be at least 32x32 so the padding should stay there.
To change the anchoring location, add the <hotspot> option to the IconStyle, as described here, for example, to the center of the image:
<hotSpot x="0.5" y="0.5" xunits="fraction" yunits="fraction">
Related
To be clear, this is about overlapping markers visually not by lat/lng. I'm not looking for clustering or spidering.
How to determine, in this case, 1 and 3 are overlapping and not 2
In my case the icons can be varying sizes and shapes. Lat/Lng wont be useful because they could (in theory) be 1000mi away and still overlap. Normally I could do this with getting the CSS positioning and image size and do the math if it's overlapping but I'm not sure how I can only do it with everything in Google Maps referencing these objects in Lat/Lng positioning.
I'm trying to create a circular masked overlay using Leaflet 0.8 that is positioned over the users currently location, extending a radius of 1000 meters. Essentially making the map visible around the user (as a circle), and grayed out beyond 1000 meters
Mockup:
As the user zooms in/out on the map, the circle should resize accordingly.
I tried using leaflet-maskcanvas, a plugin for Leaflet that looks like it would do exactly what I need, unfortunately with all refactoring done in Leaflet 0.8-dev, this plugin isn't compatible.
Has anyone been able to achieve this effect successfully with Leaflet 0.8?
I'm thinking of one hacky way of doing this is using Turf.js to take the map's current center point(map.getCenter()), buffer it 1000 meters with Turf, take that result, and then grab the map viewport's current bounds(map.getBounds()), and use turf erase on it. Then draw the resulting polygon on the map(which is the difference), and then update this on any move events.
http://turfjs.org/static/docs/module-turf_buffer.html
http://turfjs.org/static/docs/module-turf_intersect.html
http://turfjs.org/static/docs/module-turf_erase.html
I'm working on creating custom map tiles (.PNG) which I can show with ImageMapType from the Google Maps API range. In general, the tiles are shown fine and I get the tiles I want with no real problems.
However, an issue which I can not seem to solve at all, is a weird upwards push of the tiles at a single specific zoom level (9). My original tiles do have many gaps for the ocean in them, so I generate blank tiles to fill in the gaps by surrounding my original map tiles with transparent points in a grid.
For testing purposes, and to show you the exact issue, i've made the grid points visible, and quickly taken a snapshot of the upwards push during the transition phase. The top left of the dark region is where the corner was for the previous layer, and after zooming in, the top marked section is where the corner moved it.
After I go past this layer, into layer 10, the corner goes back down a level, to where it would have been if layer 9 wasnt so buggy.
Hope I've provided enough information and I'll be grateful of any advice.
For zoom problem keep one transparent div with z-index and then set map zoom on 9 also hide its zoom control from map By this no one can zoom your map and for tile problem I need its demo page for more information but with this answer i attached a url for your help with full tutorial just check it : https://developers.google.com/maps/documentation/javascript/v2/overlays#Custom_Map_Types
Gud luck
I have a project with google maps. I want to emulate maps.google.com context menu with Zoom in and Zoom out actions.
The google.maps.Map.setZoom() is zooming map to the center point but in maps.google.com when you right click at the specific point and select Zoom In/Out action, map is panning so that this specific point stays at the same place.
For example, if I right click on the point in the left-top corner and select Zoom in in context menu, then this pont stays under cursor after zoom and doesn't go out of the map border.
Is there an easy way to implement this feature?
You could handle it with markers.
I don't know if it's the most efficient way.
So you add a marker where your current mouse position is (you can track your mouse cursor, right? Haven't done anything last time with it)
Then you set the map centre to that marker (i know, that there is a function for it) and just delete the marker.
Edit: oh sorry, i guess i misunderstood your problem. Cuz that would be the same as double clicking a point right?
So you want to have the distance mouse<->top and mouse<->left on the sceen stays as it is with the point under it, but one stage more zoomed in/out?
An equivalent problem was asked and answered at: Zoom toward mouse (eg. Google maps).
My approach to the problem is along the same lines, except that my map pixel coordinates are all calculated relative to the centre of the map (rather than top-left corner):
Determine the pixel offset of your Specific Point relative to the Center of the map. The Map Rectangle dimensions in pixels can be obtained something like map.getDiv().getClientRects()[0] and the Center is just the center of the rectangle.
Calculate what the new pixel offset of the Specific Point will be after zoom in/out. For a Google Maps zoom in all pixel offsets are doubled (for a single zoom step) so if your Specific Point was [30, 40] from the Centre, it will be [60, 80] from the Map Centre after a normal zoom in (or it will be [15, 20] after a normal zoom out.)
Calculate how much you need to adjust the Map Center after zoom, so the Specific Point is back where it began. In the above example, after zoom in we would need to map.panBy(-30, -40), alternatively after zoom out we would need to map.panBy(15, 20).
Apply the normal map.setZoom(zoom) followed by calculated map.panBy(dX, dY) to recenter.
I am creating a google map with some specific requirements.
The map is lets say 800x600 pixels wide.
I need all the markers to show in an area of 400x600px on the left hand side of the map.
The other half is covered with navigation panels (but the map must be visible in the margins behind the panels).
I've been able to set the zoom level according to all the markers using LatLngBounds and fitBounds, but that still fills the entire area.
How do I create a sub bounding area inside the viewport to contain all the markers and adjust zoom accordingly. I show only markers for a specific city.
This is what I need to achieve visually:
+------------------------------------------------+
|..+-----+..+-------+.....+---------------------+|
|..|.nav.|....|..nav..|......|...marker area......||
|..+-----+...+------+.....+---------------------+|
+------------------------------------------------+
The outer block represents the google map, and the spaces between the sub blocks show the map panes. So I need a sub-viewport inside the main viewport somehow.
Any ideas?
(suggestions to enhance the question are welcome as well, use comments for that pls.)
Interesting problem.
My suggestion:
Start with your bounds
Using the Projection, find out what coordinates would extend the bounds to the left by 400px.
Call fitBounds with these new coordinates.