Loading ESRI raster in Mapbox GL JS - raster

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/

Related

JMapViewer adding tiles of a region on Panel

Hi there i'm using JMapViewer to show maps in my swing app and I've successfully created a panel with map tiles on it but these map tiles are of a particular area used in demo source of Map Viewer, i'm confused about how can i show the tiles of some particular area i want. Just like Google maps i want to show some location of my country (Pakistan) in the maps and i don't know how can i do it.
Secondly, Please explain what are Layer's and Layer Group in JMapViewer? Just an idea.
Edit: how can i download tiles of Islamabad region and then add them to maps.
What i've learnt from demo is this:
private void loadMapTiles(){
map().setTileSource(new OsmTileSource.Mapnik());
map().setTileLoader(new OsmTileLoader(map()));
}
But this shows some specific area they have set to.
I've downloaded JTileDownloader but i'm confused about the url thing because i don't now where to get the url of some specific area.
Given a JMapViewer named map, something like this should display Islamabad:
Coordinate c = new Coordinate(33.7167, 73.0667);
map.setDisplayPosition(c, 10);
org.openstreetmap.gui.jmapviewer.Demo, included in the distribution, is a complete example that illustrates how to use Layer. Click the Tree Layers Visible checkbox to see the effect.
Addendum: Here's the result using MapQuest-OSM at 11x zoom; Mapnik seems to work, too. If no TileSource includes the tiles you want, you may need one of the approaches mentioned here.

javascript google map v3 and data property missing

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.

Zip Code Boundaries Using Google Maps Api

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....

Confusion over TopoJSON Format

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.

Double clicking a google earth treeview node does not 'flyto' the placemark

I am using the plugin in a desktop application (Visual Studio C#). I am creating a placemark using the following code:
// Create a new coordinate object based on the lat/lon of the device
// TODO :: add lat/lon once data is available
FC.GEPluginCtrls.Geo.Coordinate Coord =
new FC.GEPluginCtrls.Geo.Coordinate(0, 0, 0, AltitudeMode.RelativeToGround);
// Create a placemark and put it in the tree.
kmlTreeView.ParseKmlObject(KmlHelpers.CreatePlacemark(
ge,
Coord,
((Device)DeviceList[i]).sSerialNum, // ID
((Device)DeviceList[i]).sNickname, // Name - shown in tree
((Device)DeviceList[i]).sName)); // Description - shown in bubble
In the TreeView the new nodes show up and when I double-click on them the bubble pops up with information in it but the view does not change. I attempted to verify the property "public bool FlyToOnDoubleClickNode" as shown in the documentation but that property apparently does not exist in the version I am using (1.010).
When I was loading a KML file the double click worked as expected but ever since I've been manually adding the placemarks it does not work.
Any thoughts?
Thanks!
Have you tried manually assigning a <LookAt> or <Camera> ?
That should work
Edit: Well the FlyToOnDoubleClickNode is turned on by default, so your problems lie elsewhere
I do not know why you are having troubles with setting multiple LookAts. Have you tried assigning 'ids' to your LookAt ? Depending on what you are actually doing, that might help.
Otherwise, have you seen setFlyToView()
I am not sure that will help you though, since it relates to KMLs loaded via NetworkLinks
Thats about me for ideas - good luck!
It appears that the coordinates 0,0 are somehow significant. If the coordinates are changed to something else the "FlyTo" works (0.1 and 0.1 work).

Resources