Add GeoJson Source in Mapbox GL JS for Pie Chart creation - mapbox

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

Related

CDK BasePathMapping for existing custom domain is created but doesn't work

This is all done using CDK.
I created a REST API and custom domain associated with it via a base path mapping (domain.addBasePathMapping()). That worked fine.
Due to some requirement, I also need to redirect a particular path from another custom domain (I'll call this the old domain) to this api. In theory this should be straightforward - just create a base path mapping from the old domain to the new API.
This is how I tried doing it:
const domain = DomainName.fromDomainNameAttributes(this, 'oldDomain', {
domainName: 'the old custom domain name',
domainNameAliasTarget: 'the "API Gateway domain name" value from the console for that domain',
domainNameAliasHostedZoneId: 'the "Hosted zone ID" value from the console for that domain',
});
new BasePathMapping(this, 'myMapping', {
domainName: domain,
restApi: this.api,
basePath: 'foo',
});
First I created a DomainName object by looking up the old domain, then created a mapping to my new API with some path. Note that I cannot call addBasePathMapping() on the domain name created, as that method returns an IDomainName which doesn't have that method.
When I ran this, it created the base path mapping in the old custom domain, pointing to my new api, correct stage, specified path. Great!
Except it didn't work. Invoking [old domain]/foo/bar (where bar is the resource path in the new API) returned 404.
The strange thing is that when I create that mapping manually via the console, it works perfectly.
Another weird thing is that if I create it via CDK, and then edit it in the console, it starts working. If I then delete it (manually or via CDK) and then create it again via CDK, it continues to work. But of course this isn't a proper solution.
I can only assume that creating it manually performs some extra operation not done via the CDK construct, but as the docs don't say what else may need to be done, I have no idea what.
The solution is to use the CfnApiMapping construct from aws-cdk-lib/aws-apigatewayv2. In fact this is a lot easier as you don't need to get the hosted zone id etc, just pass it some readily available information and it creates a base path mapping that actually works:
new CfnApiMapping(this, 'myMapping', {
apiId: this.api.restApiId,
domainName: 'old custom domain'
stage: this.api.deploymentStage.stageName,
apiMappingKey: 'foo',
});
I should warn that this comes with strange behaviour.
First an overview of my setup:
The old api has the following path on it: [old api]/foo/bar. The old custom domain is mapped straight to the old api with no path, so the old endpoint url is [old custom domain]/foo/bar. The new endpoint is [new custom domain]/bar. In order for the old URL to map to the new api, I need a base path mapping for foo on the old custom domain to point to the new api, so that [old custom domain]/foo/bar will be directed to [new api]/bar. (Note there are no other resources on foo and nothing new will be added, so this is fine.)
So currently calling [old custom domain]/foo/bar invokes the /foo/bar path on the old api. Once I deploy the CfnApiMapping resource, calling that same URL invokes the correct path on the new api.
Weird behaviour 1: If I delete that base path mapping, I would expect it to go back to the original api. Instead I get a 403 error. If I create it again, it resolves to the new API again, and deleting it again gives the 403 error again.
Weird behaviour 2: If instead of deleting it, I change the path value so it no longer maps "foo", the /foo/bar path works with the old endpoint again. I can then delete the mapping and everything keeps working fine.
Weird behaviour 3: I am unable to recreate this as I can't remember which sequence of steps I took, but it happened a couple of times where I deleted the base path mapping and it continued to work as if the mapping was still there. There was no mapping visible in the console, and I gave it plenty of time for the change to take effect, but it continued to work.
All this is done with the CDK, not manually. Doing this manually or via regular cloudformation works with no issues.

Postgis -> Geoserver -> GeoJson -> Mapbox gl js

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 !

Load WMS service, the url is too long to get data

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

Open Route Service - LRM

ive been struggeling for awhile with this,
so i got two questions to ask.
First question:i cant change the profile on open route service.
my code is working when i put in the api-key in the code below.
var control;
function tests() {
var control = L.Routing.control({
waypoints: [
L.latLng(coords),
L.latLng(coords2)
],
router: new L.Routing.openrouteservice('Api-Key'),
}).addTo(map);
document.getElementById("RouteButton").onclick = tests;
};
But when i try changing the profile, it either doesnt change or get error messages.
The things i tried so far is.
router: new L.Routing.openrouteservice({api_key:'HIDDEN', profile:'footwalking'),
and
router: new L.Routing.openrouteservice('https:// api.openrouteservice.org /directions? & api_key = Hidden& profile = foot-walking'),
The first one works, but the profile doesnt change It is still using the driving-car default profile.
The Second one gives me a two error messages,
First error message is | Access to XMLHttpRequest at 'https://api.openrouteservice.org/directions?' from origin 'http://localhost:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. |
Second error message | corslite.js:87 GET https://api.openrouteservice.org/directions? 403 (Forbidden) |
both of the error messages gives off a long url which ive shorted down to https://api.openrouteservice.org/directions?.
The other Question i got is, how do i clear the map, so a previously drawn route gets removed when a new route is drawn. On the picture below you can see what happens at the moment when i request a second route, both the old and the new i shown.
two routes on the same map
Hope you guys can help.
open the L.Routing.OpenRouteService.js

Custom Dimensions Not Reporting Through to Google Analytics API V4

I am attempting to pass information collected as, "custom dimensions," from Google Tag Manager through Google Analytics and then extract them out via the Google Analytics V4 API.
I have set up four of the fundamental custom dimensions suggested by Simo Ahava in this article.
My variable setup looks like the following:
variable setup
Essentially, I have been able to successfully pass through userID_dimension, hittimestamp_dimension, clientid_dimension and sessionid_dimension to the Google Analytics dashboard, but for some reason I am not able to extract out the hittimestamp_dimension through the API.
Here's what I am able to see on the dashboard:
Google Analytics Dashboard
As far as the API itself, I am using the HelloAnalytics.py python version supplied by Google, and I am able to extract out all of the above information, minus the timestamps dimensions on the right hand side of each.
I'm storing the timestamp information in dimension2, but upon making the below call (again, using API V4) I get blank...nothing.
analytics.reports().batchGet(
body={
'reportRequests': [
{
'viewId': VIEW_ID,
'dateRanges': [{'startDate': '2017-10-05', 'endDate': '2017-10-06'}],
'samplingLevel': 'LARGE',
'dimensions': [{'name': 'ga:dimension4'},{'name': 'ga:dimension2'}]
}]
}
).execute()
Upon making this call, one would expect that the above would report out dimensions similar to what the Google Analytics dashboard would show. E.g. one would think that the dashboard itself is using the API. However what prints out is blank. All other custom dimensions print out as expected.
If I try to call the above function on just dimension2 itself with no other dimension, it is also blank.
Is there something special one has to do in order to extract hit-scoped variables within the API? Or does the API just not allow hit-scoped variables to pass through?
thanks,
You forgot to add a 'metrics' field to your request, it is required as per documentation
Source: Reporting API v4 - Method: reports.batchGet
The metrics requested. Requests must specify at least one metric. Requests can have a total of 10 metrics.
The below modified request should work:
analytics.reports().batchGet(
body={
'reportRequests': [
{
'viewId': VIEW_ID,
'dateRanges': [{'startDate': '2017-10-05', 'endDate': '2017-10-06'}],
'samplingLevel': 'LARGE',
'dimensions': [{'name': 'ga:dimension4'},{'name': 'ga:dimension2'}],
'metrics': [{'expression': 'ga:sessions'}]
}]
}
).execute()