hide clustered overlays from map when page loads - javascript

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.

Related

Leaflet events to control other layers in a layer group

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

Dynamically create markers in OpenLayers 3

I'm developing an application that loads lots of markers in OpenLayers 3.
However, I would like to dynamically display and load markers while user is panning at a certain zoom level.
Could someone provide me an example, or directions to do that?
For instance, I would like to first create an example that drops a marker where user has clicked on the map.
So, with this information, I will be able to handle the rest and post my solution here.
I've managed to create a way for setting this up:
http://weebah.com/weebah_examples/click_to_create.html

OpenLayers: destroyed features reappear after zooming in or out

I have an OpenLayers + Bing mapping application that shows hazardous waste sites. A user can click a link to toggle a site's subsites on the map.
When I toggle the subsites off (which are points on a Vector layer) by calling destroyFeatures() on the layer, they disappear as expected. However, if I zoom in or out on the map, certain of the subsites reappear. This doesn't happen when moving the map, just zooming.
The ones that mysteriously reappear are coincident sites, i.e. two sites with exact same coordinates. Both get destroyed, and both reappear.
Why would these get destroyed from the layer, then reappear when zooming?
(OpenLayers version is 2.11)
Try this, it worked for me
layer.removeAllFeatures();
layer.destroyFeatures();//optional
layer.addFeatures([]);
Keep in mind that destroyFeatures() changes index of objects in vector. If you use indexes in your code, this may cause problems.
Are you sure you send ALL features as a parameter to destroyFeatures() method? An easier way to remove everything is just to call removeAllFeatures() method. If you want to hide and show features when user toggles subsite then it's even better to use show() and hide() methods on vector layer.

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.

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