http://www.amcharts.com/demos/selecting-multiple-areas-map/
Please see the above link map i want to make something like this could anyone please share the details of how i could make it moreover i have to make for my particular state how i could do all this.
I have tried few things with google fusion tables but didnt able to get this layout and the js file used in this is different how i can make my own
Thanks
There are certain steps that you need to follow to make this feature work:
First you have to define the borders of all the US states. This can be obtained by passing the lat/lng values of the borders. Please refer to this JS file which has the Lat/Lng of US states along the border. Draw Polygon using code.
var statesobj = {"AK": [new google.maps.LatLng(70.0187, -141.0205),
new google.maps.LatLng(70.1292, -141.7291),
new google.maps.LatLng(70.4515, -144.8163)]}
So, it's easy now. Loop on these lat/longs. And you can draw the polygons on every state of US.
Secondly, Consider all the regions/states drawn on the Google Maps as polygon. Then you have to pass to the polygon object a new PolygonOptions by calling this method:
setOptions(options:PolygonOptions).
You can see the different options here: http://code.google.com/apis/maps/documentation/javascript/reference.html#PolygonOptions
In this PolygonOptions you can then specify the color you want the Polygon to be filled with along with all the other stuff you could want to change.
You can also set the click to zoom in. That can be done using
map.setCenter(Polygon.getPosition()); //Polygon is Polygon to center on
map.setZoom(map.getZoom() + 1);
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.
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.
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.
I'm creating Google Static Maps with a path between markers and have come across certain coordinate combinations that break the path.
The path breaks in this example (markers # Beijing, SF, NY, Azores, Rome):
http://maps.google.com/maps/api/staticmap?path=color:0xff0000cc|weight:3|39.904214,116.407413|37.77493,-122.419416|40.714353,-74.005973|38.721642,-27.220577|41.89052,12.494249&markers=39.904214,116.407413|37.77493,-122.419416|40.714353,-74.005973|38.721642,-27.220577|41.89052,12.494249&maptype=terrain&sensor=false&size=640x404
And works in this example (marker # Rome removed)
http://maps.google.com/maps/api/staticmap?path=color:0xff0000cc|weight:3|39.904214,116.407413|37.77493,-122.419416|40.714353,-74.005973|38.721642,-27.220577&markers=39.904214,116.407413|37.77493,-122.419416|40.714353,-74.005973|38.721642,-27.220577&maptype=terrain&sensor=false&size=640x404
The cause is not crossing over the Greenwich Meridian as I initially thought. It breaks even if I add a marker before that, seemingly any a point East of the automatically calculated centerpoint of the map...but only when the path starts on the other side of -180 longitude.
To prove that, you can see that the Beijing, SF, NY, Azores, Rome path displays correctly when I set the map centerpoint to -170,35
http://maps.google.com/maps/api/staticmap?path=color:0xff0000cc|weight:3|39.904214,116.407413|37.77493,-122.419416|40.714353,-74.005973|38.721642,-27.220577|41.89052,12.494249&markers=39.904214,116.407413|37.77493,-122.419416|40.714353,-74.005973|38.721642,-27.220577|41.89052,12.494249&maptype=terrain&sensor=false&size=640x404¢er=-170,35
Unfortunately, I can't programmatically set center like this because I never know the collection of points I'm going to get, and it would be next to impossible to detect that the passed points would cause a line break.
Any ideas?
First: you can calculate the center even if you don't know the collection of points (locations) at compile time: at runtime you know all the points (otherwise it would be not possible to insert the coordinates into the URL), therefore you can easily iterate over all the points and compute the center. You can computing the average of all coordinates and you get the geometric center (also called centroid): this is the easier way. Another way to do is to check the most distant pair of locations (for both, latitude and longitude) and then set the middle point as center: this requires slightly more coding (for instance to compute the longitude distance you need to take into account the you have to compute the distance in two directions, since it is possible to go 'around the world) and it has an higher complexity.
I don't go deeper in this topic because, even if you compute correctly the center of your points, this does NOT resolve the problem, and moreover the center provided automatically by the Google static map API is always correct: again the center is related to the problem, but it is not the (couse of the) problem.
An aspect that is trivial but important to keep in mind: Google static map draws a path between two locations always by considering the shortest path, i.e. by drawing the shortest straight line.
Therefore if you are in a situation where your path has to go from a location A to a location B, and the shortest path between A and B goes 'around the world' (or better, it goes out from one side of the image), then the path appears 'borken' as in maps that you have shown. In practice A and B are near the left and right margins of the map, and the map can not be centered in some point along the shortest path between A and B because of the others point of the path. And this is what happen when you remove 'Rome': without Rome the map can be centered in a way that the path is not borken.
Formally, I think that the problem appears (i.e. the path is broken), when the projection of the path on the equator is longer than 360 degree of longitudes, and the path always goes in the same direction (i.e. always west to east or always east to west).
Google static map in this situation simply adds another world map next to the first one: if you set the zoom to the minimum, you can see up to three world maps. This is really impractical for several reasons:
you can not zoom out infinitely;
if you want also insert markers into the map they will be drawn only on the 'main' map;
potentially you can have a path that goes around the world (passing in sequence from America, Europe, Asia, and America again and so on...) many times, and it would be really terrible to have so many little maps one after each other;
I googled a lot about this problem, and I didn't find any solution, there is a bug open on the bug tracker, but it is unsolved.
In my opinion the 'right' way to do is simply the following: at most one map and if a path has to goes out from one margin of the map/image, then it should appear on the opposite margin and continues to the destination, drawn on the same map.
So I found a first workaround:
you draw your path, and with the same style (line's color, etc) you also draw the path in a reversed way (Google static map allows to draws multiple paths in the same map), i.e. path=A|B|C&path=C|B|A and this will solve the problem in many situations (i.e. the path exits from one side of the image and enters from the other). Unfortunately this not works always: if you have a path that cross the image margin two consecutive times, then you lose a portion of your path
To solve this problem I found a second workaround:
- not draw simply the path and its reverse, but draw a different path for every pair of locations of the path (and reversed), i.e. for a path A->B->C then: path:A|B,path=B|C,path=C|B,path=B|A and this works always
The drawback is that in this way the URL becomes very long and the limit of 2048 characters for URLs is easily reached.
The best solution would be to compute manually the center, check manually where the path will cross the margin, and only for this portion of the path draw an additional path going between the two locations at the margin (and maybe also the reverse), but I do not think it really worth, although I do not think Google ever will solve this problem.