ArcGIS Javascript API #esrijs 4.x – 01 – Getting Started

ArcGIS Javascript API #esrijs 4.x – 01 – Getting Started

what’s up y’all this is the Hussein Nasser
from IGeometry….. yes we are doing it finally you guys can’t believe how many
of you asked me to start such series this is like long overdue are we
recording yes we are the JavaScript API series so since I started this channel
2014 I’ve been mainly posting about arc objects
obviously it’s all of GIS and work of of GIS and the functionality of of GIS and
misery an arc object and a lot of you guys have been emailing me posting in
the comments the tweeting at me just a what I said why you just start this
already we need this we need the resource to teach us about this cool
technology so why why arcgis Javas get one JavaScript right why this language
so just just to get it started here javascript is if I’m not mistaken
someone can correctly then it’s the only language then can run on a browser and
on a server and on a mobile device and on desktop and recently even in ilt
devices again in other things so how cool is to have one language that does
all that one library you build it you know it that’s it right you don’t have
to learn multiple languages like we used to do
like the client server or the client side we always use JavaScript HTML
sometimes like some of you made this mistake to move to flash and Silverlight
of the client side obviously we all know that was a big mistake
and we know why Steve Jobs we came and we said that this is wrong guys I’m not
going to put this shit in my technology now I’m the iPad I believe is it now I’m
gonna support that I’m going to put stops weird under plugins running on my
devices so you stopped it and then just technologists died right anyway this is
not our topic right JavaScript just natively supported by all the browsers
and all these devices and it just makes sense right why not our GIS started
adopting it right and start start doing school things with it and obviously our
mapping stuff we can do all this stuff with JavaScript right nobody still did
it but it’s possible nobody did the mapping software using
javascript as a server-side but who knows maybe you the listener will be the
first one we will develop that after watching few episodes and reading a few
books of JavaScript right that’s what I’m doing actually I’m not an expert in
JavaScript right I know a few things I build some applications and legal
scripts but the technology is evolving and you need to stay up-to-date so I
started reading a lot of books about advanced JavaScript longer than a
reference a month and the description books I recommend reading really good
world and teach you about these new content of promises and all these kind
of thing anyway this is not going to be an introduction to Java solution of
myself you will be assumed that you knew most
of this stuff I’m going to talk about it obviously as we explain what it’s I’m
going to use stuff it’s called promise I’m going to explain what a promise is
I’m not my mother asshole oh shit I’m gonna explain what I’m doing obviously
you know me like you watching this you might be a new subscriber as well so
yeah if you know me likey you know I take like hours and hours explaining
things that’s why my oh my youtube these are very long and that roll footage is
there I talk about everything really so people just watch the first minute and
read that’s okay that’s not for you right it’s the videos are not fair if
you’re not committed to watch these minutes all right you can find your
solution in a one minute or two minutes video but that that’s me I like to talk
a lot I like to explain solely about stuff some people like it some people
don’t so just I love to do to build what I like to provide content that I love
that’s why I continue providing it all right so I’ve been talking a lot about
listen I’ve always star guys yeah or something alright so that’s how that’s
why we built it okay that’s why we started this series the up joy s
JavaScript API so our JavaScript API you introduction on that there’s is the
3x I don’t know if there’s a two on one but there’s a 3x JavaScript API that’s
the current model and there’s the new 4x model I’m not going to discuss anything
with other 3x I have no idea whatsoever about that that I’ve very few but very
few application using that I actually wrote my book using that just very basic
right and therefore X is where we will discuss here the new technology and to
be specific says 4 or 4 ok 4.4 that’s the current release but it was just
or tit obviously all right all right what do you need what some would do
someone need to build a basic map right how do what do you need exactly to start
getting started with this I’m going to use my Mac look you can use your windows
but I have a VM here on Windows but I like to work with Macs better so just
put the native device right you can always do that you need an editor so I’m
going to use sublime text okay start I’m going to use sublime text you can
download this a free when it games it it’s really cool supports JavaScript and
have cool – text highlighting and stuff so it’s really cool what else you will
need a web server alright and I am going to use node.js as
a web server you can use any web server you want just host that server and you
can put your HTML file that’s out that’s the result of doing our work and then
you will execute that alright so I have no GS running here my server at the time
we have we have must 11 minutes let’s I’m trying to time myself that I took
alright so this I have a node.js here running on the server and I’m going to
start you can download no GS I’ve got the description there for simplicity I
have HTTP server package installed for Nadia so it’s just you just literally type HTTP that server and you start the
servers really cool and that’s the default port that’s started which is a
8080 alright if you
using Windows you can use is you just go to the C : ee ee root on its publishing
and then you put that EML there when you visit the page HTML HTTP and then that
IP address or the machine name I think by default is London for daily so it’d
be good alright so how about we build some maps let’s do that
alright okay so first of all I am going to save my page I’m gonna create a new
file and I’ll save it as I am going to save it to the public folder which is
the default location in this case is my own it’s Bob if it’s if it’s Windows I’m
going to call it IG that HTML by geometry all right so
let’s good start and build some HTML here and that’s basically the starting
kit of the HTML and cool thing about sublime things of you can if you type
HTML do you say tab Oh put the skeleton for you on all this stuff right so HTML
head title right then that’s the title way that appears there right so for
example if I do a geometry here head you can see that and save that’s buddy
you can type stuff here so it’s like hello geometry and how about we execute
that now so executing an HTML file requires something that I didn’t mention
obviously all of you most of you know that it’s a browser obviously a browser
executes HTML files and thus the JavaScript that comes with it alright so
how are we clear secure that so first of all it’s an HTTP
protocols just like or the continuing year so so what we do is we will type in
the host name which is localhost or the machine name also works and then the
port on which the web server is running that’s 8080 and then we will do a slash
then the file name so it looks like a little completing for me here so and
when you put that that just executed right and it shows you like hello
geometry we can do all this fancy stuff right so how about we do our first map
actual of joyous server walk okay so the first thing we’re going to do here is
we’re gonna alright we will specify where the map will show up right there
will be a death element let’s go ahead not view yeah then the map should have
like a size we specify which is you want to fill it up with the whole map we’re
going to follow with the whole screen give it a good different size so I’m
going to give it like a style or 500 px if sorry wait till fine on a big that
makes sense here and like I say yeah why not 500 px like a square map here right
and then we get it closed at this let the beauty of sublime text right just
gives you a like a nice layout and and that’s where my map goes here go back to
this refresh our guest map goes here obviously doesn’t make any sense right
there’s no make so how do we do some made alright
oh I don’t show you like I came to ahead that’s where the head goes if you know
this right all right so let’s ride some scrapes fun
the first thing we need to do is all the libraries the JavaScript libraries for
all GIS are located the good thing is for free and online you can do that so
we’re going to put a script URL here which references HTTP JavaScript the dog
is calm slash 4.4 I hope I didn’t miss that URL I have that yes yet right that
will give you to access to all the libraries in JavaScript believe it or
not all right yeah I know once you have that you can literally build a map so
but before we do we do that you have to explicitly import which libraries you
want to use and that is provided by the function alright so first of all let’s
write up a script here right that’s our starter code but the starter code in the
body will be executed like when you first start the pages let’s do this
right alert an alert is basically new refresh you will get an alert that’s the
one the first page executes right that’s the first execution block that we have
and we’re going to put code here and the first function is require that function
is actually not what a it is available where you reference that script right
and what you do is basically you say okay that function actually takes an
array that’s by the way that’s how an array looks like in JavaScript that it
takes an array of string and those strings are
nothing but classes so again refers the Matt thread and that function will
basically the require function when you execute it you will give it a function
that’s I know that’s very confusing but here we’re the first object here we’ll
go to the first parameter all right so that’s what we’re going to do here that
function makes sense or not but let me show you that right that ends that
function call which is required that’s the ending of it okay try as much as
possible to make this clear right so we can do something like that right and that’s the function call right so when
when you say is remap that will basically import that class and pass it
as a class or a function called Matt and then you can use this to instantiate
Maps right so that’s the first one if you add another parameter just add
another array element and the second one is called views map view then we can say
that so what are we doing here exactly we’re just setting up the foundation for
the work okay and then let’s start up our first map we’re going to declare a
variable called map equal you map now I can do this because there is a map
function right that I can basically create a new map function I you know
that I say functional class because and Java mm have any classes just like
them try to mock classes but everything is like a object and functions right so
we’re going to create a map object here correct of not yeah a map object and
then we will pass something very interesting here and object so we know
that an array looks like that so that’s an array with two elements that’s an
object basically curly brackets is an object and that object will have a
property called base map okay I am going to create a map which base map is total
which is the topographical differ there the default map but once we do that that
map alone the JavaScript 404 point 4 allows you to create different kind of
maps but those maps they do not display by themselves you have to put them in a
map view or a scene view or different kind of views right so that’s why they
they separated that concept from a map on a map of you so yet so literally you
can have like seven Maps objects right and then they have different basements
or everything and you have one map view and you can Swizzle different maps into
this view basically right that’s the idea of of having different maps being
Swizzle into the parent map you that make sense let’s go ahead and create a
map view here alright so they’re not viewing again I can do that because the
class is being passed basically to the function so let’s go ahead and create a
new map view and interesting enough that view also takes a parameter and that
parameter is another object right obviously here this object can you can
add so many other properties and it’s up to you what you can add
I’m going to explore the JavaScript API and and learn as we go through this
journey alright so map view the first thing and
the most important thing is the container where the heck is this map
going to render what do you want blender and most of you have yes I want to
render it in this baby right so that just tells you that oh I want my map
view to be rendered in this div element well the second question is what map do
you want to render and that is identified by the map objects or map
property and then we pass the map basically so don’t get confused this
this is the actual property this is just a variable we can called map 1c because
don’t want to get confused right in called map 1 all right and JavaScript is
really optional when it comes to semicolon so it’s up to you let’s see if
we missed anything I think that’s all we need again we’re going to massage this
code as we as we go all right so we saved map map whew did we miss anything
I’ve no idea we’re gonna find out all right so that view once you do that is
just directly that just loads alright let’s go ahead and see if we can see em how about that we can actually see a map
and we can navigate like all the basic stuff right go to my country but look at
that look at that alright so both of you now will know it
is that okay what is this weird thing going on here like the kind of like
doesn’t look right but not looks weird it’s like it’s missing a style or
something well it is missing some style I didn’t
want to add anything just random code without explaining it though that’s the
way to make them prettier and that is with the red link in it outside so we
can add a style sheet and that’s done sheet is referenced by HTTP see if I’m
remember that correctly its beloved joyous calm 404 is three CSS mega CSS again I’m my these things only might
cheat and give the correct CSS here and just three important that should just
magically fix this thing oh look at that look so all this fancy phones and fancy
stuff here you have these guys though that’s what this is is that I’m
obviously more stuff right how about that how about that okay all right let’s
do let’s do five more minutes of actual manipulation of stuff all right
I’m gonna actually put some time right here so because you know I get carried
away sometimes go ahead and start all right what do we want to do here first
of all I want to move these variables right
into a more general scope so that the developers tools here it does give us
the perfect tool for debugging stuff really cool right I’m going to move the
let map one here and like not view here and then a very remove that this will
make these kind of like global variables it’s a global yet they are I have a
scope of the global window object as long as the browser is running those
objects are alive so if I did now map one I can actually
see the object and this is not one map view I can actually see map if you
optically I can just ask you for parameters like a centre-right latitude
stuff like that right we’re gonna do so much cool stuff all right so if I didn’t
do that if I did that and then we let’s just go ahead and come in that out if I
did whoa whoa Joe kromm I do now map one I’m going to get an error so that black
one is I’m going to go that’s all because of closures which are the Scopes
of JavaScript right so because map one is defined in this function right and
then map view is also defined this function that once that function is dead
double to just do locate those variable so you don’t have you no longer can
access them right let’s go ahead and let’s do something cool I want
start in a specific scale level of details rent and that could be done with
the zoom parameters let’s go ahead and do this and make this zoom so don’t
remember the number so bear with me here so it’s there 12 all right
so it actually worked right so this session we started that with the zoom of
10 so if we do more is it like further all right so still down now 20 is better
or what well looks like it’s the more the number the more detail so let’s just
say 5 play with that America all right all right so that’s cool 5 let’s say 5
lineup and now we will introduce a new property so zoom control the zoom and
then let’s see the variable which are called Matt V dot enter what are those
the center variable is like it gives you a point of latitude and longitude these
cool values of basically where is the current center of the map right so let’s
go to El Paso for example or Mexico thank you
longitude that’s – 103 we do latitude it is 23 so what what about like a little
behind and I asked it ok what are your latitude it changed
what’s your long as you don’t change so this is how you get the values you
really want like I wanna zoom in into by default when I stop my map I will
always want to zoom into behind for example right let’s do that
I want a sense of center of the map beep to be valid
ok so these are the values of longitude you copy that and then here you add
another coma using center and then guess what sometimes just an array of two
values ah all right oh I’m running out of time
all right almost there ah all right so that’s good now we’re also 5 minutes sir
I’ll do that and the longitude the latitude is 26 let’s do that you all
right I think that’s cool so let’s throw it back and then refresh look at that we
centered right into Bahrain if we add more details like give me a zoom of spin
that was Center whatever that location was all right that’s more details
obviously we’ll give it more 1600 that is so cool guys
all right we’re going to stop here and obviously we’ll take some more time and
building this application yep we know what we’re going to build right guys
this is a continuation of the frenetic application that we build our Coptic
we’re going to convert into a JavaScript application right so I’m going to
reference it here that’s phonetic application that we did with our objects
then do all these towers and fancy stuff with JavaScript key stuff and we’re
going to do it maybe a couple more episode where we explore fancy stuff
with JavaScript just to get our feet before we jump into this stuff right we
don’t we don’t want to retry it as much as possible don’t jump the gun man and
learn things that we’re not supposed to learn Andy so alright guys so that’s it
for me today I have already enjoyed that I’m going to see you in the next one

