Floorplan Mapping Tool

(Prototype)

A tool for loading, modifying and saving markers on top of QUT floorplan drawings. Marker data can be loaded from, and saved to, any web-accessible data source that has been set up to produce and accept the required data structures in JSON format.

Demo

How to use with your own data source

1. Create a JSON endpoint for retrieving data from your data source

The JSON endpoint should accept these two querystring values:

The JSON returned by the endpoint must represent an object with the following structure:

{
    "metadata": {

        "customMarkerIcons": {
            "<custom icon name>": {
                "iconUrl": "<url to your custom icon image file>",
                "shadowUrl": "<url to your custom icon shadow image file>",
                "shadowSize": [<width>, <height>],
                "shadowAnchor": [<width>, <height>],
                "iconSize": [<width>, <height>],
                "iconAnchor": [<width>, <height>],
                "tooltipAnchor": [<width>, <height>],
                "popupAnchor": [<width>, <height>]
            },
            ...
        },
        "visibleMarkerProperties": ["<property 1 name>","<property 2 name>",...],
        "filterableMarkerProperties": ["<property 3 name>","<property 5 name>",...],
        "editableMarkerProperties": {
            "<property 1 name>": {
                "type": <HTML field type to use: "text" or "select">,
                "options": [<option values if field type is "select">]
            },
            ...
        },
        "tooltipMarkerProperties": ["<property 1 name>","<property 2 name>",...]
    },

    "markers": [

        {
            "id": "<unique marker id>",
            "latLng": [<null or y coord>,<null or x coord>],
            "realWorldLatLng": [<null or decimal latitude coord>,<null or decimal longitude coord>],
            "markerIconName": "<default or custom marker icon name>";
            "<custom property 1>": "<custom value>",
            "<custom property 2>": "<custom value>",
            ...
        },
        ...
    ]
}

 

If an error occurs in your endpoint code, the endpoint should instead return a single "error" property as follows:

{
    "error": "<error message>"
}

 

PropertyTypeDescription
customMarkerIcons Object

Optional. If you want to use custom marker images instead of the marker images provided by this tool, include them as properties of this object (each property is itself an object containing the icon details). The names you choose for the properties must match the values returned in the markerIconName property of your marker objects.

The default marker icons provided by the tool are: colouredCone<Green|Orange|Red>, cone<Desktop|Laptop><Mac|Win|Other>, noCone<Desktop|Laptop><Mac|Win|Other>

If you don't want to use any custom marker images, return customMarkerIcons as an empty object ({}).

visibleMarkerPropertiesArrayOptional. Marker properties to be displayed inside marker pop-up boxes. The properties will be displayed in the order in which they are included in this array.
filterableMarkerPropertiesArrayOptional. Marker properties for which corresponding filter controls should be created. The filter controls allow end-users to show/hide different sets of markers.
editableMarkerPropertiesObject

Optional. If you want any of the visible marker properties (properties included in the visibleMarkerProperties array) to be editable, rather than read-only, include them as properties here. Each property is an object containing two properties:

  • type - HTML input field type to use, eg. text, select, textarea (also datalist for a text field bound to a HTML5 datalist).
  • options - array of options for the drop-down menu if type="select" or type="datalist".
  • additionalHTMLParameters - additional string to add to HTML input field tag. Useful for HTML5 validation options such as required.
tooltipMarkerPropertiesArrayOptional. Marker properties to be displayed inside marker tooltips. The properties will be displayed in the order in which they are included in this array.
markersArray

Required. Array of marker records.

The following 3 properties are required:

  • id - unique marker ID
  • latLng - y,x pixel coordinates of the marker or [null,null] if coordinate doesn't exist. If coordinate doesn't exist, the marker will be placed in the centre of the initial floorplan view.
  • realWorldLatLng - latitude/longitude coordinates of the marker or [null,null] if coordinate doesn't exist. If coordinate doesn't exist, the marker will be placed in the centre of the initial floorplan view.

The following properties are optional:

  • markerIconName - one of the default marker icon names or one of the custom marker icon names specified in the customMarkerIcons object or an empty string. If the property is not present or if it is present and it's value is an empty string, a generic marker icon will be used.

Any number of additional custom properties for displaying in the marker pop-up boxes and/or for filtering should also be included.

 

2. Create a JSON endpoint for accepting the modified marker data and updating your data source

The endpoint must accept JSON representing the following object structure:

{
    "markers": [
        {
            "id": "HLTH008225",
            "x": 4160,
            "y": 2390,
            "lat": -27.4508901137494,
            "lng": 153.01804156959,
            "action": "update",
            "<custom property 1>": "<custom value>",
            "<custom property 2>": "<custom value>",
            ...
        },
        ...
    ]
}

 

If an error occurs in your endpoint code, the endpoint should instead return a single "error" property as follows:

{
    "error": "<error message>"
}

 

PropertyTypeDescription
markersArray

Array of marker objects.

The following properties will be included in each marker object:

  • id - unique marker ID
  • x - x pixel coordinate of the marker
  • y - y pixel coordinate of the marker
  • lat - latitude coordinate of the marker
  • lng - longitude coordinate of the marker
  • action - action to be taken when updating the data source, update (modify the existing record), create (create a new record) or delete (delete the record)

All editable custom properties as defined in editableMarkerProperties will also be included.

 

3. Create a web page to display your floorplans

The page should contain the following markup and code, with the markerDataGetURL and markerDataStoreURL variables set to the URLs of your JSON endpoints.

<!DOCTYPE html>
<html lang="en">
  <head>

    <meta charset="UTF-8">
    <title>Floorplan - Standard View</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://apps.healh.qut.edu.au/floorplans/css/floorplans.css" />

  </head>
  <body>

    <div id="controls"></div>
    <div id="map"></div>

    <script>
      var markerDataGetURL = "<URL of JSON endpoint for retrieving marker data from>";
      var markerDataStoreURL = "<URL of JSON endpoint for posting updated marker data to>";
    </script>
    <script src="https://apps.healh.qut.edu.au/floorplans/js/floorplans.js"></script>

  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>

    <meta charset="UTF-8">
    <title>Floorplan - Google Maps</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://apps.healh.qut.edu.au/floorplans/css/floorplans.css" />

  </head>
  <body>

    <div id="controls"></div>
    <div id="map"></div>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCjWCn3KkcwEkGaFf99M9Z23l9Bi1Ig2eM"></script>
    <script>
      var markerDataGetURL = "<URL of JSON endpoint for retrieving marker data from>";
      var markerDataStoreURL = "<URL of JSON endpoint for posting updated marker data to>";
    </script>
    <script src="https://apps.healh.qut.edu.au/floorplans/js/floorplans.js"></script>

  </body>
</html>

 

In addition to the floorplanname and id querystring parameters which are passed on to your JSON endpoint (described above), the following additional querystring values can be used with your web page to control various options:

 

Warning! Not all QUT floorplans are currently available in this tool. If your floorplans are missing, please contact the Health IT team to request that your floorplan be added.

Contact

Brendan Marsh - Health IT Team