How to use react leaflet with custom vector tiles - leaflet

I have created a vector tile servie. The API is as follows.
https://api.ellipsis-drive.com/v3/path/32b10f2e-3d75-45f5-aa15-92eff37a5ba9/vector/timestamp/d169b398-6f61-4392-89cb-9fdf7ec51732/tile/{z}/{x}/{y}?style=2f767421-5bf1-41ec-8e0b-7b4b27b68a96
Each zyx combination returns a protobuf (as I believe is the standard). I wanted to render this in react-leaflet and tried the following:
<MapContainer>
<VectorTileLayer url="https://api.ellipsis-drive.com/v3/path/32b10f2e-3d75-45f5-aa15-92eff37a5ba9/vector/timestamp/d169b398-6f61-4392-89cb-9fdf7ec51732/tile/{z}/{x}/{y}?style=2f767421-5bf1-41ec-8e0b-7b4b27b68a96" />
</MapContainer>
Unfortunately this does not render the layer.
In the network tab I notice that this code produces an API call
https://api.ellipsis-drive.com/v3/path/32b10f2e-3d75-45f5-aa15-92eff37a5ba9/vector/timestamp/d169b398-6f61-4392-89cb-9fdf7ec51732/tile/{z}/{x}/{y}?style=2f767421-5bf1-41ec-8e0b-7b4b27b68a96
With z, x and y not filled in. This predictably returns a 400, as it is supposed to fill in the correct z, x and y based on the view port.
Am I using this package the wrong way? Does anyone have an example for react-leaflet using an /{z}/{x}/{y} structure?

Related

Why is leaflet tileLayer not loading my tiles?

I'm trying to load some tiles from a relative path
Why is it that I cannot see the tiles on the map? Things tried/considered:
Checked the zoom level was appropriate (default 11).
Tried using absolute path with C:user/etc but Not allowed to load local resource showed up. But at least showed that z, x, and y values are correctly updated by tileLayer.
Followed this: (The map_{x}_{y}.jpg especifically) without luck too.
Am I missing something critical?

Unimplemented Type 4 error when styling leaflet vector tiles

I am trying to style the vector tiles on leaflet using vector grid plugin. The vector tiles are coming from my own server.
However when I try to specify the style using vector grid plugin, I get an error unimplemented type 4
How could I get rid of this error? Any plugin links or documentation will be really helpful!
Thanks

AEM6.4: Meaning of values in image map properties

AEM offers a plugin to create image maps for its internal inplace editor. After configuration the given values are stored into follow forrmat:
[rect(89,92,356,368)"/content/sites/we-retail/us"|"_blank"|"fdfdfdfdf"|(0.2,0.2004,0.8,0.8017)]
The first paratheses are defines the coordinates of choosen shape.
The content within the first quotaion signs defines the target site, within the second how to open it the browser. In the third pair of quotations sign contains an alternative Text for non images display.
What I don't know are the values in second paratheses. Does someone know for what these values stands for?
From the WCM core components Image model, they are called relative coordinates.
They are not standard HTML attributes and are instead populated as data attributes of the area tag within the image component.
See code below:
<area shape="${area.shape}" coords="${area.coordinates}" href="${area.href}"
target="${area.target}" alt="${area.alt}" data-cmp-hook-image="area"
data-cmp-relcoords="${area.relativeCoordinates}">
Since the map coordinates are fixed coordinates and do not change when the image scales in or not based on screen sizes, the image component’s JavaScript uses this relative coordinates data to adjust the coordinates of the map area whenever the image size is adjusted. This is handled by the resizeAreas() function within the component’s clientlib.

Get Y value in line chart using cubic lines

I am using the Charts library in an iOS application. The required chart I am implementing, displays realtime values fed from a hardware peripheral. I already implemented adding new entries and scrolling to the latest value, so the chart appears to be updating constantly (sort of flowing to the left from the right side of the screen).
Now I need to draw a circle on the right side of the graph, but for that I would need to receive the Y value for the currently visible X. This is easy to get for the points in the DataSet, but I can't find a way to get Y value for the interpolated points between the DataSet values.
Here is what the graph looks like:

real time plotting on iPhone using core plot?

I want to use core-plot for drawing line graph dynamically. data won't come at a time, we will be receiving point by point dynamically.
Is it possible to draw the chart dynamically using core-plot i.e drawing point by point as on when we receive the (x,y) point?
Please help me, Thanks.
Yes, you can do this reasonably easily. For each received data point, append it to an array of values to display. As these data points come in, call -reloadData on the Core Plot graph (or just the particular plot) to redraw the graph, passing in the array you just added a value to in response to the -numbersForPlot:field:recordIndexRange: delegate method.
If you need to adjust the plot range to track your data points (for a moving ticker), recalculate the new CPPlotRange for the X axis and set the plot space's xRange property to that.
Use the CPTestApp-iPhone, AAPLot, or StockPlot examples as templates for how to set up the line chart overall, and modify from that starting point.
I do something similar to this on the Mac in a scientific application:
(source: sunsetlakesoftware.com)
Sounds like you could make use of a demo project I put together and wrote about here (not core plot related though).
It draws a EKG graph but should easily be modified to use another input than the repeated "heart beat"...See line 320 in EAGLView.m where the indata is entered into the array.