static-google-map - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

dist/static-google-map.cjs.js

@@ -179,3 +179,2 @@ 'use strict';
   var urlParts = [];
-  // Todo: Remove the property if the defaultProp and Prop value is the same
 
@@ -190,3 +189,3 @@ urlParts.push(urlBuilder('color', color, ':'));
     return x;
-  }).join('%7C'); //|
+  }).join('%7C');
 
@@ -193,0 +192,0 @@ return 'path=' + url;

dist/static-google-map.esm.js

@@ -175,3 +175,2 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
   var urlParts = [];
-  // Todo: Remove the property if the defaultProp and Prop value is the same
 
@@ -186,3 +185,3 @@ urlParts.push(urlBuilder('color', color, ':'));
     return x;
-  }).join('%7C'); //|
+  }).join('%7C');
 
@@ -189,0 +188,0 @@ return 'path=' + url;

dist/static-google-map.umd.js

@@ -181,3 +181,2 @@ (function (global, factory) {
     var urlParts = [];
-    // Todo: Remove the property if the defaultProp and Prop value is the same
 
@@ -192,3 +191,3 @@ urlParts.push(urlBuilder('color', color, ':'));
       return x;
-    }).join('%7C'); //|
+    }).join('%7C');
 
@@ -195,0 +194,0 @@ return 'path=' + url;

package.json

 {
   "name": "static-google-map",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "main": "dist/static-google-map.cjs.js",
@@ -5,0 +5,0 @@ "module": "dist/static-google-map.esm.js",

README.md

 # static google map
 
-A URL builder for Google Maps Static that turns a javascript object into a querystring.
+A URL builder for Google Maps Static that turns a javascript object into a querystring. Generate complex query strings containing markers, paths, directions and more.
 
@@ -58,2 +58,6 @@ ## Overview
       points: ['27.749825, -73.987963', '40.849825, -74.987963']
+    },
+    {
+      color: 'blue',
+      points: 'enc:enrjF~blePve|Mwp`T' // be sure to include `enc:`
     }
@@ -86,3 +90,3 @@ ],
 
- ## Static Map
+## Static Map
 