31 thoughts on “ArcGIS Javascript API #esrijs 4.x – 01 – Getting Started”

  1. I've been waiting for this moment, javascript API, congratulations … I hope to see more tutorials like this… good job…

  2. Do you have any tutorials explains how we can interact and write a code to manipulate a shape file that is puplished on a ArcGIS server ?? And how can i do that

  3. Do you have any tutorials that explain how can i deal with a shape file and read that is puplished on a ArcGIS server and how we can write a code to manipulate it .??

  4. in this series you are working on node js server dose it differ form ArcGis server and thank you a lot a lot for your help and quick answers

  5. Hey Man.. Great Video. However I am facing a difficulty in implementing ArcGis Map in my Angular 6 application. I am able to show the map but not able to show a marker on the map. If you could make any video to implement ArcGIS in angular Application that would be great.

  6. what's difference between case downloads installing api for js on desktop and case your video ? and how I can setup Xampp or any web server

  7. Saint Roger Bountsebe Eboueme

    Great video. Also, I would like to redraw my map using different color and instead of different OBJECTID I would like to display another features. Is that possible? Please help


  9. Hussein, thank you for your video and book(s), it's a wealth of information. I am having issues with the node.js – 'npm install http-server -g'. when I try running that from the command, I receive a code: EACCES, errno: -13, sys call: access – error message. This message seems to entail permission access denial. My $PATH is as follows… 


    any idea, on how I can fix it so I can global install node.js?

  10. @Hussein Nasser, I imagine the MapView class is the view component of MVC.
    What component would the Map class be?

  11. Using node.js w/ http-server package and the same exact page, the map will not load and says: 'require' is not defined. Is this deprecated or something? Any ideas? Debugger points to the require function. Could the require function be being executed before the library is loaded? I am new to javascript web development… is there something I'm missing about module loading and configuration?

Leave a Reply

Your email address will not be published. Required fields are marked *