Is there any way to implement an editor with my own OSM tile server? - maps

I am working for a local indoor map for my college. It is my final work.
I have created a tile server that is successfully rendering the map in http://localhost:8080/hot/0/0/0.png following this tutorial:
https://switch2osm.org/serving-tiles/manually-building-a-tile-server-18-04-lts/
So I also need to mount on that server mmy own instance of OsmInEdit editor, since an Admin will be allowed to edit the info of the map:
https://github.com/PanierAvide/OsmInEdit
but I dont know how to connect it since it ask for an API a keys that I dont have. How can I get that API for my local map server?
This is OsmInEdit config.json
{
"editor_name": "OsmInEdit",
"hash": "GIT_HASH",
"data_min_zoom": 18,
"map_initial_zoom": 18,
"map_initial_latlng": [48.13678, -1.69533],
"providers": {
"bing": "AhsSQakuHuX3ozMBXC60w-hPk0KD_smZZbHLjb7mBFfeIwDKJnJn2_qK3qQfYfPZ"
},
"osm_api_url": "https://master.apis.dev.openstreetmap.org",
"oauth_consumer_key": "S1UcyQKeyEpa4fzoJhbffi5vCMELM2KrPoZUicag",
"oauth_secret": "xjFttL8ano8nnj6zYK7QxyjQ1NI8HK8TnlTqhUVf",
"always_authenticated": false
}

Related

How can I build a route using polyline in Leaflet?

So I have a test task for a job and it says that I should build a track on the map using polyline, which I get from osrm server using lat and lng waypoints. I can build a track using waypoints, it looks like this:
L.Routing.control({
waypoints: [
L.latLng(route.coord_from_lat, route.coord_from_lng),
L.latLng(route.coord_to_lat, route.coord_to_lng),
],
}).addTo(map);
But the task says I should build a track using polyline, so how could I do it? For example, if I make a request to the server with these waypoints, I get the next polyline: "ae_xDoqbmJGcCo#iD_CcK_DaKGQeBqBwDoEyAm#_D{#{#{Cc#oAa#y#Qe#DqAY_BiAgCo#u#i#E_#[SDgDdCuAhBYRe#J]F]Dq#P{#Xa#Hk#NsCb#{ALqBA]AUKSQUk#Qs#g#c#OAYDSHu##_EGeCA{Cw#c#HQTId#DdDAj#Q#g#j#uCd#cJd#iED{DzA{BZiKo#gF[mCR_IxFsG\\gCRmArAwCdC_GE_HGuEPuDnAuCrE"
How could I use it to build a track in leaflet map?

why does ether provider return nothing when refreshing page on a react website?

I have been creating a front end to interact with a smart contract. The smart contract that I has been one that I deployed on test network. The way I am setting up the provider uses the 'ether' library and the provider that I use is infura.
async function loadWeb3() {
// console.log('hit');
if (window.ethereum) {
window.ethereum.enable()
setProvider(`await new ethers.providers.InfuraProvider('rinkeby',API_KEY)`);
console.log(provider);
}
}
The above function is how I try to set the provider to a useState. The connection to the contract works when I am running it on a local host and change some aspect of the react app and save and thus updates the react app on the host. Although this does not work when I choose to refresh the page. Instead when I check the output of
await new ethers.providers.InfuraProvider('rinkeby',API_KEY)
The returned value is " ", I am able to see this by printing it on the console, but when I print it using the above steps of saving some change while in development the output is instead
"InfuraProvider {_isProvider: true, _events: Array(0), _emitted: {…}, disableCcipRead: false, formatter: Formatter, …}"
I am using a useEffect within the component to call the function "loadWeb3". I have not found a way to fix this or why this would be happening. Any help is appreciated :)

Is there a way to track a user active time spent in the React web application via Google Analytics?

