I have a line string that needs to be displayed. It is a collection of GeoJSON data.
I have a problem where this works fine when opened in the browser, but when I open it in the mobile browser, the line that I am adding is not displayed.
Function that adds routeLayer
const route = new LineString(breaks)
route.transform('EPSG:4326', 'EPSG:3857');
const routeFeature = new Feature({
type: 'route',
geometry: route,
});
const features = [routeFeature];
routeFeature.setStyle(mainRouteStyle);
const mainRouteVector = new VectorLayer({
source: new VectorSource({
features,
}),
});
map.addLayer(mainRouteVector);
I couldn't find anywhere what is wrong, I don't have any errors. I am adding geo markers also with the same method and they are displayed. I also tried putting a simple line that connects 2 coordinates and it is also not shown when I add it later with addLayer but when I include that in layers when initializing the map, it is shown.
Keep in mind that on desktop browser it is working fine, but on mobile it has problems. Does anybody know what is the issue?
Ok, turns out this was not the issue with OpenLayers, I had targeting localhost to get the geojson data, which on mobile is obviously not localhost.
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'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?
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 a secure site that is using MarketCusterer for clustering markers! When viewing the page, I was getting the view only secure bits or see them all as I understand the icons are stored on a non-secure site.
I've located the icons, included in my ASP.NET MVC project and setup the necessary routes to allow access to the images. My problem is, once I add the styles (code below), nothing is displayed. I moved the images out of the MVC site onto our corporate public site and ensured I could get to the URL and still nothing was displayed. When I zoomed out far enough for the fourth image to be displayed, the standard google one appeared.
Having stepped through the code debugging, I can see my styles are being passed through correctly to the markerclusterer.js as expected.
Am I doing something wrong?
Thanks
Simon
var clusterStyles = [
{
opt_textColor: 'black',
url: 'http://www.mywebsite.com/images/m1.png'
},
{
opt_textColor: 'black',
url: 'http://www.mywebsite.com/images/m2.png'
},
{
opt_textColor: 'black',
url: 'http://www.mywebsite.com//images/m3.png'
}
];
var mcOptions = { styles: clusterStyles };
var markers = [];
Loop to add markers
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
For anyone interested it appears it was because the height and width values were missing. I had thought these were optional parameters but it seems they need to be there!
hHanks for looking.
Simon
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.)