Transcript

00:00 are you looking to overlay points on top
00:02 of an image or a map well if you are
00:04 then points is exactly what you need hey
00:15 everybody Joe workmen here and in this
00:16 video we're going to be reviewing the
00:18 awesome points to update and we're going
00:21 to go over a lot of the features and see
00:24 some of the great new enhancements that
00:25 we now have in points too so here we are
00:29 on the points to demo page and what
00:31 we're gonna do right now is we're going
00:33 to pinpoint all the amazing features of
00:35 the new points to stack so if we look at
00:38 this first demo of the point stack will
00:40 see that this is a great kind of typical
00:42 use case of what you would use points
00:45 for here we have nice pulsating points
00:48 that highlight various parts and details
00:50 of an image and when we hover over each
00:54 point you'll see that we have a nice
00:56 information point about each individual
00:59 detail on the image if we scroll down to
01:02 our next demo this demo is a little bit
01:05 more involved as you'll see here I have
01:08 multiple points configure it on top of a
01:10 map of Brazil and in this particular
01:13 situation i'm highlighting all the
01:15 cities that contained games in the World
01:17 Cup in 2014 now what you'll notice is
01:21 that we have multiple points they have a
01:24 soccer ball icons as the points but not
01:27 only that um each one is a different
01:30 color or they can be different colors
01:31 right I have some that are yellow with
01:33 blue dots I have some letter you know
01:36 blue balls with white accents okay and
01:39 lastly I have the capital city of
01:41 Brasilia as a star so I have the ability
01:45 to customize each individual a point as
01:49 I see fit now just as before you'll
01:52 notice that when I hover over we get a
01:53 nice little tool tip that explains about
01:55 that point in this case I'm highlighting
01:57 what the actual city is also notice that
02:01 the cursor for the mouse changed as well
02:03 to a magnifying glass and that kind of
02:07 portrays that I want the user to maybe
02:08 click on this what happens is when we
02:10 click on this will see that points in
02:13 rates with many different light boxes in
02:15 this one in particular I'm opening a
02:17 light box that shows us a picture of the
02:19 soccer stadium in Brasilia where the
02:22 world cup was played and I have that
02:25 same feature integrated into every city
02:27 where if you click on that particular
02:29 city you'll get the image of the stadium
02:31 where that world cup game was played
02:33 this is a great way to provide rich kind
02:37 of exploratory data for your users now
02:42 maps are an obvious choice for points
02:43 right so here's another example of maps
02:45 and in this particular example this is
02:49 not just an image that I'm overlaying
02:51 inside points this is my google maps
02:54 stack so what I've done is I've actually
02:56 allowed points where you can drop any
02:59 stack that you want into points okay and
03:02 then have that stack have points
03:05 overlaid on top of it now this really
03:08 works best with image-based stacks only
03:10 right because images will scale
03:12 proportionally from desktop down to
03:14 mobile so in this example I'm over
03:17 letting some of the default points on
03:19 top of a map now if you notice in this
03:22 example instead of a tooltip we actually
03:24 have a fixed tool bar area at the bottom
03:27 that is displayed whenever you hover
03:29 over a point this is great if you want
03:33 to provide a little bit more information
03:34 that what could potentially look good
03:36 inside of a tooltip now in this next
03:39 demo what you'll notice is instead of
03:42 the kind of the dot points that we've
03:45 seen in previous demos okay we're
03:47 actually using images for each point so
03:50 here I've gotten an image of a little
03:52 pin point that you can you know get from
03:55 online and just drag and drop that into
03:57 the stack and not only that but I can
03:59 have different image pins for every
04:02 single point on my map here I've only
04:05 decided to use two different images I
04:07 have a red one for all the points that
04:09 land on a land okay and then I have blue
04:12 ones for all the water based points on
04:14 the map if you notice just like on the
04:16 previous example when you hover over
04:18 each one we have a nice little tool tip
04:20 area on the bottom that shows us a
04:21 little bit more information about each
04:24 particular point
04:26 now what I've done in this example is
04:29 I've actually added links to every
04:31 single point so when I click on a link
04:34 it actually opens up a Wikipedia page in
04:38 this example okay but it could be any
04:40 URL and here I have it opening in a new
04:42 tab however you could use this to maybe
04:47 generate an interesting menu for your
04:49 site right add links to particular pages
04:52 on your site to each point so that users
04:55 have a nice and interesting way of
04:57 navigating through your site via an
05:00 image now in the last example here I
05:04 show a nice way of integrating points
05:06 with many different stacks first here
05:10 you'll notice that I have two buttons
05:11 and this controls a moving box slider in
05:14 the background where I have a moving box
05:17 with two points tax one in each slide
05:19 and when I click on it you'll notice
05:22 that the points on my map change now the
05:26 background image is the same for each
05:28 points stack okay but the location of
05:31 the points change so this gives a nice
05:33 interesting illusion where I can you
05:35 know navigate between different points
05:38 on the map now in this particular slide
05:40 we're showing off the various utility
05:43 containers that points can actually
05:45 integrate with if you hover over you'll
05:47 see that when I click on this particular
05:49 point we will get a glider stack now on
05:52 the next point you'll notice when I
05:54 hover over it this is actually
05:56 triggering glider on hover this is
05:59 because you can configure each point to
06:02 either be based off a click or hover
06:04 event and this nice because when I
06:07 uncover off it actually closes glider
06:10 this provides us with a nice integration
06:12 between multiple stacks on my page now
06:16 we can also integrate with drop down
06:18 inside foundation to provide nice rich
06:21 data inside of our points as well as we
06:24 can hover over and get that same nice
06:26 rich drop down for our point and last
06:30 but not least is we can trigger a
06:31 peekaboo stack which allows peekaboo to
06:34 open beneath it and we can also hover
06:37 over a point to open up peekaboo as well
06:40 now if we navigate to the next slide
06:42 inside this we can see the light boxes
06:46 that points will integrate with and here
06:49 we have expose and we have reveal inside
06:53 foundation we have top box from will
06:56 woodgate focus from a lick sir and many
07:01 more now if you scroll down a little bit
07:03 further into the demo page you'll notice
07:05 that we have examples of all of the
07:08 third-party integrations that points
07:10 currently integrates with now if you use
07:14 the general link tool you can probably
07:15 integrate with even more stacks out
07:17 there but check with your you know the
07:20 other stacks developers documentation on
07:22 whether or not that is possible or not
07:24 however we've made some really simple
07:26 integrations with these stacks to make
07:29 them extremely easy to use straight
07:31 within points now for this video I'm not
07:34 going to be doing a deep dive into all
07:36 the individual settings inside points
07:38 okay but I wanted to give you a preview
07:41 of what points looks like in edit mode
07:43 and how powerful and revamped the UI is
07:46 in points to as you see here you can add
07:50 as many points as you want since they
07:52 are child stacks now in the main point
07:55 stack is where you define all of your
07:56 defaults in terms of how your points
07:59 will look how they're styled and then
08:01 you can override all of those settings
08:04 inside each individual point now
08:08 positioning your points on top of your
08:10 image couldn't be any easier simply
08:13 change the position of your point and
08:15 you will see it change on top of your
08:18 image in real time straight in stacks
08:21 edit mode now that's all of the amazing
08:24 features that we have today for the
08:26 points to stack I hope that you see how
08:29 easy it is and how powerful it really
08:31 can be for you now in terms of a lot of
08:35 the demos in my demos I used a lot of
08:37 maps right now maps is really the
08:41 obvious use case for points beacon you
08:45 can use things as such as products and
08:46 pinpointing various things on your
08:48 products maybe you have a camera and you
08:50 want to display what does this button do
08:52 or what does that button
08:53 right or maybe you have a car and you
08:55 want to pinpoint the amazing tires or
08:57 the hood or the exhaust or the engine or
08:59 the interior right and then you can
09:02 click on those points and get more
09:03 detail on it right points is a very
09:06 powerful tool and it allows you to do
09:09 something different with your website
09:10 other than just having a simple menu and
09:13 web pages right I'm really excited to
09:16 see what you use points for and how you
09:19 can make your websites even better with
09:21 it now another thing is points is
09:24 completely responsive so as the image
09:27 inside points shrinks down you can also
09:30 customize the actual size of the points
09:32 this way that you can have large points
09:35 on desktop and those large points don't
09:37 look huge on mobile because they can
09:39 shrink down and become smaller as well
09:42 so I hope you enjoy points I can't wait
09:45 to see we build with it now make sure
09:48 you watch if you were looking for a more
09:50 detailed tutorial on how to implement
09:51 points make sure that you check out our
09:53 detailed overview that I go over every
09:56 single setting for you until then thank
09:58 you very much and have a wonderful day
10:00 enjoy points bye"}]