Skip to content

Instantly share code, notes, and snippets.

@lancegliser
lancegliser / mapbox-render-bezier-gradient-zoom-lines.ts
Last active Apr 8, 2020
Provides an example for drawing curved lines from nodes using turf.js' bezier functionality including line styling with gradients, transparency, and zoom customization. Oh and popups.
View mapbox-render-bezier-gradient-zoom-lines.ts
import mapboxgl, {
getBezierLine, getDarkenedColor,
getTransparency,
primaryColor, setMapCursorPointer, unsetMapCursorPointer
} from "../../../../../Projects/Demo/frontend/src/utils/mapbox/mapbox";
import {EventData, MapboxGeoJSONFeature, MapMouseEvent} from "mapbox-gl";
import {Properties} from "@turf/helpers";
import midpoint from "@turf/midpoint";
import * as turfHelpers from "@turf/helpers";
import bezierSpline from "@turf/bezier-spline";
@lancegliser
lancegliser / mapbox-utilities.ts
Created Apr 8, 2020
A set of common functions you can customize for your application
View mapbox-utilities.ts
// @ts-ignore - Wish this didn't suck, but it does and I'm moving on.
import MapiClient, { SdkConfig } from "@mapbox/mapbox-sdk";
import MapboxGeocoder, {
GeocodeService,
GeocodeRequest,
GeocodeResponse,
} from "@mapbox/mapbox-sdk/services/geocoding";
import mapboxgl, {
EventData,
LngLat,
@lancegliser
lancegliser / mapbox-corrections.css
Created Apr 8, 2020
A set of common corrections to the css provided by mapboxgl to handle some edge cases I've found.
View mapbox-corrections.css
.mapboxgl-popup-content {
/* The content is delcared with a white background, but no default color */
color: #222;
}
.mapboxgl-ctrl-bottom-left {
/* Provides a barrier to prevent long content from overlapping the other control groups */
right: 56px;
}
@lancegliser
lancegliser / getHtmlElementFromVueComponent.ts
Created Apr 8, 2020
Rendering a Vue component from outside a view instance in JS / TS
View getHtmlElementFromVueComponent.ts
import rootVM from "@/main.ts";
import YourComponent from "@/components/YourComponent.vue";
export const getHtmlElementFromVueComponent = (): HTMLElement => {
const element = document.createElement("span");
// This may not show an IDE error.
// You can reproduce what's being ignored using npm run test:unit.
// @ts-ignore
const yourComponent = new Vue({
...YourComponent,
@lancegliser
lancegliser / d3-v5-multi-line-chart.js
Created Mar 12, 2020
A dirt simple example of a D3 chart using multiple lines, dots, and text elements on version 5.
View d3-v5-multi-line-chart.js
const render = (data) => {
console.log(data);
var height = 900;
var width = 1000;
var margin = { top: 20, right: 15, bottom: 25, left: 25 };
width = width - margin.left - margin.right;
height = height - margin.top - margin.bottom;
@lancegliser
lancegliser / keywordsResponseTypes.ts
Created Feb 7, 2020
An example of creating a wrapping object that allows for data property only (without function) partial constructors for nested classes with functions.
View keywordsResponseTypes.ts
type NonFunctionPropertyNames<T> = {
[K in keyof T]: T[K] extends Function ? never : K;
}[keyof T];
type NonFunctionProperties<T> = Pick<T, NonFunctionPropertyNames<T>>;
type PartialWithoutFunctions<T> = Partial<NonFunctionProperties<T>>;
interface IKeywordsResponseArguments {
results?: PartialWithoutFunctions<KeywordResult>[];
}
export class KeywordsResponse extends ResultsResponse {
@lancegliser
lancegliser / .GoogleMap.vue
Created Jan 20, 2020
Provides a single component for displaying a google map using minimum properties using typescript and Vue's composition API
View .GoogleMap.vue
<template>
<div
class="google-map"
ref="mapContainer"
:style="{ 'min-height': minHeight }"
/>
</template>
<script lang="ts">
import {
@lancegliser
lancegliser / .ErrorBoundary.vue
Last active Jan 15, 2020
Basic error boundary component for Vue JS using the V2 composition api. Adapated from https://github.com/dillonchanis/vue-error-boundary
View .ErrorBoundary.vue
<script lang="ts">
import {
createComponent,
createElement,
onErrorCaptured,
reactive,
SetupContext
} from "@vue/composition-api";
import DefaultFallbackUI from "./ErrorBoundaryFallbackUI.vue";
import { IErrorBoundaryState } from "@/components/errorBoundary/IErrorBoundary";
@lancegliser
lancegliser / .vueEmitEventsFromModule.ts
Created Jan 3, 2020
Provides a method for emitting root events onto the correct root instance of an application.
View .vueEmitEventsFromModule.ts
import vm from "@/main";
const emitOnMain = (event) => {
vm.$root.$emit(event);
};
@lancegliser
lancegliser / .rollup.config.js
Last active Dec 26, 2019
A basic roll up config file that allows for typescript and dynamic external dependencies
View .rollup.config.js
import typescript from 'rollup-plugin-typescript2'
import pkg from './package.json'
const dependencies = Object.keys(pkg.dependencies || {});
const peerDependencies = Object.keys(pkg.peerDependencies || {});
const external = [...dependencies, ...peerDependencies];
export default {
input: 'src/index.ts',
output: [