Start Web Development with GIS Map in JavaScript-0daytown

An easy way to dispaly GIS, 3D maps to your browsers with various functions.

What you’ll learn
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 projects from Google Firebase
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;
add bookmarks;
add dijit buttons;
switch basemap with dijit buttons;
add OpenStreet Map Layer;
add feature layers for: points, lines, polygons;
edit feature symbol styles for: points, lines, polygons;
host feature layers on ArcGIS Rest Service server;
display layers and legend on map;

Requirements
No programming experience needed
A computer with a text editor

Description
(course updated on: 2017-Oct-01: replace lecture03 Test Projects at Google Firebase; 2017-May-03: add 13 new lectures for adding feature layers, legend; 2017-Apr-27: add 7 new lectures for bookmarks, dijit buttons, and openStreet Map; 2017-Apr-23: update code for new API version 3.20 and 4.3, attach code in full for each project; 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 an entry-level course teaching how to add GIS map, 3D map to web applications 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 at Google Firebase static web server
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;
add bookmarks;
add dijit buttons;
switch basemap with dijit buttons;
add OpenStreet Map Layer;
add feature layers for: points, lines, polygons;
edit feature symbol styles for: points, lines, polygons;
host feature layers on ArcGIS Rest Service server;
display layers and legend on map;