I am using mapbox and I am trying to hide a marker until the building itself is clicked using JS. I've tried setting event listeners on my whole map but it will only pop up if the exact coordinates are clicked. Because a building can be of varied size, how would I implement a click function that makes the marker appear when an actual building is clicked and not the coordinates?
Related
I'm using the leaflet styled layer control, marker cluster and marker cluster layer support plugins to create overlays that you check on or off in the layer controls.
Everything is working perfectly, except that I want the map to be blank when the page first loads, and the user can choose which overlays they want to turn on. I've tried the built in methods for the styled layer control for this but they don't work.
Through trial and error I've figured out the issue is this:
var markerClusters = L.markerClusterGroup.layerSupport().addTo(map);
//monday groups
var mFood = L.layerGroup().addTo(markerClusters);
var mDrink = L.layerGroup().addTo(markerClusters);
var mEntertainment= L.layerGroup().addTo(markerClusters);
if I don't add the markerClusterGroup to the map, the overlays do not appear until the user checks them in the layer control. However, this means the markers do not cluster. I feel like the issue could be solved with an if..then.. loop, but I'm not sure how to create this.
For example if an overlay is checked, add the markerClusters to the map. I worry though that wording it like this would mean all overlays are checked/markerClusters appear and I only want the checked overlay to appear, and be clustered if necessary.
As a general rule, your overlays will be on map as soon as you use myOverlay.addTo(map) or addTo(group) where group is itself already on map.
As you figured out, this is exactly what happens if you avoid adding your markerCluters layer support to the map. But then you have issues with your overlays as you describe.
To overcome these issue, look at layer support checkIn method: it "registers" an overlay to be clustered later on, but without adding it right away into the cluster group.
Therefore you still add the layer support group to your map, but you just check in your overlays so that they do not appear now on map, but will appear clustered when user selects them later on.
My problem is I need to have a very custom marker to show the users location and I'm using this method to create. However my marker isn't stationary and I need to redraw it once user location changes.
Currently I've tried removing the overlay from the map using OverLayName.setMap(null); and removing the dom element with javascript, but both ways I get a flicking effect of the marker being removed from the map and added, which isn't smooth.
Is there a way to move the overlay on the map without it being removed and being drawn again ? Or maybe there is a way to create a smooth redraw visualization with css ?
Cheers guys.
I'm trying to make a web page which displaying a google map with so many markers (can be up to millions of markers) that looked up from data like json.
I try to make it using "google.maps.Marker" but it went very slowly (can be hang) on map rendering when there are so many markers. Then I found that it can be solved by using WEB GL
to render those markers on map like colored points on map. For now, I can make it until that step.
But there are still some problem I got, like below:
Right now I draw markers on map using Web GL like colored points, you can see like this link http://psousa.net/demos/webgl/ (I learned from it). How to change that point shape into triangle shape or circle shape instead of point/rectangle shape like that?
When every point of markers is clicked, there must be a mouse down event that will show some informations about that point (like name, description, etc.). How to implement that mouse event on every single of marker using Web GL?
I have a map application that can be seen here:
http://chrismcaleenan.com/map/?page_id=25
Each of the Malaysian states in the application will have an InfoWindow that displays additional information. You can see an example of this by mousing over 'Kedah' either in the main data table on the right or on the state itself in the map.
The problem, as you can see, is that the map pans in order to position the InfoWindow. Is there a way to fix the map position and set the InfoWindow size or position so that it is fully displayed without panning? In the Kedah example, one could have the InfoWindow positioned directly to the right and/or use a shorter tail.
One option would be to create a custom graphic for each state, but I'd rather avoid this as I will be running into the same issue with add'l data (e.g. click Kedah to zoom - will have InfoWindows on all data points on zoom).
If you're playing around double-clicking the water will zoom back out and reset map.
Thanks!
Yes, and sometimes the pan pulls the mouse outside of the state, which causes the InfoWindow to disappear. I know that's not what you want. The Google Maps demo catalog includes a sample that I think will give you what you want for your map. It's named SmartInfoWindow. Take a look, click on some of the markers, check out how the SmartInfoWindow behaves, and see if that might help you achieve what you want. It's not perfect, but it keeps the pan at the absolute minimum.
I have a marker on a Google Map using the v3 Javascript API that is beneath another marker. When I click on the topmost marker, I would like to have the click event bubble up (down?) to the bottom-most marker with the goal of providing an optional menu for the user to choose which marker they meant to click.
Is this possible with the google.maps.event.addListener for click events?
Can I query the map for all markers that are contained by a given location, apart from hacking it myself?
As far as I know there isn't a builtin way to cycle through the markers on the click event. You can control the zIndex of each marker via the MarkerOptions which will override the default stacking based on vertical position:
All markers are displayed on the map
in order of their zIndex, with higher
values displaying in front of markers
with lower values. By default, markers
are displayed according to their
vertical position on screen, with
lower markers appearing in front of
markers further up the screen.
It think you will have to code this up yourself. I would love to hear how that goes.