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
Related
Leaflet JS - Is it possible query?
In a nut shell, what I am trying to do is this:
Using the latest version of Leaflet JS, I want to know if its possible to have multiple markers, in a single location, display in a single popup.
No, it's not possible.
You should pre-process your data beforehand, so that several data points with the same coordinates collapse into the same marker & popup.
In other words: iterate through your data points, and for every data point check if a marker exists in that location. If it does, add data to the marker's properties or popup; if it doesn't, create a new marker. The specific algorithm will depend on the nature of your data. You might also want to use a more complex data structure, such as r-trees, if your data set is large.
There's also the quick&dirty option of using marker clusters, disabling spiderifying, then using custom code for the event handlers of the cluster marker. That's pretty much the same algorithm defined above, only that the marker cluster algorithm takes care of locating nearby data points.
I made a similar map, and exactly as described by Ivan, I used markerCluster plugin and on cluster click action disabled the spiderfy. I then used 'custom code for the event handlers of the cluster marker' to show multiple markers' data in one single outside div.
An example can be found here .
And there is a tutorial describing exactly what you are looking for here, but also using markerCluster js.
Hope it can help others people too !
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
So I have a probably not so unique scenario. The simplest way to explain it is a google map with all 50 US states, each state will have two markers. The markers are both driven by the same lat/long value. The problem Im having is that the markers are rendering ontop of one another. I somehow need to have them render next to one another or offset so that I can see both. The problem is how do I get it to not overlap into another state.
I saw some really neat "spider" functionality where it renders one marker and then if you click on it the others fan out, but the website was in another language.
I am going to try and use the following library.
https://github.com/jawj/OverlappingMarkerSpiderfier
The problem with the above implementation is that I am using a combination of KML and google maps client-side. I dont see a way to implement that for the kml markers
The Overlapping Marker Spiderfier project on GitHub will probably accomplish what you need.
Otherwise you can play around with the Marker's icon property. The icon can accept a Symbol which has and anchor that can be shifted from the default location (0,0).
Symbol documentation: https://developers.google.com/maps/documentation/javascript/reference#Symbol
I am working on openlayers application. One of the task that I am going to do is when user clicks on the map or any country, then It should select that map and outline that country by drawing a border in vector form. Is this possible? If yes then please give me some code links for examples.
hi yes this is quite easily done. There are many ways to do so,
You will need to have a web service which will return the geojson (vector) boundary based on lat long passed.
on clinet side you will need to add a vector layer on top of your base map.
Assign a click handler on map (use a tool) and then on the click of the tool, call the web service passing the latlon , eventually when you get back the response from your web service inject the geojson to the vector layer.
Also look here https://gis.stackexchange.com/questions/35395/how-to-highlight-a-selected-country
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.