Vulnerability in EPiServer.Forms

Try our conversational search powered by Generative AI!

Son Do
May 5, 2016
  4637
(4 votes)

Simple map block - MVC

Today, we will setup a block type to display a location from Google map – this might be your company address, your home and display it to your page.

Before start

First, we need to define what will be showed on your page. In this sample, I want to display map like this

Image1

The data we need is 2 infor:

- The location

- The description for this location

We will create a block data to store those information and create a page and use this block.

The second, following Google Map API, we need to register a key. Refer to this document and get our api key https://developers.google.com/maps/documentation/javascript/.

Reading carefully if we plan to use this for site with a lot of users.

And in this sample, I will use QuickSilver – an Episerver Commerce sample to verify, , you can get source code from https://github.com/episerver/Quicksilver.

 

Creating Page type

We will create new page type to show our location. We call it as ContactPage because we will display more information about our company/infor late.

[ContentType(GUID = "760AEE27-E362-49EE-BFAC-4FE32F2C4123",
                  DisplayName = "Contact Page",
                  GroupName = "New Page type",
                  Order = 100,
                  Description = "The contact page.")]
    public class ContactPage : PageData
    {
        [Searchable(false)]
        [BackingType(typeof(PropertyString))]
        [Display(Name = "PageTitle",
                   Description = "PageTitle",
                   GroupName = SystemTabNames.Content,
                   Order = 1)]
        public virtual string PageTitle { get; set; }
       
        [Searchable(false)]
        [Display(Name = "BodyMarkup",
                   Description = "BodyMarkup",
                   GroupName = SystemTabNames.Content,
                   Order = 3)]
        public virtual XhtmlString BodyMarkup { get; set; }
        [CultureSpecific]
        [Display(
            Name = "Location",
            Description = "Our location",
            GroupName = SystemTabNames.Content,
            Order = 6)]
        public virtual ContentArea Location { get; set; }
    }

Also create new controller and view for this page data:

[TemplateDescriptor(Inherited = true)]
public class ContactPageController : PageController<ContactPage>
{
  public ActionResult Index(ContactPage currentPage)
  {
     return View(currentPage);
  }
}
@model EPiServer.Reference.Commerce.Site.Features.Default.Pages.ContactPage
<h1>@Html.PropertyFor(x => x.PageTitle)</h1>
@Html.PropertyFor(x => x.BodyMarkup)
@Html.PropertyFor(x => x.Location)

 

Creating Map Block data

As we defined before, our location need some information to show our location: Location (Latitude, Longitude) and Description. So we will create BlockData to store those value:

[ContentType(DisplayName = "Map block", GUID = "32782B29-278B-410A-A402-9FF46FAF3212", Description = "MapBlock data")]
public class MapBlock : BlockData
{
    [Display(
        Name = "Latitude",
        Description = "Latitude",
        GroupName = SystemTabNames.Content,
        Order = 1)]
    public virtual string Latitude { get; set; }     [Display(
        Name = "Longitude",
        Description = "Longitude",
        GroupName = SystemTabNames.Content,
        Order = 2)]
    public virtual string Longitude { get; set; }
    [CultureSpecific]
    [Display(
        Name = "Description",
       Description = "Localtion description",
        GroupName = SystemTabNames.Content,
        Order = 3)]
    public virtual string Description { get; set; }
}

And a controller to display data

namespace EPiServer.Reference.Commerce.Site.Features.Folder.Editorial.Blocks
{
    public class MapBlockController : BlockController<MapBlock>
    {
[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
public override ActionResult Index(MapBlock currentBlock)
{
return PartialView(currentBlock);
}
}
}

Of course, also need creating a view

@using EPiServer.Reference.Commerce.Site.Features.Folder.Editorial.Blocks
@model MapBlock
<div>@Html.DisplayFor(x => x.Latitude)</div>
<div>@Html.DisplayFor(x => x.Longitude)</div>
<div>@Html.DisplayFor(x => x.Description)</div>

To preview, adding new Map block to our Contact page.

Adding Map block to page

Back to ContactPage page data, we should add attribute [AllowedTypes(typeof(MapBlock))] to Location property.

[Display(
    Name = "Location",
    Description = "",
    GroupName = SystemTabNames.Content,
    Order = 6)]
[AllowedTypes(typeof(MapBlock))]
public virtual ContentArea Location { get; set; }

This will allow us adding specific MapBlock data to our location.

Creating new Page under our Start page with new PageType we just create

Image2

Create new Block type for our location and add our infor

Image3

After this step, we can saw our map data display on page.

Image5

Using Map API and show the map

First, we will show data like this in our html

image

And when init api, we will read those data and display map in this holder.

To do this, we change Block View like this:

<div id="mapHolder" data-lat="@Html.DisplayFor(x => x.Latitude)" data-lng="@Html.DisplayFor(x => x.Longitude)" data-info="@Html.DisplayFor(x => x.Description)" class="gmap">Loading...</div>

Refer to Google Map API document, I created a simpler file to call api maps.js, adding it to our page. Noted that gmapInit will be called to read map data and show our map after adding line below to our page:

<script src='https://maps.googleapis.com/maps/api/js?key=yourapikey&callback=gmapInit'></script>

Styling map

Finally, we need to add this to our css file:

.gmap {
   height: 500px;
   width: 100%;
}

The result

Image6

Further

I want to create Contact page, and this is first part. The second part is contact form, we can use AForm plugin.

May 05, 2016

Comments

May 5, 2016 12:15 PM

Nice write up! Ted Nyberg, Arve Systad, Ben McKernan's Google Maps property, would be a perfect addition to the post http://nuget.episerver.com/en/OtherPages/Package/?packageId=EPiServer.GoogleMapsEditor :)!

May 6, 2016 08:50 AM

Nice reusable block to have! I like...

Please login to comment.
Latest blogs
A day in the life of an Optimizely Developer - Optimizely CMS 12: The advantages and considerations when exploring an upgrade

GRAHAM CARR - LEAD .NET DEVELOPER, 28 Nov 2023 In 2022, Optimizely released CMS 12 as part of its ongoing evolution of the platform to help provide...

Graham Carr | Nov 28, 2023

A day in the life of an Optimizely Developer - OptiUKNorth Meetup January 2024

It's time for another UK North Optimizely meet up! After the success of the last one, Ibrar Hussain (26) and Paul Gruffydd (Kin + Carta) will be...

Graham Carr | Nov 28, 2023

Publish content to Optimizely CMS using a custom GPT from OpenAI 🤖

Do you find the traditional editor interface complicated and cluttered? Would you like an editorial AI assistant you can chat with? You can!

Tomas Hensrud Gulla | Nov 28, 2023 | Syndicated blog

Optimizely Graph and Next.js: Building Scalable Headless Solutions

Optimizely Graph harnesses the capabilities of GraphQL, an intuitive and efficient query language to, transform content within an Optimizely CMS in...

Szymon Uryga | Nov 27, 2023

Getting Started with Optimizely SaaS Core and Next.js Integration: Testing Content Updates

The blog post discusses the challenges of content updates on a website using Optimizely CMS, Next.js, and the Apollo Client due to Apollo's local...

Francisco Quintanilla | Nov 27, 2023 | Syndicated blog

Performance optimization – the hardcore series – part 4

Let’s take a break from the memory allocation, and do some optimization on another aspect, yet as important (if not even more important) – database...

Quan Mai | Nov 25, 2023 | Syndicated blog