Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

ConfiForms Form Definition
formNamef
sash

 

latLatitudetexttrue

longLongitudetexttrue

endAddressDelivery Addresstexttrue

Showing on the map (2 markers)

ConfiForms CardView
formNamef

lat

long

endAddress

One marker is added with lat/long and another marker added using the address (which is then decoded to lat/long and shown)

ConfiForms PlainView
formNamef
<script>
	showLocationOnMapDiv(new google.maps.LatLng([entry.lat], [entry.long], true));
    addEndLocationMarker('[entry.endAddress]');
</script>
 

...

Code Block
<p>Using ConfiForms PlainView together with some scripting to show ConfiForms data on Google map</p>
<ac:structured-macro ac:macro-id="870652ad-599d-4d1f-bdc8-bd6c4ba4e7a8" ac:name="html" ac:schema-version="1">
  <ac:plain-text-body><![CDATA[<script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAnRA1CvBUdFF22IYWlK_dKmW71Vl-Mz7M&v=3.exp&sensor=false"></script>
<style type="text/css">
.minimap {
  min-height: 420px;
  margin-top: 10px;
  background-color: #f2f2f2;
  /*-webkit-box-shadow: 0 2px 12px rgba(0,0,0,.5);*/
  /*-moz-box-shadow: 0 2px 12px rgba(0,0,0,.5);*/
  /*box-shadow: 0 1px 2px #000;*/
}
</style>
<div id='mapOnWorkItemDiv' class="minimap"></div>
 
<script>
// map is global... mmm...
var map;
function geoCodeAddress(latlng, onFind) {
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({'latLng': latlng}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[1]) {
        onFind(results[1].formatted_address);
      }
    }
  });
}
function addEndLocationMarker(location) {
  if (location != null && location != '') {
    var geocoder = new google.maps.Geocoder();
     geocoder.geocode({ 'address': location}, function (results, status) {
       if (status == google.maps.GeocoderStatus.OK) {
         var elem = $('#endAddressChoice');
         if (results.length == 1) {
           if (elem) {
             elem.hide();
           }
           addMarkerOnMap(results[0].geometry.location);
         } else {
           if (elem) {
             var rows = '<div class="alert alert-info" id="endAddressChoiceTab" style="display: none">';
             for (var i =0; i<results.length; i++) {
               rows = rows + '<p style="font-size: smaller"> <a href="#" onclick="removeAddressChoiceAndSetMarker(' + '\'' + results[i].formatted_address + '\'' + ');addMarkerOnMap(new google.maps.LatLng(' +
                 results[i].geometry.location.lat() + ',' + results[i].geometry.location.lng() + '));return false;">' + results[i].formatted_address + '</a></p>';
             }
             elem.html(rows + '</div>');
             $('#endAddressChoiceTab').fadeIn()
           }
         }
       } else {
         if ($('#endAddrLatitude')) {
           $('#endAddrLatitude').val('');
         }
         if ($('#endAddrLongitude')) {
           $('#endAddrLongitude').val('');
         }
       }
     });
  }
}
function initMapOnWorkItem(location) {
  if (location != null && location != '') {
//    $('#mapOnWorkItemDiv').hide();
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': location}, function (results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        var elem = $('#addressChoice');
        if (results.length == 1) {
          if (elem) {
            elem.hide();
          }
          showLocationOnMapDiv(results[0].geometry.location);
        } else {
          if (elem) {
            var rows = '<div class="alert alert-info" id="addressChoiceTab" style="display: none">';
            for (var i =0; i<results.length; i++) {
              rows = rows + '<p style="font-size: smaller"> <a href="#" onclick="removeAddressChoiceAndSetAddress(' + '\'' + results[i].formatted_address + '\'' + ');showLocationOnMapDiv(new google.maps.LatLng(' +
                results[i].geometry.location.lat() + ',' + results[i].geometry.location.lng() + '));return false;">' + results[i].formatted_address + '</a></p>';
            }
            elem.html(rows + '</div>');
            $('#addressChoiceTab').fadeIn()
          }
        }
      } else {
        $('#mapOnWorkItemDiv').css('min-height', '160px').css('border', '0').html('<div class="alert alert-danger" style="height: 100%">We could not locate the address specified :(</div>').show();
        if ($('#addrLatitude')) {
          $('#addrLatitude').val('');
        }
        if ($('#addrLongitude')) {
          $('#addrLongitude').val('');
        }
      }
    });
  }
}
function setAddressBack(address, elem, tabToHide) {
  var addressElem = $(elem);
  if (addressElem) {
    addressElem.val(address);
  }
  $(tabToHide).hide();
}
function removeAddressChoiceAndSetMarker(address) {
  setAddressBack(address, '#endInputAddress', '#endAddressChoiceTab');
}
function removeAddressChoiceAndSetAddress(address) {
  setAddressBack(address, '#inputAddress', '#addressChoiceTab');
}
function addMarkerOnMap(loc) {
  if ($('#endAddrLatitude')) {
    $('#endAddrLatitude').val(loc.lat());
  }
  if ($('#endAddrLongitude')) {
    $('#endAddrLongitude').val(loc.lng());
  }
  addMarker(loc);
}
function showLocationOnMapDiv(loc) {
  var mapOptions = {
    zoom: 13,
    center: loc,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  $('#mapOnWorkItemDiv').css('height', '420px').css('border', '#555555 1px solid').fadeIn();
  if ($('#addrLatitude')) {
    $('#addrLatitude').val(loc.lat());
  }
  if ($('#addrLongitude')) {
    $('#addrLongitude').val(loc.lng());
  }
  map = new google.maps.Map(document.getElementById('mapOnWorkItemDiv'), mapOptions);
  map.setCenter(loc);
  addMarker(loc);
}
function addMarker(loc) {
  var marker = new google.maps.Marker({
    map: map,
    animation: google.maps.Animation.DROP,
    position: loc
  });
  tryToDisplayRoute();
}
function tryToDisplayRoute() {
  if ($('#addrLatitude') && $('#addrLatitude').val() != '' &&
    $('#addrLongitude') && $('#addrLongitude').val() != '' &&
    $('#endAddrLatitude') && $('#endAddrLatitude').val() != '' &&
    $('#endAddrLongitude') && $('#endAddrLongitude').val() != '') {
    var start = new google.maps.LatLng($('#addrLatitude').val(), $('#addrLongitude').val());
    var end = new google.maps.LatLng($('#endAddrLatitude').val(), $('#endAddrLongitude').val());
    displayRoute(start, end);
  }
}
function displayRoute(startLoc, endLoc) {
    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer();// also, constructor can get "DirectionsRendererOptions" object
    directionsDisplay.setMap(map); // map should be already initialized.
    var request = {
        origin : startLoc,
        destination : endLoc,
        travelMode : google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
}

</script>
 
]]></ac:plain-text-body>
</ac:structured-macro>
<ac:structured-macro ac:macro-id="930f8839-77cc-45a9-85f1-523c58a58ff1" ac:name="confiform" ac:schema-version="1">
  <ac:parameter ac:name="formName">f1</ac:parameter>
  <ac:rich-text-body>
    <ac:structured-macro ac:macro-id="7724a15a-839b-4c22-9d2d-0e44351c306e" ac:name="confiform-entry-register" ac:schema-version="1">
      <ac:parameter ac:name="restrictions">sash</ac:parameter>
      <ac:rich-text-body>
        <p> </p>
      </ac:rich-text-body>
    </ac:structured-macro>
    <p>
      <ac:structured-macro ac:macro-id="acf36c67-fde7-4ef5-82d2-facb9bf9e6bd" ac:name="confiform-field-definition" ac:schema-version="1">
        <ac:parameter ac:name="fieldName">lat</ac:parameter>
        <ac:parameter ac:name="fieldLabel">Latitude</ac:parameter>
        <ac:parameter ac:name="type">text</ac:parameter>
        <ac:parameter ac:name="required">true</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <ac:structured-macro ac:macro-id="ce927da0-2672-458d-93d3-577dbb18cbca" ac:name="confiform-field-definition" ac:schema-version="1">
        <ac:parameter ac:name="fieldName">long</ac:parameter>
        <ac:parameter ac:name="fieldLabel">Longitude</ac:parameter>
        <ac:parameter ac:name="type">text</ac:parameter>
        <ac:parameter ac:name="required">true</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <ac:structured-macro ac:macro-id="c0ad1438-2866-4de4-9013-0807e1d8a79a" ac:name="confiform-field-definition" ac:schema-version="1">
        <ac:parameter ac:name="fieldName">endAddress</ac:parameter>
        <ac:parameter ac:name="fieldLabel">Delivery Address</ac:parameter>
        <ac:parameter ac:name="type">text</ac:parameter>
        <ac:parameter ac:name="required">true</ac:parameter>
      </ac:structured-macro>
    </p>
  </ac:rich-text-body>
