I have a written up HTML file using the Google Maps API v3.
All I want to do is color a couple of countries, for example, color in China and Canada to red. What is a simple solution (that doesn't involve Polygons and thousands of coordinates) to color in countries?
After browsing previous StackOverFlow questions, there seemed to be three common solutions. However these 3 solutions do not seem appropriate for my situation.
Charts API
-I don't really understand if Charts API is a good solution for me because I have already have a file using Google Maps API. Unless Charts can be applied over my map, or synchronize with the map, this does not seem to be a valid solution.
Styling (With Styling Wizard)
-This wizard (as far as I know) deals with the style of general characteristics, like road, water, population, etc. Unless someone can show me how to assign a specific country a color, I do not see how this can work.
Polygons
-I saw the example of the Bermuta triangle and other people have suggested to get the coordinates of the perimeter of a country and create a polygon. This may work except I may need a thousands of coordinates in order to fully outline China. Perhaps there is a more simple method in which I can color in a country?
Use either FusionTablesLayer or KmlLayer.
Both take kml formated geographical data and render it on tiles, yielding better performance with complex or large numbers of polygons.
The Natural Earth data set is available in Fusion Tables, and contains most countries.
This might work for you if coordinates generated automatically in different resolutions depending on your requirements. all you need to do is to load an appropriate GeoJSON onto your map. See here for the complete answer which is done just by adding a couple of line of codes.
Related
Google maps does a very good job highliting the neoghborhood boundaries polygons:
The underlying polygon data is very good. It's definitely better than Foursquare's Quattroshapes.
Since I don't think there's a way to extract this data from Google, I thought that maybe it would be possible to show / highlight and manipulate these polygons as first class objects inside Google Maps using the Google Maps Javascript API?
What I would like to do is i.e highlight only a subset of the neighbourhood polygons per city, change their fill colors based on my own data, etc.
Another option would be to get the polygon data from Google and draw the polygons myself, but I'm pretty sure it's not really available. Does anyone know?
Thanks!
Unfortunately, you cannot get the information directly through the JavaScript API. If you can find KML data online (or make some yourself), it can be loaded through google.maps.KmlLayer.
It is pretty easy to make KML layers in Google Earth. So if you only need 1 city, it may be a good time investment to make.
I've been searching but cannot seem to find a solution.
I have a GeoJSON file which is 170mb in size. It contains about 2500 polygons. Somehow I need to render it to a leaflet map. Evidently at that size I have no chance.
What will the easiest way to render this data? Am I able to create a complete transparent png which can simply be rendered over the world map. The huge size is due to the complexity and the number of polygons. At this point I don't need it to be interactive.
Thanks,
Brian
The easiest way is to create your own map tiles based on that data. There are a couple of ways of achieving this but my suggestion is that you use TileMill. It's free and very easy to use. So, basically you would:
Use TileMill and specify your GeoJSON file as the data-source
Configure how the map should be displayed (like the color of the polygons) with a special CSS-like language inside TileMill
Generate the tiles
Load a new TileLayer in your Leaflet map that references your files
I've actually written a tutorial some time ago that uses a .shp instead of a GeoJson, but should be similar enough:
http://build-failed.blogspot.pt/2012/03/custom-map-tiles-part-2-tilemill.html
I cannot argue with psousa's recommendation. For a straightforward presentation, TileMill is a great idea.
However, if you want to overlay your polygons onto another map, I reckon the only way is by using Mike Bostock's TopoJSON and D3.
The main TopoJSON page:
https://github.com/mbostock/topojson/wiki
An example at the scale you are talking about:
http://bl.ocks.org/mbostock/4206573
You'll have to shop around Mike's excellent examples on github to see how to combine leaflet with a D3 overlay.
I'm currently doing this successfully with hundreds of complex polygons. Haven't had the need to break into the thousands ... yet.
There is also geojson-vt, which apparently can to the tiling serverless on-the-fly - after a bit of loading time.
Just another humble suggestion.
I had successfully done loading 10000+ polygons and querying attributes by rolling out my own Geoserver and PostgreSQL DB + PostGIS instance and producing a WMS (not WFS), as you can see in the image.
But it is not straightforward to implement, especially if the geojson data is the original (and only) data
In that regard I would second psousa's answer to use TileMill.
I was trying to mark regions on google map for a city (for a small utility webapp, that I am writing). However, when I looked up areas by their name, I noticed something new. There is an outline around the areas. Like this(if you search for: "Koregaon Park, Pune, Maharashtra"):
Is there a way I can extract all these regions for a given city (in this case, Pune, India) ?
Can I add my own regions or edit regions as per my needs ?
In the end, I'd like the user to be able to select multiple regions and I'd like to collect that info, in an array or some other data structure ?
Can someone point me in the right direction on how to do this ?
PS: This is limited to a city for now, and the number of regions that I'm targeting are small in number(say around 10. This number will grow if my experiment proves out to be efficient).
Please dont downvote this. If you need me to provide more info, please do let me know.
You are asking how to display polygons for your cities on a Google Maps API map.
There are at least 3 ways to do that, but for all those you need the coordinates of the polygon.
KmlLayer - need the data as publicly available KML
FusionTablesLayer - if you have the data as KML you can import it into a FusionTable, if it is a .shp file you can use shpescape.com to import it into FusionTables
You can display the polygons as native Google Maps API v3 polygons
There is publicly available KML data in the Natural Earth Data set (which is available in FusionTables) and at http://www.gadm.org/
When searching for a Province in Google Maps, it outlines the map and adds a icon on the Province.
How would you get that from google without having to draw it point by point ? Im sure it's available if its showing on their maps.
Here is an example:
Western Cape, South Africa
I do not think it is directly available through the API beyond what you can achieve with the styling wizard
To implement it yourself you'd need to find a shapefile for the areas of interest, store it in a spatially enabled database, (like PostgreSQL/PostGIS), and then load the relevant polygons, which you can style freely. Alternatively you can create a custom tile layer, like this, (check the "density" box), or you may be able to load it using fusion tables, (not an entirely simple process).
See this similar question (doing the same thing for countries)
The answer can be applied to a province rather than a country.
Here is the closest I could come to that styling.
I need to create an interactive world map on the front page of a site, the view portal will be about 650x200 pixels. The interactivity would include the following, mouse-over a country would highlight (the countries are will literally be filled with "red" for example) that country and display the countries' name (preferably text in a div), I will also be linking the highlighting event with a that will highlight a country when selected.
I am having a difficult time finding a suitable solution, I refuse to use or learn a proprietry technology such as flash so it is not an option. I created a simple mockup using openlayers and a custom map image but the countries' markers load too slowly in IE6.
Also svg seems too large, as I tried to use RaphaelJS, but abondoned it when I realised the world map data is 1.2mb which is totally un acceptable for the front page of a site..
I am really at a loss on how I am going to do this, my last resort is to manually create 250+ (however many countries there are) pngs and apply mouseover events to hotspots in the image... but this is probably going to be a dead end too.. desperately seeking a solution, any helpful comments will be appreciated!
I developed jVectorMap for that purpose.
Why reinvent the wheel. Google Charts already does this.
I finaly settled with RaphaelJS, importing all the paths from an svg in inkscape, works amazingly well!
We've developed Highmaps, related to Highcharts, to easily solve data visualization problems like this. We also supply a map collection of over 350 maps, optimized for size to keep things lightweight.
For a drilldown example (loading more detailed map on mouse click) see this demo.
Highmaps is free for non-commercial use.
Do you have country coordinate data stored somewhere?
If so setting up functions to parse through the passed in data and create 250+ paths should not be that large.