@@ -109,17 +113,30 @@ ```js
 
-You do not have to render markers, paths, etc. The base map takes the following props:
+The base map takes the following props:
 
 - `size`: (required) defines the rectangular dimensions of the map image. This parameter takes a string of the form `{horizontal_value}x{vertical_value}`. For example, `500x400` defines a map `500 pixels` wide by `400 pixels` high. Maps smaller than 180 pixels in width will display a reduced-size Google logo. This parameter is affected by the `scale` parameter; the final output size is the product of the size and scale values.
+
 - `scale`: (optional) affects the number of pixels that are returned. `scale=2` returns twice as many pixels as `scale=1` while retaining the same coverage area and level of detail (i.e. the contents of the map don't change). This is useful when developing for high-resolution displays, or when generating a map for printing. The default value is `1`. Accepted values are `2` and `4` (`4` is only available to Google Maps APIs Premium Plan customers.)
+
 - `format`: (optional) defines the format of the resulting image. By default, the Google Static Maps API creates `PNG` images. There are several possible formats including `GIF`, `JPEG` and `PNG` types. Which format you use depends on how you intend to present the image. `JPEG` typically provides greater compression, while `GIF` and `PNG` provide greater detail.
+
 - `maptype`: (optional) defines the type of map to construct. There are several possible maptype values, including `roadmap`, `satellite`, `hybrid`, and `terrain`.
+
 - `language`: (optional) defines the language to use for display of labels on map tiles. Note that this parameter is only supported for some country tiles; if the specific language requested is not supported for the tile set, then the default language for that tileset will be used.
+
 - `region`: (optional) defines the appropriate borders to display, based on geo-political sensitivities. Accepts a region code specified as a two-character ccTLD ('top-level domain') value.
+
 - `visible`: (optional) specifies one or more locations that should remain visible on the map, though no markers or other indicators will be displayed. Use this parameter to ensure that certain features or map locations are shown on the Google Static Maps API.
+
 - `style`: (optional) defines a custom style to alter the presentation of a specific feature (roads, parks, and other features) of the map. This parameter takes feature and element arguments identifying the features to style, and a set of style operations to apply to the selected features.
+
 - `center`: (required if markers not present) defines the center of the map, equidistant from all edges of the map. This parameter takes a location as either a comma-separated {latitude,longitude} pair (e.g. "40.714728,-73.998672") or a string address (e.g. "city hall, new york, ny") identifying a unique location on the face of the earth.
+
 - `zoom`: (optional if markers not present) defines the zoom level of the map, which determines the magnification level of the map. This parameter takes a numerical value corresponding to the zoom level of the region desired.
+
 - `key`: (optional) allows you to monitor your application's API usage in the [Google API Console](https://support.google.com/googleapi/#topic=7013279)
+
 - `signature`: (recommended) is a digital signature used to verify that any site generating requests using your API key is authorized to do so.
+
 - `client`: (optional) By using your client ID (instead of an API key) to authenticate requests, you can: Add the channel parameter to requests so you can view more detailed usage reports.
+
 - `channel`: (optional) used to provide additional reporting detail, by grouping different channels separately in your reports. Refer to the [Premium Plan Reporting Overview](https://developers.google.com/maps/premium/reports/) for more information.
@@ -165,8 +182,13 @@
 - `size` - (optional) specifies the size of marker from the set `{tiny, mid, small}`. If no size parameter is set, the marker will appear in its default (normal) size.
+
 - `color` - (optional) specifies a 24-bit color (example: color=0xFFFFCC) or a predefined color from the set `{black, brown, green, purple, yellow, blue, gray, orange, red, white}`
+
 - `label` - (optional) specifies a single uppercase alphanumeric character from the set `{A-Z, 0-9}`. Note that default and mid sized markers are the only markers capable of displaying an alphanumeric-character parameter. `tiny` and `small` sized markers are not capable of displaying an alphanumeric-character.
 
 - `iconURL` - (optional) specifies the icon for the Marker - rather than use Google's marker icons - using a URL (which should be [URL-encoded](https://en.wikipedia.org/wiki/URL-encoding)). You can use URLs created by URL-shortening services such as https://goo.gl. Most URL-shortening services have the advantage of automatically encoding URLs.
+
 - `anchor` - (optional) sets how the icon is placed in relation to the specified markers locations. By default, the anchor point of a custom icon is the `bottom center` of the icon image. You can specify a different anchor point using the anchor descriptor in conjunction with your icon. Set the anchor as an `x,y` point of the icon (such as `10,5`), or as a predefined alignment using one of the following values: `top, bottom, left, right, center, topleft, topright, bottomleft, or bottomright`
+
 - `scale`: (optional) useful when using a custom marker iconURL.  The scale value is multiplied with the marker image size to produce the actual output size of the marker in pixels. Default scale value is 1; accepted values are 1, 2, and 4. Use marker scaling in conjunction with map scaling when displaying higher-resolution maps.
+
 - `location` - (required) defines the marker's location on the map. If the location is off the map, that marker will not appear in the constructed image provided that `center` and `zoom` props on the parent are supplied. However, if these props are not supplied, the Google Static Maps API server will automatically construct an image which contains the supplied markers ala [Implicit Positioning](https://developers.google.com/maps/documentation/static-maps/intro#ImplicitPositioning).
@@ -238,2 +260,6 @@
       points: ['27.749825, -73.987963', '40.849825, -74.987963']
+    },
+    {
+      color: 'blue',
+      points: 'enc:enrjF~blePve|Mwp`T' // be sure to include `enc:`
     }
@@ -257,8 +283,12 @@ ]
 - `weight` - (optional) specifies the thickness of the path in pixels. If no weight parameter is set, the path will appear in its default thickness (5 pixels).
+
 - `color` - (optional) specifies a color either as a 24-bit (example: color=0xFFFFCC) or 32-bit hexadecimal value (example: color=0xFFFFCCFF), or from the set `{black, brown, green, purple, yellow, blue, gray, orange, red, white}`.
+
 - `fillcolor` - (optional) indicates both that the path marks off a polygonal area and specifies the fill color to use as an overlay within that area.
