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.
Related
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.
Currently, on a web application I am working on, one of our clients asked for a feature I am not quite sure how to implement. We have a Google Map on the main page and our client wants to be able to draw on that map for presentations. I have seen two examples of what our client wants. The first example is at http://www.scribblemaps.com/ where I can draw lines, shapes, and in the Pro version "block arrows" which is what our client is asking for. However, this application only allows you to create the map on their site and then save it as a JPEG. Our client wants to do this within our application. Scribble Maps accomplishes this by using Adobe Flash and I'm guessing they place a Google Map in the background which I am not sure would be the best route for us.
I also found this blog http://googlegeodevelopers.blogspot.com/2011/11/make-your-map-interactive-with-shape.html describing User Editable Shapes. On this example I am able to create shapes and Adjust the size post creation. I was wondering if it were possible to create a custom polygon like a block arrow as another button on the map where the user could add that shape to the map and edit the size? I realize the user could use the custom polygon button but I know our client won't want to draw their own arrow each time.
* EDIT *
So that I am clear I am not asking anyone to write any code for me but point in the direction of information. I want to know if it is possible to pre-create polygon shapes like "block arrows" so that our client can click and drag to draw this arrow on the map like circles or rectangles using just the Google Maps API.
I had vary similar tasks to perform in my project.
You can let them draw shapes on the map. In my project I have let he user draw there shape by clicking on map and adding a marker on each click and when he clicks on the existing marker all the makers form a closed polygon. Then you can save it to database. As far as that editing part you mentioned above, you can set editable property of polygon to true to let them play with polygon.
Hope this helps you in your project.
Happy Coding !! Good Luck
Maybe a late answer but I think this one would be useful for you.
https://developers.google.com/maps/documentation/javascript/examples/user-editable-shapes
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!
im totally new to this, and I need some help.
I need to create an aviation range map. Look at the below link, and in the menu to the left theres a "Range maps".
I started with the Google Maps API Javascript V3, I thought it could be a good base to get rid of Flash.
Now I need some pointers for how I can either add an object to the map or just click in the map and that brings up a circle around the pointer with range for how far the aircraft can go.
I sure hope you understand, and can give me some pointers for how to start. Every tip is appreciated!
http://www.cessna.com/citation/citation-cj4/citation-cj4-performance.html
Sounds like you want a Circle overlay, which is pretty easy to make. The docs have easy examples to follow.
You'll also want an onclick event for each overlay and for the map itself. That way whenever someone clicks on the map or on an overlay, it creates your circle. Check out the events documentation.
Is there any tool that can help me with getting the coordinates for a specific area/polygon?
I usually use Google Earth.
Draw a polygon, then move the mouse over and right click > copy.
Then you can paste it in the notepad and you will find the coordinates there (remeber the format (long, lat,n) the reverse of Google Maps format.
You can also use online tools to format the information or remove parts.
http://www.earthpoint.us/Shapes.aspx
So the idea is to have a map, draw a polygon on it (I assume by placing the vertexes) and then getting the coordinates of the vertexes?
You can make markers draggable when you create then. You can also get the lat/lng position of the markers when certain events fire: the 'dragend' event, for instance.
With these tools, you have the basics of your requirements here. Make a button that places vertexes on the map - just use a marker with custom graphics - and let the user drag the vertex to whatever position they need. Record the new position of the vertex whenever the dragend event fires. Draw lines on the map between the markers, to show to the user the area selected. Have a button to 'complete' the shape, linking the last vertex up with the first vertex.
There may be some existing code to do this, but I am not aware of it. However, it should be possible to throw something together with a bit of work.