This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
navigator.mediaDevices.getUserMedia({audio: true} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 © <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--", | |
}, |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 © <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>'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' + | |
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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/[email protected]/dist/leaflet.css" | |
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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]; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
NewerOlder