Transcript

00:00 hey everybody joe workman here and today
00:02 i would like to introduce you
00:03 to geo map
00:14 so the geo map stack makes it super easy
00:17 to add
00:17 maps and get geographic uh gps data
00:21 from your users super easy so as you see
00:24 in this demo we have both
00:25 satellite views and a normal map view
00:28 and these maps are completely
00:29 interactive so you can go ahead and zoom
00:32 in
00:32 and zoom out um get information about
00:35 the location
00:36 so on and so forth now the map swap
00:38 feature a part of geomap
00:39 allows you to actually create buttons or
00:42 links
00:43 that actually change the location of the
00:46 map
00:46 so you see here i clicked on the london
00:48 button and the map here
00:50 changed to london if i click on rio de
00:52 janeiro
00:53 guess what the map will change to rio de
00:55 janeiro
00:56 and the last stack a part of geo map
00:58 allows you to
00:59 get gps data from your actual users
01:03 so in this example i'm actually i have
01:05 my map hidden by default
01:06 and then when i click get location the
01:09 browser is going to ask me if i want to
01:11 allow it to get my location and i'm
01:13 going to say allow
01:15 and what we'll notice here is that it
01:17 gets the gps data from the device
01:20 in this case my mac but it could be your
01:22 iphone or android
01:24 it will display that location on a map
01:27 and optionally if we need to use this
01:29 inside of a form
01:30 it will actually populate longitude and
01:32 logitech data
01:34 with the gps form data
01:37 so let's see how simple it is to
01:38 actually implement these stacks
01:40 so as you'll see inside the stacks
01:41 library there are three different stacks
01:44 that we can utilize
01:45 within this set right now now the geo
01:48 map stack is what actually displays the
01:50 map
01:51 and as you might expect we can by
01:52 default display a static map
01:55 and as i said we have two styles we have
01:57 map and satellite
01:58 you can then change your zoom level
02:01 change the dimensions
02:02 and then easily choose either an address
02:04 or you can put in exact gps coordinates
02:07 for the location that would be displayed
02:09 by default on page load
02:11 now in order to do the map swapping we
02:14 need to set the geomap stack
02:16 to actually use update via geoswap
02:19 now if we want we can actually define a
02:21 default location that will display on
02:23 page load
02:24 or if we delete this it'll actually not
02:26 display any map
02:28 until one of the geoswap buttons are
02:30 clicked
02:32 so if we look at the geoswap stack if
02:34 you look here
02:36 it's super simple all we need to do is
02:37 define either an address
02:39 or gps coordinates that when any button
02:42 or link that is added within it
02:44 is clicked those that actual location or
02:48 gps data will be populated
02:50 into the map and as you see in this
02:52 example i just have multiple geoswap
02:54 stacks
02:55 with as many locations as you want to
02:57 have and last but not least in order to
02:59 get the gps data
03:01 from our users we're going to use the
03:03 geomap stack
03:04 and i'm going to go ahead and set that
03:06 to be upload via geoload
03:08 um and in this case i don't want any map
03:10 to be displayed by default so i'm going
03:12 to set it to gps and delete that data
03:14 so then no map will be displayed on page
03:16 load and then
03:18 inside the geo load stack here i have my
03:20 button my get location button
03:22 added into it i simply define
03:25 um do i want it to actually get the gps
03:28 data
03:28 on button click or do we actually want
03:31 to have this happen on page load
03:33 so you can have it so the user is
03:34 prompted immediately on page load
03:36 to supply their gps location data so
03:39 then we can
03:40 gather that information and populate the
03:41 map and optionally you can actually
03:44 update a form field so if you like you
03:46 can actually
03:47 click on this to find the name of the
03:50 form fields that you want
03:51 use whatever form stacks that you're
03:53 using and
03:54 make sure that the names match up within
03:56 geo load
03:59 now geo load will by default actually uh
04:01 create hidden form fields
04:04 for um longitude and latitude
04:07 um so if you just want that data
04:08 submitted with your form you actually
04:10 don't need to add any form fields but if
04:12 you would like them to be actually
04:14 displayed to the end user you would then
04:16 use your favorite form stacks here i'm
04:18 using foundation six forms
04:20 to actually display that data to the end
04:23 user
04:24 as you see geo map is super easy to use
04:27 right it couldn't really be any easier
04:29 you just put in the gps data that you
04:30 want or location data
04:32 um you can swap it out you can load it
04:34 from the end user
04:35 right all kinds of really interesting um
04:38 you know features that we hadn't had
04:39 from a lot of other map stacks
04:41 so i hope you enjoy this oh another
04:43 selling feature
04:44 no api keys at all right as you saw i
04:46 didn't have to go and generate any
04:48 accounts or api keys in order to get
04:50 these maps working
04:52 there is no like monthly hit limit that
04:54 you have to then pay after that
04:56 right that is the beauty of this i
04:58 worked quite a long time on finding a
04:59 map service
05:00 um that's based on openstreetmap that
05:02 doesn't require us have an api key
05:04 or you know that also requires us to pay
05:07 out money every month
05:08 if we go over 10 or 15 000 views right
05:11 so this is a really great simple
05:13 solution really elegant beautiful
05:15 looking maps as well
05:17 and i hope you enjoy it take care bye
05:29 you"}]