# @work-shop/map-module
> Map module intended for integration in Work-Shop Wordpress environments.
Latest version **1.1.3** (published 2019-03-26) · ISC license · 0 weekly downloads
## Install
```sh
npm install @work-shop/map-module
pnpm add @work-shop/map-module
yarn add @work-shop/map-module
bun add @work-shop/map-module
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.1.3 |
| Published | 2019-03-26 |
| First published | 2018-07-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 178.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | nicschumann, rubenrodriguez |
## Links
- npm: https://www.npmjs.com/package/@work-shop/map-module
- Repository: https://github.com/work-shop/wordpress-map-module
- Homepage: https://github.com/work-shop/wordpress-map-module#readme
- Issues: https://github.com/work-shop/wordpress-map-module/issues
- npm.io page: https://npm.io/package/@work-shop/map-module
## Dependencies (1)
- [deepmerge](https://npm.io/package/deepmerge.md) ^2.1.1
## Recent versions
- 1.1.3 (latest) — 2019-03-26
- 1.1.2 — 2018-10-26
- 1.1.1 — 2018-10-22
- 1.1.0 — 2018-10-22
- 1.0.7 — 2018-10-03
- 1.0.6 — 2018-10-03
- 1.0.5 — 2018-07-26
- 1.0.4 — 2018-07-06
- 1.0.3 — 2018-07-06
- 1.0.2 — 2018-07-01
- 1.0.1 — 2018-07-01
- 1.0.0 — 2018-07-01
## README
# work-shop wordpress map module
This module was designed to streamline the development process of maps that get placed on Wordpress sites produced by Work-Shop.
### Installation
Install via npm. `npm install @work-shop/map-module`.
### Usage
The basic module usage looks like this:
```HTML
```
```JavaScript
// browserify'd-bundle.js
var mapModule = require( '@work-shop/map-module' )
var maps = mapModule( { selector: '.map-div' } )
```
See the [development](development) directory for more usage examples.
- [`development/public/index.html`][dev-index-html] includes a series of examples. Markup that is required to make the map module work is prefixed with `Required:`.
- [`development/index.js`][dev-index-js] includes various initialization methods & options.
- [`development/public/map-usage.css`](development/public/map-usage.css) includes sample styles for using the map module.
### Development
To develop the module: `npm run dev`. This will start a local development server, using files within the [development](development) directory as a place to initialize examples within. The source for the module itself lives in [src](src).
- [`src/initializer.js`](src/initializer.js) is an initialization layer that can be used to create any number of map instances using the `{ selector }` option.
- [`src/index.js`](src/index.js) is the map class that can be used to initialize a single map instance.
- [`src/map-style.css`](src/map-style.css) is the style sheet that establishes basic necessary styles for the map.
### Publish
To publish, the npm user must be part of the same team as the owner of the package. Then run:
`npm publish --access public`
### HTML API
The HTML API entrypoint is [`src/initializer.js`](src/initializer.js).
`selector`: The map DOM element should have a `class` or `id` that can be used to select it for initializing a map instance.
```
```
`data-options`: Optionally, use this attribute to define the name of a global variable that carries options for initializing the map. Including map options, data to load, and render options.
```
```
### JS API
**[`src/initializer.js`](src/initializer.js)** ( default entry point )
`Initializer( options ) => [ Maps ]` returns an array of Map objects. Each Map object is initialized with the `options` passed into the function, and extended by any local options defined by the HTML API.
**[`src/index.js`](src/initializer.js)**
`Map( options )` returns a Map object and is initialized with the `options` passed into the function. The Map object that can be used to set the data on the Map, render the data as features on the Map, and remove the features that have been previously rendered to the Map.
`map.data( mapData? )` returns the current map data object when no arugments are passed in. Otherwise the `mapData` argument passed in is set as the maps current data. `mapData` is expected to be a single object with a `marker` key that defines options for rendering a Marker. Otherwise, it can be an array of objects with the same shape. When more map features are supported at this higher level, the `mapData` object can be expected to take on different shapes to support those other types of features.
`map.render( renderOptions? )` returns the current map API object and will render the current `mapData`.
`map.removeFeatures()` returns nothing and does the opposite of the `render` function. It removes all features from the map.
**[`src/marker.js`](src/marker.js)**
`Marker( options )` returns a Marker object and is initialized with the `options` passed into the function. The Marker object can be used to render or remove the Marker from its map.
`marker.render()` returns the current marker API object and will render the marker on its map.
`marker.remove()` returns the current marker API object and will remove the marker from its map.
Marker `options` that include a `popup` key will have an OverlayPopup object created for the Marker.
**[`src/overlay-popup.js`](src/overlay-popup.js)**
`OverlayPopup( options )` returns an OverlayPopup object and is initialized with the options passed into the function. This object extends the [`google.maps.OverlayView.prototype`](https://developers.google.com/maps/documentation/javascript/customoverlays#add).
### Styling Tiles
**[`src/tile-style.json`](src/tile-style.json)** is a default set of tile styles in the form of a JSON object, which is how Google Maps allows for customizing tile styles. These can be overriden using the `styles` key of the `options` object that is passed into the Map.
To create tile style JSON objects, use one of the following services that allow you to import and export these JSON tile style representations.
- [Styles with Google](https://mapstyle.withgoogle.com)
- [Snazzy Maps Editor](https://snazzymaps.com/editor)
[dev-index-js]:development/index.js
[dev-index-html]:development/public/index.html
---
_Source: https://npm.io/package/@work-shop/map-module · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._