Skip to content

Commit

Permalink
Create gh-pages branch via GitHub
Browse files Browse the repository at this point in the history
  • Loading branch information
aebadirad committed May 15, 2016
1 parent aa857d5 commit c1a2c7a
Show file tree
Hide file tree
Showing 2 changed files with 133 additions and 2 deletions.
133 changes: 132 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,138 @@ <h2 class="project-tagline">A dynamic leaflet layers control that pulls from mul
<h1>
<a id="leafletautolayers" class="anchor" href="#leafletautolayers" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Leaflet.AutoLayers</h1>

<p>A dynamic leaflet layers control that pulls from multiple mapservers and manages basemaps and overlays plus order</p>
<p>A dynamic leaflet layers control that pulls from multiple mapservers and manages basemaps and overlays plus their order.</p>

<h2>
<a id="getting-started" class="anchor" href="#getting-started" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Getting Started</h2>

<p>See <a href="http://aebadirad.github.io/Leaflet.AutoLayers/example/index.html">this demo page</a> for an example.</p>

<h3>
<a id="configuration-breakdown" class="anchor" href="#configuration-breakdown" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Configuration Breakdown</h3>

<p>The configuration is an object that is passed in as the first signature on the method call (L.control.autolayers()). The second is the standard Layers options object which is optional.</p>

<p>List of possible configuration keys:</p>

<ul>
<li>overlays: OPTIONAL - standard built control layers object as built statically <a href="http://leafletjs.com/examples/layers-control.html">here</a>
</li>
<li>baseLayers: OPTIONAL - standard built control layers object as built statically <a href="http://leafletjs.com/examples/layers-control.html">here</a>
</li>
<li>selectedBasemap: RECOMMENDED - determines which baselayer gets selected first by layer 'name'</li>
<li>selectedOverlays: OPTIONAL - determines which overlays are auto-selected on load</li>
<li>mapServers: OPTIONAL - but this is kind of the whole point of this plugin

