I have the following kml polygon:
<Polygon><outerBoundaryIs><LinearRing><coordinates>20.002,80.002 20,80.002 20,80.004 20.006,80.004 20.006,80.001 20.002,80.001 20.002,80.002 20.004,80.002 20.004,80.003 20.002,80.003 </coordinates></LinearRing></outerBoundaryIs></Polygon>
If I view this polygon in a cell in my fusion table, in the Table View of Google Fusion Maps, it looks like this:
However, in the actual google map, in the Map View, it looks like this:
The duplicate point has been rather annoyingly dropped. I want what's shown in the first diagram above, but how should I change my polygon to get the same shape in google maps?
I also tried with an inner bound, but no luck there either:
<Polygon><outerBoundaryIs><LinearRing><coordinates>20.002,80.002 20,80.002 20,80.004 20.006,80.004 20.006,80.001 20.002,80.001 20.002,80.002 20.004,80.002 20.004,80.003 20.002,80.003 </coordinates></LinearRing></outerBoundaryIs></Polygon>
Thanks,
Barry
Self-intersecting polygons require quite a bit of extra power to draw correctly, so they are not widely supported in all 2d rendering APIs / implementations.
I suggest you work around the problem by splitting your polygon into two pieces.
Ok, I think I have the answer. I can add a tiny offset (jitter) to one of the two duplicate points in the polygon. However I must add the jitter in the correct direction otherwise the polygon becomes invalid and google no longer draws it. Looking at the previous points in the polygon loop, I should be able to establish in which direction I need to apply the jitter in.
<Polygon><outerBoundaryIs><LinearRing><coordinates>20.002,80.002 20,80.002 20,80.004 20.006,80.004 20.006,80.001 20.002,80.001 20.002000001,80.002 20.004,80.002 20.004,80.003 20.002,80.003 </coordinates></LinearRing></outerBoundaryIs></Polygon>
Related
The question is pretty descriptive.
I am working on a website that provides locations for filming.
All the data in the site is currently stored in a MySQL database including geocode data for google maps.
I need to show polygon areas for the different london boroughs that has locations.
I have all the data as kml files, idealy i would like to store this in the MySQL database.
I have had success using fusion tables to display this data, but it seems silly to me to have to have this data duplicated on google just to use a fusion map layer, can i simply use a kml layer to render this data rather than having to create a fusion table and rendering it from that?
If so, is there a resource someone could point me to for more information?
UPDATE:
Thank you for the responses so far, i thought i would update the question with a little more info .
I eventually want to have all the areas displayed at the same time on my map and then when an area is clicked on ideally it would take you to another page on the website showing locations for that specific area.
I had initially tried using KML layers but i was getting errors saying my KML was invalid.
The KML was initially stored in a field in my database table, i think probably the errors were due to me not understanding exactly how google read in the KML data.
Using polygons would be far simpler to implement as i can get this data via JSON and then render the polygons from that.
I know now its not possible to have info windows with polygons, but i would just prefer to jump directly to another website page with info for that particular area using a click handler rather than show an info window.
Alternatively as suggested showing a tool-tip with a brief description of the area and a link to the page would be better, how the tooltip itself, is it possible to render on top the map?
I am slightly worried that I will reach the layer limit for the KML.
Is it possible to have multiple polygons rendered with KML on one layer, or do i need a separate layer for each clickable area?
The Google Maps API provides a pretty straightforward method to draw polygons.
Basic Example:
var polygon = new google.maps.Polygon({
map: your_google_map_instance,
paths: array_of_latlng_points,
fillColor: "#336699",
fillOpacity: .5,
})
EDIT: For this approach, you would need to parse your KML files (sorry, must've missed that when I first read it). You can import the KML files to a KML layer
You can overlay Polygons using KmlLayer, FusionTablesLayer (as you know), or native google.maps.Polygon objects.
KmlLayer and FusionTablesLayer render them as tiles, so for lots of Polygons (if you only need click events) will be more efficient. There are limitations on the number of KmlLayers that can be displayed on the map at one time and on FusionTablesLayer (but those don't seem to be causing you problems).
There are also third party parsers available for KML (geoxml3, geoxml-v3) which will take your KML and render it as native google.maps.Polygon objects. For lots of Polygons, this will be less efficient than tile based rendering, but it does allow mouseover/mouseout, and changing the properties of the Polygons dynamically.
You could also try data layers what have lots of events so you can display tooltips, info window, status text on various mouse events.
See samples in documentation:
https://developers.google.com/maps/documentation/javascript/datalayer
If you have many polygons (where the actual value of many depends on multiple factors, can be anywhere between 100 and 1,000) the best is to use a built in layer type. The fastest are the ones rendered on server, e.g. kml layer because this doesn't create hundreds of DOM elements in browser but still exposes click events so infoboxes can be displayed for each item.
In the worst case you can implement your own rendering with an image map, obviously by using an existing library like mapnik.
https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes
We have implemented google map boundary in our site www.kozaza.com.Yesterday we noticed that multiple lines showing on region boundary.Can you help me to resolve this issue. I believe this is something related with google map code, because we haven't touched our code for last 1 month.
Sounds like google updated their map tiles. You should be able to style the map to remove the existing boundaries if you can't find data for borders that matches them.
Looks like they don't match the boundaries in the Natural Earth data set either:
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.
I have a problem with markers hidden behind other markers.
The problem occurs when the addresses are too close to each other. e.g. street 20, street 22.
Changing zIndex will not help, because that is just "stacking".
How can I "float" the markers so that they are all visible on the map?
I recommend you look into marker clustering.
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/examples/advanced_example.html
UPDATE:
Google now support marker cluserting via a native library: https://developers.google.com/maps/documentation/javascript/marker-clustering
is this any use to you - it's called 'Spiderfier':
http://blog.mackerron.com/2011/06/22/overlapping-marker-spiderfier/
https://github.com/jawj/OverlappingMarkerSpiderfier
It might help to use smaller markers. When I had this problem, I changed the size of my marker images from 20x34 px down to 20x20 px.
So,you can use mysql spatial extensions and MBRContains(RectangleAroundYourPoint,GeometryColumnOfYourTable)
-if of course your table have a geometry column which is easy(upon creation you choose i.e. point as the column type,and when performing an insertion you have to do it with GeomFromText)-
to check if another place exist within that rectangle and if it is move the newcoming place until the mbrcontains return false or something like that.
Hope it helps
I use marker clusterer and had the same problem. I add a small random number to coordinates. I do not want to change the locations of markers so much therefore in satellite mode problem still exists but in map mode we can zoom much more.
This may not be a good solution but good enough for my application.