I need to select an rectangular area on a map and identify markers that fall within that area.
Ideally, rectangle should be draggable and resizeable.
I am not too particular about the mapping and Google or Mapbox or Leaflet would all work just fine.
I found location-filter for Leaflet (https://github.com/kajic/leaflet-locationfilter/), which does seem to do the job. However, I couldn't find simple example code that shows how to use it. It has been used on tripcode.com but it is hard to make anything out of what is going on.
Does anyone have any experience with location-filter? If so, can you please point me to simple example of how to use it?
Are there similar examples for other mapping services particularly google maps?
Thanks.
For my bbox page I've snatched two files: SimpleShape, Rectangle from Leaflet.draw plugin and fixed them for better usability. The code for the rectangle is simple:
var rect = L.rectangle([[59.9, 29.9], [60.1, 30.1]]);
map.addLayer(rect);
rect.editing.enable();
rect.on('edit', function() { console.log(rect.getBounds().getBBoxString()); });
For advanced things like centering the rectangle on screen, see source code for the page.
When you are drawing the markers onto the map you will need to add them to some kind of an array which will contain the lat/lng pair of each marker.
You can use Leaflet.draw to draw the rectangle and modify it to return top left and bottom right coordinates on mouse up. On mouse up you can go over the entire list and which elements fit inside that bounding box.
This solution is just an example, there are many ways you can do this.
Related
The question posted below
how to rotate a google map in a web application
can be use to rotate the map by rotating the div which contains the map
but if i do scroll or drag on the map the map is working in unpredictably way is there a way to retain those functionalities as it is
Note: i am rotating the map using div because the aerial tiles are not available at that location.
Please say whether this can be done with some other map api are how to go about it in google map API
It is difficult to answer with certainty unless you post a more complete answer, but I believe your issue is with the corrodinate system.
You are rotating the display of the map, but the x,y coordinates of your mouse are not. When you drag the mouse, the javascript is capturing the mouse movement relative to the screen and then you are rotating the output by 45 degrees. In other words, google maps has no idea that you have rotated it. It would be the same output if you just turned your monitor 90degrees, the mouse is still going to send the same x,y coordinates.
In order to do what I think you want you would need to take over the code handling the movement or accomplish it another way. You will notice that the dragging is disabled on the example you referenced.
This might be a place to start looking for getting the center of the map on mouse events:
https://developers.google.com/maps/documentation/javascript/3.exp/reference#MouseEvent
You might be able to get the current coordinates and "transform" the new coordiantes by looking at this example of getting pixels:
https://developers.google.com/maps/documentation/javascript/examples/map-coordinates
Here is a page explaining some things about transforming coordinate systems:
http://www.continuummechanics.org/cm/coordxforms.html
If this is something that you really have to do, it can probably be done, but it is likely a lot more trouble to get right than it is worth for an average map embed. It might also add a lot of processing that will make the interaction pretty laggy.
After saying all that, I'd still love to see an example of this working so if you do make it work please post some code.
I have a google map as page background and a few div layers above it. When I place markers on the map I would like to be placed in the visible part of the map, not below the divs. In other words.. I need to add padding to the map so the functions like fitBounds(), setCenter() and etc. to position the markers in the visible part of the map.
There are many examples around but none of them looks quite well or it is working at all. Most of them are similar to:
I have tried to calculate the bounds and to extend bounds with some padding but it is a two step process. At first.. the map is positioned at original bounds to get the correct projection and then it is animated to the extended bounds. It doesnt look professional, we have two fitBounds() and the second one is animated. http://jsfiddle.net/seddass/CuKTK/
I have tried to add custom control to my map but it seems that the custom controls doesnt add padding to the map as suggested on many places. http://jsfiddle.net/seddass/wtT3t/1/
Can anyone can provide a working example or a better solution for padding to for Google Map v3? Thanks in advance!
I am trying achieve a map like the above image using google map. I made the map grayscale by giving saturation to -100 in StyledMapType object and drawn a radius around the marker using Circle object. Now the whole map is grayscle as i cannot set another saturation level inside the circle. Is there any way to achieve this ?
Another idea is to create second map, style it in another way via StyledMapType, make it absolutely positioned, and put it in front of first grayscaled map.
You can make it look round using -webkit-mask like described here
You should also synchronize events between maps, so that they would coincide, i.e. centered to the same position and always have same zoom level.
You need also to create some kind of blocker to avoid recursive calls
var block = false;
google.maps.event.addListener (thismap, 'center_changed', function(event) {
if (block) return;
block = true;
othermap.setCenter(thisMap.getCenter());
block=false;
});
The same should be done for 'center_changed' (to control maps centering) and for 'zoom_changed' (control maps zoom), for both maps
Here I've set up an example
If you will need to create more than one map that way, you'll need to do more work to make them stick to necessary points
As far as I am aware there is no way to accomplish this directly within the API. I have had to achieve a similar effect in the past and the way that I went about it was to create a 'donut' rather than a circle.
Effectively the idea is to create a large shape which excludes a circular area at it's center. This way you can set the opacity on the polygon fairly low in order to highlight the 'area of interest' in this case the central circle.
This is perhaps a good starting point: http://www.geocodezip.com/v3_polygon_example_donut.html
Though obviously in your case your going to want to alter the colors. Also be aware that the size is fixed so unless you limit the map bounds users will be able to zoom out far enough to see the edges (thus ruining the illusion), and polygons distort towards the poles (pesky spherical earth).
Hope this helps.
Is it possible to create custom layers/overlays in google maps?
As an example, would it be possible to have one layer with polygons, another with circles, and a third with markers? and then hide/show these layers individually?
I tried looking at the documentation, but the layers seems to only be a fixed set of predefined layers. And overlays seems to only support image overlays.
Any help on this is appreciated.
I'm not sure if there exists a better way to do this, but I've found a workaround to a similar problem. My example utilizes markers and polylines, but it should be easy to extend the functionality to circles and polygons too.
Link to JSFiddle
Basically it works like this:
Initialize the map.
User selects an option what he would like to see on the map.
Click triggers a method (see HTML part of the fiddle) in the map object that first clears the map and then pushes new overlays on map.
The data that is currently shown on map is stored in arrays, and the map clearing method simply goes through these arrays and checks if there exists any content on map, and removes them if does.
Hope this helps. Cheers!
I know this will be a complex solution. I would appreciate it if you could push me in the right direction.
Please have a look at http://www.rightmove.co.uk/draw-a-search.html. I am interested in finding out how this is possible. what steps do I have to take to achieve this?
There's quite a few things going on here.
You need to have event listeners for when the user clicks on the map.
You need to place markers where they click.
You need to draw two types of polylines; the static type connecting two markers, and the dynamic dotted line as they move the cursor or drag a marker.
When you've closed up the polygon, you need to make your search only return properties inside that shape (although they're actually doing it within X miles radius from that shape).
They're also inserting markers half-way along the lines that you can drag - this will require the geographical library, using the interpolate function.