I need to display google map with zip code boundaries like this
http://maps.huge.info/zip.htm
Perhaps I am overlooking it, but I've not been to find examples of this and documentation talking about this specifically at Google Maps API documentation. I've trying doing a view source on the above web page link, but it doesn't seem obvious to me how it works. There is also other stuff on the page which I don't know if it's part of what I need or not.
Some simple code examples would be very helpful! Thanks!
If anyone still looking for the solution here is how I managed to draw boundaries.
Download zip file from http://www2.census.gov/geo/tiger/TIGER2014/ZCTA5/tl_2014_us_zcta510.zip (its around 500mb)
Unzip it, u need the shp file from the extracted files
On windows u need to install QGIS, to get the ogr2ogr utility
Run the command to get geoJSON file from shp file:
ogr2ogr -f "GeoJSON" -lco COORDINATE_PRECISION=4 -simplify 0.00010 zipRegions.json tl_2014_us_zcta510.shp
You can play with simplify to remove extra points and compress your data
Create free account on cartodb
Upload zipRegions.json file there
Now using cartodb.js file you can draw zip code regions on google maps easily
Simply by code like this
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(42.1038846,-72.5868353),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
cartodb.createLayer(map, {
user_name: 'your_user_name',
type: 'cartodb',
sublayers: [
{
sql: "SELECT * FROM cartodb1",
cartocss: '#cartodb1 {polygon-fill: #7bd490;polygon-opacity: 0.7;line-color: #6da57a;line-width: 0.5;line-opacity: 1;}'
}
]})
.addTo(map, 0) // add the layer to our map which already contains 1 sublayer
.done(function(layer) {
console.log('Fine');
})
.error(function(e) {
console.log(e);
});
Google Maps API will not provide you with this data. You need an external source. A Fusion Table could be of some help. You can check this one *.
You then need to create your own layers from the KML data that is in the table. There is documentation about it.
You can render the data directly from the Fusion Table or import it to your own database, which is often preferable for performance.
Hope this helps to get you started. Try to find your way and if you are stuck, then ask another question and show us your code as the first comment suggests.
* FusionTables was discontinued on 3 December 2019.
Working on the same thing and found boundaries-io way too expensive for our use case.
Check out https://www.maptechnica.com/
Much larger data set
Much more affordable
I parsed the 2016 census kml file (over 150MB) to over 32,000 individual kml files you can use as a kml layer for your maps.
I put a zip file here:
https://github.com/tomeralmog/zipcode-kml
Hope this helps
A Very Simply API exists for this query by zipcode,city,etc.. returns geoJson
http://www.boundaries-io.com
Image of the results in GooleMap:
I know this is a relatively old question and #tomer-almog has done some great work making KML files, but I stumbled on this free resource (no relation, just using the data) that has zip code data in verious geo formats (GeoJSON, KML, etc)
https://public.opendatasoft.com/explore/dataset/us-zip-code-latitude-and-longitude/table/
Might be usefull for someone....
Related
Is it possible to load ESRI raster tiles from a tiles.arcgis.com service? In this mapbox demo, the line that specifies the basemap tiling service (from Stamen, in this case) is this:
'tiles': [
'https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg'
],
When I edit the fiddle example, however, and try to substitute a tileset I'm interested in using, it doesn't seem to work:
'tiles': [
'https://tiles.arcgis.com/tiles/QcN4ko50whTktDF1/arcgis/rest/services/Ortho_Midland2020_0520and0521/MapServer/tile/{z}/{x}/{y}.jpg'
],
I was able to get direct access to some of the individual tiles, like this, but can't seem to get the URL string right. Here is a page with metadata, as well as the start and end tiles for each zoom level.
Can someone please point out where I'm going wrong with that URL string? I've also changed the initial zoom and x/y to be relevant to the dataset:
center: [-84.39479, 43.820487],
zoom: 11
Here is a fiddle that I've been trying out various URLs in. I would super appreciate pointers about how to format the ESRI tileset URL for use in mapbox gl js. Thanks in advance!
Two issues:
First, the URLs should not have .jpg on the end.
Second, ArcGIS online URLs are z/y/x, not z/x/y
So the correct URL is:
https://tiles.arcgis.com/tiles/QcN4ko50whTktDF1/arcgis/rest/services/Ortho_Midland2020_0520and0521/MapServer/tile/{z}/{y}/{x}
Updated JS Fiddle: https://jsfiddle.net/stevage/z9nao1cv/4/
i went through lots of answers posted regarding the below question.
i wanted to retrieve the kml file from the local and so i used geoxml
var myParser = new geoXML3.parser({ map: map });
myParser.parse('indiastatev2.kml');
here is the code which i am trying to make work
my file is stored here in this folder
i am not able to get the file path to pass in
here are the solution which i tried doing it in different ways
myParser.parse('~/Content/KmlData/indiastatev2.kml');
myParser.parse('../../Content/KmlData/indiastatev2.kml');
none of them is working
this is what i am getting each time
here is my script
i had already tried putting down the kml file in same folder but it didnt work
please suggest me something to make it work
Trying to load a geojson result into my google map. According to the documentation ("Every Map has a Data object by default, so most of the time there is no need to construct one.") I can just do map.data.loadGeoJson. The problem is that there is no data property on map. So I tried to just create on by doing google.maps.Data(). Again Data is not a recognized type. This comes from documentation of version 3.16. Can anybody tell me what I am doing wrong? this is the url I use to reference map:
https://maps.googleapis.com/maps/api/js?libraries=visualization&sensor=false&language=en&v=3.16
It's a property of the google.maps.Map-instance:
var someMapInstance=new google.maps.Map(/*arguments*/);
//someMapInstance.data will be what you are looking for
console.log(someMapInstance.data);
Now it is showing up. I had recently changed my link from version 3.14 to 3.16 so maybe it just got stuck in cache though not sure how since the url was different but either way it is working now.
I am attempting to follow mbostock's "Let's Make a Map" Tutorial here: http://bost.ocks.org/mike/map/. At a certain point in the tutorial, he writes:
d3.json("uk.json", function(error, uk) {
svg.append("path")
.datum(topojson.feature(uk, uk.objects.subunits))
.attr("d", d3.geo.path().projection(d3.geo.mercator()));
});
Without seeing the format of his topoJSON file, it is hard to determine what the equivalent "uk.objects.subunits" line is for my code (my topoJSON can be viewed here: https://gist.github.com/jcahan/e1772766f01b68b00dc9).
Would someone please help clarify how I (and future readers) can determine the inner property (eg uk.objects.subunits) of my topojson file?
Thanks for your time!
Use the web console in your browser (I use the Firebug extension in Firefox) to view Mike's example page and you can watch the browser pull down the uk.json file and view its format. Here's the relevant snippet:
{"type":"Topology","transform":{"scale":
[0.001546403012701271,0.0010939367048704803],"translate":
[-13.69131425699993,49.90961334800009]},"objects":{"subunits":
{"type":"GeometryCollection","geometries":[{"type":"MultiPolygon","id":"ENG","arcs":[[[0]],
[[1]],[[2]],[[3]],[[4]],[[5]],[[6,7,8,9]]],"properties":{"name":"England"}},
You can see the hierarchy of uk.objects.subunits
subunits contains the GeometryCollection. Have a look at your json file and do the same.
Double check that this instruction from Mike is working:
d3.json("uk.json", function(error, uk) {
console.log(uk);
});
Now if you peek at your JavaScript console, you should see a topology object that represents the administrative boundaries and populated places of the United Kingdom.
If you get it to work, let me know, as I cannot get my personal TopoJSON file to load, although I can get all of Mike's to do so. I've come to the conclusion that my TopoJSON file must be wrong somehow.
Sure.
That JSON file happens to be close friend (actually a neightboor) of the example. So you can see it atthe http://bost.ocks.org/mike/map/uk.json
Regards.
If I have a KmlPolygon object, how might I convert this to a KML string? This functionality would allow you to save whatever has been modelled and use it as a layer in Google Earth desktop for instance, or even load it back into the web plugin.
EDIT
This would do the opposite of fetchKml.
Found it. You can use the getKml() function of KmlFeature to return the KML string. You can also add multiple KmlPolygon objects by constructing a KmlDocument using the dom.buildDocument() of the utility library, and then using getKml() on that.