-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add presets, a few new layer handlers, and update docs
- Loading branch information
Nate Irwin
committed
Aug 28, 2013
1 parent
e72ee17
commit f278632
Showing
21 changed files
with
749 additions
and
268 deletions.
There are no files selected for viewing
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,40 +1,176 @@ | ||
| # NPMap.js API Docs | ||
|
|
||
| ## baseLayer | ||
|
|
||
| - Presets: | ||
| - bing | ||
| - esri | ||
| - mapbox | ||
| - nps | ||
| - stamen | ||
|
|
||
| ## layer | ||
|
|
||
| - arcgisserver | ||
| - cartodb | ||
| - geojson | ||
| - kml | ||
| - mapbox (aliased from `tilestream` to preserve backwards-compatibility) | ||
| - Required: | ||
| - `id` OR `tileJson` | ||
| - `type` (Required if using `npmap-bootstrap.js`) | ||
| - Optional: | ||
| - `opacity` (Optional) | ||
| - `retinaVersion` (Optional) | ||
|
|
||
| ## module | ||
| ## Map | ||
|
|
||
| ### L.npmap.map(config: object) | ||
|
|
||
| Create and configure a map. | ||
|
|
||
| *Arguments:* | ||
|
|
||
| The first, and only, argument is required, and must a map config object with the following properties: | ||
|
|
||
| - (Required) `div` (Object or String): Either an HTML element or the id of an HTML element to render the map into. | ||
| - | ||
|
|
||
| You can also (optionally) provide it with any of the options supported by [`L.Map`](http://leafletjs.com/reference.html#map-options). | ||
|
|
||
| *Example:* | ||
|
|
||
| var map = L.npmap.map('map'); | ||
|
|
||
| ## Layers | ||
|
|
||
| ### L.npmap.layer.arcgisserver(config: object) | ||
|
|
||
| Add a layer from an ArcGis Server map or feature service, including services hosted on ArcGIS Online, to your map with `L.npmap.layer.arcgisserver()`. | ||
|
|
||
| *Arguments:* | ||
|
|
||
| The first, and only, argument is required, and must be a layer config object with the following properties: | ||
|
|
||
| - (Required) `url` (Object): A templated URL string for the ArcGIS Server service you want to create a layer. | ||
| - (Optional) `dynamicAttribution` (String): The URL of a [dynamic attribution](http://blogs.esri.com/esri/arcgis/2012/08/15/dynamic-attribution-is-here/) endpoint for the service. | ||
| - (Optional) `icon` (String) | ||
| - (Optional) `name` (String) | ||
|
|
||
| You can also (optionally) provide it with any of the options supported by [`L.TileLayer`](http://leafletjs.com/reference.html#tilelayer). | ||
|
|
||
| *Example:* | ||
|
|
||
| var layer = L.npmap.layer.arcgisserver({ | ||
| url: 'http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}/' | ||
| }); | ||
|
|
||
| ### L.npmap.layer.mapbox(config: object) | ||
|
|
||
| Add a layer from MapBox hosting, with interactivity, to your map with `L.npmap.layer.mapbox()`. | ||
|
|
||
| *Arguments:* | ||
|
|
||
| The first, and only, argument is required, and must be a layer config object with the following properties: | ||
|
|
||
| - (Depends) `id` (String): The id ('account.id') of the MapBox map or tileset you want to add to the map. Required if `tileJson` is not provided. | ||
| - (Depends) `tileJson` (Object): A tileJson object for the MapBox map or tileset you want to add to the map. Required if `id` is not provided. | ||
| - (Optional) `format` (String): One of the following: 'jpg70', 'jpg80', 'jpg90', 'png', 'png32', 'png64', 'png128', or 'png256'. If not provided, defaults to 'png'. | ||
| - (Optional) `icon` (String) | ||
| - (Optional) `name` (String) | ||
| - (Optional) `retinaVersion` (String): The id ('account.id') of the MapBox map or tileset designed specifically for retina devices. | ||
|
|
||
| You can also (optionally) provide it with any of the options supported by [`L.TileLayer`](http://leafletjs.com/reference.html#tilelayer). | ||
|
|
||
| *Example:* | ||
|
|
||
| var layer = L.npmap.layer.mapbox({ | ||
| id: 'examples.map-20v6611k' | ||
| }); | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| ### Layer | ||
|
|
||
| #### Modules | ||
|
|
||
| - L.TileLayer | ||
| - arcgisserver | ||
| - Required: | ||
| - `type` (Only required if using `bootstrap.js`) | ||
| - Optional: | ||
| - `attribution` | ||
| - cartodb | ||
| - Required: | ||
| - `type` (Only required if using `bootstrap.js`) | ||
| - Optional: | ||
| - `attribution` | ||
| - mapbox (aliased from `tilestream` to preserve backwards-compatibility) | ||
| - Required: | ||
| - `id` OR `tileJson` | ||
| - `type` (Only required if using `bootstrap.js`) | ||
| - Optional: | ||
| - `attribution` | ||
| - `composited` | ||
| - `opacity` | ||
| - `retinaVersion` | ||
| - tiled | ||
| - wms | ||
| - L.GeoJSON | ||
| - csv | ||
| - geojson | ||
| - Required: | ||
| - `type` (Only required if using `bootstrap.js`) | ||
| - Optional: | ||
| - `attribution` | ||
| - gpx | ||
| - json | ||
| - kml | ||
| - Required: | ||
| - `type` (Only required if using `bootstrap.js`) | ||
| - Optional: | ||
| - `attribution` | ||
| - shapefile | ||
| - xml | ||
|
|
||
| #### Concepts | ||
|
|
||
| - baseLayer vs. layer | ||
| - `icon` | ||
| - Presets: | ||
| - `baseLayers.json` | ||
| - Raster | ||
| - UTFGrid | ||
| - Vector | ||
| - Clustering | ||
| - Symbology | ||
| - Defaults | ||
| - NPS Maki | ||
|
|
||
| ### Module | ||
|
|
||
| #### Modules | ||
|
|
||
| - edit | ||
| - itinerary | ||
| - route | ||
|
|
||
| ## tool | ||
| #### Concepts | ||
|
|
||
| - Accessibility | ||
| - Usability and look-and-feel | ||
|
|
||
| ### Tool | ||
|
|
||
| #### Modules | ||
|
|
||
| - fullscreen | ||
| - geocode | ||
| - hash | ||
| - infobox | ||
| - navigate | ||
| - overviewmap | ||
| - scalebar | ||
| - share | ||
|
|
||
| #### Concepts | ||
|
|
||
| - Accessibility | ||
| - Usability and look-and-feel | ||
|
|
||
| ### Util | ||
|
|
||
| ## Notes | ||
|
|
||
| - If you are using `npmap-bootstrap.js`, a `leaflet` property will be added to every baseLayer, layer, map, module, or tool config object. You can use this property to interact directly with Leaflet's classes. | ||
| - `npmap-bootstrap.js` supports adding multiple maps to a page. Just make the `NPMap.config` property an array, and you are good to go. | ||
| - If you are using `bootstrap.js`, a `L` property will be added to every layer, map, module, or tool config object. You can use this property to interact directly with the `NPMap.js` objects. | ||
| - `NPMap.js` extends Leaflet's classes and only provides the interfaces outlined above. You can use the larger [Leaflet API](http://leafletjs.com/reference.html) as well. | ||
| - Unlike previous versions of the NPMap library, `bootstrap.js` now supports adding multiple maps to a page. Just make the `NPMap.config` property an array, and you are good to go. |
This file contains 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
This file contains 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
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| Follow these steps to upgrade from a legacy version of the NPMap library to NPMap.js: | ||
|
|
||
| - To maintain consistency with Leaflet, the `zoomRange` property is now broken up into two separate properties: `minZoom` and `maxZoom`. These properties are available for the `L.npmap.map` and `L.npmap.layer` classes. | ||
| - Layer handler types are now all lowercase. | ||
| - The `TileStream` layer handler has been renamed to `mapbox`. |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> | ||
| <title>'baseLayer' Presets (Bootstrap) | Examples | NPMap.js</title> | ||
| <style> | ||
| body { | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| #map { | ||
| bottom: 0; | ||
| position: absolute; | ||
| top: 0; | ||
| width: 100%; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div id="map"></div> | ||
| <script> | ||
| var NPMap = { | ||
| config: { | ||
| baseLayers: [ | ||
| 'esri-gray', | ||
| 'esri-grayLabels', | ||
| 'esri-imagery', | ||
| 'esri-imageryLabels', | ||
| 'esri-nationalGeographic', | ||
| 'esri-oceans', | ||
| 'esri-streets', | ||
| 'esri-topographic', | ||
| 'mapbox-light', | ||
| 'mapbox-satellite', | ||
| 'mapbox-satelliteLabels', | ||
| 'mapbox-streets', | ||
| 'mapbox-terrain', | ||
| 'stamen-terrain', | ||
| 'stamen-toner', | ||
| 'stamen-watercolor' | ||
| ], | ||
| div: 'map', | ||
| tools: [{ | ||
| html: '<select>' | ||
| }] | ||
| } | ||
| }; | ||
|
|
||
| (function() { | ||
| var s = document.createElement('script'); | ||
| s.src = '../dist/bootstrap.js'; | ||
| document.body.appendChild(s); | ||
| })(); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains 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
This file contains 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
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| window.L = require('leaflet/dist/leaflet-src'); | ||
| window.L = require('Leaflet/dist/leaflet-src'); |
Oops, something went wrong.