</ac:structured-macro>
<p>Showing on the map (2 markers)</p>
<ac:structured-macro ac:macro-id="54e6f539-371d-445b-8a68-388ca746c378" ac:name="confiform-card" ac:schema-version="1">
  <ac:parameter ac:name="formName">f<>f1</ac:parameter>
  <ac:rich-text-body>
    <p>
      <ac:structured-macro ac:macro-id="d16ab35d-172a-430d-9824-995d1c8a6c8b" ac:name="confiform-field" ac:schema-version="1">
        <ac:parameter ac:name="fieldName">lat</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <ac:structured-macro ac:macro-id="e1bbf1ca-095e-4db8-9588-c8c5648f475e" ac:name="confiform-field" ac:schema-version="1">
        <ac:parameter ac:name="fieldName">long</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <ac:structured-macro ac:macro-id="9f186681-2e60-43b4-8c42-2b888d9679b6" ac:name="confiform-field" ac:schema-version="1">
        <ac:parameter ac:name="fieldName">endAddress</ac:parameter>
      </ac:structured-macro>
    </p>
  </ac:rich-text-body>
</ac:structured-macro>
<p>One marker is added with lat/long and another marker added using the address (which is then decoded to lat/long and shown)<ac:structured-macro ac:macro-id="6787b68b-d525-4ca5-b46b-b1e014674b07" ac:name="confiform-plain" ac:schema-version="1">
    <ac:parameter ac:name="formName">f1</ac:parameter>
    <ac:parameter ac:name="atlassian-macro-output-type">INLINE</ac:parameter>
    <ac:plain-text-body><![CDATA[<script>
	showLocationOnMapDiv(new google.maps.LatLng([entry.lat], [entry.long], true));
    addEndLocationMarker('[entry.endAddress]');
</script>]]></ac:plain-text-body>
  </ac:structured-macro>
</p>

...