I'm trying to solve an issue with mt mapbox-gl-js implementation.
The data I would like to display is stored in postgis. I understand that direct postgis->mapbox-gl-js is not possible and I have to go via a geo server.
I installed geo server and get a geojson stream when I access: http://192.168.2.7:8081/geoserver/DCSIdefix/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=DCSIdefix:units&maxFeatures=500&outputFormat=application/json
I then added this as URL to the mapbox-gl-js:
var url = 'http://192.168.2.7:8081/geoserver/DCSIdefix/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=DCSIdefix:units&maxFeatures=500&outputFormat=application/json';
map.addSource('dcs', { type: 'geojson', data: URL });
after which I create the layer to display the data on the map.
Issue:
I can see the query arriving at the geoserver and the geojson is
generated but the data is not displayed on the map
if I replace the direct geoserver URL with a file on the same server instead, generated from the same
URL (quick and dirty wget batch file which overwrites the geojson file every 5 seconds) and use the file instead of the URL, it works perfectly so the geojson data is fine just the script is
somehow not able to take the data (maybe it does not wait for the full stream to arrive?).
Any help is highly appreciated!
Thanks !
Related
Load WMS service, the url is too long to get data
Load a WMS service, do not add "CQL_FILTER" parameter can request to the data, add "CQL_FILTER" parameter can not get, who can help me to analyze it? Thank you very much!
"http://192.168.8.254:8080/geoserver/workspaceTest/wms?service=WMS&version=1.1.0&request=GetMap&styles=&bbox={bbox-epsg-3857}&width=256&height=256&transparent=true&srs=EPSG:3857&format=image/png&layers=workspaceTest:accMV03&CQL_FILTER=WITHIN(GEOM, SRID = 3857; MULTIPOLYGON(((12255325.69509 3791918.95510, 12616926.21400 3762599.99411, 12646245.17499 3547594.28016, 12284644.65608 3547594.28016, 12255325.69509 3791918.95510))))"
Can post requests be used?
I have published a WMS service by geosever, and there is no problem in loading json file or rasterlayer. Now I use the cql_filter of geoserver to search the data within the search range. If the cql_filter parameter is added into the url, the style content cannot be obtained.
I want to ask:
1. How does mapbox-ios use post to request WMS or vector data?
2. Why is it not possible to get style content when CQL_FILTER parameter is added to the url, while the browser can?
My url:
http://192.168.8.254:8080/geoserver/workspaceTest/wms?service=WMS&version=1.1.0&request=GetMap&styles=&bbox={bbox-epsg-3857}&width=256&height=256&transparent=true&srs=EPSG:3857&format=image/png&layers=workspaceTest:accMV03&cql_filter=WITHIN(GEOM,SRID=3857;MULTIPOLYGON(((12255325.69509 3791918.95510, 12616926.21400 3762599.99411, 12646245.17499 3547594.28016, 12284644.65608 3547594.28016, 12255325.69509 3791918.95510))))
My log:
[ERROR] {}[Style]: Failed to load tile 2/2/1=>2 for source mapbox-streets: unsupported URL
[ERROR] {}[Style]: Failed to load tile 3/6/3=>3 for source mapbox-streets: unsupported URL
I'm very new to MapBox and JavaScript/html, I'm building a Washington DC crime map with a large 10 year data set that is on my local system. The file is to large(roughly 45mb) to host on MapBox (5mb file limit). Ive tried Github pages and cant get that to work either. I need my java script to access the dataset and create pie charts using a few attributes withing the set.
I've tried alot of different ways to access the data, host it on github pages then passing the url to the add source mapbox function. I never was able to figured out the right way to do that. Ive tried to access the file using the path to it locally but I also cant figure out the right way to do that. Additionally I tried to use a sub set of the data, just ward 3 data, upload that to mapbox datasets and try accessing it that way and i get a blocked by cors policy error.
this is my most recent attempt trying to access the file I uploaded to mapbox. this returns the following error.I want to add a source and then make a cluster for each policing Shift attribute type. Not sure if this would be how to do the clusting correctly but at the moment I cant load the data correctly yet so I need to overcome that hurdle first.
ERROR Access to fetch at
'https://studio.mapbox.com/datasets/benpdoiron/cjuo3a0wha6knu9q7t9ze5gvc/'
from origin 'null' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource. If an opaque response serves your needs, set the request's
mode to 'no-cors' to fetch the resource with CORS disabled.
CODE SNIPPET
var url="https://studio.mapbox.com/datasets/benpdoiron/cjuo3a0wha6knu9q7t9ze5gvc/";
map.on('load', function () {
map.addSource('Pie_Chart1', {
type: 'geojson',
data: url,
cluster: true,
clusterProperties: {
day: ["+", ["get", 'DAY']],
evening: ["+", ["get", 'EVENING']],
midnight: ["+", ["get", 'MIDNIGHT']]
}
The expected outcome is that the data loads and I can create functions and layers using its attributes and information. Ideally I think hosting the whole dataset, roughly 45mb, on github pages and accessing it there would be the way to go but I cant seem to figure out how to pass the file mapbox add source properly
I am new to this domain of GeoInformation development. I am following the below pipeline architecture flow to achieve a GIS-based application problem.
PostGIS - GeoServer - Leaflet
I have set up my leaflet client application which composes tiles to a map. I am also using some leaflet plugins (like Draw, zoom) in order to give users the option to mark and to draw on the map.
I am able to draw and get the GeoJSON features of the drawn polygon as shown below:
I am stuck after this part of figuring how do I need to send the polygon request drawn and retrieve the polygon (which is saved) programmatically. I know the answer is WFS-T, but how do I use this in my raw code. Here is the raw code example:
Raw Code link: https://pastebin.com/wCAHxVc0Follow the link
References:
https://gis.stackexchange.com/questions/266402/save-leaflet-drawn-features-with-attributes-to-postgis
https://github.com/Flexberry/Leaflet-WFST
The best way to understand WFS-T is using GeoServer Demo option (Link: http://localhost:8080/geoserver/web/wicket/bookmarkable/org.geoserver.web.demo.DemoRequestsPage?5). The main problem for me was to figure out how do I insert and update transaction details. Exploring GeoServer Demo gave me the solution to it.
Here is a sample example:
var postdata = "<wfs:Transaction service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:topp="http://www.openplans.org/topp" xmlns:gml="http://www.opengis.net/gml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-transaction.xsd http://www.openplans.org/topp http://localhost:8080/geoserver/wfs/DescribeFeatureType?typename=topp:tasmania_roads"> <wfs:Insert>
<topp:tasmania_roads>
<topp:the_geom>
<gml:MultiLineString srsName="http://www.opengis.net/gml/srs/epsg.xml#4326">
<gml:lineStringMember>
<gml:LineString>
<gml:coordinates decimal="." cs="," ts=" ">
494475.71056415,5433016.8189323 494982.70115662,5435041.95096618
</gml:coordinates>
</gml:LineString>
</gml:lineStringMember>
</gml:MultiLineString>
</topp:the_geom>
<topp:TYPE>alley</topp:TYPE>
</topp:tasmania_roads> </wfs:Insert> </wfs:Transaction>"
This XML request can later be used to send to GeoServer for manipulation using AJAX call as shown below:
$.ajax({
type: "POST",
url: gs.wfs,
dataType: "xml",
contentType: "text/xml",
data: postdata,
//TODO: Error handling
success: function(xml) {
//TODO: User feedback
console.log("Successfully inserted");
}
});
For better understanding with an application scenario of WFS-T, try following this URL: https://georepublic.info/en/blog/2012/leaflet-example-with-wfs-t/. This should help you get started with WFS-T. Happy map editing :)
I have been trying to set up a sample AngularJS app with webMethods Integration Server on the backend. Using $resource, I can easily pull normal JSON files and manipulate the data within the file. However, the goal is that I want to create services in webMethods Designer and call them from AngularJS using $resource to display the data in my app. The problem is that from AngularJS I cannot extract the data I need from the service that I'm creating in Designer. In Designer I can use (in WMPublic) documentToJSONString, and output something like:
jsonString {"id":"1", "name":"Dan", "quantity":"3"}
But I cannot extract the data because this is not a pure JSON string. Does anyone know how to (1) extract the JSON string output data using AnularJS or (2) output a JSON document from Designer? I am calling a REST service; something to the effect of
http://localhost:2222/rest/Get/getOrderData
from my services.js file in AngularJS.
Here is my services.js file:
/* Services */
var orderServices = angular.module('orderServices', ['ngResource']);
orderServices.factory('Order', ['$resource',
function($resource){
return $resource('http://localhost:2222/rest/REST/getOrderData', {}, {
query: {method:'GET', isArray:true}
});
}]);
Then, in my app, I want to use an ng-repeat to call things like {{order.id}}, {{order.name}} etc. Is anyone good with webMethods and Angular or done this before?
To force the response that you want, I would have used the service
pub.flow:setResponse mapping the jsonString to it's string parameter and probably hardcoded (eww!) the contentType parameter to 'application/json'
You may also need to use the service pub.flow:setResponseCode to set the response code.
They would be the last services in getOrderData
I would have invoked it using the below (where namespace is the folder structure in designer)
http://localhost:2222/invoke/namespace:getOrderData
The above applies to Integration Server V8 and it looks like you're using V9 since some of the services that you mention didn't exist in V8. This would also apply to a normal flow service, not a specific REST one (assuming they exist in V9).
I'm new to KendoUI, trying to populate a KendoUI grid with JSON data which is fetched from mongoDB as BsonDocument lsit and returned as JSON string,
var ds = new kendo.data.DataSource({
transport: {
read: {
url: "WebService.asmx/GetJson",
dataType: "json",
data: {
q: "data"
}
}
},
schema: {
data: "statuses"
}
});
$("#grid").kendoGrid({
dataSource: ds
});
I tried this one, grid is not binding to me, was I'm doing wrong, how to bind my data to grid, pls help me waiting for kind reply.
note: Grid should not be defined structure with column fields, based on Json string grid structure has to changed.
I think you're probably trying to do too many things at once if you're new to KendoUI. Try just binding the grid to some static data (hard coded into the web page) that looks exactly like the data from MongoDB first... You should be able to extract this from MongoDB easily enough using something like MongoVue.
Once you're sure the data itself is in the right format and the grid is configured to use this properly, then try setting up a remote url or web service to fetch the data and make sure that the data retrieved from the remote url is what you're expecting.
Finally, when you have both of those pieces of the puzzle in place, you should look at hooking the KendoUI grid up to the remote web service.