Add support for image services. Publish 0.0.5

CHANGES.md

@@ -1,6 +1,10 @@
 Change Log
 ==========
 
+### v0.0.5
+Add an `ImageService` class
+Fix `layers` parameter for identify calls.
+
 ### v0.0.4
 Add support for fetch options to support authorization headers.
 

docs/src/App.vue

@@ -39,16 +39,16 @@ export default {
   }
 
   #app {
-    background: #f7f7f7; 
+    background: white;
   }
  #contentArea {
    padding: 40px 60px;
-   background: white;
    min-height: 100vh;
  }
 
 #sidebar {
   padding: 40px 0px 40px 20px;
+  background: #f7f7f7;
 }
 
 #sidebar .ant-menu {

docs/src/Map.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { Map } from 'maplibre-gl'
+import { Map } from 'maplibre-gl/dist/maplibre-gl-unminified'
 import 'maplibre-gl/dist/maplibre-gl.css'
 
 export default {

docs/src/Menu.vue

@@ -39,6 +39,10 @@ export default {
               title: 'Tiled Map Service',
               key: 'TiledMapService'
             },
+            {
+              title: 'Image Service',
+              key: 'ImageService'
+            },
             {
               title: 'Vector Tile Service',
               key: 'VectorTileService'
@@ -79,7 +83,20 @@ export default {
               }
             ]
           },