+
 - `geodesic` - (optional) indicates that the requested path should be interpreted as a geodesic line that follows the curvature of the earth. When false, the path is rendered as a straight line in screen space. Defaults to false.
-- `points` - (required) In order to draw a path, the path prop must be passed two or more points. The Google Static Maps API will then connect the path along those points, in the specified order.
 
+- `points` - (required) Either an encoded polyline string or an array with two or more points. When passing a string polyline, be sure to include the `enc:` such as `{ points: 'enc:yourEncodedPolyLine' }`. When using an array of points, the Google Static Maps API will connect the path along those points in the specified order.
 
+
 ### Path Groups
@@ -383,6 +413,8 @@
 - `origin` -  (required) specifies the start location from which to calculate directions. This value may be specified as a String (for example, "Chicago, IL"), as a LatLng value
+
 - `destination` - (required) specifies the end location to which to calculate directions. The options are the same as for the origin field described above.
-- `travelMode` - (optional) specifies what mode of transport to use when calculating directions. Valid values are `driving (Default), bicycling, transit, and WALKING`
 
+- `travelMode` - (optional) specifies what mode of transport to use when calculating directions. Valid values are `driving (Default), bicycling, transit, and walking`
 
+
 ### URL Size Restriction
@@ -389,0 +421,0 @@

typings/index.d.ts

