Designing Great UX/UI with Calcite Maps

so welcome first of all my name is Ellen Laframboise I'm a geo developer and a front-end developer for Zuri and just so you know you can get all of the slides for this presentation at slides calm a Laframboise and you get extra bonus points if you can pronounce my name correctly by the end of the presentation okay so we're gonna talk about designing great UX UI using something called Cal sitemaps and just a quick show of hands how many people here have experience with Cal sitemaps today okay and what about bootstrap developers just a show of hands use bootstrap before ok great and how many people will just consider themselves more just their core designer they're actually that's their role at their organization is more on the design side ok cool ok thank you very much so we'll jump right in and just a short discussion here and actually just to give you guys a little tidbit of some of the other things on the agenda at 5:30 tonight I'll be doing another presentation on user experience interface design we're gonna focus a lot more on the theory of design and we have some really cool apps to show and apps that I'm gonna release the source code for as well so that's that's tonight 5:30 and that's in Primrose ok so to design great mapping apps you know what are the ingredients like for every strong project there's the strategy the project is only as strong as the strategy is talked about strategy we're talking about the vision the vision takes in consideration the user needs the business needs and the thing that's most often left out of all of our application development and design projects is how do we measure success how do we know someone actually likes what we've produced have we created a map and deployed it to the internet and we're just assuming people are enjoying what they're seeing and they're getting satisfaction or having a positive user experience so that's something we talk a lot about tonight I won the point out these two things the other thing I think that is also extremely important in successful design of any mapping application is having a design system in place a design system can mean a lot of things but to me it means like the principles and patterns and methodologies that your organization adopts and uses and a lot of times this includes a style guide you have these pieces in place when you go to take on projects and projects in the future and you have a design system that everyone all the teams agree upon then you can move forward a lot more quickly and a lot more successfully just a little bit of history on this this word called calcite and you see might have seen this over the years but basically this is an internal design system that we use at ESRI and you've actually seen calcite manifest itself in arcgis pro was one of the first iterations and implementations of it the arcgis javascript 4'o api obviously has a different look and feel than some of the earlier products that has been influenced by calcite by the design system by a set of colors set of icons UI elements and interactions that we agreed upon as an organization that we are going to build towards okay so I I can't again emphasize more how important it is to put together a set of principles and patterns and at the end of the day a style guide will get you extremely far instead of different departments billing in different directions with different styles and looks and feels and somebody likes blue and somebody likes red and you can get over all of that by having a style guide and that's really helped us develop uniform systems uniform application at ESRI itself and of course everything's geocentric so I want to get in to some of the projects that you're going to find out in the wild that have the word calcite in it as an example so calcite web is the first one so calcite web is a web framework we developed at ESRI so we can develop webpages for our our landing sites so for ESRI comm and for developers of ArcGIS comm it's essentially as a reversion of bootstrap is another way to think about it if you know what bootstrap is then now you know what calcite web is it's a branding guide that we use and all the styles for the web pages that everything is uniform there's it implements Anna borrows from that core project the core principles that are in founded in the calcite you know design platform so we use colors and fonts and icons they're not just specific to web but they borrow from other parts of the platform as well super lightweight fast responsive it's sass built and sports Jase has some great documentation and good stuff so let me just take you out to where this guy lives so we're on github.com ESRI and calcite webs where we're starting so I'm just going to jump into the documentation here and just show you a few things that might be of interest the first thing is you know we need to agree upon type what what type we're going to use for our applications and our web pages and so forth and we agreed upon a veneer next being the major type font that we use it may not be the type font for you but in our case you do the research and you look at what it offers in terms of its styling it really was the one to choose for us there's a grid system that's a little bit different than grid systems you might be familiar with like for bootstrap as an example uses twelve grids in our particular case we use 24 grids and it's based it's based on column width and pixels rather than percentages so that's a little bit different other things that might be handy to you so if you're looking at this project and saying well why am I looking or even interested in a project that ESRI uses to build up their webpages well there are all these cool fonts that you might be interested in so you can grab any of the fonts if you want so there are things like pins and then there are collections of layers and so forth so this is a free resource for you as you may be building out your applications your web mapping applications color is always a conundrum it's nice to have a set of colors that somebody has thought about and put together for example just like a simple set of gray shades that have like an equal interval of staggering saturation and hue and so forth so I use this all the time grab any of you skies you can inspect them and take a look at the hex value grab that and implement it and and you'll be guaranteed that it's what you see is what you're gonna get and then there are you eye color sets there's blues there's some oranges and greens and purples you'll see a whole number of them here not saying you have to use them but if you're looking for some options then they're here then you'll find other standard things like buttons so we use non rounded corners which form a square square corners and then we have different color sets that we can use and colors color has meaning and has the mean same meaning everywhere you know success as an example for you know for things like successful operations on the website when you log in or sign in and then there's other labels for other things too so we have dropdowns there's different loaders there's different panels something that we use extensively it's just kind of the new style of designing web pages is using these cards you can use cards for almost anything right so I encourage you to check them out if you're looking for some design pattern options I think it's one of the coolest parts of the calcite web framework then there's examples of patterns and all kinds of good things the last thing I just wanted to show you here is take a look at some coding style guides this is always the center of attraction for a lot of projects at organizations and that is you know how do we style our HTML or our CSS so we spent a little bit of time doing some research and coming up with some patterns that work for us simple things like you know just using two space tabs for elements and and and other things like for example if we go to CSS how exactly should our CSS you know be stacked and staggered and what order for example should the different elements come in so if you're looking for some guidelines and so forth for your organization then why not borrow from some of the things that you see here for calcite web so that's why I'm showing you this project it's what we use to maintain synchronicity across all of the teams and to give you an example of what it looks like that's it so if you've been developers then you've seen calcite web in action everything implemented here was implemented with that framework that cool all right so now you know it's there you know there are some resources that may be a value to value it to you as a web mapping app developer another project you're going to find out there is called calcite bootstrap this is essentially a theme that sits on top of bootstrap and and some people will say that it's bootstrap calcified alright so and again it's it's our design patterns and principles and colors and everything implement it on top of that so there are some projects like if you're familiar with open data when you go to open data and you customize your page that's built with calcite bootstrap now you know alright so we maintain that externally this may or may not be of use to you it's but it's here and I'm telling you about it what I really want to get on to today is this thing called calcite Maps that's what we're here for I want to talk to you about the framework how it can be used what what can be done with it and so forth so calcite Maps is bootstrap let's just start there it is the bootstrap framework so that means it is a lot of things it's responsive it's gonna work well on mobile and on desktop devices it also has a few tiny components to build out the mapping framework so it has some map very small map app framework components Styles built in there to handle what we need to do is mapping app developers it also borrows from calcite so borrows from all of the awesome principles that have been stilled in all of our product development and it includes themes colors fonts and icons that have already been proven that already work they're already out there which is super awesome it's a framework and it really doesn't matter what API you plug in so you can plug in the js3 X 4x or Ezra leaflet or standard leaflet or your favorite API and it'll just work because it's just like bootstrap right bootstrap doesn't care what mapping framework you use so that's kind of an ICD here too now you think you'll get a lot further or a lot if you're using one of the ArcGIS api's because there are some things in there to make it easier for you then of course desktop and mobile friendly and the whole impetus is that I think it's the frustration that I've felt for many years and that's you know we I generally have a very short amount of time to build an application and the last thing I want to deal with is styling and some framework issues and so forth I just need something that's just ready to grab and go it's easy I can style it really fast and I don't need to think about it a whole lot just it's just gonna work always everywhere and that's what Cal sitemaps is all about that was the impetus it now this project has been around for about a year maybe a little bit more than a year now so it's it's definitely has some maturity to it and we'll talk about sort of how it's sort of grown in a second here let's talk about bootstrap just real quick for those people that aren't that familiar with bootstrap again just a web framework it's probably the most popular one in the world it starts with the grid system where you have 12 columns and you can determine how your page is laid out by putting certain content in certain columns and when your page collapses then it's going to your columns are gonna turn into rows and stack and do all this good stuff so so bootstrap has figured that out really well and people have adopted it it's got all of the usual suspects like you know just like we have for calcite web we have colors for buttons and you know certain colors mean certain things now these are just sort of templates you can override everything you actually can do custom builds right from here as well to build out your own bootstrap CSS if you want to so that's the foundation that's CSS bootstrap I think one of the reasons it's so popular is because it has components has like something called a navbar so if you need to build nav in your app you know with dropdowns and these kinds of things it just has that so you can grab them so that means because Cal State Maps is built on bootstrap I can reuse all of these components to it also means when I get stuck as a developer and I want to know how to do a drop-down in a certain way or a mortal dialog I can just google it and somebody has Hansard it somewhere on the inner so it makes it super easy you're not developing with a framework that's kind of just in a corner and you're not gonna get any help or if ELLs busy I'm not gonna answer your question or your issue one on calcite Maps itself so so that's kind of neat all the other suspects like alerts and good things panels something that I use quite a bit and then on the JavaScript side there's a little tiny piece of JavaScript that's needed to to make to basically glue things together for example if you wanted to do like a modal drop-down then you got to pull in a little bit of JavaScript to kind of make this happen but the modules are really really small they're tiny they're fast they're lightweight they're not going to get in the way there's both jQuery and dojo versions of the module so if you want to do pure dojo solutions you can do that and that's what I do for Cal sitemaps but you have the option it'll work with both ok so you get the idea so it's this cool framework it's this this this awesome HTML CSS framework with components that we can use and we can build off of in it and it's really the core of everything that Cal sitemaps is so Cal sitemaps also brings the mapping framework to you to make your life easier hopefully there's really only three pieces you have the navbar at the top you have this drop down menu on the left and you have panels and for a simple mapping application sometimes that's all we really need and that's that's all it really provides so the rest of it is just bootstrap it's whatever components you either need or don't need and I'm gonna show you how you can compile certain components into it or you can remove them so you can really fine-tune your deployment hell site Maps tiles so Cal site Maps is designed so when you apply a class to an element it will have a dramatic effect on the elements around it so for example I can add a class just to the layout to the body tag and it'll change the entire layout of the entire thing so I'll show you this in a moment so you can do top bottom layouts you can add margins there's drop-down we can change in a couple different ways panels we can move them around left-right themes colors widget themes these kinds of things are built in so but they're all style classes right so the best way for me to kind of show you this is to show you this thing called style Explorer so style explorers something that I wrote to test my own work essentially just to show you where I'm at and where it came from I just went to the calcite Maps github repo and then if you just go to the doc link you'll you'll get this guy so the style Explorer is exactly that it's going to allow us to explore some of the styling and this is really nice because what it allows me to do as a developer is I can actually style out my app before I write it I can kind of experiment with different user interfaces and color schemes and patterns before I write a line of code and then I can just go grab the styles and apply them that I'm good to go so this to me is a lot faster than building it from the ground up and then you know retyping in the different styles so we'll just do something simple like we'll call this dev summit and an awesome place to learn about mapping okay so we'll apply that you know it's the first thing up here is that this is these are overrides from bootstraps bootstraps doesn't have this out of the box we have a primary a secondary title subtitle some people call it with a nice little divider in here that's the first thing to notice another thing to notice about the nav bar is the nav bar can be fully collapsed so Natalie now bars gone and take that even further now the panel's gone so we do that so when you're on a mobile device and you're trying to digitize that last vertice on a line and you happen to hit the interface instead of the map this gives you full screen access so this is a nice feature and that's why it's built that way so you can turn that on and off of course just by adding and removing that menu item so that's kind of fun alright so let's carry on so again I'm just using this this style Explorer to style and configure my app and play with some things so let's go to Palm Springs alright so we'll just navigate in there and for the King folks out there you'll be noticed that this is essentially the Search Widget the Forex search wiz it it's just embedded in here it looks and it feels like the rest of the components right so there's a nice blend there for the basemap we'll just do something like let's just streets navigation and you know we can do 2d we can do 3d we can do no D it's up to you this is actually using bootstrap tab alright so these are just tab components that sit in a nav that's there's no customization there that's just straight bootstrap out of the box and it's tabbing these panes back and forth so that's an option for me if I want that in my app and then of course here we're showing up this oh this pop-up alright so we'll move on to the theme things so what we can do for calcite themes there's two stock ones we can do dark or we can do light and it kind of depends what your backdrop is what the color shades are in in your base map and so forth but those are options and then what we can do is take that a step further and pick some of the calcite colors so here are the color sets not all of the colors but some of the cool ones so I'll pick dark blue is an example so that's going to give me the calcite dark blue which is proven to work against this white text background it's gonna work all the time and yeah it's got accessibility qualification to it as well so if that's important that's here so we can pick different colors so we can do that if we want to do a little bit of opacity then we can do like calcite blue 75% all this is doing this is adding a style class to my navbar that's all it's doing in the background this is not not a whole lot of magic here if you want to apply this everywhere we can say apply to all and suddenly the the panel experiences that that color as well so you can do this for like extreme branding if you want so we can do any of the calcite colors we can go through here pick the Reds if you want whatever we want right if we want to get super crazy we could do transparent right which isn't gonna work everywhere so make sure we turn that off but we can do transparent at the top and and that's actually kind of nice for some base map configurations like for example if we do streets night and let me go back do dark texts light then actually that's not a bad app if I'm looking for this sort of immersive experience this starts to break down and fail when you zoom in and go different parts of the map when things get busy like that but you can do it I just wanted to show you it is there okay so let's go back to something like just a dark blue for now and so those are basically some of the classes that are built in we could also do the widget so we can do widgets dark not a good example in this case we probably would never do that in real life but never back to the light widgets so that's an option to again just by adding you're not even changing a CSS reference you're just adding a class to the in this case it's the body all right so let's take a look at some of the layouts so we can do like a bottom layout if we want so that just shifted the entire focus of this application now when the user lands on the page is not staring at a title they're actually looking at a plus/minus control it's just the best design it kind of depends what you're after so that's an option and then the drop downs become drop ups right that's a little different and then you can see here we still have our tabs that's gonna work just like normal we have this little expander thing I'll talk more about this in a moment but we have this expander slide-out okay so that's one option and then we can do like like I'm a marginal which is kind of a floating style if we want to do something like one of my favorites is the inline left which basically pulls the plus/minus zoom slider off to the side this is one of my favorite designs cuz it frees up this whole corner in here it's something that the corners are so valuable in map app design and this solves that problem let's see the other way we can do is we can do inline right kind of swap that around and I mean this dramatically changes the user experience right like you see the difference in the user experience here where now they land on the site the first thing we see is the info box in that corner and that's the very valuable corner if you know anything about laying out web pages right people look to that corner a lot so the focus of the app completely chefs from touching the controls to reading what's in front of me so these are things that you can do for free quite easily so I'll just go back to the settings dialog and we'll just go back to sort of the standard layout for now other things we can do is work very well with the Foro api for example if we want to add widgets you know I can grab a couple of widgets and just add it to these corner boxes or I can actually move them around I want you want to drop our locator down at the bottom I can do that all right so that's actually not a Cal sitemaps thing that's just Cal sitemaps working with the Foro api to make sure there's no overlap in the controls and the styling is still good and valid okay so what else we have padding and control panels left right we saw that already drop-down menus probably one of the last things to show you and so this is kind of the slider drawer right so when do you use this you might use this if you're building a mobile centric application people want that mobile feel where they top once top you know tap on tap off kind of thing so that's available as well it really just depends on the type of application you're trying to build I guess the one of the last things I'll show you that stuff later I think that's about it so I'll just I'll leave it at that so this is the styled Explorer and this is going to help you kind of layout the design of your application before you write a stitcher code and then at any point in time of course you can right-click and inspect some of the classes in there and just apply them to your app right and it becomes really easy I'll show you how to do that in a moment okay so that's style Explorer so to get started we can do is just go to Cal sitemaps let's just open that up and in the tab and then of course we have to find that okay here we go so I'll spare you the details of going through the documentation and we're just gonna grab the source code that's right here on the getting started section so grab this and we'll start building this out so we can see how to lay this out all right so I'm gonna put this into jsbin just grab what's there just pasted in and I'll run that and this is what we get so this is like the most simple being calcite Maps up in the world to see a few things happening right away so the responsive design is automatically there so when we hit 768 then that's when our panels become docked and you'll notice that that's where the framework kicks in so now when I dock the pop-up it it's not overlapping the panel the panel actually went away okay so that's an important example of how the framework works in both mobile and then when we go to desktop mode it works that way as well so that's about the extent of the map app framework it's just the ability to work with dockable controls and the other components that are built into some of these api's so let's take a look at what we have here just to demystify some of this the first thing you'll see is a reference to bootstrap it's actually this thing called Cal sitemaps bootstrap right so what we can do here's something fun I'd like to do this just just to make sure that bootstrap hasn't broken anything or I haven't broken anything so you go to getting started we can actually grab their CSS say okay this is the latest deployed CSS for bootstrap and I've done everything right and not broken any rules then we'll come over here and we'll grab my CSS and replace it for theirs and you probably ask yourself what's the difference when should I use their bootstrap maybe you have your own bootstrap maybe you've compiled your own you know CSS out using the compilers right so you can do that Cal sitemaps doesn't care it just needs bootstrap components to kind of get it going and the difference between this one and mine which I'll show you in a moment is that it's compiled down with sass and it's in its optimized and it's a lot smaller okay but for right now let's just prove the point that and go to the point that this is actually boosted up next we have whatever override we need so here we have Cal sitemaps and using the Foro api at this point so I'm grabbing the minimized CSS from the photo API if I was using leaflet or absolutely flood I plug in that module in there so we build out a whole bunch of someone else you're not getting CSS you don't need I guess is the bottom line make sense next we just have our standard 4 3 JavaScript reference for the ESS nothing special here for our HTML but then we have Cal sitemaps in our body tag and we're telling you where the nav is so let's do something here so I'll show you what was happening when we were using this style Explorer earlier so if I change this to bottom I'm going to change another setting here too you go down to dark ya bar fixed bottom will do this and we need to do a few other things so that's gonna move our nav bar down the bottom but because 400 uses this concept of padding so now what we're gonna do is we're gonna Pat 0 to the top will do 50 at the bottom and this is gonna refresh like every time I do this but it's ok so we'll do UI and we can do UI padding and actually that's an object so let's objectify that and we can do I think bottom top 30 and that should give us the padding that we need to make this all work and there it is so now we've moved our now down to the bottom and that was it so we had to tell the the Foro controls to reposition themselves to take you know consideration where we moved our navigation to but everything just works it's that simple all right so let's meander a little further down through our stack here and you probably important to point out that there's really only three nodes there is a nav bar node let's just go here and top this up with it with a color let's do calcite bgcolor and we'll do dark blue so this is just one of the styles that's available so there we have our blue back if we wanted to do some sort of transparency then we would do blue 75 and there's a little bit of transparency in there for one that okay so that's that we move down a little further in the stack this is all just the so if you want to add and remove menu items these are li items right so here we just have the full map toggle right and then we have the base maps which can pop up or pop down just appear and then we can keep adding those for every navigation item we have the option of adding a panel so this is an example of a panel and in this case let me just make this a little bigger so that panel pops up top and I'm so close and we can swap out the base maps to whatever our favorite base map is all right so this is just the code for that HTML elements for that down a little further you'll see that we have a reference to dojo bootstrap and then finally Cal sitemaps dojo module these are tiny tiny j/s scripts just to ignite the framework itself then down a little further we've got the 4-3 reference bringing a few modules we bring in just drop down and collapse is the only two modules that we need because that's all we're doing is is the drop up and the collapse and beyond that it's just it's your favorite JavaScript code right it's just adding in whatever functionality you want and then down here is where you see the integration with the pop ups so this is kind of important right so this is how the magic happens here when I open up this pop-up and I happen to have a panel and I really want to do the docking and focus the user on that particular experience and this is how that works so it's it's basically a combination of bootstrap and working with the JavaScript API watch functions that's it so there you go there's your first Cal sitemap application if you haven't build one before and that's how simple it is and it's pretty straightforward so if we take a look at some of the more advanced dev options it's kind of what I want to show you here what we can do is we could do some compiling and some good stuff all right so if we take a look at the size of the output so here are all of the CSS modules that are output and of course all I really need is bootstrap so here here's bootstrap at 152 KB's and let's see yes it's 152 so what I can do is come through here and I can grab one of these CSS modules and I'm just going to comment this out and say you know what bootstrap I don't need print I don't need breadcrumbs and Ernie pagination I don't hate all these things then I can recompile that and after I build that out I come up here and not go here oh boy no find this guy this is where it goes out to this dist folder just so you know the whole reason I wanted to do this right and what we're really interested in is this calcite review finder and here we go so now we're 136 so I went from 152 to 136 just because we removed some of the bootstrap CSS modules you can continue down that road and remove more and more modules as you need or do not need them okay so and again I have things in here like modal's you know may not need modal as an example okay so that's basically the build system in a nutshell if you're a SAS developer then you're gonna want to get your hands in here to like some of the variables like for example you can change the breakpoints that that I adhere to so I've got an extra extra small extra small and then small and the you just basically changed these in one place and they basically propagate consult through the entire CSS stack and it makes it super easy to refine this to whatever kind of user experience you want okay so that is that the last thing I want to show you think's important is some of the documentation let me show you two things yeah well do documentation we'll do samples so this is it these are all of the styles available so in the body tag you can use these ones so you can do as you saw nav top bottom margin some different styles and setups for layouts so you can do a medium sized title larger title different options and then here if you're using some of the other technologies just 3x or 4x or 3x or as a relief foot then you can position the pop-ups the the zoom controls automatically navbar there's some here as well drop down a couple here as well that's about it there is one thing I wanted to show you here for this app that we were building out is let's say I didn't want as you can see it's kind of hiding underneath here I have this kind of expand Oh search thing if you don't want that then you can remove it so it's as simple as going here to our search element or remove that class now we have just the standard search in full-size so it's up to you if you want that in there or not okay so that's that last thing is yeah let's I guess just look at the other examples so if you're looking for more examples on how to implement these things encourage you to take a look at the sample apps so this is one using 3x so if you're a 3x developer the frameworks gonna work just fine if you want to discover what styles were used for this app then there in the info box right here it makes it super simple for you to find these out so is that this one uses ArcGIS JavaScript API for and this shows you how to use tabs this one implements the drawer right so again all of the styles are in the info box last one is as a relief late-- so again it's just a framework it doesn't care too much about the API used so the info box can be popped up here we can still do search we can still look for things like Starbucks Portland you'll find one so these controls have been calcified just slightly with having some corners and edges and stuff like that okay so that's essentially Cal sitemaps in a nutshell hopefully everybody gets it it's it's a bootstrap framework it has a tiny mapping framework associated with it it builds on the calcite design project that we have at ESRI internally now the last thing to show you is pretty exciting this is all very very recent work and we just released this on Friday so this is the styler template the styler template is a new map app configurable map app and you can get this an RTS online today and it's built on top of calcite Maps so nothing should should surprise you here when we work through this so right it supports 2d in 3d so it's one code base which is really nice and it has all the configurability or style ability that calcite Maps does so it should make it easier to create style and then sharing is also super important so excuse me there's really two things you can do with it so you can style apps kind of the standard way so somewhere in here right so here I've got I'm in the viewer and I've got just a standard web map that I'm looking at so let's share this out and we'll go through the experience so now you look for something called styler and you'll see it's called map styler and there's also one for 3d scenes called scene styler so we can select that and we'll just pick the defaults here and we'll start styling our map app so we could change the title just like we did before let's just say we want to use Durango trails explore your world something like that we can tell it where to grab content for the about okay so right now it's grabbing content from the description which is fine we can use that we can go to colors this should all look very familiar to right we can do light colors we can save that see what it looks like and of course this is gonna go refresh and apply to styles that we just looked at it so we do something like that we might want some color so let's use blue again that's fine we won't do panels well let's do panels why not then we can do layout again all the options we look at before top bottom medium large docking position for the pop up any of the controls that we either want or don't want in the panel's different panels we can turn on and off I'll just turn this base maps went on as well search this is really interesting it's a kind of a hidden feature in here it's called fine places I'll show you what this doesn't in a second but just just make note of it the other thing you can do is you can override at any point in time the default settings and the other thing you'll notice is that there's this little control down here and I called it a coordinate share control so I can grab the coordinates out of here go to map options and I can dump in a different latitude and longitude so let me just refine this a little bit so I'm actually overriding the settings and a web map so if you if you come across a web map and you want to create an app out of it and you don't want to go back and change the actual map itself you can change it here in the app which is really neat and what zoom level was that so this how how cool is this it actually has zoom level 9 does ever confuse you like wall what is zoom level 9 right well now you can see that what the scale is because it has a scale beside it as well so let's put nine in here because that's our zoom scale and save that see what we got right cool alright so let's launch this and I'll show you what else you can do so there's there's all kinds of neat things so first of all let's it's exercise to Cal sitemap stuff that's really what this is right and it's just built on what we just looked at so let's just go to Durango so we'll zoom in a little bit all right that's kind of cool but we have this fine places option so I can click this and this finds parks by default if I want to change that pio I find feature I can look for coffee shops or I can look for restaurants in the area and again this is using 4o so it's using the super cool pop-up and the ability to dock we have all of that feature functionality we had before okay so that's one thing you get with the application configurable template what else so we can do other things like see we could swap the base map out and say you know how to really like this base map and let's say when we're done say we just zoom in a little bit here let me just go here clear this out see you know this is really the experience that I want to share with people so I can go down here I can do two ways I can go to this little share and that kind of flips this card around I can copy this I can go to a new tab I can paste this in and you have to remember where we came from right week we came from this this was our the hop that we were configuring from the web map right but now we've just shared this thing out here's what it looks like so what I'm showing you is that styler is completely configurable with the command line so I can come along here and say you know what actually background color equals red alright so when I enter that now it's red and if I want to do something like what actually the layout would be better suited on the bottom then let's take it a step further and I actually want the base map even though I've overridden the base mount I'm gonna overwrite it again and I'm gonna create let's do if I can get this right streets vector night let's see how close we can get it no I missed but you can see how all the styling is possible just from the command line so styler is kind of this super template if you will and let me show you where it lives I think I've got a link to it here so that's styling apps from existing web maps and scenes what we can do is we can style apps on the fly which means we don't have a web map we have we have nothing all we have is this thing living in the cloud so let's go ahead and open this guy up so we're gonna view the application now this is just the configurable app template sitting there with nothing other than just itself right so we can start building this thing out we can say all right that's cool but let's let's do ampersand and we'll do title equals you know dev summit same stuff as before the background color let's do transparent this time and yeah we'll just start with that and of course then you put the right guy in there first guy's got to be a question mark all right so that's not quite as compelling as what I want it so let's go here go back to Palm Springs zoom in to the airport and that's kind of cool and let's get rid of transparent and make that like you can just use dark if you ever don't need don't know what color you want you can just use dark or light and default to that now here's a neat thing so you can continually style out this app so we can do things like the active panel equals about and then we can do the about text equals hello everyone and yeah the list just goes on so let's try that and then we'll do one more so they're our about panel pops up providing the information that we provided in text all just in the command line here the last thing I want to show you is this piece here where we can let's go back to Palm Springs alright and what we want to do is sorry the other way to do this customization is to do it right in line here so for our base map let's change our base map to satellite so we'll do base map equals satellite and enter still in 2d but it gives us our satellite well we can do it any point in time is go from 2d to 3d so if I put in here web scene equals default and ampersand I hit enter then it's going to change our 2d map to a 3d map and then if we want to create a more immersive scene and this is really the perspective that we want then we can change perspective grab that last one I promise and we can share that out with our friends now we've completely configured and styled and press create a map on the fly with command line parameters in the URL okay yeah so so in some ways styler is not only is it a next-generation template using the arch s4 API it's kind of the super template and in that it can be shared out very easily it can be styled very quickly it's built on Cal sitemaps so now you know what's going on underneath the hood so the mystery is is solved and yeah there's some really cool examples I encourage you guys to check these out and these are examples of like here's an app that was styled just on the fly with these parameters right here so this is a example of a New York map this particular example takes a web map ID so you have the option of passing in an ID and it'll pull in you know all the styles and everything from the web map except we've overridden some things here and this uses bookmarks that's kind of fun here's one of Big Bear California so these are just examples of the things you can create with just a couple lines of arguments and values in your URL yes go ahead I'm almost there it's a fantastic timing so what I'm gonna do is just just zip over here to the repo itself so in the repo itself if you scroll down past the examples then you get to configure parameters so there's no mystery here all the parameters that are supported like lat/long XY WIC ID the zoom scale rotation all of these things that you can do at the command line are all itemized here and then the values are itemized on the right-hand side okay so you can decouple it any way you want okay cool and that's about it that's about all we have time for so we covered lots of things we looked at calcite as the design system could have the lights please if we have a lights person back there no no lights person all right and then we looked at calcite Maps as the design framework to help you guys build better mapping apps and then at the very end we looked at the new styler template right it's brand-new hot off-the-shelf just was released Friday it's an app template and the whole idea is you know it shouldn't be hard to create style great super awesome web mapping apps and hopefully this framework will help you guys out if you have any questions post issues please on Cal sitemaps or the styler and I'll get to them as soon as I can thank you very much [Applause]

Channel: Esri Events

Views: 2,566

Rating: 4.8518519 out of 5

Keywords: Esri, ArcGIS, GIS, Esri Events, Calcite, Calcite Bootstrap, custom web mapping, custom mobile mapping, JavaScript, 4.0, API

Id: Q1Zm9lwKMMo

Length: 48min 55sec (2935 seconds)

Published: Wed Mar 29 2017