Manhattan Skyscraper Explorer

This is a non-commercial, demo application made at the Esri R&D Center Zurich for building exploration in Manhattan. It is built on top of ArcGIS API for JavaScript and allows users to explore some of the highest buildings in Manhattan in 3D.

View it live

Features

• Data driven visualization of buildings in Manhattan
• Highlighting of selected buildings
• Display information from different sources for selected building.
• Different visualization options for point features: callout lines, relative to scene elevation mode, decluttering.

Prerequisites

• Node.js 16.0+

Run project locally

To start:

npm install
npm run dev

Then open your browser at http://localhost:3000/

Create productive build

npm run build

The dist folder then contains all the files for the web app which can either be copied to a web server or pushed to the gh-pages branch to be served at https://arnofiva.github.io/arcgis-core-template.

In order to use the gh-pages approach, see the following instructions. Make sure you remove an existing dist folder if it has been created from a previous build.

Deploy to GitHub Pages

Create gh-pages branch

You can skip this part if you used the template by copying all branches, which includs the gh-pages branch that is part of this project.

If you only copied the main branch, follow these steps to create an orphan gh-pages branch (meaning it does not share any history with main):

rm -rf dist
git checkout --orphan gh-pages
git rm -rf .
git commit --allow-empty -m "Init empty branch"
git push origin gh-pages

Return to main branch:

git checkout main

Checkout gh-pages branch in dist/ folder

The following will create a dist folder (fails if it already exists) and make it point to the root of the gh-pages branch:

git worktree add dist gh-pages

Deploy new version on gh-pages branch

Once the previous steps have been completed, you can repeat the following every time you want to deploy a new version of your local code:

npm run build
cd dist/
git add .
git commit -am '🎉'
git push origin gh-pages
cd ../

Resources

The following external libraries, APIs, open datasets and specifications were used to make this application:

• Scene Layer: Service and Package Standard
• D3.js for the timeline. D3.js is shared under a BSD 3 clause license.
• Wikipedia API / MediaWiki is used to retrieve a small description of the building. All retrieved pages are under the Creative Commons Attribution-ShareAlike License. See Wikipedia Terms of Use for details.
• This application uses the Flickr API but is not endorsed or certified by Flickr. Flickr API is used to retrieve building images under Creative Commons licenses. See Flickr Terms of Use for licensing information.
• Swiper for the image slider. Swiper is shared under an MIT license.
• 3D building model published on the Open Data portal of DoITT under these Terms of use.
• Manhattan neighborhoods provided by Catalog Opendata City under a Open Data Commons Attribution License.

Disclaimer

This demo application is for illustrative purposes only and it is not maintained. There is no support available for deployment or development of the application.

Contributing

Esri welcomes contributions from anyone and everyone. Please see our guidelines for contributing.

Licensing

Copyright 2017 Esri

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

A copy of the license is available in the repository's license.txt file.