Cardiff Council Content and design system

www.cardiff.gov.uk

App

viewers

Pdf page viewerMarkdown viewMap Image

popups

How to: Animate a popupHow to: Create a popupSuccess popup (page removal)Message popupSuccess popup (and or go to new route)

pages

Base pageHome pageProcess pageDetails page

layout

Section headingDividerNoteMarginsError labelHeadingHighlightAlertNotifyAnimationTextStandard header iconsLinks

input

SwitchTime pickerPickerCheckboxText editorMapSearch bar with GPSSearch addressSearch barText entry

buttons

EditCancel buttonVertical transparent buttonVertical inverted buttonTag buttonCarousel buttonCallout button (Main)Vertical buttonNext / Back buttonsClose buttonInfo buttonFull button

accessibility

AutomationProperties.IsInAccessibleTreeAutomationProperties.NameAutomationProperties.HelpTextUseful docs

Map

An ishare map to allow pinpointing of issues.

How to use this component

Should be used in conjunction with the search bar with GPS to allow searching and moving of the map to pinpoint location.

See context for full page example.


Code Resource


Deprecated: htmlentities(): Passing null to parameter #1 ($string) of type string is deprecated in /home/site/wwwroot/wp-content/themes/huntsman-child/single-mobile.php on line 96
<FlexLayout Direction="Column" VerticalOptions="FillAndExpand">
    <custom:Map x:Name="IShare" IsOutOfCardiff="{Binding LayerInfo.IsOutsideCardiff}" />
</FlexLayout>
  • Layers
    • Used to add layers to ishare map
    • Default is cardiffcounty
  • IsOutOfCardiff
    • Used to show/hide out of cardiff error message
  • DefaultEasting
    • Used to set the default map location
    • If not set it will –
      • Try getting the GPS position
      • If GPS fails, will then center map add users home address
      • If home address isnt saved, then it will default the location to the castle
  • DefaultNorthing
    • Used to set the default map location
    • If not set it will –
      • Try getting the GPS position
      • If GPS fails, will then center map add users home address
      • If home address isnt saved, then it will default the location to the castle
  • DefaultZoom
    • Sets the maps zoom
    • Default is 400
  • MapMode
    • Changes the map mode
    • Options are SelectLocation or Static
      • When in static mode the map pin is removed so you wont be able to retrieve the users location. Used for displaying information maps, i.e. bags and caddies stockist
    • Default is MapModeEnum.SelectLocation
  • Get the user location
    • EastingNorthing result = await IShare.GetLocation().ConfigureAwait(true);
  • Update users location
    • await IShare.UpdateMap(eastingNorthing.Easting, eastingNorthing.Northing, 200).ConfigureAwait(true);
<FlexLayout Direction="Column" VerticalOptions="FillAndExpand">
    <inputs:SearchBarWithGPS GPSClicked="GPS_Clicked" SearchClicked="Search_Clicked" />
    <custom:Map x:Name="IShare" IsOutOfCardiff="{Binding LayerInfo.IsOutsideCardiff}" />
    <buttons:NextBack Margin="0" Clicked="OnNextPage" />
</FlexLayout>

How should this component look?