prisme-flow
Version:
prisme platform flow engine
119 lines (114 loc) • 6.38 kB
HTML
<!--
Created by prisme.io on 09/06/2017.
@author <a href="mailto:hello@prisme.io">savane vamara</a> (prisme.io)
-->
<script type="text/x-red" data-template-name="google geocoding">
<div class="form-row">
<label for="node-input-name"><i class="icon-tag"></i> <span>Name</span></label>
<input type="text" id="node-input-name">
</div>
<br />
<div class="form-row">
<label for="node-input-geocodeBy"><i class="fa fa-tasks"></i> <span>Geocode by Address</span> </label>
<select type="text" id="node-input-geocodeBy" style="width:72%;">
<option value="address">Address</option>
<option value="coordinates">Coordinates</option>
</select>
</div>
<br>
<div class="form-row node-input-geocodeBy-row-address">
<label for="node-input-address"><i class="fa fa-globe"></i> <span>Address</span></label>
<input type="text" id="node-input-address">
</div>
<div class="form-row node-input-geocodeBy-row-coordinates">
<label for="node-input-lat"><i class="fa fa-globe"></i> <span>Latitude</span></label>
<input type="text" id="node-input-lat" >
</div>
<div class="form-row node-input-geocodeBy-row-coordinates">
<label for="node-input-lon"><i class="fa fa-globe"></i> <span>Longitude</span></label>
<input type="text" id="node-input-lon">
</div>
<br />
<div class="form-row">
<label for="node-input-googleAPI"><i class="fa fa-user"></i> <span>Google API Key</span></label>
<input type="text" id="node-input-googleAPI">
</div>
<div class="form-row">
<label for="node-input-bounds"><i class="fa fa-flag"></i> <span>Bounds</span></label>
<input type="text" id="node-input-bounds">
</div>
<div class="form-row">
<label for="node-input-language"><i class="fa fa-language"></i> <span>Language</span></label>
<input type="text" id="node-input-language">
</div>
<div class="form-row">
<label for="node-input-region"><i class="fa fa-globe"></i> <span>Region</span></label>
<input type="text" id="node-input-region">
</div>
<div class="form-row">
<label for="node-input-components"><span>Components</span></label>
<input type="text" id="node-input-components">
</div>
</script>
<script type="text/x-red" data-help-name="google geocoding">
<p>Utilizes the Google Geocoding API to allow conversion of addresses to coordinate sets, and vice versa.</p>
<p>The node can be configured to send a geocode or reverse-geocode request by changing the <code>geocodeBy</code> parameter in the node.</p>
<br>
<p>Input Parameters:</p>
<p><code>Name</code> - Name of the node</p>
<p><code>Geocode by</code> - Toggle to switch between a geocode and reverse-geocode request. Switching between the two will toggle the address and latitude/longitude inputs.</p>
<p>All of the following parameters can be supplied as part of the top level <code>msg</code> object.</p>
<p><code>msg.location.address</code> - Address to be sent to Google in order to be converted to a set of coordinates. <b><i>(Required if using Geocode by Address)</i></b></p>
<p><code>msg.location.lat</code> - Latitude point to be sent to Google in order to be converted to a human-readable address. <b><i>(Required if using Geocode by Coordinates)</i></b></p>
<p><code>msg.location.lon</code> - Longitude point to be sent to Google in order to be converted to a human-readable address. <b><i>(Required if using Geocode by Coordinates)</i></b></p>
<p><code>msg.key</code> - Your application's API key. This key identifies your application for purposes of quota management.</p>
<p><code>msg.bounds</code> - The bounding box of the viewport within which to bias geocode results more prominently. This parameter will only influence, not fully restrict, results from the geocoder.</p>
<p><code>msg.language</code> - The language in which to return results.</p>
<p><code>msg.region</code> - The region code, specified as a ccTLD ("top-level domain") two-character value. This parameter will only influence, not fully restrict, results from the geocoder.</p>
<p><code>msg.components</code> - The component filters, separated by a pipe (|). Each component filter consists of a component:value pair and will fully restrict the results from the geocoder.</p>
<br>
<p>Return values:</p>
<p><code>msg.status</code> - Will either be 'OK' or provide an error state.</p>
<p>If <code>msg.status</code> returned 'OK':
<p><code>msg.location</code> - If provided with an <code>address</code>, <code>msg.location</code> will contain a <code>lat</code> and <code>lon</code> point. If provided with a <code>lat</code>/<code>lon</code> pair, <code>msg.location</code> will contain an <code>address</code></p>
<br>
<p>Otherwise:</p>
<p><code>msg.error</code> will contain a more detailed error message, if available</p>
<br><br>
<p>For more information, please visit the <a href="https://developers.google.com/maps/documentation/geocoding/">Google Geocoding API Developer Docs</a>
</script>
<script type="text/javascript">
RED.nodes.registerType('google geocoding',{
category: 'utility',
color: '#ff9999',
defaults: {
name: {value:""},
geocodeBy: {value:"address", required:true},
address: {value:""},
lat: {value:""},
lon: {value:""},
googleAPI: {type:"google-api-config", required: false},
bounds: {value:""},
language: {value:""},
region: {value:""},
components: {value:""}
},
inputs:1,
outputs:1,
icon: "logo_maps.png",
label: function() {
return this.name || "google geocoding";
},
oneditprepare: function() {
$("#node-input-geocodeBy").change(function() {
if ($(this).val() === 'address') {
$(".node-input-geocodeBy-row-address").show();
$(".node-input-geocodeBy-row-coordinates").hide();
} else {
$(".node-input-geocodeBy-row-coordinates").show();
$(".node-input-geocodeBy-row-address").hide();
}
});
}
});
</script>