@@ -1,206 +0,206 @@
-declare namespace StaticGoogleMap {
-  interface GoogleMapImageProps {
-    /**
-     * The dimensions of the image in pixels
-     *
-     * @type {string}
-     * @memberof GoogleMapImageProps
-     */
-    size: string;
+interface GoogleMapImageProps {
+  /**
+   * The dimensions of the image in pixels
+   *
+   * @type {string}
+   * @memberof GoogleMapImageProps
+   */
+  size: string;
 
-    /**
-     * The scale of the image
-     *
-     * @type {('1' | '2' | '4' | 1 | 2 | 4)}
-     * @memberof GoogleMapImageProps
-     * @default 1
-     */
-    scale?: '1' | '2' | '4' | 1 | 2 | 4;
+  /**
+   * The scale of the image
+   *
+   * @type {('1' | '2' | '4' | 1 | 2 | 4)}
+   * @memberof GoogleMapImageProps
+   * @default 1
+   */
+  scale?: "1" | "2" | "4" | 1 | 2 | 4;
 
-    /**
-     * The format of the image to return
-     *
-     * @type {('png' | 'png8' | 'png32' | 'gif' | 'jpg' | 'jpg-baseline')}
-     * @memberof GoogleMapImageProps
-     * @default png
-     */
-    format?: 'png' | 'png8' | 'png32' | 'gif' | 'jpg' | 'jpg-baseline';
+  /**
+   * The format of the image to return
+   *
+   * @type {('png' | 'png8' | 'png32' | 'gif' | 'jpg' | 'jpg-baseline')}
+   * @memberof GoogleMapImageProps
+   * @default png
+   */
+  format?: "png" | "png8" | "png32" | "gif" | "jpg" | "jpg-baseline";
 
-    /**
-     * The type of map to return
-     *
-     * @type {('roadmap' | 'satellite' | 'terrain' | 'hybrid')}
-     * @memberof GoogleMapImageProps
-     * @default roadmap
-     */
-    maptype?: 'roadmap' | 'satellite' | 'terrain' | 'hybrid';
+  /**
+   * The type of map to return
+   *
+   * @type {('roadmap' | 'satellite' | 'terrain' | 'hybrid')}
+   * @memberof GoogleMapImageProps
+   * @default roadmap
+   */
+  maptype?: "roadmap" | "satellite" | "terrain" | "hybrid";
 
-    /**
-     * The language to use for the text on the map
-     *
-     * @type {string}
-     * @memberof GoogleMapImageProps
-     * @default en
-     */
-    language?: string;
+  /**
+   * The language to use for the text on the map
+   *
+   * @type {string}
+   * @memberof GoogleMapImageProps
+   * @default en
+   */
+  language?: string;
 
-    region?: string;
+  region?: string;
 
-    /**
-     * Specified the center of the image
-     *
-     * @type {string}
-     * @memberof GoogleMapImageProps
-     */
-    center?: string;
+  /**
+   * Specified the center of the image
+   *
+   * @type {string}
+   * @memberof GoogleMapImageProps
+   */
+  center?: string;
 
-    /**
-     * DSPecifies the zoom level of the image
-     *
-     * @type {(string | number)}
-     * @memberof GoogleMapImageProps
-     * @default 0
-     */
-    zoom?: string | number;
+  /**
+   * DSPecifies the zoom level of the image
+   *
+   * @type {(string | number)}
+   * @memberof GoogleMapImageProps
+   * @default 0
+   */
+  zoom?: string | number;
 
-    visible?: string;
+  visible?: string;
 
-    style?: string;
+  style?: string;
 
-    /**
-     * Paths to show on the map
-     *
-     * @type {string}
-     * @memberof GoogleMapImageProps
-     */
-    path?: string;
+  /**
+   * Paths to show on the map
+   *
+   * @type {string}
+   * @memberof GoogleMapImageProps
+   */
+  path?: string;
 
-    /**
-     * The ClientID for premium users
-     *
-     * @type {string}
-     * @memberof GoogleMapImageProps
-     */
-    client?: string;
+  /**
+   * The ClientID for premium users
+   *
+   * @type {string}
+   * @memberof GoogleMapImageProps
+   */
+  client?: string;
 
-    /**
-     * Your API key
-     *
-     * @type {string}
-     * @memberof GoogleMapImageProps
-     */
-    key?: string;
+  /**
+   * Your API key
+   *
+   * @type {string}
+   * @memberof GoogleMapImageProps
+   */
+  key?: string;
 
-    /**
-     * Digital signature
-     *
-     * @type {string}
-     * @memberof GoogleMapImageProps
-     */
-    signature?: string;
+  /**
+   * Digital signature
+   *
+   * @type {string}
+   * @memberof GoogleMapImageProps
+   */
+  signature?: string;
 
-    /**
-     * Channel for premium users
-     *
-     * @type {string}
-     * @memberof GoogleMapImageProps
-     */
-    channel?: string;
-  }
+  /**
+   * Channel for premium users
+   *
+   * @type {string}
+   * @memberof GoogleMapImageProps
+   */
+  channel?: string;
+}
 
-  type locationType =
-    | string
-    | number
-    | { lat: string | number; lng: string | number }
-    | Array<string | number | { lat: string | number; lng: string | number }>;
+type locationType =
+  | string
+  | number
+  | { lat: string | number; lng: string | number }
+  | Array<string | number | { lat: string | number; lng: string | number }>;
 
-  interface MarkerGroup {
-    size?: 'tiny' | 'mid' | 'small' | 'normal';
-    color?:
-      | 'black'
-      | 'brown'
-      | 'green'
-      | 'purple'
-      | 'yellow'
-      | 'blue'
-      | 'gray'
-      | 'orange'
-      | 'red'
-      | 'white'
-      | number;
-    iconURL?: string;
-    label?: string;
-    scale?: '1' | '2' | '4' | 1 | 2 | 4;
-    anchor?:
-      | 'left'
-      | 'right'
-      | 'center'
-      | 'topleft'
-      | 'topright'
-      | 'bottomleft'
-      | 'bottomright'
-      | string;
-  }
+interface MarkerGroup {
+  size?: "tiny" | "mid" | "small" | "normal";
+  color?:
+    | "black"
+    | "brown"
+    | "green"
+    | "purple"
+    | "yellow"
+    | "blue"
+    | "gray"
+    | "orange"
+    | "red"
+    | "white"
+    | number;
+  iconURL?: string;
+  label?: string;
+  scale?: "1" | "2" | "4" | 1 | 2 | 4;
+  anchor?:
+    | "left"
+    | "right"
+    | "center"
+    | "topleft"
+    | "topright"
+    | "bottomleft"
+    | "bottomright"
+    | string;
+}
 
-  interface Marker extends MarkerGroup {
-    location: locationType;
-  }
+interface Marker extends MarkerGroup {
+  location: locationType;
+}
 
-  interface PathGroup {
-    weight?: string | number;
-    color?:
-      | 'black'
-      | 'brown'
-      | 'green'
-      | 'purple'
-      | 'yellow'
-      | 'blue'
-      | 'gray'
-      | 'orange'
-      | 'red'
-      | 'white'
-      | string
-      | number;
-    fillcolor?: string;
-    geodesic?: boolean;
-  }
+interface PathGroup {
+  weight?: string | number;
+  color?:
+    | "black"
+    | "brown"
+    | "green"
+    | "purple"
+    | "yellow"
+    | "blue"
+    | "gray"
+    | "orange"
+    | "red"
+    | "white"
+    | string
+    | number;
+  fillcolor?: string;
+  geodesic?: boolean;
+}
 
-  interface Path extends PathGroup {
-    points: locationType;
-  }
+interface Path extends PathGroup {
+  points: locationType;
+}
 
-  interface Direction extends PathGroup {
-    origin: string | { lat: string | number; lng: string | number };
-    destination: string | { lat: string | number; lng: string | number };
-    key: string;
-    waypoints: any;
-    avoid: 'tolls' | 'highways' | 'ferries' | 'indoor';
-    travelMode: 'driving' | 'walking' | 'bicycling' | 'transit';
-    transitMode: 'bus' | 'subway' | 'train' | 'tram' | 'rail';
-    transitRoutingPreference: 'less_walking' | 'fewer_transfers';
-    requestStrategy: 'fetch' | 'native' | RequestStrategy;
-  }
+interface Direction extends PathGroup {
+  origin: string | { lat: string | number; lng: string | number };
+  destination: string | { lat: string | number; lng: string | number };
+  key: string;
+  waypoints: any;
+  avoid: "tolls" | "highways" | "ferries" | "indoor";
+  travelMode: "driving" | "walking" | "bicycling" | "transit";
+  transitMode: "bus" | "subway" | "train" | "tram" | "rail";
+  transitRoutingPreference: "less_walking" | "fewer_transfers";
+  requestStrategy: "fetch" | "native" | RequestStrategy;
+}
 
-  type RequestStrategy = (data: RequestStrategyOptions) => Promise<string>;
+type RequestStrategy = (data: RequestStrategyOptions) => Promise<string>;
 
-  interface RequestStrategyOptions {
-    key: string;
-    origin: string | { lat: string | number; lng: string | number };
-    destination: string | { lat: string | number; lng: string | number };
-    waypoints?: any;
-    avoid?: 'tolls' | 'highways' | 'ferries' | 'indoor';
-    mode: 'driving' | 'walking' | 'bicycling' | 'transit';
-    transitMode?: 'bus' | 'subway' | 'train' | 'tram' | 'rail';
-    transitRoutingPreference?: 'less_walking' | 'fewer_transfers';
-    [index: string]: any;
-  }
+interface RequestStrategyOptions {
+  key: string;
+  origin: string | { lat: string | number; lng: string | number };
+  destination: string | { lat: string | number; lng: string | number };
+  waypoints?: any;
+  avoid?: "tolls" | "highways" | "ferries" | "indoor";
+  mode: "driving" | "walking" | "bicycling" | "transit";
+  transitMode?: "bus" | "subway" | "train" | "tram" | "rail";
+  transitRoutingPreference?: "less_walking" | "fewer_transfers";
+  [index: string]: any;
 }
-
-export {
-  StaticGoogleMap,
-  Marker,
-  MarkerGroup,
-  Path,
-  PathGroup,
-  Direction
-};
+interface Props extends Record<string, any> {
+  markers?: Marker[];
+  markerGroups?: MarkerGroup[];
+  paths?: Path[];
+  pathGroups?: PathGroup[];
+  directions?: Direction[];
+}
+declare module "static-google-map" {
+  export function staticMapUrl(props: Props): string;
+  export function asyncStaticMapUrl(props: Props): Promise<string>;
+}

No alert changes

Improved metrics

Total package byte prevSize

63792

increased by0.02%

Number of lines in readme file

420

increased by8.25%

Worsened metrics

Lines of code

1254

decreased by-0.16%

No dependency changes