Maps

Intro

Here you will find information on Draw a map and advanced customisation of property/branch pins.

If your setting up maps on the property results pages (incl. draw-a-map) please read this page first.

Property show maps

Many developers employ the tabbing system for property maps so the user can cycle through the different types: road, streetview and satellite. The first requirement are some events:

<script>
 Ctesius.addConfig('small_map_element', 'contact_map')

 Ctesius.registerEvent('render_tab', function(tab_name){
  switch(tab_name){
   case 'streetview':
    {% gmap_for property as streetview in streetview %}
    break;
   case 'satellite':
    {% gmap_for property as satellite in satellite %}
    break;
   }
 });
</script>

The first line here adds our map to the contact_map ID or class (seen below). The render_tab event registers a callback function that renders the appropriate Google map depending on the tab clicked. We then have our anchors and togglable areas:

<a class="selected" id="tab_map" href="#tabs/map">MAP</a>
<a id="tab_streetview" href="#tabs/streetview">STREETVIEW</a>
<a id="tab_satellite" href="#tabs/satellite">SATELLITE</a>

<div id="togglable_map" class="togglable_area">
 <div id="contact_map"></div>
</div>
<div id="togglable_streetview" class="togglable_area hidden">
 <div id='streetview' class="google_map_container"></div>
</div>
<div id="togglable_satellite" class="togglable_area hidden">
 <div id='satellite' class="google_map_container"></div>
</div>

The render tab function renders gets the element’s bounds on a click and loads the map. This allows the map to be renderered fully without any missing or skewed tiles. If you find that your map is not working and you’re not using our tabbing system, you’ll need to employ your own click function:

<script type="text/javascript">
 $('#property-detail-tabs a').on('click', function () {
  if($(this).attr('href') == '#togglable_streetview'){
   {% gmap_for property as streetview in streetview %}
  }
 });
</script>

Branch maps

Homeflow supports a variety of map types which you can extend with custom pins, overlays and so on. The first and easiest map to set-up is the Leafleft.js map type. To get this up and running on the branches index page, start by adding:

<script>
  Ctesius.addConfig('branch_map_element', 'branch_map');
  Ctesius.addConfig('branches', {% include_as_json branches/branches_list %});
</script>

Next we need to declare our div to apply the map to:

<div id="branch_map"></div>

Don’t forget to give your map ID or class and height and/or width to get it to show up. This should be enough to get your Leaflet branch map showing with a pin for each branch. The map bubbles have a fairly basic presentation that’s fine for most, but if you would like to customise your pin, you can override _branch_map_pin.liquid in your js_templates folder and customise the layout and styles as necessary.

Google maps

If you would prefer a Google style map you still need the addConfig branches code seen before, but this time, instead of your addConfig branch_map, we need:

{% gmap_for agency.branches as roadmap in branch_map %}

This should then populate your branch_map div with a Google style map. Note that we’re using the agency.branches drop to access the branches belonging to an agency. Please note that Google maps do not have pin popups and the customisation capabilites of Leaflet maps.

You can also use a Google tile layer over a leaflet map by adding the following config (ideally with your other config settings):

<script>
  Ctesius.addConfig('leaflet_layer', new L.Google('ROADMAP'));
</script>

Draw a map

Draw a Map is an extension of the Leaflet mapping system that the Homeflow platform uses to provide freehand polygon drawing to property maps on the website. To get started with the property maps, please read this page.

Once you have your property maps set up add the following to your _js_events_registers.liquid file:

Ctesius.addConfig('enable_draw_a_map', true);

In principle, Draw a Map works straight out of the box and will immediately appear on any property maps on the client website, held within its own independent toolbar. However, depending on the map container and the div hierarchy, it is quite possible that some custom CSS will have to be implemented.

The DaM style library is included in the application CSS, however, some themes do not use this CSS file. If this is the case with the theme you are building, please use the DaM base styles in the appendix.

A number of events are associated with different DaM states so you can provide feedback to the user. See the DaM events section for more.

