Skip to content

Instantly share code, notes, and snippets.

Avatar
🐶

Lucas Andión Montáns andion

🐶
View GitHub Profile
View app.js
<h1>Buttons</h1>
<Theme name="jedi">
<h2>Jedi theme</h2>
<div className="row">
<Button type="primary">Primary button</Button>
<Button type="primary" size="s">
Primary button small
</Button>
@andion
andion / permission.js
Created Apr 12, 2021
Asking the user permission to record audio.
View permission.js
navigator.mediaDevices.getUserMedia({audio: true}
View four-maps.jsx
// Your map info
const MAPS = {
mapbox: {
url:
"https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token={access_token}",
attribution:
'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
access_token:
"--YOUR-MAPBOX-ACCESS-TOKEN--",
},
View react-leaflet-component.jsx
import React from "react";
import { Map as LeafletMap, Marker, Popup, TileLayer } from "react-leaflet";
// GET ONE in https://docs.mapbox.com/help/how-mapbox-works/access-tokens/";
const ACCESS_TOKEN = "--YOUR--ACCESS--TOKEN--";
const URL = `https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=${ACCESS_TOKEN}`;
const ATTRIBUTION =
'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>';
View basic-leaflet-example.js
// Requires a div with id="map" on a html file with leaflet's css and js.
const towerLocation = [43.385807,-8.406524];
const mymap = L.map('map').setView(towerLocation, 16);
// GET ONE in https://docs.mapbox.com/help/how-mapbox-works/access-tokens;
const ACCESS_TOKEN = "--YOUR--ACCESS--TOKEN--";
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=' + ACCESS_TOKEN, {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
View basic-react-leaflet-example.js
import React from 'react'
import { render } from 'react-dom'
import { Map, Marker, Popup, TileLayer } from 'react-leaflet'
const position = [43.385807,-8.406524]
const map = (
<Map center={position} zoom={16}>
<TileLayer
url="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw"
attribution='Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors,
View basic-leaflet-example.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Basic leaflet example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
View averageVelocity.js
const totalDistance = waypoints => waypoints.map(w => calculateDistance(w)).reduce((acc, d) => acc + d, 0);
/* Average velocity in m/s between any (consecutive) waypoints */
const avgVelocity = wayPoints => {
if(wayPoints.length < 2) {
return 0;
}
const first = wayPoints[0];
View calculateDistance.js
const EARTH_RADIUS_IN_METERS = 6371000;
const toRad = value => value * Math.PI / 180;
const calculateDistance = (startWaypoint, endWaypoint) => {
const dLat = toRad(endWaypoint.lat - startWaypoint.lat);
const dLon = toRad(endWaypoint.lon - startWaypoint.lon);
const startLat = toRad(startWaypoint.lat);
const endLat = toRad(endWaypoint.lat);
View parsedGpx.js
{
"$": {
"version": "1.1",
"creator": "nodomain.freeyourgadget.gadgetbridge.GBApplication 0.35.2",
"xmlns": "http://www.topografix.com/GPX/1/1",
"xmlns:xsi": "http://www.w3.org/2001/XMLSchema-instance",
"xsi:schemaLocation": "http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd",
"xmlns:gpxtpx": "http://www.garmin.com/xmlschemas/TrackPointExtension/v1"
},
"trk": [