First of all let me say what this post is not all about. Am not asking about how to use PostGIS and Leaflet. I have that resolved in this post.
What I am asking is a bit extension of the linked post. In the linked post when I show a map, it somehow shows data that are not found in PostGIS (Obviously its pulling from the Internet somewhere).
I want to plot data only from the database and only that. How do I do this?
The linked code has this segment:
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
id: 'examples.map-20v6611k'
}).addTo(map);
This is the tile layer from Mapbox (the first line makes that pretty clear, with the url and the tileLayer method). Remove it and there will no longer be that tile layer in the map.
Related
I am using google maps to provide directions to multiple locations within a website. Users are in Japan, but are non-Japanese, so results should be in English.
In certain examples, even when the name is in the query parameter, a link like this location, returns an alternate Japanese place name (主教座聖堂牧師館), instead of "St. Andrew's Tokyo."
This link is dynamically generated, so I can change the parameters if need be, but I can't figure out how to force results that look more like this, without hardcoding the entire link. Here is what builds the URL:
//handle directions links; send to Apple Maps (iOS), or Google Maps (everything else)
var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
$body.on('click', 'a.tsml-directions', function(e){
e.preventDefault();
var directions = (iOS ? 'maps://?' : 'https://maps.google.com/?') + $.param({
daddr: $(this).attr('data-latitude') + ',' + $(this).attr('data-longitude'),
saddr: 'Current Location',
q: $(this).attr('data-location')
});
window.open(directions);
});
I've had a look at your sample URL https://www.google.com/maps?daddr=35.6603676,139.7444553&saddr=Yotsuya,%20Shinjuku,%20Tokyo%20160-0004&q=St.%20Andrew%27s%20Tokyo.
I understand that your intention is getting a directions on Google Maps. In the aforementioned URL you specify parameters for origin saddr and destination daddr, the q parameter shouldn't affect directions in this case. So, the destination address is just coordinate 35.6603676,139.7444553. When I reverse geocode this coordinate I get the 'Japan, 〒105-0011 Tōkyō-to, Minato-ku, Shibakōen, 3 Chome−6−１８ 主教座聖堂牧師館' address as shown in Geocoder tool:
https://google-developers.appspot.com/maps/documentation/utils/geocoder/#q%3D35.660368%252C139.744455
The 主教座聖堂牧師館 corresponds to premise address component and I suspect it is not translated to English in Google database, because web service call with language set to English returns this component in original language as well
https://maps.googleapis.com/maps/api/geocode/json?latlng=35.6603676%2C139.7444553&language=en&key=YOUR_API_KEY
If your destination should be St. Andrew's, use it as a destination parameter.
And the most important part: Google has Google Maps URLs as an official, recommended and documented method to construct URLs. I would suggest using this API in order to create your directions URLs. These URLs are cross-platform, so there is no need to create different URLs for iOS, Android or web browser.
Your example will convert into
https://www.google.com/maps/dir/?api=1&origin=Yotsuya,%20Shinjuku,%20Tokyo%20160-0004&destination=St.%20Andrew%27s%20Tokyo&travelmode=driving
The result is shown in the screenshot
Your code might be something like
$body.on('click', 'a.tsml-directions', function(e){
e.preventDefault();
var directions = 'https://www.google.com/maps/dir/?' + $.param({
api: "1",
destination: $(this).attr('data-location'),
travelmode: "driving"
});
window.open(directions);
});
Note I don't specify origin parameter as it is optional and in this case it should be interpreted as my current location.
I hope this helps!
I have a mapbox, and want to display a layer of esri data onto it. The data I'm getting is being pulled in from this json file:
https://gis.usps.com/arcgis/rest/services/EDDM/selectZIP/GPServer/routes/execute?f=json&env%3AoutSR=102100&ZIP=93003&Rte_Box=R&UserName=EDDM
The data['results'][0]['value']['features'] array looks something like this:
[{'attributes': {'key':'value'}},{'geometry':{'paths':[[-13273770,4064608],[-13273762,4064613],....]}},
{'attributes': {'key':'value'}},{'geometry':{'paths':[[-13273770,4064608],[-13273762,4064613],....]}},
{'attributes': {'key':'value'}},{'geometry':{'paths':[[-13273770,4064608],[-13273762,4064613],....]}}}]
My question is about the geometry array. The data there is not Lat/Lng values (which I was hoping for), so I'm not sure how to add these to my map. I'm new to GIS, and the research I've done so far points to SpatialReferences. Any help is obviously much appreciated!
MapBox seems to only accept Latitude and Longitude coordinates (from what I can tell at least). The coordinates you have in your file come from ESRI 102100 (3857) projection system - the clue is near the beginning of your file:
"spatialReference":{"wkid":102100,"latestWkid":3857}..."
Normally, you'd have to convert this yourself, a good link for potential tips in the future is:
https://gis.stackexchange.com/questions/9442/arcgis-coordinate-system
On this occasion however, you can do something far easier. Simply change the "outSR" property of your URL from 102100 to 4326 (WGS84) and let it do it for you.
https://gis.usps.com/arcgis/rest/services/EDDM/selectZIP/GPServer/routes/execute?f=json&env%3AoutSR=4326&ZIP=93003&Rte_Box=R&UserName=EDDM
I'm trying to add WMS layer from remote ArcGIS server to my GWT web app. I'm using gwt-openlayers library.
My code:
MapOptions defaultMapOptions = new MapOptions();
mapWidget = new MapWidget("100%", "100%", defaultMapOptions);
Map map = mapWidget.getMap();
//gNormal = new GoogleV3("Google Normal", gOptions);
//map.addLayer(gNormal);
WMSParams wmsParams = new WMSParams();
wmsParams.setFormat("image/png");
wmsParams.setLayers("1");
wmsParams.setStyles("");
WMSOptions wmsLayerParams = new WMSOptions();
wmsLayerParams.setUntiled();
wmsLayerParams.setProjection("EPSG:3857"); // is it correct setting for WMS layer?
// wmsLayerParams.setProjection("EPSG:102113");
// wmsLayerParams.setProjection("EPSG:4326");
wmsLayerParams.setTransitionEffect(TransitionEffect.RESIZE);
String wmsUrl = "sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer";
arcGis = new WMS("ArcGis", wmsUrl, wmsParams);
map.addLayer(arcGis);
map.setBaseLayer(arcGis);
LonLat lonLat = new LonLat(-84.1,36.4); //USA
lonLat.transform("EPSG:4326", map.getProjection());
//System.out.println("map projection "+map.getProjection());
map.setCenter(lonLat, 3);
add(mapWidget);
I read many articles and SO questions but I still can't solve the problem. My problem is rendering pink tiles on the map instead of normal image. I copied image url as many stackoverflow answers suggested and saw the following:
http://localhost:8084/sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer?FORMAT=image%2Fpng&LAYERS=1&STYLES=&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&SRS=EPSG%3A4326&BBOX=-135,45,-90,90&WIDTH=256&HEIGHT=256
Without localhost:8084 prefix url works fine and shows me small piece of map.
Questions:
1) How get rid from localhost prefix in WMS url? In my code wmsUrl look like sampleserver1... so it's correct. It seems my application adds it's root path to remote url.
2) I read that WMS layers should have the following projection - "EPSG:3857". Is it true? As i mentioned above when I manually put in the browser correct url without "localhost" prefix I saw some image but I'm not sure it's correct. Probably image is shifted.
3) My final goal is adding 2 layers to the map - Google Map layer and WMS layer. Google Map uses "EPSG:900913" as default projection. Could somebody give common tips to place google layer and WMS layer in one map. May be there are some tricks, common mistakes related to projections an so on.
In the wmsUrl variable, you are missing the "http://", that may help.
Pink tiles generally mean that the data source was not found, so this is where you should look for the problem. Try checking the wms URL you are supplying in a wms viewer (e.g. ArcGIS Explorer ).
To your questions:
1)try just adding the http:// to your url, without the localhost
2)A WMS layer can have any projection, it depends solely on the projection in which it was published. Information about a specific WMS's projection should be found in metadata.
3)If the two layers have the same projection, you do not need to do anything. If you want to use two layers in different projections in one map, one of the layers must be reprojected. In pure OpenLayers, this is done by specifying the projection parameter for each layer and then specifying the displayProjection parameter for the map. The layers will automatically be reprojected. However, reprojection takes some time and it increases the load time VERY significantly. It is better to avoid reprojection on-the-fly, if possible. You can either reproject the source data of one of the layers and use reprojected data. Of course, this is not possible for a WMS, so you should consider using a different data source. If you want a background map, you can donwload OpenStreetMap data, reproject them to your desired projection, and then use them with the other WMS you want to use.
Hope at least some of this helps :-)
Im working on a script that will pull a variable from my MySQL db table, heres the example coding google gives me.
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
];
and now here is what im trying to achieve,
i have a table with the fields, ID , Beach , Long, Lat
how would i replace the beach variable to pull from my MySQL table instead of having to go in and manually add the beach to the variable. That way when users add a Beach Name with longitude and latitude to the DB through my form it automatically adds a marker on my google maps.
I am achieving the ComplexIcon Overlays with Google Maps API v3
https://developers.google.com/maps/documentation/javascript/overlays#ComplexIcons
Im guessing im going to be using some AJAX ? I have never used AJAX before so if this is the case i guess i better pull up my AJAX tuts :)
Javascript in a user's browser can't get at your database directly (which is good!) but it can ask your server for data, and AJAX may well be the way to go if you want dynamic updates. Google has an article: https://developers.google.com/maps/articles/phpsqlajax_v3
However it seems more likely that you will simply need to get the marker data when you send the page to the browser, and you can do that by constructing the page in PHP or another server-side language, using similar techniques to get data out of the database and use the values directly in the page code.
You may need to do both, to create the initial page the user gets and update it via AJAX so just the data changes and you don't have to refresh the whole page.
[Note: you don't have to use XML to transfer data asynchronously, you could use JSON to format it or any other format you can code for. But XML is easy and there are plenty of examples.]
Yes, you have to do it with ajax.
For example, I'll use jQuery
$.ajax({
url: formSubmitUrl,
data: 'id=1&lat=23.444...',
type: 'GET',
success: function (data)
{
// data = response from the script
// if every thing is ok, I return the string 'OK'
if(data == 'OK')
{
var pMarker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
icon: yourMarkerimage
});
}
}
});
And that's all from the client side.
Submit the form via AJAX and then add the marker to the map
To this topic I have found a very good and helpful entry:
Map View draw directions using google Directions API - decoding polylines
But I have a question to the answer of Kenny.
He has written a function called decodeZoomLevels(String encodedZoomLevels)
and what paramenter is the encodedZoomLevels?
As my direction API response I get a polyline entry like this:
.
.
.
"polyline" : {
"points" : "grheHevjqAo#i#WMm#]a#QUGoAKqAG{#Ea#Ge#E]Im#Wa#Ou#Uy#MEI]OAICGEECAGAG#A#A?CBABAFc#HOJeB?}FNiBHaENw#Be#Bc#Ee#Gq#Wo#[w#i#[c#c#q#mAgC_#u#e#{#aA{Ai#k#u#w#c#g#w#gAiAqBMUEIaCsEmBuDqBqEkAyB{#gASWs#s#aBcBc#o#g#{#_#w#c#m#USWOg#O_#E}AGS?UA[COCe#O}#s#q#kA[aAUuASmAS}#So#IOQYc#s#w#u#u#Y"
},
.
.
.
As you can see the polyline entry has only another entry called "points", but wehere is the entry "zoomlevel" as Kenny is describing?
Hope you can help.
Zoom levels is the array of integers, where each number control the appearance of points in different zoom levels. In other words, if it is present, it can reduce number of points visible in lower zoom levels, but allowing to show more details when zooming in. It is not generated automatically, and I suppose to generate such a feature you need to implement polygon reducing algorithm.
Do you really need it?
Read more in google's manual.