Custom map pins

The Ctesius app allows you to customise your theme’s map pins and shadows using the settings that can be found in the agency’s admin preferences section. To pull out the pin and shadow in code and apply to all Leaflet maps, here’s what you’ll need:

{% if theme_preferences.map_pin_marker_asset  %}
 Ctesius.addConfig('custom_map_icon', '{{ theme_preferences.map_pin_marker_asset | url_for_site_asset }}');
{% endif %}

{% if theme_preferences.map_pin_marker_size %}
 var dimensions = "{{ theme_preferences.map_pin_marker_size }}".split(',');
 Ctesius.addConfig('custom_map_icon_size', dimensions);
{% endif %}

{% if theme_preferences.map_pin_marker_shadow %}
 Ctesius.addConfig('custom_map_icon_shadow', '{{ theme_preferences.map_pin_marker_shadow | url_for_site_asset }}');
{% endif %}

{% if theme_preferences.map_pin_marker_shadow_size %}
 var shadow_dimensions = "{{theme_preferences.map_pin_marker_shadow_size}}".split(',');
 Ctesius.addConfig('custom_map_shadow_icon_size', shadow_dimensions);
{% endif %}

Note that if the theme preference has not been set, we will apply the default Leaflet pin a shadow configuration.

Custom property pins

If you would like complete control over the property pin, and to be able to create and return the Leaflet pin object yourself, you can use an addConfig with a callback function. Because this function takes the property object as an arguement, and because each property will run through this function, you can customise the pin based on things like whether the property is sales, lettings, for sale, to let, sold and so on.

If you only need one custom pin for all maps, please use the custom map pins code instead.

Ctesius.addConfig('custom_property_pin', function(property) {

 // set defaults if theme_preferences not set

 var markerIcon = Ctesius.getConfig('root_url') + 'assets/leaflet/marker-icon.png';
 var markerIconSize = [25,41];
 var markerShadowUrl = Ctesius.getConfig('root_url') + 'assets/leaflet/marker-shadow.png';
 var markerShadowSize = [41,41];
 var status;

 property.get('status') ? status = property.get('status') : status = '{{property.status}}';

 if (status == 'For sale' || status == "To let") {
  var markerIcon = "{{ theme_preferences.map_pin_marker_asset | url_for_site_asset }}";
 } else {
  var markerIcon = "{{ "sold_pin.png" | theme_image_url }}"
 }
       
 {% if theme_preferences.map_pin_marker_size %}
  var markerIconSize = "{{ theme_preferences.map_pin_marker_size }}".split(',');
 {% endif %}

 {% if theme_preferences.map_pin_marker_shadow %}
  var markerShadowUrl = "{{ theme_preferences.map_pin_marker_shadow | url_for_site_asset }}";
 {% endif %}

 {% if theme_preferences.map_pin_marker_shadow_size %}
  var markerShadowSize = "{{ theme_preferences.map_pin_marker_shadow_size }}".split(',');
 {% endif %}

 return new L.Icon.Default({
  iconUrl: markerIcon,
  iconSize: markerIconSize,
  shadowUrl: markerShadowUrl,
  shadowSize: markerShadowSize
 })
});

Any and all fields are populated from the properties/_properties_list.ljson file in the core app, unless you have your own custom version in theme. Some attributes you might like to configure the pin on include:

property_channel: {{property.primary_channel}} - ‘sales’ or ‘lettings’
status: {{ property.status}} - examples include - ‘For sale’, ‘To let’, ‘Sold’, ‘SSTC’, ‘Let’, Let agreed’
property_type: {{property.property_type}}
branch_name: '{{property.agency.branch.branch_name}}'

Custom branch pins

Similar to the custom property pin function, using the branch object you can change the pin depending on branch attributes. You can set any available branch attribute in branches/_branch.ljson for single branch pages, or branches/_branches_list.ljson for the index of branches. As with the property pin, you’ll need to declare the default settings.