Just starting with Umbraco, want to move from webforms to MVC or just want to brush up your knowledge then get learning on the new umbraco tv site. http://umbraco.tv/

Lean all about the basics like document types / templating (with razor views) / macros / razor scripts / multilingual sites / umbraco api’s and more

Other valuable resources

Documentation section on our http://our.umbraco.org/documentation

Starter kits (see how other people build sites and learn )

http://our.umbraco.org/projects/starter-kits/cws-start
http://our.umbraco.org/projects/starter-kits/ulocalgovmvc-starter-kit
http://our.umbraco.org/projects/starter-kits/standard-website-mvc

Here is a quick guide to get an ajax shop/store/… finder on your Umbraco powered site with the Seek and Destroy package

Prerequisites

Make sure you have at least Umbraco 6.1 since the package makes use of an UmbracoAPIController and that’s only available since version 6.1

Also you need some content that you want to search through, so this can be a collection of stores/offices/hotels/markets/… basically everything that has an address

Install the package

Get the package from http://our.umbraco.org//projects/developer-tools/seek-and-destroy and install it using the developer section

Follow the dashboard wizard

Once the package is installed you can use a new dashboard control to help you with geocoding content (you can skip this if you already store coordinates for your content).

So on the developer dashboard you should have a seek and destroy tab with a new control that consists of 3 parts

Google maps datatype

First step is to install the google maps datatype, this is a new datatype that can be used to store coordinates

Add google maps datatype property to doctype(s)

Next you can add a new property that uses the google maps datatype to your store/office/hotel/… document types by choosing the doctype and supplying a new alias for the property (I like to call this location)

Geocode content

Once you have a place to store the coordinates and your content already contains an address you can auto geocode your content with the following step (so that will try to fetch coordinates based on the stored address). Simply select the doctype, the field(s) containing the address and the field to store the coordinates

Once that is done your content will have a new property that looks like

Make sure you have jquery

Before adding the locator macro make sure jquery is available on your frontend since the ajax locator makes use of it

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Add the default stylesheet

And to get some default styling also make sure to include the stylesheet

<link href="~/css/seekanddestroy.css" rel="stylesheet">

Add the macro to the page

So now it’s just a matter of adding the macro to the page you want to locator to be displayed on. You’ll need to specify 3 parameters. The source, so where to start looking for documents, the doctype of the documents to look for and the property containing the coordinates.

And that’s it with these simple steps you’ll have a shop/store/office locator running on your Umbraco site in minutes

The ajax locator package I’ve been working on the last couple of freedom fridays is available as a package on our.umbraco.org today

If you haven’t seen it in action make sure to check out this quick preview video.

Here is a quick overview of it’s features

Dashboard control

It features a dashboard control (in the developer section) that can install the google maps datatype, add a new property of that type to your doc type(s) and then geocode existing content based on the address you have stored. So you should be up and running in a couple of minutes (even if you don’t have any coordinates on your content documents yet).

Fully Customizable AJAX Locator control

By inserting the macro you have a working locator in a couple of clicks but of course it’s output is fully customizable just by updating the Partial View Macro File associated with the Macro. So you can tailor it to your needs! If you want custom google map markers check out (http://www.webiconset.com/map-icons/ and http://www.cycloloco.com/shadowmaker/shadowmaker.htm)

More

The locator control includes some nice features, it loads a default location based on the users IP address, you can set it in street view mode and there is also a directions mode.

Download

So the package is available for download on http://our.umbraco.org/projects/developer-tools/seek-and-destroy

If you are interested in the sourcecode that’s available on github

Please not that since this pacakge uses an UmbracoAPIController you’ll need at least Umbraco v6.1 to run this package

Since I had fun creating the Optimus trailer here’s one for a new package I’m working on

 

Want to know more about Seek And Destroy check out http://www.nibble.be/?p=253 (now also includes a control that allows you to auto geocode content docs based on a stored address   and it can also install the google maps datatype)