I'm trying to show website usage statistics in a more graspable way. I'd like to use google maps API to have dots flash in random areas of a country every time someone in that country logs in.
My question is two part.
Firstly, is there a built in way to create a dot on google maps without using overlays, or with an overlay that will delete itself after a given period of time (say 25ms)?
Second, is there a way to generate random coordinates that will be used to generate the dot? The difficulty that I'm having is that I need to make sure it stays within the country that the user logged in and it needs to be in a plausible location. It'll be pretty obvious that it's a made up location if it continually shows usage in the water.
I could create a file with millions of coordinates for each country and have it randomly draw from that file, but I'm trying to avoid that.
Thanks in advance
interesting use case:)
"is there a built in way to create a dot on google maps without using overlays, or with an overlay that will delete itself after a given period of time (say 25ms)?"
I recommend just creating the overlay and using jquery (or whatever framework you use) to do a nice animate to slowly hide the overlay. Once hidden you can remove it ($(".theelementselector').remove())
As to your second question:
Lot's of ways to go about this, one of the best imho would be:
get your hands on polygon data of countries (tip: www.weogeo.com for free downloads on request)
given a boundingbox of the country
generate a random point in the bounding box (for instance with the so called "monte carlo method.")
check if it's in the polygon as well (point polygon intersect. Look it up on SO for example)
hth
Related
Is it possible to make a Custom shape (Using Mouse) on the Google Map using Gmap library in C# and then save it into the database and on the client request draw the stored shape on Google Map again? Is there any possibility for doing such operation in any other library or in Gmap (I am not expecting the code. Just an overview of doing it.)?
Oh Boy....this is absolutely doable! And I do it on day to day basis! Let me share how I achieve it. Another thing to keep in mind that this works for Google Maps and Bing Maps.
First, you have to represent Maps as not just coordinates but as collection of small squares. Now what do I mean by that?!
Have a look at this following picture. It's image of Czech Republic on google maps.
Now Czech Republic a.k.a Czechia, on google maps can be seen as collection of smaller square images or grids. You need to understand this concept very well in order to make this idea work. Now take a look at the following image where it shows how the image of Czechia on Google Maps can be visualised as collection of small square boxes or grid. These small square boxes hold images of parts of Czechia.
If you want to Zoom into a co-ordinate Xm,Ym (Easting:Xm, Northing:Ym), which is a place in Czechia and the name of that place is "Hermanuv Mestec" (as shown in the above picture) then you need to choose the bounding small box with co-ordinates (X1,Y1),(X1,Y2),(X2,Y1)&(X2,Y2), and fetch the underlying images in that box. This feature to fetch underlying images within that bounding box is actually Zooming In. So when you Zoom In or in other words fetch the underlying images within that bounding box, you get something as the following image:
Now, I hope you got the underlying concept of how Zoom In or Zoom Out (reverse process) and mapping co-ordinate system works if you want to achieve what you want to achieve because this concept is very important to grasp before you proceed.
You need to write a program which can do this transformation. And as of your question how to achieve this as follows:
Step 1: Use a Panel (Control) on Windows Form or WPF or asp.net application, which you are building.
Step 2: Use GMap Library in C# to fetch the image within a bounding box as mentioned above and populate/draw that image on the Panel.
Step 3: Have a function that tracks mouse events on the panel. This function/method will track the X,Y position of mouse move event on the panel and use Panel Drawing tools to draw objects on the panel based on this.
Step 4: Write another program to transform these mouse X,Y positions on the panel to co-ordidnates on the map. This piece/part of the program is important because this is what enables you to translate your representation of small square image breakdowns of maps into panel drawable objects, so that you can draw them again and again in future if saved properly in the database.
Step 5: When you draw an abject on the panel you track the X,Y mouse bounds on the panel and transform those points into co-rodinates using your custom program and then you save the co-ordinates in the database table.
Thats it! And in case you need to draw the same object saved in the database, you first need to fetch/draw the google maps image on the panel again, then need to fetch that shape of the object from the database by fetching the co-ordinates of that object saved in the database table, use your translation program to convert those co-ordinates into panel drawable points and draw the object back on the same panel.
Now, you can write this translation program (Easting Northing co-ordinates to Drawing Panel co-ordinates) yourself, which might take good few months or at least some time. Or you can buy customised program specialised to achieve this exact same function for a good amount of price.
Hope this helps.
You can also achieve this with Google Maps drawing object with JavaScript as mentioned in another answer but the issue is with the translation and saving the coordinates in the database. It's much faster and responsive in this aforementioned method. Anyway, this is how I do this, so kind of personal opinion.
Technologies required for the aforementioned technique is as follows:
Google Map Library/Bing Map Library (whichever you choose)
C# with .Net Framework 3.5 or above (.net framework lesser than this is also fine but may require bit more lines of code to achieve some functionality if you want to achieve complexity in this)
SQL Server Management Studio or anything equivalent depending on
the type of database and query you are planning to use.
I think you want to make a map overlay, and you can use Goggle Drawing Tools in conjunction with your map. See: https://developers.google.com/maps/documentation/javascript/examples/drawing-tools
This will create the overlay. Presumable you could write javascript code that would save the coordinates and attributes of the overlay to a hidden field once you hit a "Save button" . Then after form submission you could save this info to a database using standard techniques, and then when rendering the map the next time, insert the overlay info into the javascript output by your page,
I am not going to spend the time making this for you, but this is the approach I would take.
steps:
1) Get the geometry/shape out from google api.
2) Send/post to server using some popular exchange format, GeoJSON or WKT
3) Prepare a server's service/asp/web service to accept the request and translate/validate those geometries into Oracle SDO_Geometry user define type/struct.
4) Use some C# oracle library,
a) create Connection,
b) create command with parameter,
c) Initial an OracleObject, assign all the required properties like SDO_GTYPE, SDO_SRID.
d) Assign the OracleObject to the the named parameter in the command.
e) Execute the command and commit.
Hope this help.
I have a google map with several markers/labels placed very very close to eachother.
So close, that if the zoom-level is at a certain level all the labels are overlapping.
In order to be able to read all the labels when the map loads and when the zoom-level changes, I want to place the marker with a certain offset of the actually point with a line drawn to it.
I have tried to implement the "OverlappingMarkerSpiderfier" by George MacKerron, but according to the author himself, it can't be done using his code (due to the fact that his code is tied to an "onClick" listener and can't be executed during loading of the map or change of zoom-level)
I hope the above description is understandable dispite the fact that english is not my native language.
I am using Google Maps in a project and I want to display only a country map in my map window i.e. I want only the US to show on my map not Canda and Mexico and so on, cutting away the superflous information for the app I am building.
I found some stuff where you can restrict the area covered with some javascript however this still gives me a lot of extra map area as geographic areas usually do not conform to squares.
Further on I am limited by time, $, php and javascript so I can't really do some fancy custom solution that involves lots of work i.e. the usual setting.
Check out one of Mike Williams' great GMaps tutorials: in there, he shows how to limit zoom and pan in your map.
If you want some areas to be non-visible, try this one: I think that's closest to what you want (the example actually does the same thing you want, but it seems to be geared towards Canadians ;)).
A continuation of my previous question: How to change the layering of KML and Tile Overlays in Google Maps?
I am currently rewriting some of the code regarding the buttons which enable and disable tile overlays using arrays. In doing so, I'm trying to combine all of the button's individual functions into a single function, but since I have two methods of rendering the overlays, I was hoping to try and simply focus on only one method. The first uses "overlayMapTypes":
map.overlayMapTypes.insertAt(0, beloitMapType);
The second, using a script provided in my previous question:
this.getPanes().overlayShadow.appendChild(this.settings.div_);
The former method is my original approach; however, since I use polygons on the Satellite view I needed a way to place icon/name overlays above the colored polygons. To achieve this, I sought something akin to the latter method where certain overlays could be placed onto a pane higher than the polygons and thus appear above them.
However, in the time between my previous question and now, as well as through some of my own research, I've come to realize that the latter method, rather than placing the tiles into their places, estimates the location of the tile and places it as an image overlay. As a result, a part of my accessibility layer which colors in inaccessible paths had been misaligned by a pixel or two, or my building name overlay currently has names on the border of two tiles which have a sharp line through them as those two tiles overlap slightly. In addition, these two issues come and go each time the map is loaded with each tile being placed on the map with a variance of 1-2 pixels in any direction.
Thus, I would very much prefer to use the former method with overlayMapTypes, which is more reliable and accurate, on all of the overlays, but I also need a way to bring some of these overlays higher than the "overlayLayer" pane and above the polygons. Is this possible and, if so, how could it be done?
Addition: I have an additional need to try and find a method to achieve the reassignment of panes with the overlayMapType method: the script I'm using to achieve this doesn't appear to work in IE7/8. I'm going to investigate this angle myself, but I'd still prefer to drop the script entirely if possible.
Well, I've hit upon a possible solution and, for the sake of sharing it, allow me to explain:
Polygons do not necessarily need to be visible to still have click and hover events.
Since the polygons are used to color the buildings and poi in Satellite view, such a visual component could easily be done by an overlay.
Thus, a possible solution is to have all polygons invisible and simply use them for click and hover events. Likewise, a second overlay, or a modification of an existing one, would replace the polygon's original visual component. Since this visual component is now an overlay like everything else, it can be easily layered with any other overlay using the "MapType" method.
(This however doesn't answer the question; namely, can tile overlays and polygons be layered only with the MapType method? I would still like to know that, but in the event that there is no answer, this hopefully is a possible alternative.)
Ever noticed that when you go to maps.google.com and do a search (say, car wash), it renders a lot of results (represented by small circles) and a few prominent ones (seen as regular-size pins)?
Notice how quickly it does this?
From what I can tell from analyzing this in Firebug, much of this is generated on the server and sent to the client as a static image.
However, it's still dynamic. You can still zoom in and out, or click on a result and see a dynamic InfoWindow rendered.
Google have made the map quick and smooth using static images, while still making it flexible.
Is there a way to do this kind of 'pre-loading' with my own Google Map (implemented with the Google Maps API)?
The technology that maps.google.com uses is similar to that used in a GLayer. The server dynamically builds tiles and "hotspot" info. The GLayer tiles are also constructed dynamically (and possibly cached) even though the underlying data is fairly static. From the client side, the searched dots technology is identical to the Wikipedia or Panoramio GLayer. The only new trick is that the dot information is generated dynamically on Google's big fast servers.
The API does not (yet) provide any tools for creating custom GLayers. If you want to do the same sort of thing yourself, using your own database of locations, there are three steps that you need to code:
Create your own custom tileserver
which searches your database for
items in the tile area and uses a
graphics library like gd or
imagemagic to place dots on the
tile. Use those tiles to create a
GTileLayerOverlay on the client.
When the user clicks on the map,
send the location of that click to a
second server. That server should
check your database and return the
infowindow text for the dot at that
location, if any. Returning all the infowindow contents from all the dots imaged by the tileserver would be unacceptably slow, so you have to fetch them one by one, as needed.
Changing the cursor when the mouse
is over a dot is more tricky. What Google
do is return a list of hotspot
coordinates for all the dots on each
tile. Whenever the mouse moves, the
API determines which tile the
pointer is over and uses a quadtree
algorithm to see if the pointer is
over a hotspot, and change the
cursor if necessary. If you only
have a modest number of hotspots per
tile, then a linear search would
probably be acceptably fast. If you might have thousands of dots per tile, then you'll probably need to write your own quadtree algorithm. The Google quadtree code is not exposed, so you can't use it.
Here's a page where somebody has done all that. In this case the hotspots are calculated as circles, by comparing the distance from the centre point, even though the dots are square. On maps.google.com the hotspots are calculated as rectangles, by using GBounds.containsPoint(), even though the dots are round.
I'm doing something similar - but instead using a tile layer, I just send server-clustered markers to the browser whenever the view changes. If your data is static, you can pre-cluster your markers and it would be incredibly fast with tens of thousands of markers.
Our site can't use pre-clustering because the markers can be searched and filtered, but it's still pretty fast up to about 20,000 markers. Still working on it...