I'm using Leaflet JS and Cloudmade in my mobile HTML5 application. Unfortunately I can't get the retina support to work.
I use this url to access the cloud made api:
var url = 'http://{s}.tile.cloudmade.com/{key}/{style}#2x/256/{z}/{x}/{y}.png?token={token}';
My key, style and token are replaced by the correct values.
For my leaflet map layer I use the following simple configuration:
L.tileLayer(url, {
detectRetina: true
}).addTo(map);
Unfortunately the result looks really weird.
It seems like something is going wrong with the tiles and the position of them.
If I remove the detectRetina flag I get a correct result in the browser
But as you can see both solutions are not sharp on my retina display (Mac Book Pro).
Has anyone made this working?
Thanks!
This worked for me:
var tileURL = 'http://{s}.tile.cloudmade.com/{api-key}/1714' + (L.Browser.retina? '#2x': '') + '/256/{z}/{x}/{y}.png';
L.tileLayer(tileURL, {detectRetina: true}).addTo(yourMap);
Have you tried with different tile styles and check if that might be the issue?
Related
I am attempting to add NOAA's Doppler Radar to my web map. For whatever reason the later will not display on the map. No errors are being reported and I have used console.log() to confirm the data is being pulled correctly form noaa's arcGIS server. Any thoughts as to how to configure this so the data gets displayed?
maps.addWeather = function addWeatehr () {
console.log("addWeather Called...");
var weatherServiceURL = "http://gis.srh.noaa.gov/arcgis/rest/services/RIDGERadar/MapServer"
var weatherLayer = new FeatureLayer(weatherServiceURL,{
outFields:["*"],
visible:true
});
console.log(weatherLayer);
maps.map.addLayer(weatherLayer);
};
You're trying to add a FeatureLayer using a map service that doesn't support returning features - which makes sense if you think about it, what features would a weather radar return? If you look at the root folder of the NOAA server:
http://gis.srh.noaa.gov/arcgis/rest/services
You should see "RIDGERadar (MapServer)". If it supported Feature access it would either say "FeatureServer", or have a second entry if it supported both.
Try adding it as a dynamic map service instead:
var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.srh.noaa.gov/arcgis/rest/services/RIDGERadar/MapServer");
maps.map.addLayer(layer);
The ArcGIS services directory is a very useful thing to play with - I got the above line from the internal Javascript viewer linked from the MapServer page.
I am new to Kony Studio. I have to display Google map on mobile by using kony Studio API.I tried and Its working fine on Android mobile.But On blackberry,It's not working on blackberry.Please give me some solution for this
Without some more information, hard to diagnose, but take a look at the Kony Map Widget documentation; there are some specific steps you need to follow to setup the map widget in Blackberry, and some Blackberry configurations that need to be set for the map to be able to test it in the emulator. Take a look here: Kony doc Map Reference
Following the above recommendation I found the below simple sample.
enter code here
function onPinClickCallBck(map)
{
alert("Some Message");
var mapBasicConf = {
id: "map1",
provider:constants.MAP_PROVIDER_GOOGLE,
mapKey:"0z5UtaSPUYj42f5qX0VAwmDGLX39Qxgbtcra0TA",
defaultPinImage: "kmpin.png",
isVisible:true, onPinClick:onPinClickCallBck
};
var mapLayoutConf = {
margin:[20,40,50,20],
containerWeight:100,
widgetAlignment:constants.WIDGET_ALIGN_BOTTOM_LEFT,padding: [10,10,10,10],
hExpand:false,
vExpand:false
};
var mapPSPConf = {
mode: constants.MAP_VIEW_MODE_HYBRID,
showCurrentLocation:constants.MAP_VIEW_SHOW_CURRENT_LOCATION_AS_PIN
};
var map = new kony.ui.Map(mapBasicConf,mapLayoutConf,mapPSPConf);
enter code here
I hope it is helpful.
Regards.
You need to subscribe BIS (Blackberry Internet Services) on the BB device to see map widget functioning properly.
I have spent a lot of time building a dress-up game using KineticJS and I seem to have fallen at the final hurdle.
I have created a 'Snapshot' button which I wanted to allow my users to print the canvas to a window or tab. Here is a snippet of my code:
Camera.prototype.takeSnapshot = function()
{
var backgroundLayer = this.controller.view.getBackgroundLayer();
var backgroundContext = backgroundLayer.getContext();
var manikinLayer = this.controller.view.getManikinLayer();
var manikinCanvas = manikinLayer.getCanvas();
//combine background and 'manikin' layers
backgroundContext.drawImage(manikinCanvas,0 ,0);
//open data URL in new window
var manikinImageUrl = backgroundLayer.getCanvas().toDataURL('image/png');
window.open(manikinImageUrl);
};
Now as im sure you will have guessed already, this works in FF, Chrome, Safari for Win, but not IE or IOS Safari. Having done some research I believe all versions if IE flat out dont support this functionality?
I am just looking for an expert to confirm if this is true or not.
Also could someone please tell me how to fuse the the backgroundLayer and ManikinLayer together before they are printed out? I am getting the errpr 'Value could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement' on the 5th line of code.
Any help much appreciated as I am close to junking the project after having put in so much effort!
In your new window, create an image element with the source set to your dataURL:
var win=window.open();
win.document.write("<img src='"+manikinImageUrl+"'/>");
I have not been able to successfully display my side database (map from Mapsengine/Earthbuilder). I have installed Google Plugin and tried to access it from Firefox, Chrome, and IE browsers and nothing seems to work. I am not sure what I'm doing wrong as I have confirmed my code with the code used in Google's Code Playground, and I have attempted a workaround that was suggested in a similar issue from the past (Issue 21: GMaps Engine Layer Disappeared over GEarth plugin). When specifing the URL of my map to be displayed in GE plugin, I even changed the URL to include &export=download, which is one of the fixes I saw in another similar issue (it was about kml files from google docs).
Strangely, when my webpage is accessed, it does not give an error that the side database failed to download.
I have included part of the code below.
Any assistance would be greatly appreciated.
Thanks in advance,
<script type="text/javascript">
var CHO;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
CHO = instance;
CHO.getWindow().setVisibility(true);
CHO.getNavigationControl().setVisibility(CHO.VISIBILITY_AUTO);
CHO.getLayerRoot().enableLayerById(CHO.LAYER_BORDERS, true);
CHO.getLayerRoot().enableLayerById(CHO.LAYER_ROADS, true);
addSideDatabase()
// Add controls for the window
CHO.getOptions().setStatusBarVisibility(true);
CHO.getNavigationControl().setVisibility(CHO.VISIBILITY_AUTO);
// Update the view in Google Earth
var lookAt = CHO.createLookAt('');
lookAt.setLatitude(30.0);
lookAt.setLongitude(-90.0);
lookAt.setRange(9500000); //default is 0.0
CHO.getView().setAbstractView(lookAt);
}
function failureCB(errorCode) {
alert(errorCode);
}
function sideDatabaseSuccess(db) {
sideDatabase = db;
db.setDrawOrder(2);
}
function sideDatabaseFail() {
alert('Sorry! Side database failed to load!');
}
/** Add the URL for the globe served by Earth Enterprise or Earth Builder.
* This function operates similarly to the File => Add Database feature
* in Google Earth EC.
*/
function addSideDatabase() {
google.earth.addSideDatabase(
CHO, "https://mapsengine.google.com/map/edit?mid=zHgXRX6Mts2Q.kHGFoYZlcyBQ&export=download",
sideDatabaseSuccess,
sideDatabaseFail,
{
userName: '',
password: ''
}
);
}google.setOnLoadCallback(init);</script>
Is that URL for a Google Maps Engine Lite map? If so, that might be the issue. I just tried swapping in the URL (https://earthbuilder.google.com/10446176163891957399-13516001307527776624-4/kh/) used in the Google Code Playground example here http://code.google.com/apis/ajax/playground/#adding_a_side_database. That one worked, but my Google Maps Engine Lite URL didn't. Furthermore, it didn't even seem to call its success or failure callback functions!
The thing you are trying to load is a map, not a globe. The two are not equivalent. You can't load a map in Google Earth.
On the bright side, your side-loading code is spot on. Replace your URL with http://laearth.la.gov (Louisiana's Custom Google Earth Server) and it will work.
I'm trying to test simple web map based on PostGIS/Geoserver/OpenLayers stack on Windows Server 2008. I've been using this tutorial and geoserver docs.
When I try to add WMS layer to my map using GeoWebCache:
var index1d = new OpenLayers.Layer.WMS(
"Index1",
"http://localhost:1979/geoserver/gwc/service/wms",
{'layers': "Index2000:index1d",
'format': "image/png",
'transparent': true
},
{'opacity': 1.0, 'isBaseLayer': true}
);
map.addLayer(index1d);
I get infamous 'pink tiles'. Error in Geoserver says:
ERROR [geowebcache.GeoWebCacheDispatcher] - Requested horizontal resolution:
750.0000000000005 , best match: 632.4668417968734 exceeds 10% threshold.
Perhaps the client is configured with an incorrect set of scales (resolutions),
or the DPI setting is off compared to the one in GWC ? http://localhost:
1979/geoserver/gwc/service/wms
My layer seems to be configured correctly and when I serve it without GeoWebCache with simply:
"http://localhost:1979/geoserver/wms"
everything works fine.
Could anyone point where I'm making mistake?
I haven't used GWC, but I guess you have set up the cache yourself? If so, I suppose you had to set the scales where GWC would create it's tiles. Building on these assumptions, I would say that you then must use the same scale levels when accessing the tiles. Look over your GWC settings and maybe recreate the cache.
(Using WMS will work because the map data by default is rendered on the fly, taking whatever parameters you supply it with and rendering from that.)