Start Web Development with GIS Map in JavaScript

An easy way to dispaly GIS, 3D maps on browsers
4.0 (15 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
1,500 students enrolled
$19
$40
52% off
Take This Course
  • Lectures 24
  • Length 1.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 2/2016 English

Course Description

(course updated on: 2016-Aug-31: google host service discontinued, firebase is recommended; 2016-Jul-9: add extra contents; 2016-Jun-23: add extra contents; 2016-Jun-29: add extra contents;)

“The world we live is full of coordinates and I love it!" - Alfred Lam, the course instructor.

“The essence of creating a beautiful map is balance!" - Alfred Lam, the course instructor.

This is a short entry-level course teaching how to add GIS map, 3D map to web application in JavaScript. Code provided in this course are simple and effective. Purpose of this course is to give students an idea of to what extent ArcGIS JavaScript API can do for you.

GIS stands for Geographic Information System. It is composed of hardware, software, people, environment, and data. Therefore, students with different backgrounds can learn and use GIS. The purpose of this course is to convey a concept to students that adding a GIS map to web for your clients is not difficult. You can spend your minimum time to handle it.

If you are new to using GIS maps in web development, this course is the right place for you to start. The ArcGIS API for JavaScript has been developed by ESRI, which is so far the biggest vendor of GIS systems and applications in the world. Some developers may ask why do we bother to use GIS maps as we already have Google map. My answer is that the Google map is great for you to identify your locations. But its data, functionality, and flexibility are far from enough if you want to create a versatile app with various basemaps, to tell a story, to add your own map features, or to perform an analysis to your clients with a map. ArcGIS, on the other hand, is the most comprehensive and advanced GIS in the world and it is capable of performing all these tasks for you. Please be mentioned that the 3D map API is still in beta version.

Time is precious for many web developers and programmers. This course was condensed with all necessary steps for starting a web GIS app development. For those GIS users, students, iOS developers, and anyone who are interested in developing more decent mobile or web GIS apps. Please find at my website or be aware of my other course announcements about Android, JavaScript, and iOS in the future.

After completing this course and the exercises, you will be able to:

  • build a web application with GIS basemap;
  • select and switch basemaps;
  • create webMap at ArcGIS Online;
  • add feature layers to webMap;
  • build a web application with a webMap;
  • test code from Google Drive
  • find your location;
  • create a 3D map web application;
  • create a functional map with search, homeButton, locateButton, scale bar, and basemap Toggle widget;
  • add a map title;
  • set map layout and background color;
  • select and apply a theme to map;
  • add basemapGallery;
  • add a point on map;
  • tap adding a point on map;
  • display coordinates in an alert view;
  • display WGS84 coordinates in an infoWindow;

What are the requirements?

  • No programming experience needed
  • A computer with a text editor

What am I going to get from this course?

  • build a web application with GIS basemap;
  • select and switch basemaps;
  • create webMap at ArcGIS Online;
  • add feature layers to webMap;
  • build a web application with a webMap;
  • test code from Google Drive
  • find your location;
  • create a 3D map web application;
  • create a functional map with search, homeButton, locateButton, scale bar, and basemap Toggle widget;
  • add a map title;
  • set map layout and background color;
  • select and apply a theme to map;
  • add basemapGallery;
  • add a point on map;
  • tap adding a point on map;
  • display coordinates in an alert view;
  • display WGS84 coordinates in an infoWindow;

What is the target audience?

  • GIS users
  • Students
  • Developers
  • Entrepreneurs
  • Anyone who are interested to make GIS maps in web apps

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Start Web Development with GIS Map in JavaScript
01:41

This is an introduction.

05:14

Create first web application with GIS map.

03:09

Please note the google drive hosting has discontinued since 2016-Aug31. This lecture is going to cover the process of testing a html project from google drive folder.

02:00

This lecture is going to cover the process of switching a basemap.

02:40
This lecture covers the process of sign up ArcGIS Developers Account and log on ArcGIS online with the ArcGIS Developers Account credentail.
03:26

This lecture covers the workflow of creating a webmap, making the webMap public, and locating the unique webmap ID.

05:55

This lecture covers the process of creating a new web application using ArcGIS Onling webmap.

06:52

This lecture covers the process of creating a web application locating your device position.

07:32
This lecture covers the process of creating a 3D web application with layers from ArcGIS Rest Service Directory.
Section 2: Map Functions
07:56
This lecture is going to cover the process of adding a search widget to the map.
03:03

This lecture is going to cover the process of adding a HomeButton widget to the map.

03:22
This lecture is going to cover the process of adding a homeButton widget to the map.
02:58

This lecture is going to cover the process of adding a Basemap Toggle widget to the map.

01:51

This lecture is going to cover the process of adding a Scalebar to the map.

Section 3: Map Theme and Layout
04:25
This lecture is going to cover the process of setting a background color to the map.
04:20
This lecture is going to cover the process of adding a map header layout and a mapView layout to the map by using dijit layout modules.
01:44
This lecture is going to cover the process of adding a map title to the map.
02:34

This lecture is going to cover the process of selecting and adding a map theme to the map.

Section 4: Additioanal Map Features
13:01

This lecture is going to cover the process of add a basemapGallery widget to map.

03:21
This lecture is going to cover the process of adding a point on map.
03:52
This lecture is going to cover the process of adding a single point or multiple points by tapping on a map.
01:35
This lecture is going to cover the process of displaying map coordinates in an alert view.
03:23

This lecture is going to cover the process of displaying map coordinates in an infoWindow.

03:17
This lecture is going to cover the process of convert web mercator coordinate to WGS84 and displaying WGS84 coordinates in an infoWindow.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Alfred Lam, GIS Developer, gis-app.com

“The world we live is full of coordinates and I love it!" - Alfred Lam

“The essence of creating a beautiful map is balance!" - Alfred Lam

I am an enthusiastic GIS specialist and I have been using GIS for more than ten years. My previous position was a senior officer at a NGO maintaining geodatabase, doing field data collection, and perform GIS analysis with remote sensing, GIS, and GPS data for the whole organization. With the advent of mobile technology, I have been studying and working hard to code for iOS, Android, and JavaScript. I believe this is one of the most useful technologies that can help people in many aspects.

I am going to dedicate some of my time to be a GIS instrcutor here and teaching is fun. It is also great to let many mobile and web developers to know and use ESRI technology which is so far the best and the most comprehensive GIS system. The part I am giving lectures is even only a very small fraction of the whole ArcGIS system.

Coding is boundless. Like many other teachers, I’d like to share my knowledge and experiences here. As the students are from all levels, I try not to make the code complicated. Maybe sometimes my pace is a bit slower, but I tried to make the code effective in a straightforward and simplest way. So that students can understand the mechanism of the code easily.

Ready to start learning?
Take This Course