Update
When i use the default layer, the layer being shown in map. but im trying custom layer. Thats wony working. Is there anything to take care while creating postgis connection, namespace while creating workspace and all?
var points = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://localhost:8086/geoserver/test/wms',
params: {
'LAYERS': 'test:points_data',
'VERSION': '1.1.0'
},
serverType: 'geoserver'
})
});
In geoserver i can access the layer.
Open layer view
I'm using
Tomcat 9.0_Tomcat9.1
OpenLayers-2.13.1
geoext2-2.1.0
Edit:
i updated openlayer version
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
But still have same error
The response is a blank image
console inspected
I think the problem is your server URL. try this:
var points = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://localhost:8086/geoserver/wms',
params: {
'LAYERS': 'test:points_data',
},
serverType: 'geoserver'
})
});
As you can see in this example you dont need to put workspace name in url. so http://localhost:8086/geoserver/wms is fine.
Related
I upgraded the forge viewer version of my solution to 6.* to utilize the latest released feature "Document browser extension" as it mentions here
This extension doesn't appear for me, please help.
I got it to work after some experimenting.
Here is my workflow in case you still need it.
First, initialize the viewer:
// initialize the viewer
Autodesk.Viewing.Initializer(adOptions, () => {
// when initialized, call loading function
this.loadDocument(encodedUrn);
});
Then, load your document in the function called above:
// load the document from the urn
Autodesk.Viewing.Document.load(
encodedUrn,
this.onDocumentLoadSuccess,
this.onDocumentLoadFailure,
);
In the success callback you can now do the following:
onDocumentLoadSuccess(doc) {
// get the geometries of the document
const geometries = doc.getRoot().search({ type: 'geometry' });
// Choose any of the available geometries
const initGeom = geometries[0];
// and prepare config for the viewer application
const config = {
extensions: ['Autodesk.DocumentBrowser'],
};
// create the viewer application and bind the reference of the viewerContainer to 'this.viewer'
this.viewer = new Autodesk.Viewing.Private.GuiViewer3D(
this.viewerContainer,
config,
);
// start the viewer
this.viewer.start();
// load a node in the fetched document
this.viewer.loadDocumentNode(doc.getRoot().lmvDocument, initGeom);
}
I hope this will make it work for you as well. What helped me was the reference to the loadDocumentNode function in this blog post.
I am using django with bloodhound in prefetch mode like in the official example.
jQuery(document).ready(function() {
var countries = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
// url points to a json file that contains an array of country names, see
// https://github.com/twitter/typeahead.js/blob/gh-pages/data/countries.json
prefetch: '../static/data/countries.json'
});
// passing in `null` for the `options` arguments will result in the default
// options being used
var typeahead_elem = $('.typeahead');
typeahead_elem.typeahead({
name: 'countries',
source: countries
});
})
The difference with the official example is the url. I use '../static/data/countries.json'
But I know by checking the server and using firebug network tab that no request is sent.
WHEREAS (and now it becomes strange) if I use '../data/countries.json'. Then the request is sent and becomes a 404. But with firebug I can edit it and resend. And putting '../static/data/countries.json' works, it comes back code 304.
Why is my original '../static/data/countries.json' not sent ??
Btw, why is 'countries.initialize();' not needed ?
I am having an issue with Google Maps not displaying my program generated KML file (see that question). My question is if there is a way to turn on more verbose errors so I can see if there is an error with my program generated KML file or if there is a different issue.
Specifically for KML layers, set a listener for the status_changed event and display the layer's status:
var newKml = new google.maps.KmlLayer({
url: VALID_KML_URL_HERE
});
newKml.setMap(map);
google.maps.event.addListenerOnce(newKml, 'status_changed', function () {
console.log('KML status is', newKml.getStatus());
});
I want to create symbols with text on google maps as shown in the following map where roads are marked with their names e.g. M1.
google maps example
Also the text is not predefined so I cannot use stored icons with the appropriate text.
Any ideas on how google creates these symbols?
A good idea here is to write a server side process in your backend's language to render this dynamic image.
For PHP there is: PHP GD
Perl(My Current backend) has a number of module for drawing images.
I'm sure whatever your backend is it has some.
Anyway you can write some code that given some GET variables will return an image drawn using them.
Then you just need a small function to build the url:
function getImage(text,color) {
return "example.com/draw/icon.php?text="+text+"&color="+color;
}
This will call your serverside file which can return the image with the correct headers.
You'll need to employ some form of caching to generate these probably on the server side and the client side depending on your apps load.
So you want to add place names? You can create custom icons or labels, are you using the API or My Maps?
This may help if you're using My Maps:
https://support.google.com/mymaps/answer/3024931?hl=en
otherwise if you're using the API then try this:
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
}
https://developers.google.com/maps/tutorials/customizing/custom-markers
So I'm trying to use Google Maps by decoding GPS data from a mobile device and then generates a map route out of it. Using the Static Maps API, I can sort of approximate a trip, but the data gets generated every 1-5 seconds, which is far beyond the amount of information you can send over a GET request to Google Maps.
So my JavaScript map looks like this running a webpage:
Edited: DropBox does not apparently persistently store photo links persistently, switching to OneDrive.
Should look like http://bit.ly/1tjxg6u
Which is glorious. I figured that if I used html2Canvas, I could generate a screenshot of the map, and transfer that file onto another portion of my server, or URI encode it. But when I tried that, I get this instead.
Does Look Like http://bit.ly/1jlrOvL
Not glorious at all. I then checked out rasterHTML. But it gave me an error when I used rasterizeHTML.drawDocument of "cannot get innerHTML of undefined" when I call modalMap, (see JavaScript code below). It does let me get the HTML and use drawHTML of the exact same element using .innerHTML. No idea why. Using HTML, that gets me this result:
All Three together http://bit.ly/1ssxIet
rasterizeHTML is in the lower-right. html2Canvas is the lower-left. I'm sort of stuck halfway between on both.
Edited: After doing a lot of testing, the error is:
html2canvas: Error loading ":http://mt0.googleapis.com/vt?...
The URL does show the image when you click on it in the console, but HTML2canvas can't display it. I'm not sure if it's a URL encoding problem or what.
I enabled CORS in my headers, Apache, and the .htaccess just in case that was the issue. I then downloaded the .php proxy file and tried that, just in case that was the issue. Neither worked.
The javascript code:
google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
// Try RasterizeHTML
var modalMap = document.getElementById('mainPageCanvas');
var modalMapHTML = modalMap.innerHTML;
var canvasHolder = document.getElementById('rasterizeHTML');
console.log(modalMap);
console.log(canvasHolder);
var options = {
width : 1000,
height : 400,
executeJs : false,
zoom: 2
};
rasterizeHTML.drawHTML(modalMapHTML, canvasHolder)
.then(function success(renderResult) {
console.log(renderResult);
}, function error(e) {
console.log(e);
}.deb());
html2canvas(document.getElementById('mainPageCanvas'), {
proxy: "//localhost:85/ormc/consumer/build/ajax/php/html2canvasproxy.php",
useCORS: true,
allowTaint:true,
logging: true,
onrendered: function(canvas) {
canvas.setAttribute('crossOrigin','anonymous');
$('#secondaryPageCanvas').replaceWith(canvas);
console.log("Canvas function called");
}.deb()
});
}.deb());
Now if I attempt to do a dataUrl conversion, I get this: "Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported."
The HTML is just:
<div id="mainPageCanvas" style="width:1000px;height:400px;"></div>
<div id='secondaryPageCanvas' style="width:1000px;height:400px;"></div>
<canvas id='rasterizeHTML' style='width:1000px;height:400px;'>
My headers being sent are:
Access-Control-Allow-Methods:OPTIONS, GET
Access-Control-Allow-Origin:*
Access-Control-Request-Method:*
Cache-Control:no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Just to see if anything is triggering the CSP (It's report only), but nothing is throwing it. So, what am I doing wrong?