Creating your MyCouncil page

Pre-requisites

Access to the Windows PC where iShare has been installed.

Steps to creating your MyCouncil page

Using an Internet browser view a typical page on the council's website - one that shows the typical Header & Footer sections that are common to all council web pages.
Save the web page as D:\Astun\iShare\n.n\Webapps\Web\Custom\<my_example_council>.html.
Edit the saved html page in a text editor such as Notepad++.
Back to the browser, identify the Header and Footer sections. To do this in Google Chrome right-click on the web page and inspect any element. Then use the developer tools that appear to inspect the html. Chrome will highlight the relevant element in the web page making identification easy.
In the text editor replace all html that sits below the Header and above the Footer with;

 ##Page.iShare##

Copy the entire custom.example folder e.g. D:\Astun\iShare\n.n\WebApps\Web\custom.example, to a new folder called custom. Now you can customise the style sheets, plugins etc. to match your website.
Add the following CSS files to the Header section:

CSS files

<!-- iShareMaps CSS -->
	<link rel="stylesheet" type="text/css" href="custom/css/atMyPages.css" />
	<link rel="stylesheet" type="text/css" href="custom/css/atPrint.css"  media="print"/>
	<!--[if lt IE 9]>
		<link href="custom/css/atMyPages-ie8.css" type=text/css rel=stylesheet />
	<![endif]-->
    <!--[if lt IE 8]>
        <link href="custom/css/atMyPages-ie7.css" type=text/css rel=stylesheet />
    <![endif]-->
    <!--[if lt IE 7]>
        <link href="custom/css/atMyPages-ie6.css" type="text/css" rel="stylesheet" />
    <![endif]-->
    <!--[if lt IE 6]>
        <link href="custom/css/atMyPages-ie55.css" type="text/css" rel="stylesheet" />
    <![endif]-->
    <script src="js/atWrapperUtils.js" type="text/javascript"></script>
		<script type="text/javascript">
        	Astun.JS.WrapperUtils.CSSLink('custom/css/atMyPages-js.css', {xhtml: false } );
         	Astun.JS.WrapperUtils.CSSLink('custom/css/iShareCommon.css', {xhtml: false } );
      	</script>
 
	<!-- Including CSS files -->
   		<!-- Core jQuery CSS -->
         	<script type="text/javascript">
             	Astun.JS.WrapperUtils.CSSLink('css/jQuery/jquery.core.css', {xhtml: false } );
         	</script>
   		<!-- End of core jQuery CSS -->   
   		<!-- CSS For jQuery autocomplete -->
      		<link href="css/jQuery/jquery.autocomplete.css" type="text/css" rel="stylesheet" />
   		<!--  End of CSS for jQuery autocomplete -->
 
  	 	<!-- jQuery CSS theme -->
      		<link href="css/jQuery/astun/ui.all.css" type="text/css" rel="stylesheet" />
   		<!-- End jQuery CSS theme -->
	<!-- End of including CSS files -->
<!-- End of ishareMaps CSS -->

Any URLs that exist in the Header and Footer sections must be absolute, not relative, in nature. Elements to consider are JavaScript sources, image sources and href hyperlinks. An explanation of relative URL paths can be found here: http://goo.gl/0isjY

For example, say our Header contains an image;

<img src=”./images/council-logo.png” alt=”logo”>

By right clicking on the image src in the developer tools you can copy the link address and replace the src in the text editor with;

<img src=”http://my_example_council.gov.uk/images/council-logo.png” alt=”logo”>

Once all URL paths are absolute save the file.
Copy the default page from:

<iShare installation folder>\Webapps\Web\atMyResponsiveCouncil.aspx - for Responsive iShare

or

<iShare installation folder>\Webapps\Web\atMyCouncil.aspx - for Basic iShare

to:

<iShare installation folder>\Webapps\Web\<my_example_council>.aspx.

Edit <iShare installation folder>\Webapps\Web\<my_example_council>.aspx in your text editor.
Edit the first and last lines of the file, replacing “_atAstunResponsiveTemplate.html” or “_atAstunTemplate.html”, for Responsive or Basic iShare respectively, with “custom/<my_example_council>.html” and Save.
The <my_example_council>.aspx file is now ready to view in a web browser. Examine IIS and find the web path that equates to <iShare installation folder>\Webapps\Web\. Then inspect the page in a browser e.g.http://localhost/ishare5.4.web/<my_example_council>.aspx where 5.4 is the Version that you entered when you installed iShare.
If styling corrections need to be made alter the relevant files in the custom folder and clear the iShare web cache by visiting http://localhost/ishare5.4.web/atVersion.aspx. You can then view the <my_example_council>.aspx page again with the style changes in place.

Replacing the Welcome message

atWelcome.aspx is the default page which holds the welcome message for iShare Maps. To create a custom copy and paste atWelcome.aspx to the custom folder. Edit it to suit and then go to the General Settings under Studio and find the entry Web > Welcome. Enter 'custom/<name of file>.aspx' as the value. Save and exit.

Adding a Cookie Acceptance Notice

You may wish to add a Cookie Acceptance Notice to your iShare page. Here we have an example that you could use and change for your requirements.

You need to add the "cookieNotice" div and point it to your own cookie policy as this page just points to the one for iShare Maps e.g.

cookieNotice

<div id="cookieNotice">
			<p>By using this website you agree to our use of cookies as described in our cookie policy.</p>
			<p><button onClick="return hideCookieNotice();" name="atAcceptCookies" type="button">I agree</button> <a href="https://astuntech.atlassian.net/wiki/x/oQLaAg">Learn about our cookie policy</a></p>
		</div>

You will also need to make sure that you add the hideCookieNotice JavaScript section e.g.

Overriding the default value for Auto Complete Address Searching

There is a minChars parameter that you can add to the addressSearch option in the atMyCouncil.aspx page to override the default (1). This controls the number of characters that are entered before the auto complete searching begins. In the following example we have set this to 3.

<% Response.Write(GetRemoteSingleTemplateFile("custom/index.html", true) ); %>
	<div id="atContainer">
		<script type="text/javascript">
			if (!window.astun) { window.astun = {}; }        
			if (!window.astun.settings) { window.astun.settings = {}; }
			window.astun.settings.addressSearch = {
				'showRecordsCount': true,
				'minChars': 3
			}
			window.astun.settings.mapOptions = {};
			window.astun.settings.mapOptions.showSearchResultsUnderMap = true;
			/*
				window.astun.settings.mapOptions.click = 'none'; // tooltip or none
				window.astun.settings.mapOptions.hover = 'none'; // tooltip or none
			*/