map.on('click', onClick) is not fired after zoomBox - javascript

I'm using leaflet along with leaflet.wms plugin to retrieve some layers from a WMS server and show them to the user. Among other things, the user can click on the map to see information related to a specific region (coordinates that represent that clicked point).
This is working fine as the following:
create map
add map.on('click', onClick) handler
create layer (L.wms.overlay)
add layer into the map
user clicks
get information from the clicked point (getFeatureInfo)
but when the user zooms in the map by using zoomBox, the click event does NOT fire!
Notice that leaflet.wsm plugin only works with leaflet 0.8-dev. So, I'm using this leaflet version.
I saw that in this demo (from leaflet.wms) this problem also happens. Furthermore, it doesn't happen on 0.7.2 (demo here) leaflet version.
Is this a bug? Am I doing something wrong?

Related

Locating markers on leaflet

I dont even know if I'm asking this question correctly. I'm using the leaflet map to display some places. You check can see it live here. Now, I want to add a link next to my place titles so that users would locate to the place on the map. I'd appreciate it if anyone could point me to the right direction.
One way to have the map go to a specific location is the Leaflet "flyTo" map function. For example, if your Leaflet map is named "myMap", and you wanted the user to be sent to the University of Houston at a specific zoom level, then:
myMap.flyTo([29.766083, -95.358810], 10, {
animate: true,
});
The "flyTo" function's parameters are: (latlng, zoom, options).
Link to Leaflet flyTo documentation.
There are also "panTo" and "flyToBounds" methods that may be useful to you as well.
From what I can see in your sample page, I would add event listeners to each of your university links in your left panel. Then have a function that uses the "flyTo" method to send the user to that specific University's location.

how to lock a draggable route with google Maps?

I've got google map on my webapp working with the JavaScript API V3. I give my users the ability to create some routes with this features:
the user can create a route.
the user can add waypoints doing click on the map.
the use can modify any waypoint and the markers origin/destination dragging the marker on the map.
the user can save the route.
The problem:
If the user click and dragging some part of the route without use any waypoint, the route change but I can't save it. Because I save the markers origin/destination and the waypoints.
there is any way to lock the route?
Here you can see an example in API documentation
Below I leave an image that you can see how the user drag the black and white circle and change the route (this is that I try to lock).
You need to tap into direction_changed event listener and puckup route points and see which ones you need and which ones you dont.
The other solution is to use non draggable route code and only allow user to click and create a point. Then calculate dustance when you have more than 1 points. Allow user to drag marker only and update route and total distance on drop marker.
If you can create a jsfiddle of what you have done so far it would help us look into it and give you a more accurate answer with working example.
Encountered the same problem today and found out that there's a setting for it. You just need to set the clickable property of polylineOptions to false.
this.directionsRenderer=new google.maps.DirectionsRenderer({draggable:!0,map,panel:this.elements.directionsBody,polylineOptions:{clickable:!1,strokeColor:"#4BAFF8"}})
DirectionsRenderer:
https://developers.google.com/maps/documentation/javascript/reference/directions#DirectionsRendererOptions.polylineOptions
PolylineOptions: https://developers.google.com/maps/documentation/javascript/reference/polygon#PolylineOptions

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

Google Maps "cropping"

Okay so this may sound like a crazy question, but I have a Google Map (API v3) on a website, and at times I have a large number of markers on the map. Are there any plugins that exist, or how difficult would it be to write one, (starter code?) that would allow me to let the user say hit contrl + left mouse click and hold and enable them to "select" a portion of the map. After which when they release the left mouse button, I could fire an off a function that could update my google map to reset the zoom and only include the markers within the users selection area.
I'm really really wanting to try this, does anyone have any pointers or ideas that could help me?
UPDATE
Okay, is it even possible? :)
I believe it is possible however I think there is a better way to solve your problem which is to use clustering.
For the cropping you could:
Use event addDomListener to listen for 'mousedown' on the map. Check the event object passed to the handler to see if the ctrl key is pressed (e.ctrlKey).
Convert the x y coordinates for the mouse click into a lat lng (use fromPointToLatLng on the map projection). Create a rectangle at the position.
Add a addDomListener mousemove handler on the map. In the handler resize the rectangle using setBounds.
Add a addDomListener mouseup handler on the map. In the handler grab the bounds of the rectangle, remove the rectangle and call map.fitBounds.
I haven't tried the above but after all that typing I would recommend trying out clustering first to see if it satisfies your needs.

How to make a Google mashup, allowing multiple users to pinpoint multiple locations on a map?

I need some inputs on how to show a map (public to all) and allow any user (whose email I should be able to track) to click several points on the map and make appropriate markers (it should just be visible as a point, nothing special). Other users SHOULD see those points as well. I should be able to access data on the backend as to who selected what point.
Any code pointers?
Have a look at this example in the google maps API here to get the basic feel of how to play with markers.
Basically I would bind a mouse click event handler to the gmap, then use this to create a new marker at that position and add it to the map using map.addOverlay(marker).
You will then need some sort of server side script that you can pass the marker information to via an ajax call.

Categories