Leaflet events to control other layers in a layer group - javascript

For a map that I am working on, I have several GeoJSON FeatureCollections, one for each address in my data set. In each FeatureCollection, there is a Point marker for the address, as well as several PolyLines representing routes to that address. I would like to do the following:
1) Initialize the map showing only the Address point markers.
2) On mouseover of the Address point marker, show ALL of the route polylines for that feature collection.
It seems fairly easy to attach an event to a given feature in a layer group (like trigger a popup or change marker color when the point is clicked). However, I can't find a way to trigger the polylines to show when the point marker is clicked. Is there a way to do this?

You can initialize the map with all the points and polylines, but hide the polylines setting opacity to 0 in the options.
There was a very similar question here: Make Leafletmarkers searchable and blurr out the others
You can use this example: https://yafred.github.io/leaflet-tests/20170205-newsrooms-and-articles/ but set opacity to 0

Related

hide clustered overlays from map when page loads

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.

How can I add pins to two different entity layers, and then clear the pins on a specific entity layer in Bing Maps AJAX Control, Version 7.0?

I'm using Bing Maps to show locations of stores. The store information is being populated from a dynamic JSON response. On page load, the map loads local stores with pushpins and infoboxes. When the map pans, I want to keep the pins that are already on the map where they are, and create additional pins of stores within the radius of the map's bounding box, and remove them when they leave the radius (all while keeping the original store pushpins).
Right now, I'm at the point of populating the map, and adding the new pushpins as the map pans. However, I'm kind of lost when it comes to removing the new pins, while maintaining the original ones. From my Google searches, and research, I think I'd want to create two entitiy layers for the pins, and then remove the pins on the second entity layer as the map pans around, while re-populating with new store pins.
Does this make sense? Does anyone have any idea how to create pins on two separate entity layers, and then remove the pins on one of the layers?
Thanks!
You need to add the pushpins in two different EntityCollection (they're like Shape layer), see: http://msdn.microsoft.com/en-us/library/gg427616.aspx
If you added the secondary pushpins in a separate entity collection, then you can call clear() on the specific entity collection to remove the secondary pushpins and add the new ones without removing your main pushpins.
If you need more help, let us know.

Custom InfoWindow size/pointer position in Google Maps API

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.

How to displace markers at the same position in google maps?

How can I add a listener to google maps so that When it already has marker at say position x,y then another marker when added to the map to the same location will displace both the new and old markers in the vicinity of x,y so that they dont overlap.
also for e.g. there are 2 markers close but not overlapping, we add a third marker overlapping on of them, then we displace all three to form an equilateral triangle.
I ran into this issue also, Diodeus is correct that if you want to actually move one of the markers locations you would have to keep a store of your markers and as you are getting ready to plot check if that specific lat lng has already been plotted, if so at that point you would adjust the lat lng. The problem I ran into was that then one of your markers is in an incorrect location and/or it is still not viewable depending on the degree of zoom in correlation to the displacement that you add to your lat/lng.
I would recommend looking into marker clustering personally. This seems to be the route to go in these situations if you don't want to have a marker on your map with the incorrect location and still want the end user to be able to know that their are multiple markers on the same location.
Hope this helps.

Google Maps Marker Click Event Bubbling

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.

Categories