feat(axios-overpass-api): initial commit

This commit is contained in:
dancingCycle 2023-02-07 22:38:06 +01:00
parent 601d361bab
commit ce34dcdde5
15 changed files with 11578 additions and 0 deletions

View File

@ -0,0 +1,6 @@
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}

107
axios-overpass-api/.gitignore vendored Normal file
View File

@ -0,0 +1,107 @@
# Others
build*
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# TypeScript v1 declaration files
typings/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
.env.test
# parcel-bundler cache (https://parceljs.org/)
.cache
# Next.js build output
.next
# Nuxt.js build / generate output
.nuxt
dist
# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and *not* Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# vuepress build output
.vuepress/dist
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# TernJS port file
.tern-port

View File

@ -0,0 +1,17 @@
# React.js Example
## Table of Contents
0. [General](#general)
1. [Links](#links)
# General
# Links
* [React setup with webpack for beginners](https://dev.to/deepanjangh/react-setup-with-webpack-for-beginners-2a8k)
* [Production](https://webpack.js.org/guides/production/)
* [Setup Development and Production Environment for React App](https://medium.com/freestoneinfotech/setup-development-and-production-environment-for-react-app-397c4cc9e382)
* [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/)
* [load CSS](https://masteringjs.io/tutorials/webpack/css-loader)
* [load CSS](https://webpack.js.org/loaders/css-loader/)
* [load CSS](https://blog.jakoblind.no/css-modules-webpack/)

View File

@ -0,0 +1,10 @@
import React from 'react';
import Home from './pages/home';
export default function App() {
return (
<div>
<h1>App</h1>
<Home />
</div>
)
}

View File

@ -0,0 +1,17 @@
import React from 'react';
import PropTypes from 'prop-types';
//destructure props
const Hello = ({msg}) => {
return (
<>
<div>{msg}</div>
</>
);
}
export default Hello
Hello.propTypes = {
msg: PropTypes.string,
};

View File

@ -0,0 +1,65 @@
import React from 'react';
import axios from 'axios';
import qs from 'qs';
var data = qs.stringify({
'data': '[bbox:51.990800124058914,10.045623779296875,52.552976197007524,11.01104736328125][out:json];(node["shop"="second_hand"];way["shop"="second_hand"];relation["shop"="second_hand"];);out center;'
});
var config = {
method: 'post',
maxBodyLength: Infinity,
url: 'https://overpass-api.de/api/interpreter',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data : data
};
function myFunction(value,key) {
//console.log("key: "+key+",type: "+value.type);
if(value.tags.name===undefined){
console.log('ERROR: OSM element does NOT include name tag');
}else if(value.type==='node'){
console.log('node');
console.log('name: '+value.tags.name);
console.log('lat: '+value.lat);
console.log('lon: '+value.lon);
}else if(value.type==='way'){
console.log('way');
console.log('name: '+value.tags.name);
console.log('lat: '+value.center.lat);
console.log('lon: '+value.center.lon);
}else{
console.log('ERROR: OSM element NOT supported');
}
}
function post () {
console.log('post() started...');
console.log('data: '+data);
axios(config)
.then(function (response) {
//log JSON
const dataObj=response.data;
//console.log("dataObj: "+dataObj);
const elemAry=dataObj.elements;
const elemAryLength=elemAry.length;
console.log("no: "+elemAryLength)
elemAry.forEach(myFunction);
})
.catch(function (error) {
console.log(error);
});
console.log('post() done.');
}
export default function Map() {
return (
<>
<p>Map</ p>
<button onClick={post}>post</button>
</>
);
}

View File

@ -0,0 +1,17 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
//TODO remove debugging
if (process.env.NODE_ENV !== 'production') {
console.log('development mode');
}
//since react 18
import { createRoot } from 'react-dom/client';
//create root container
const root = createRoot(document.getElementById("root"));
//render root app
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

View File

@ -0,0 +1,16 @@
import React from 'react';
import Hello from '../components/hello';
import Map from '../components/map';
import '../style.css';
const Home = () => {
return (
<>
<h2>Home</h2>
<h3>(React.js Lambda Function Component)</h3>
<Hello msg="Hello World!" />
<Map />
</>
);
}
export default Home

View File

@ -0,0 +1,3 @@
h1 { color: red; }
h2 { color: green; }
h3 { color: blue; }

View File

@ -0,0 +1,41 @@
//generate a HTML5 file including all webpack bundles in the body using script tags
const HtmlWebpackPlugin = require('html-webpack-plugin');
//path is used to resolve properly across the OS
const path = require('path');
module.exports = {
//bundle *.js from this entry point
entry: path.resolve(__dirname, '../app/index.jsx'),
//create output file to be linked to index.html
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, '../dist'),
clean: true,
},
module: {
rules: [
{
//test all *.js using babel-loader
//test all *.jsx (e.g. React.js) using babel-loader
test: /\.(js|jsx)$/,
exclude: /node_modules/,
include: path.resolve(__dirname, '../app'),
use: ['babel-loader'],
},
{
//test all *.css using style-loader and css-loader
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
]
},
resolve: {
extensions: ['*', '.js', '.jsx'],
},
plugins: [
// create a plugin instance so that you can use it several times anywhere
new HtmlWebpackPlugin({
title: 'Production',
template: path.resolve(__dirname, "../public/index.html")
}),
],
};

View File

@ -0,0 +1,14 @@
//path is used to resolve properly across the OS
const path = require('path');
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
//merge() calls in the environment-specific configuration to include commons
module.exports = merge(common, {
//set development mode
mode: 'development',
//enable strong source mapping
devtool: 'inline-source-map',
devServer: {
static: path.resolve(__dirname, '../dist'),
},
});

View File

@ -0,0 +1,8 @@
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production',
//source maps encouraged in production
//choose mapping with fairly quick build speed like source-map
devtool: 'source-map',
});

11207
axios-overpass-api/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,40 @@
{
"private": true,
"name": "react-example",
"description": "React.js example",
"version": "0.1.0",
"main": "index.js",
"keywords": [
"react",
"webpack"
],
"author": "Software Ingenieur Begerad <dialog@SwIngBe.de>",
"license": "GPL-3.0-or-later",
"engines": {
"node": ">=10"
},
"scripts": {
"start": "webpack serve --config config/webpack.dev.js",
"build": "webpack --config config/webpack.prod.js"
},
"devDependencies": {
"@babel/core": "7.18.13",
"@babel/preset-env": "7.18.10",
"@babel/preset-react": "7.18.6",
"babel-loader": "8.2.5",
"css-loader": "6.7.1",
"html-webpack-plugin": "5.5.0",
"style-loader": "3.3.1",
"webpack": "5.74.0",
"webpack-cli": "4.10.0",
"webpack-dev-server": "4.10.1",
"webpack-merge": "5.8.0"
},
"dependencies": {
"axios": "1.3.2",
"prop-types": "15.8.1",
"qs": "6.11.0",
"react": "18.2.0",
"react-dom": "18.2.0"
}
}

View File

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React Example</title>
</head>
<body>
<div id="root"></div>
</body>
</html>