diff --git a/README.md b/README.md
index f176def..868bba2 100644
--- a/README.md
+++ b/README.md
@@ -211,6 +211,34 @@ As part of the callback *mapsed* typically passes the data for the place the eve
url
More info url
+## Template Customisations
+
+Allows custom text/html to be injected as a header and/or footer to the tooltip window which
+appears when the end-user selects or adds a new _place_.
+
+````js
+templateOptions: {
+ custom: {
+ view: {
+ header: "
custom view header
",
+ footer: "
custom view footer
",
+ },
+ edit: {
+ header: "
custom edit header
",
+ footer: "
custom edit footer
"
+ }
+ }
+}
+````
+
+The above customisation will show a header and footer to the map tooltip when and end-user selects a _custom_ place.
+
+Custom headers & footers can be set for:
+ - _Custom_ places as above
+ - _New_ places (when your end-user clicks the [+](#onAdd) button
+ - _Google_ places where a map _marker_ is derived from [Google Places API](#Google-Place)
+
+[See full-window example](examples/06-full-example.js)
## Events / Callbacks
diff --git a/examples/02-place-picker-example.js b/examples/02-place-picker-example.js
index 11f3af1..fb6f1f8 100644
--- a/examples/02-place-picker-example.js
+++ b/examples/02-place-picker-example.js
@@ -30,9 +30,16 @@ function runExample2() {
lat: 53.798823,
lng:-1.5426760000000286,
place_id: "ChIJQd3IwBtceUgRha6laiANoro"
+ },
+ templateOptions: {
+ google: {
+ view: {
+ footer: "
I came from Google Places
",
+ }
}
-
- });
+ }
+
+ }); // mapsed
}
$(document).ready(function() {
diff --git a/examples/06-full-example.js b/examples/06-full-example.js
index e8d0159..d8a5625 100644
--- a/examples/06-full-example.js
+++ b/examples/06-full-example.js
@@ -178,7 +178,50 @@ function fullWindowExample(e) {
// indicate tip should be closed
return true;
},
-
+
+ // Defines header and footers to be applied to the
+ // ... select/edit/delete tooltips shown to the user
+ templateOptions: {
+ // You can have a different header or footer for
+ // each "markerType". Supported customisations are:
+ // "custom" - Where your user has previously added a marker
+ // "add" - Where your user has click "add" to create a new marker
+ // "google" - Where your user has clicked on a marker found via Google Places APi
+ custom: {
+ view: {
+ header: "
custom view header
",
+ footer: "
custom view footer
",
+ },
+ edit: {
+ header: "
custom edit header
",
+ footer: "
custom edit footer
"
+ }
+ },
+
+ add: {
+ view: {
+ header: "
add view header
",
+ footer: "
add view footer
",
+ },
+ edit: {
+ header: "
add edit header
",
+ footer: "
add edit footer
"
+ }
+ },
+
+ google: {
+ view: {
+ header: "
google view header
",
+ footer: "
google view footer
",
+ },
+ edit: {
+ header: "
google edit header
",
+ footer: "
google edit footer
"
+ }
+ }
+
+ },
+
// Enables edit of new places (to your web application, not Google Maps!)
// ... again the presence of the callback enables the functionality
onSave: function(m, newPlace) {
diff --git a/index.html b/index.html
index 3c1ac08..0cf9717 100644
--- a/index.html
+++ b/index.html
@@ -187,14 +187,22 @@
Place Picker
},
showOnLoad:
- // City Varieties - note there's only one place here, we don't need an array
- {
- // flag that this place should have the tooltip shown when the map is first loaded
- autoShow: true,
- lat: 53.798823,
- lng:-1.5426760000000286,
- place_id: "ChIJQd3IwBtceUgRha6laiANoro"
+ // City Varieties
+ {
+ // flag that this place should have the tooltip shown when the map is first loaded
+ autoShow: true,
+ lat: 53.798823,
+ lng:-1.5426760000000286,
+ place_id: "ChIJQd3IwBtceUgRha6laiANoro"
+ },
+ templateOptions: {
+ google: {
+ view: {
+ footer: '<center>I came from Google Places</center>',
+ }
}
+ }
+
});
@@ -203,6 +211,9 @@
diff --git a/mapsed.js b/mapsed.js
index b70a4b5..1fcabca 100644
--- a/mapsed.js
+++ b/mapsed.js
@@ -910,7 +910,8 @@
/// Quick and dirty template function, just does a replacement
/// according to our model ... nothing more advanced than that!
///
- function applyTemplate(tmpl, model, $ctx) {
+ function applyTemplate(tmpl, model, renderOptions, $ctx) {
+ var header = "", footer = "";
tmpl = replaceAll("{NAME}", model.name, tmpl);
tmpl = replaceAll("{SHORT_NAME}", shorten(model.name, 25), tmpl);
tmpl = replaceAll("{STREET}", model.street, tmpl);
@@ -930,9 +931,18 @@
if (model.addInfo) {
tmpl = replaceAll("{ADD_INFO}", model.addInfo, tmpl);
}
+ if (renderOptions?.header) header = renderOptions.header;
+ if (renderOptions?.footer) footer = renderOptions.footer;
+ tmpl = replaceAll("{HEADER}", header, tmpl);
+ tmpl = replaceAll("{FOOTER}", footer, tmpl);
$ctx.html(tmpl);
+ // The edit template is a table so if there's no content we need to hide the row
+ // ... we don't know which template we're dealing with so just apply to both
+ $ctx.find(".mapsed-view-header").toggle( header !== '' );
+ $ctx.find(".mapsed-view-footer").toggle( footer !== '' );
+
} // applyTemplate
@@ -1412,15 +1422,25 @@
// ensure we have a _clean_ model to play with
sanitise(model);
+ // Do we have any header/footer customisation for _this_ typeof marker
+ var renderOptions = null;
+ if (settings.templateOptions && settings.templateOptions[marker.markerType]) {
+ if (inRwMode) {
+ renderOptions = settings.templateOptions[marker.markerType].edit;
+ } else {
+ renderOptions = settings.templateOptions[marker.markerType].view;
+ }
+ }
+
if (inRwMode) {
// re-apply template
var tmpl = getEditTemplate();
- applyTemplate(tmpl, model, $rw);
+ applyTemplate(tmpl, model, renderOptions, $rw);
} else {
// re-apply template
var tmpl = getViewTemplate();
- applyTemplate(tmpl, model, $ro);
+ applyTemplate(tmpl, model, renderOptions, $ro);
hideEmpty(model, $ro);
}
@@ -1439,6 +1459,11 @@
// proved to be too unreliable when used with map tooltips!
var html =
"
"
+ + "
"
+ + "
"
+ + "{HEADER}"
+ + "
"
+ + "
"
+ "
"
+ "
"
+ "
{SHORT_NAME}
"
@@ -1471,8 +1496,13 @@
+ ""
+ "
"
+ "
"
+ + "
"
+ + "
"
+ + "{FOOTER}"
+ + "
"
+ + "
"
+ "
"
- ;
+ ;
return html;
@@ -1485,6 +1515,7 @@
function getEditTemplate() {
var html =
"