-               {
+          {
+            name: 'Image Service',
+            items: [
+              {
+                title: 'Basic Image Service',
+                key: 'ImageServiceBasic'
+              },
+              {
+                title: 'Identify features from Image Service',
+                key: 'ImageServiceIdentify'
+              }
+            ]
+          },
+          {
             name: 'Vector Tile Service',
             items: [
               {

docs/src/pages/api/ImageMapService.vue

@@ -0,0 +1,67 @@
+<template>
+  <Default>
+      <template v-slot:content>
+          <h2>Image Service</h2>
+          <p>For use when accessing <a href="https://developers.arcgis.com/rest/services-reference/image-service.htm">image services</a>.</p>
+          <h3>Constructor</h3>
+          <div v-html="constructorTable"></div>
+
+          <br/><br/>
+
+          <h4>Esri Service Options</h4>
+          <div v-html="esriOptionsTable"></div>
+
+          <br/><br/>
+
+          <h3>Methods</h3>
+          <div v-html="methodsTable"></div>
+      </template>
+  </Default>
+
+</template>
+
+<script>
+import { Remarkable } from 'remarkable'
+var md = new Remarkable()
+
+import Default from '../../layouts/default.vue'
+export default {
+  name: 'ImageServiceAPI',
+  computed: {
+      constructorTable () {
+          return md.render(`Argument | Type | Description
+---------| ---- | -------------
+id | string | An id to assign to the [Mapbox-gl source](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#addsource) 
+map | \`Map\` | A [Mapbox-gl map](https://docs.mapbox.com/mapbox-gl-js/api/map/) 
+esriServiceOptions | object (see below) | A mandatory object containing options that will be passed when requesting the Esri Image Service
+rasterSourceOptions | object | An optional object that will be passed to the creation of the Mapbox-gl [raster source object](https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#raster). Useful if you have any specific requirements.`)
+      },
+      esriOptionsTable () {
+          return md.render(`Option | Type | Default | Description
+-------| ---- | --------| -----------
+url | string | | **Required** URL of the Image Service.
+fetchOptions | object | |  A key value pair of options to pass to the [fetch](https://developer.mozilla.org/en-US/docs/Web/API/fetch) method as the init property. This can be used to pass through Authorisation headers where required.
+format | string | jpgpng | Output format of the image
+from | Date | | A start date for a time-enabled layer
+to | Date | | An end date for a time-enabled layer
+mosaicRule | object | | A json object for the [mosiac rule](https://developers.arcgis.com/documentation/common-data-types/mosaic-rules.htm)
+renderingRule | object | | A json object for the [rendering rule based on a raster function](https://developers.arcgis.com/documentation/common-data-types/raster-function-objects.htm)
+getAttributionFromService | boolean | true | Retrieves the copyrightText field from the esri service and adds it as an attribution to the map `)
+      },
+      methodsTable () {
+          return md.render(`Method  | Description
+------- | -----------
+getMetadata() | Returns a promise which when resolved returns the service metadata as a json object.
+identify(latLon,returnGeometry) | Returns a promise which when resolved returns the features as an esri-json object. By default the geometry is not returned.
+setDate(<Date> from, <Date> to) | Redraws the layer with he passed time range.
+setMosaicRule(<object>mosaicRule) | Sets the mosaic rule parameter and redraws the layer.
+setRenderingRule(<object>renderingRule) | Sets the rendering rule parameter and redraws the layer.
+setAttributionFromService() | Sets the attribution on the map from the service metadata. This happens automatically if the \`getAttributionFromService\` option is true.`)
+      }
+  },
+  components: {
+      Default
+  }
+}
+
+</script>

docs/src/pages/examples/DynamicMapServiceIdentify.vue

@@ -2,7 +2,7 @@
     <Example v-on:mapready="mapready">
         <template v-slot:content>
             <h4>Identifying features from a Dynamic Map Service</h4>
-            <p>You can use the <code>.identify</code> method to retrieve information for a lat-lon.<p>
+            <p>You can use the <code>.identify</code> method to retrieve information for a lat-lon.</p>
             <p>The returned data is in the esri-json format which, if required, can be converted to GeoJSON using the <a href="https://www.npmjs.com/package/@terraformer/arcgis">@terraformer/arcgis package</a>.</p>
         </template>
         <template v-slot:code>import {DynamicMapService} from 'mapbox-gl-esri-sources'

docs/src/pages/examples/ImageServiceBasic.vue

@@ -0,0 +1,47 @@
+<template>
+  <Example :latLon="[-100, 40]" :zoom="3" v-on:mapready="mapready">
+      <template v-slot:content>
+          <h4>Image Map Service</h4>
+      </template>
+      <template v-slot:code>import {ImageMapService} from 'mapbox-gl-esri-sources'
+
+const imageSourceId = 'imagery-source'
+
+const imageService = new ImageMapService(imageSourceId, map, {
+    url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/NLCDLandCover2001/ImageServer'
+})
+
+map.addLayer({
+  id: 'imagery-layer',
+  type: 'raster',
+  source: imageSourceId
+})</template>
+  </Example>
+</template>
+
+<script>
+import { ImageService } from '../../../../src/main'
+import Example from '../../layouts/example.vue'
+
+export default {
+  name: 'ImageServiceBasic',
+  components: {
+      Example
+  },
+  methods: {
+      mapready (map) {
+          new ImageService('imagery-source', map, {
+              url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/NLCDLandCover2001/ImageServer'
+          })
+      
+          map.addLayer({
+              id: 'imagery-layer',
+              type: 'raster',
+              source: 'imagery-source'
+          })
+      }
+  }
+}
+</script>
+
+

docs/src/pages/examples/ImageServiceIdentify.vue

@@ -0,0 +1,75 @@
+<template>
+  <Example :latLon="[-100, 40]" :zoom="3" v-on:mapready="mapready">
+      <template v-slot:content>
+          <h4>Identifying features from a Image Map Service</h4>
+          <p>You can use the <code>.identify</code> method to retrieve information for a lat-lon.</p>
+      </template>
+      <template v-slot:code>import {ImageMapService} from 'mapbox-gl-esri-sources'
+
+const imageService = new ImageMapService('image-source', map, {
+    url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/NLCDLandCover2001/ImageServer',
+})
+
+map.addLayer({
+    id: 'image-layer',
+    type: 'raster',
+    source: 'image-source'
+})
+
+map.on('click', function (e) {
+  imageService.identify(e.lngLat)
+  .then(json => {
+    if (!json.value) return
+    const content = `Pixel Value: ${json.value}`
+    new Popup()
+    .setLngLat(e.lngLat)
+    .setHTML(content)
+    .addTo(map)
+  })
+})
+</template>
+  </Example>
+
+</template>
+
+<script>
+import { ImageService } from '../../../../src/main'
+import { Popup } from 'maplibre-gl'
+
+import Example from '../../layouts/example.vue'
+
+export default {
+  name: 'ImageMapServiceIdentify',
+  components: {
+      Example
+  },
+  methods: {
+      mapready (map) {
+          const imageService = new ImageService('image-source', map, {
+              url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/NLCDLandCover2001/ImageServer',
+          })
+
+          map.addLayer({
+              id: 'image-layer',
+              type: 'raster',
+              source: 'image-source'
+          })
+
+          map.on('click', function (e) {
+            imageService.identify(e.lngLat)
+              .then(json => {
+                  if (!json.value) return
+                  const content = `Pixel Value: ${json.value}`
+                  new Popup()
+                  .setLngLat(e.lngLat)
+                  .setHTML(content)
+                  .addTo(map)
+              })
+          })
+      }
+  }
+}
+
+</script>
+
+

docs/src/router.js

@@ -4,6 +4,7 @@ import Installation from './pages/Installation.vue'
 
 import DynamicMapService from './pages/api/DynamicMapService.vue'
 import TiledMapService from './pages/api/TiledMapService.vue'
+import ImageService from './pages/api/ImageMapService.vue'
 import VectorTileService from './pages/api/VectorTileService.vue'
 import VectorBasemapStyle from './pages/api/VectorBasemapStyle.vue'
 
@@ -13,6 +14,8 @@ import DynamicMapServiceIdentify from './pages/examples/DynamicMapServiceIdentif
 import DynamicMapServiceLayerDefs from './pages/examples/DynamicMapServiceLayerDefs.vue'
 import DynamicMapServiceTime from './pages/examples/DynamicMapServiceTime.vue'
 import TiledMapServiceBasic from './pages/examples/TiledMapServiceBasic.vue'
+import ImageServiceBasic from './pages/examples/ImageServiceBasic.vue'
+import ImageServiceIdentify from './pages/examples/ImageServiceIdentify.vue'
 import VectorTileServiceBasic from './pages/examples/VectorTileServiceBasic.vue'
 import VectorTileServiceStyled from './pages/examples/VectorTileServiceStyled.vue'
 import VectorStyleBasic from './pages/examples/VectorStyleBasic.vue'
@@ -39,6 +42,11 @@ const routes = [
         path: '/tiled-map-service',
         component: TiledMapService
     },
+    {
+        name: 'ImageService',
+        path: '/image-service',
+        component: ImageService
+    },
     {
         name: 'VectorTileService',
         path: '/vector-tile-service',
@@ -78,6 +86,16 @@ const routes = [
                 path: 'tiled-map-service',
                 component: TiledMapServiceBasic
             },
+            {
+                name: 'ImageServiceBasic',
+                path: 'image-map-service',
+                component: ImageServiceBasic
+            },
+            {
+                name: 'ImageServiceIdentify',
+                path: 'image-service-identify',
+                component: ImageServiceIdentify
+            },
             {
                 name: 'VectorTileServiceBasic',
                 path: 'vector-tile-service',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mapbox-gl-esri-sources",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "A module for making it easier to use Esri services in mapbox-gl or maplibre-gl.",
   "main": "dist/mapbox-gl-esri-sources.js",
   "module": "dist/mapbox-gl-esri-sources.esm.js",

src/DynamicMapService.js

@@ -135,6 +135,11 @@ export class DynamicMapService {
         })
     }
 
+
+    get _layersStrIdentify () {
+        return this._layersStr.replace('show', 'visible')
+    }
+
     identify (lnglat, returnGeometry) {
         const canvas = this._map.getCanvas()
         const bounds = this._map.getBounds().toArray()
@@ -153,7 +158,7 @@ export class DynamicMapService {
             returnGeometry,
             imageDisplay: `${canvas.width},${canvas.height},96`,
             mapExtent: `${bounds[0][0]},${bounds[0][1]},${bounds[1][0]},${bounds[1][1]}`,
-            layers: this._layersStr,
+            layers: this._layersStrIdentify,
             layerDefs: this._layerDefs,
             time: this._time,
             f: 'json'