<ul>
<li>url: REQUIRED - the base url of the service (e.g. <a href="http://services.arcgisonline.com/arcgis/rest/services">http://services.arcgisonline.com/arcgis/rest/services</a>)</li>
<li>baseLayers: RECOMMENDED - tells the control what layers to place in base maps, else all from this server go into overlays</li>
<li>dictionary: REQUIRED - where the published service list dictionary is (e.g. <a href="http://services.arcgisonline.com/arcgis/rest/services?f=pjson">http://services.arcgisonline.com/arcgis/rest/services?f=pjson</a>)</li>
<li>tileUrl: REQUIRED - the part that comes after the layer name in the tileserver with xyz coords placeholders (e.g. /MapServer/tile/{z}/{y}/{x} or /{z}/{x}/{y}.png)</li>
<li>name: REQUIRED - the name of the server, or however you want to identify the source</li>
<li>type: REQUIRED - current options: esri or nrltileserver</li>
<li>whitelist: OPTIONAL - ONLY display these layers, matches against both baselayers and overlays. Do not use with blacklist.</li>
<li>blacklist: OPTIONAL - DO NOT display these layers, matches against both baselayers and overlays. Do not use with whitelist.</li>
</ul>
</li>
</ul>

<h3>
<a id="prerequisities" class="anchor" href="#prerequisities" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Prerequisities</h3>

<ol>
<li>A recent browser (IE 10 or later, Firefox, Safari, Chrome etc)</li>
<li>
<a href="https://github.com/Leaflet/Leaflet">Leaflet</a> mapping library</li>
</ol>

<p>That's it! It has its own built in ajax and comes bundled with x2js, you can drop both of these for your own with some slight modifications.</p>

<h3>
<a id="installing" class="anchor" href="#installing" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Installing</h3>

<ol>
<li>Clone</li>
<li>Include leaflet-autolayers.js and the accompanying css/images in your project where appropriate</li>
<li>Create your configuration and place L.control.autolayers(config).addTo(map) where you have your map implemented</li>
<li>And that's it!</li>
</ol>

<p>Sample Configuration that pulls from the public ArcGIS and Navy Research Labs tileservers:</p>

<pre><code> var config = {
overlays: overlays, //custom overlays group that are static
baseLayers: baseLayers, //custom baselayers group that are static
selectedBasemap: 'Streets', //selected basemap when it loads
selectedOverlays: ["ASTER Digital Elevation Model 30M", "ASTER Digital Elevation Model Color 30M", "Cities"], //which overlays should be on by default
mapServers: [{
"url": "http://services.arcgisonline.com/arcgis/rest/services",
"dictionary": "http://services.arcgisonline.com/arcgis/rest/services?f=pjson",
"tileUrl": "/MapServer/tile/{z}/{y}/{x}",
"name": "ArcGIS Online",
"type": "esri",
"baseLayers": ["ESRI_Imagery_World_2D", "ESRI_StreetMap_World_2D", "NGS_Topo_US_2D"],
"whitelist": ["ESRI_Imagery_World_2D", "ESRI_StreetMap_World_2D", "NGS_Topo_US_2D"]
}, {
"url": "http://geoint.nrlssc.navy.mil/nrltileserver",
"dictionary": "http://geoint.nrlssc.navy.mil/nrltileserver/wms?REQUEST=GetCapabilities&amp;VERSION=1.1.1&amp;SERVICE=WMS",
"tileUrl": "/{z}/{x}/{y}.png",
"name": "Navy NRL",
"type": "nrltileserver",
"baseLayers": ["bluemarble", "Landsat7", "DTED0_GRID_COLOR1", "ETOPO1_COLOR1", "NAIP", "DRG_AUTO"],
"blacklist": ["BlackMarble"]
}]
};

</code></pre>

<h2>
<a id="deployment" class="anchor" href="#deployment" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Deployment</h2>

<p>Make sure all your layers you include are of the same projection. Currently map projection redrawing based on baselayer is not implemented, so if you don't have matching layer projections, things will not line up properly.</p>

<p>Note: because of the nature of not all browsers supporting ES6 and not always having jQuery, the default calls provided are SYNCHRONOUS and therefore will cause delay in loading the map as it waits for each server to respond with its list of layers.</p>

<p>If you have a build environment that supports promises (angular, ember, react or jquery framework), you can do two things:</p>

<ol>
<li>Replace the builtin ajax function with a deferred/promise supported call.</li>
<li>Pull out the code that does the calls and simply build the baselayers/overlays object and pass it in with blank mapservers entries in the config. This will have the same effect and you'll still get all the layer management capabilities.</li>
</ol>

<h2>
<a id="contributing" class="anchor" href="#contributing" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Contributing</h2>

<p>Contributions, especially for other map servers or enhancements welcome.</p>

<h2>
<a id="versioning" class="anchor" href="#versioning" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Versioning</h2>

<p>For now it's going to remain in beta until the Leaflet 1.0.0 release. After that time a standard version 1.x will begin.</p>

<h2>
<a id="authors" class="anchor" href="#authors" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Authors</h2>

<ul>
<li>
<strong>Alex Ebadirad</strong> - <em>Initial work</em> - <a href="https://github.com/aebadirad">aebadirad</a>
</li>
</ul>

<h2>
<a id="license" class="anchor" href="#license" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>License</h2>

<p>This project is licensed under the MIT License - see the <a href="LICENSE.md">LICENSE.md</a> file for details</p>

<h2>
<a id="acknowledgments" class="anchor" href="#acknowledgments" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Acknowledgments</h2>

<ul>
<li>
<a href="www.heigeo.com">Houston Engineering, INC</a> for the simple ajax utility</li>
<li>
<a href="https://github.com/abdmob/x2js">x2js</a> for parsing the WMS response to json</li>
</ul>

<footer class="site-footer">
<span class="site-footer-owner"><a href="https://github.com/aebadirad/Leaflet.AutoLayers">Leaflet.autolayers</a> is maintained by <a href="https://github.com/aebadirad">aebadirad</a>.</span>
Expand Down
2 changes: 1 addition & 1 deletion params.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "Leaflet.autolayers",
"tagline": "A dynamic leaflet layers control that pulls from multiple mapservers and manages basemaps and overlays plus order",
"body": "# Leaflet.AutoLayers\r\nA dynamic leaflet layers control that pulls from multiple mapservers and manages basemaps and overlays plus order\r\n",
"body": "# Leaflet.AutoLayers\r\n\r\nA dynamic leaflet layers control that pulls from multiple mapservers and manages basemaps and overlays plus their order.\r\n\r\n## Getting Started\r\n\r\nSee [this demo page](http://aebadirad.github.io/Leaflet.AutoLayers/example/index.html) for an example.\r\n\r\n### Configuration Breakdown\r\n\r\nThe configuration is an object that is passed in as the first signature on the method call (L.control.autolayers()). The second is the standard Layers options object which is optional.\r\n\r\nList of possible configuration keys:\r\n* overlays: OPTIONAL - standard built control layers object as built statically [here](http://leafletjs.com/examples/layers-control.html)\r\n* baseLayers: OPTIONAL - standard built control layers object as built statically [here](http://leafletjs.com/examples/layers-control.html)\r\n* selectedBasemap: RECOMMENDED - determines which baselayer gets selected first by layer 'name'\r\n* selectedOverlays: OPTIONAL - determines which overlays are auto-selected on load\r\n* mapServers: OPTIONAL - but this is kind of the whole point of this plugin\r\n * url: REQUIRED - the base url of the service (e.g. http://services.arcgisonline.com/arcgis/rest/services)\r\n * baseLayers: RECOMMENDED - tells the control what layers to place in base maps, else all from this server go into overlays\r\n * dictionary: REQUIRED - where the published service list dictionary is (e.g. http://services.arcgisonline.com/arcgis/rest/services?f=pjson)\r\n * tileUrl: REQUIRED - the part that comes after the layer name in the tileserver with xyz coords placeholders (e.g. /MapServer/tile/{z}/{y}/{x} or /{z}/{x}/{y}.png)\r\n * name: REQUIRED - the name of the server, or however you want to identify the source\r\n * type: REQUIRED - current options: esri or nrltileserver\r\n * whitelist: OPTIONAL - ONLY display these layers, matches against both baselayers and overlays. Do not use with blacklist.\r\n * blacklist: OPTIONAL - DO NOT display these layers, matches against both baselayers and overlays. Do not use with whitelist.\r\n\r\n### Prerequisities\r\n\r\n1. A recent browser (IE 10 or later, Firefox, Safari, Chrome etc)\r\n2. [Leaflet](https://github.com/Leaflet/Leaflet) mapping library\r\n\r\nThat's it! It has its own built in ajax and comes bundled with x2js, you can drop both of these for your own with some slight modifications.\r\n\r\n### Installing\r\n\r\n1. Clone\r\n2. Include leaflet-autolayers.js and the accompanying css/images in your project where appropriate\r\n3. Create your configuration and place L.control.autolayers(config).addTo(map) where you have your map implemented\r\n4. And that's it!\r\n\r\n\r\nSample Configuration that pulls from the public ArcGIS and Navy Research Labs tileservers:\r\n```\r\n var config = {\r\n overlays: overlays, //custom overlays group that are static\r\n baseLayers: baseLayers, //custom baselayers group that are static\r\n selectedBasemap: 'Streets', //selected basemap when it loads\r\n selectedOverlays: [\"ASTER Digital Elevation Model 30M\", \"ASTER Digital Elevation Model Color 30M\", \"Cities\"], //which overlays should be on by default\r\n mapServers: [{\r\n \"url\": \"http://services.arcgisonline.com/arcgis/rest/services\",\r\n \"dictionary\": \"http://services.arcgisonline.com/arcgis/rest/services?f=pjson\",\r\n \"tileUrl\": \"/MapServer/tile/{z}/{y}/{x}\",\r\n \"name\": \"ArcGIS Online\",\r\n \"type\": \"esri\",\r\n \"baseLayers\": [\"ESRI_Imagery_World_2D\", \"ESRI_StreetMap_World_2D\", \"NGS_Topo_US_2D\"],\r\n \"whitelist\": [\"ESRI_Imagery_World_2D\", \"ESRI_StreetMap_World_2D\", \"NGS_Topo_US_2D\"]\r\n }, {\r\n \"url\": \"http://geoint.nrlssc.navy.mil/nrltileserver\",\r\n \"dictionary\": \"http://geoint.nrlssc.navy.mil/nrltileserver/wms?REQUEST=GetCapabilities&VERSION=1.1.1&SERVICE=WMS\",\r\n \"tileUrl\": \"/{z}/{x}/{y}.png\",\r\n \"name\": \"Navy NRL\",\r\n \"type\": \"nrltileserver\",\r\n \"baseLayers\": [\"bluemarble\", \"Landsat7\", \"DTED0_GRID_COLOR1\", \"ETOPO1_COLOR1\", \"NAIP\", \"DRG_AUTO\"],\r\n \"blacklist\": [\"BlackMarble\"]\r\n }]\r\n };\r\n\r\n```\r\n\r\n## Deployment\r\n\r\nMake sure all your layers you include are of the same projection. Currently map projection redrawing based on baselayer is not implemented, so if you don't have matching layer projections, things will not line up properly.\r\n\r\n\r\nNote: because of the nature of not all browsers supporting ES6 and not always having jQuery, the default calls provided are SYNCHRONOUS and therefore will cause delay in loading the map as it waits for each server to respond with its list of layers.\r\n\r\n\r\nIf you have a build environment that supports promises (angular, ember, react or jquery framework), you can do two things:\r\n\r\n1. Replace the builtin ajax function with a deferred/promise supported call.\r\n2. Pull out the code that does the calls and simply build the baselayers/overlays object and pass it in with blank mapservers entries in the config. This will have the same effect and you'll still get all the layer management capabilities.\r\n\r\n## Contributing\r\n\r\nContributions, especially for other map servers or enhancements welcome.\r\n\r\n## Versioning\r\nFor now it's going to remain in beta until the Leaflet 1.0.0 release. After that time a standard version 1.x will begin.\r\n\r\n## Authors\r\n\r\n* **Alex Ebadirad** - *Initial work* - [aebadirad](https://github.com/aebadirad)\r\n\r\n## License\r\n\r\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\r\n\r\n## Acknowledgments\r\n\r\n* [Houston Engineering, INC](www.heigeo.com) for the simple ajax utility\r\n* [x2js](https://github.com/abdmob/x2js) for parsing the WMS response to json\r\n",
"note": "Don't delete this file! It's used internally to help with page regeneration."
}

0 comments on commit c1a2c7a

Please sign in to comment.