https://github.com/izevaka/openlayers-sample

Samples using OpenLayers
https://github.com/izevaka/openlayers-sample

Last synced: 7 months ago
JSON representation

Samples using OpenLayers

• Host: GitHub
• URL: https://github.com/izevaka/openlayers-sample
• Owner: izevaka
• License: mit
• Created: 2021-03-05T05:20:48.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-03-05T05:22:17.000Z (over 5 years ago)
• Last Synced: 2025-01-21T18:15:43.725Z (over 1 year ago)
• Size: 11.7 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# openlayers-nearmap

Use OpenLayers library with Nearmap APIs.

### Quick Start

Below you'll find a complete working example showcasing OpenLayers with Nearmap imagery.

```html

  

    OpenLayers Nearmap Example

    

    

    

    

    

    

  

  

    


    

      var API_KEY = 'YOUR_API_KEY';

      var map = new ol.Map({

        target: 'map',

        layers: [

          new ol.layer.Tile({

            source: new ol.source.XYZ({

              url: 'https://api.nearmap.com/tiles/v3/Vert/{z}/{x}/{y}.img?tertiary=satellite&apikey=' + API_KEY

            })

          })

        ],

        view: new ol.View({

          center: ol.proj.fromLonLat([138.595637, -34.915302]),

          zoom: 13

        })

      });

    

  

```

### Advanced Example

The example in the [`example` folder](./example/) shows how to set up a OpenLayers map using Nearmap vertical and panorama imagery across multiple survey dates.

You can change the panorama imagery type by clicking heading buttons:

- `Vertical`

- `North`

- `East`

- `South`

- `West`

You can change the survey dates by selecting different dates in the dropdown.

> How it works?

>

> 1. Survey dates will vary in different locations and so the available survey list may change when moving around the map. 

> 2. The selected date will be displayed as long as it exists in the available survey list for the location being viewed. 

> 3. If the selected date does not exist in that location, then the next closest previous survey date in the available survey list will be displayed.

> 4. If there is no closest previous date, then the last available survey in the list will be displayed.

> 5. The latest available survey date will always be displayed if no date has been selected.

ℹ️ Make sure you provide your API key in the [config](./example/config.js) file.