Let's say an user with user_id(1000) and email(user101#example.com) logged into the reactjs based web application and browsed a few pages for 2mins and then moved to other application tabs/windows for 30mins and came back to the web application and browsed the app for 5more mins on April 1st 2021.
I would like track/get this user's time spent report in the Google Analytics report saying user101#example.com with user_id(1000) has spent 7mins on April 1st 2021. Is there a way to track the same via GA if possible with react-ga, if it is possible how can we do it?
As of now with react-ga I'm tracking the userid property like the below:
ReactGA.set({userId});
If it is not possible via Google Analytics, is there any service provider that has this kind of feature?
Note: I have gone through existing q/a but unable to find/figure out the solution.
I was able use another tracker Riveted, which by it's definition:
Riveted helps fix this by measuring the amount of time users are
actively engaged (e.g., clicking, scrolling, using the keyboard) and
then reporting the data to Google Analytics in frequent intervals.
More on it's page.
While Riveted is written with a direct global variable, we need to work around to make it available for the react project using exports-loader.
Here is what I could achieve:
Get the riveted.js locally as a file
Ensure to install the exports-loader via npm install exports-loader --save
Import the same with the location of revited.js as:
import riveted from 'exports-loader?exports=riveted!./riveted.js';
After you have initialised ReactGA.initialize(configs);
If you check the source code of riveted, you will notice it's using the same ga object of window.ga and thus the google analytics once initialised via ReactGA.initialize should be enough.
The react-ga provides an ability to extend ga. They state ga can be accessed via ReactGA.ga() method. This gives developers the flexibility of directly using ga.js features that have not yet been implemented in ReactGA. No validations will be done by ReactGA as it is being bypassed if this approach is used.
Then the ga allows writing a custom plugin
So with all that here is what the code looks like:
import React, { PureComponent } from 'react';
import ReactGA from '../../src';
import riveted from 'exports-loader?exports=riveted!./riveted.js';
export default class App extends PureComponent {
constructor(props, context) {
super(props, context);
this.state = {
reactGaInitialised: false,
configs: [DEFAULT_CONFIG]
};
}
initReactGA = (event) => {
const { configs } = this.state;
ReactGA.initialize(configs);
// Send initial test view
ReactGA.pageview('test-init-pageview');
function TrackerCustomPlugin() {
this.riveted = riveted;
}
TrackerCustomPlugin.prototype.init = riveted.init;
let ga = ReactGA.ga();
ga('provide', 'riveted', TrackerCustomPlugin);
ga('require', 'riveted');
ReactGA.plugin.execute('riveted', 'init', {
reportInterval: 10, // Default: 5
idleTimeout: 20, // Default: 30
nonInteraction: true // Default: true
});
};
Here is how the events are sent to GA from my local:
And the GA Dashboard showing Time Spent:

Getting shareable link to document in react app

I am currently making an app that generates Itineraries and I am able to convert the html to pdf using PDFjs using something like this:
var doc = new jsPDF();
doc.fromHTML(html);
doc.save("YourItinerary.pdf");
How should I proceed about making a shareable link to this pdf on client-side preferably using an API such as Google Drive?
Getting the shareable link would be to get the webViewLink which you can try by passing webViewLink as parameter in the 'fields' property in Files.get. This returns a link you can open in any browser. However, you also have to deal with permissions.
To make the webViewLink (your shareable link) work for anyone you can use in Permissions.create:
{
"role": "writer",
"type": "anyone",
}
To make the webViewLink available to certain users only you'll have a request body like:
{
"role": "writer",
"type": "user",
"emailAddress": "someuser#gmail.com"
}

How to NOT delete a file in a Azure FTP connector action if the transfer fails in a logic app

I have a successful connection setup between a FTP site and dropbox using a azure logic app. But while setting it up it kept just downloading the file then, since I had the next step wrong, deleting.
In a test environment this is annoying. In production, pretty awful.
Here is the code I am using on the action part:
"operation": "UploadFile",
"parameters": {
"FilePath": "#{triggers().outputs.body.FilePath}",
"content": {
"Content": "#{triggers().outputs.body.Content}",
"ContentTransferEncoding": "None"
},
"overwrite": true
},
Is there anything I can do so that if it fails it leave the file on the server?
I'm not 100% sure what you mean, but I will give it a try. Maybe you can reformulate the question if I misinterpret you.
But yes, there exists "conditions" in Logic Apps which can be used. If you are new to Logic Apps I'd suggest you use "designer view" and you can then click "Add condition to be met". This would visualize a text box in which you can formulate conditions. For instance:
#equals({your data}, bool('true'))
To check if some value is true, or something similar to check if data is null.

Resources