diff --git a/README.md b/README.md
index fbf9522..861d816 100644
--- a/README.md
+++ b/README.md
@@ -78,7 +78,7 @@ The method signature for the callback is *getMarkerImage(mapsed, markerType, tit
markerType (string)
The type of marker being added to the map, this can be:
- *new* - New marker is being added by user (via the "+" button - see allowAdd)
+ *new* - New marker is being added by user (via the "+" button - see onAddSave)
*google* - Marker being added was derived from the Google Places API
*custom* - Marker being added was derived from the application database, i.e. derived from the showOnLoad array.
@@ -104,14 +104,6 @@ Ordinarily this is quite useful, however if it's outside the concern of your aud
The **disablePoi** setting turns off these point of interest hotspots. However POI cannot be turned off with [styled maps](https://developers.google.com/maps/documentation/javascript/styling).
-### allowAdd *(bool)*
-
-Places an "add place" icon (+) in the top-right of the map which allows the user to add additional places to your map.
-
-The *onSave* callback (see below) must be implemented to capture the place being added so it can be saved.
-
-[See add places example](examples/03-add-places-example.js)
-
### searchOptions *(object)*
*searchOptions* is a JavaScript object (i.e. a child object) for defining how search functionality should be added to the map:
@@ -174,6 +166,7 @@ As part of the callback *mapsed* typically passes the data for the place the eve
Property
Description
canEdit
Flags this an editable place, i.e. when it's clicked on the map it has an edit button.
+
canDelete
Flags this a deletable place, i.e. when it's clicked on the map it has an delete button.
lat
Latitude position of the place.
lng
Longitude position of the place.
place_id
Unique reference to a place in the Google Places database (this is provided by Google), see also Google Place
@@ -217,17 +210,18 @@ Allows custom text/html to be injected as a header and/or footer to the tooltip
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
"
- }
- }
+// Defines header and footers to be applied to the
+// ... select/edit/delete tooltips shown to the user
+getHeaderTemplate: function(marker, isEditing) {
+ // You can have a different header 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
+ var markerType = marker.markerType;
+ var mode = (isEditing ? "edit" : "view");
+
+ return `
${markerType} ${mode} header
`.toUpperCase();
}
````
@@ -261,9 +255,16 @@ Callback method signature:
[See place picker example](examples/02-place-picker-example.js)
+
+### onAddSave
### onSave
-Fired when the **Save** button is clicked in a place window (after adding or editing a place).
+Fired when the **Save** button is clicked in a place window.
+
+- For **new** places (added via the **+** toolbar icon) the **onAddSave** event is fired.
+- For **existing** places the **onSave** event is fired.
+
+The presence of the **onAddSave** event enables the **+** icon on the toolbar allowing the user to add a new place.
Callback method signature:
diff --git a/data/sporadic-places.json b/data/sporadic-places.json
index b7742a1..37e1dfd 100644
--- a/data/sporadic-places.json
+++ b/data/sporadic-places.json
@@ -1,6 +1,7 @@
[
{
"canEdit": true,
+ "canDelete": true,
"lat": 50.0657041,
"lng": -5.713174599999999,
"name": "Land's End",
@@ -8,6 +9,7 @@
},
{
"canEdit": false,
+ "canDelete": false,
"lat": 51.5054564,
"lng": -0.07535649999999999,
"name": "Tower Bridge",
@@ -15,6 +17,7 @@
},
{
"canEdit": false,
+ "canDelete": false,
"lat": 58.6373368,
"lng": -3.0688997,
"name": "John o' Groats",
@@ -23,6 +26,7 @@
},
{
"canEdit": false,
+ "canDelete": false,
"lat": 27.173891,
"lng": 78.042068,
"name": "Taj Mahal",
@@ -31,6 +35,7 @@
},
{
"canEdit": false,
+ "canDelete": false,
"lat": -25.344490,
"lng": 131.035431,
"name": "Ayers Rock",
@@ -39,6 +44,7 @@
},
{
"canEdit": false,
+ "canDelete": false,
"lat": 21.315603,
"lng": -157.858093,
"name": "Nankastu SC Hawaii Soccer Academy",
diff --git a/examples/01-custom-places-example.js b/examples/01-custom-places-example.js
index 561f4d6..457c553 100644
--- a/examples/01-custom-places-example.js
+++ b/examples/01-custom-places-example.js
@@ -1,13 +1,14 @@
function runExample1() {
$("#custom-places").mapsed({
- showOnLoad:
+ showOnLoad:
[
// City Varieties
{
// flag that this place should have the tooltip shown when the map is first loaded
autoShow: true,
- // flags the user can edit this place
+ // flags the user cannot edit or delete this place
canEdit: false,
+ canDelete: false,
lat: 53.798823,
lng:-1.5426760000000286,
place_id: "ChIJQd3IwBtceUgRha6laiANoro"
diff --git a/examples/02-place-picker-example.js b/examples/02-place-picker-example.js
index fb6f1f8..dd71a87 100644
--- a/examples/02-place-picker-example.js
+++ b/examples/02-place-picker-example.js
@@ -31,13 +31,11 @@ function runExample2() {
lng:-1.5426760000000286,
place_id: "ChIJQd3IwBtceUgRha6laiANoro"
},
- templateOptions: {
- google: {
- view: {
- footer: "
";
+ },
}); // mapsed
}
diff --git a/examples/03-add-places-example.js b/examples/03-add-places-example.js
index b04e5bf..1688592 100644
--- a/examples/03-add-places-example.js
+++ b/examples/03-add-places-example.js
@@ -1,58 +1,65 @@
+function updateDatabase(m, newPlace) {
+ var missing = [];
+
+ // detect errors starting at bottom
+ // ... we only have space for one error at a time, so this way we'll report
+ // ... from the top down
+ if (newPlace.postCode === "") missing.push("postcode");
+ if (newPlace.street === "") missing.push("street");
+ if (newPlace.name === "") missing.push("name");
+
+ // anything missing?
+ if (missing.length > 0) {
+ // return the error message so the callback doesn't progress
+ return "Required: " + missing.join();
+ }
+
+ if (newPlace) {
+ if (!newPlace.userData) {
+ // simulate a primary key being save to a db
+ newPlace.userData = parseInt(Math.random() * 100000);
+ }
+
+ var title = "";
+ var msg =
+ "userData: " + newPlace.userData +
+ " name: " + newPlace.name +
+ " street: " + newPlace.street + ", " +
+ newPlace.area + ", " +
+ newPlace.town + ", " + newPlace.postCode +
+ " telNo: " + newPlace.telNo +
+ " website: " + newPlace.website +
+ " more: " + newPlace.url
+ ;
+ if (newPlace.place_id) {
+ msg += " Place_id: " + details.place_id
+ }
+ if (newPlace.markerType == "new") {
+ title = "New place added!";
+ } else {
+ title = "Place saved!";
+ }
+ m.showMsg(title, msg);
+ }
+
+ // indicate form was OK and saved
+ return "";
+}
+
function runExample3() {
$("#add-places").mapsed({
- // Adds the "+" button to the control bar at the top right of the map
- allowAdd: true,
disablePoi: true,
// Enables edit of custom places (to your web application, not Google Maps!)
// ... again the presence of the callback enables the functionality
onSave: function(m, newPlace) {
- var missing = [];
-
- // detect errors starting at bottom
- // ... we only have space for one error at a time, so this way we'll report
- // ... from the top down
- if (newPlace.postCode === "") missing.push("postcode");
- if (newPlace.street === "") missing.push("street");
- if (newPlace.name === "") missing.push("name");
-
- // anything missing?
- if (missing.length > 0) {
- // return the error message so the callback doesn't progress
- return "Required: " + missing.join();
- }
-
- if (newPlace) {
- if (!newPlace.userData) {
- // simulate a primary key being save to a db
- newPlace.userData = parseInt(Math.random() * 100000);
- }
-
- var title = "";
- var msg =
- "userData: " + newPlace.userData +
- " name: " + newPlace.name +
- " street: " + newPlace.street + ", " +
- newPlace.area + ", " +
- newPlace.town + ", " + newPlace.postCode +
- " telNo: " + newPlace.telNo +
- " website: " + newPlace.website +
- " more: " + newPlace.url
- ;
- if (newPlace.place_id) {
- msg += " Place_id: " + details.place_id
- }
- if (newPlace.markerType == "new") {
- title = "New place added!";
- } else {
- title = "Place saved!";
- }
- m.showMsg(title, msg);
- }
-
- // indicate form was OK and saved
- return "";
+ return updateDatabase(m, newPlace);
+ },
+ // Enables saving of new places, also adds the "+" button to the control bar
+ // at the top right of the map
+ onAddSave: function(m, newPlace) {
+ return updateDatabase(m, newPlace);
},
// Custom marker images
diff --git a/examples/04-delete-places-example.js b/examples/04-delete-places-example.js
index 94d1e3a..fd7495d 100644
--- a/examples/04-delete-places-example.js
+++ b/examples/04-delete-places-example.js
@@ -4,7 +4,8 @@ function runExample4() {
// City Varieties
{
autoShow: true,
- canEdit: true,
+ canEdit: false,
+ canDelete: true,
lat: 53.798823,
lng:-1.5426760000000286,
name: "CITY Varieties Music Hall",
diff --git a/examples/06-full-example.js b/examples/06-full-example.js
index db87898..e51151d 100644
--- a/examples/06-full-example.js
+++ b/examples/06-full-example.js
@@ -119,8 +119,9 @@ function fullWindowExample(e) {
// Emulate places being loaded from a db
showOnLoad: _myPlaces,
- // Adds the "+" button to the control bar at the top right of the map
- allowAdd: true,
+ // Disables showing Googles Points of Interest
+ // (so we only show the user what we want them to see)
+ // ... note this doesn't work with custom themes
disablePoi: true,
// Illustrating custom behaviour
@@ -154,50 +155,44 @@ function fullWindowExample(e) {
// 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
+ getHeaderTemplate: function(marker, isEditing) {
+ // You can have a different header 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: "
`.toUpperCase();
+ },
+
+ // Defines header and footers to be applied to the
+ // ... select/edit/delete tooltips shown to the user
+ getFooterTemplate: function(marker, isEditing) {
+ // You can have a different 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
+ var markerType = marker.markerType;
+ var mode = (isEditing ? "edit" : "view");
+ return `
${markerType} ${mode} footer
`.toUpperCase();
},
// 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) {
+ return this.__update(m, newPlace);
+ },
+ // Adds the "+" button to the control bar at the top right of the map
+ // And wires up the event for saving
+ onAddSave: function (m, newPlace) {
+ return this.__update(m, newPlace);
+ },
+
+ __update: function (m, newPlace) {
var missing = [];
// detect errors starting at bottom
diff --git a/examples/07-map-moved-example.js b/examples/07-map-moved-example.js
index 4b18961..33c4b1d 100644
--- a/examples/07-map-moved-example.js
+++ b/examples/07-map-moved-example.js
@@ -1,6 +1,7 @@
var _example6_places = [
{
canEdit: true,
+ canDelete: true,
lat: 50.0657041,
lng: -5.713174599999999,
name: "Land's End",
@@ -8,6 +9,7 @@ var _example6_places = [
},
{
canEdit: false,
+ canDelete: false,
lat: 51.5054564,
lng: -0.07535649999999999,
name: "Tower Bridge",
@@ -15,6 +17,7 @@ var _example6_places = [
},
{
canEdit: false,
+ canDelete: false,
lat: 58.6373368,
lng: -3.0688997,
name: "John o' Groats",
@@ -23,6 +26,7 @@ var _example6_places = [
},
{
canEdit: false,
+ canDelete: false,
lat: 27.173891,
lng: 78.042068,
name: "Taj Mahal",
@@ -31,6 +35,7 @@ var _example6_places = [
},
{
canEdit: false,
+ canDelete: false,
lat: -25.344490,
lng: 131.035431,
name: "Ayers Rock",
@@ -39,6 +44,7 @@ var _example6_places = [
},
{
canEdit: false,
+ canDelete: false,
lat: 21.315603,
lng: -157.858093,
name: "Nankastu SC Hawaii Soccer Academy",
diff --git a/examples/mapsed-storage.js b/examples/mapsed-storage.js
index de18574..d7a3dc2 100644
--- a/examples/mapsed-storage.js
+++ b/examples/mapsed-storage.js
@@ -8,6 +8,7 @@ var _default_places = [
// "canEdit" flags that the user can edit the contents of this place
// once the user has finished editing you will get the "onEditOK" event
canEdit: true,
+ canDelete: true,
lat: 53.798823,
lng: -1.5426760000000286,
// The "place_id" is a Google Places reference string
@@ -24,6 +25,7 @@ var _default_places = [
// Flag this place can edited (tooltip has an "Edit" button)
// Once editing has completed a callback is fired so you can save the details to your DB
canEdit: true,
+ canDelete: true,
lat: 53.79,
lng: -1.59,
name: "Somewhere",
diff --git a/index.html b/index.html
index add1e7b..8df52ba 100644
--- a/index.html
+++ b/index.html
@@ -127,6 +127,7 @@
Loading Places
autoShow: true,
// flags the user can edit this place
canEdit: false,
+ canDelete: false,
lat: 53.798823,
lng:-1.5426760000000286,
place_id: "ChIJQd3IwBtceUgRha6laiANoro"
@@ -195,13 +196,20 @@
Place Picker
lng:-1.5426760000000286,
place_id: "ChIJQd3IwBtceUgRha6laiANoro"
},
- templateOptions: {
- google: {
- view: {
- footer: '<center>I came from Google Places</center>',
- }
- }
- }
+
+ // Defines header and footers to be applied to the
+ // ... select/edit/delete tooltips shown to the user
+ getHeaderTemplate: function(marker, isEditing) {
+ // You can have a different header 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
+ var markerType = marker.markerType;
+ var mode = (isEditing ? "edit" : "view");
+
+ return `<center>${markerType} ${mode} header</center>`.toUpperCase();
+ },
});
@@ -244,55 +252,68 @@
Adding Places
-$("#add-places").mapsed({
+function updateDatabase(m, newPlace) {
+ var missing = [];
+
+ // detect errors starting at bottom
+ // ... we only have space for one error at a time, so this way we'll report
+ // ... from the top down
+ if (newPlace.postCode === "") missing.push("postcode");
+ if (newPlace.street === "") missing.push("street");
+ if (newPlace.name === "") missing.push("name");
+
+ // anything missing?
+ if (missing.length > 0) {
+ // return the error message so the callback doesn't progress
+ return "Required: " + missing.join();
+ }
- // Adds the "+" button to the control bar at the top right of the map
- allowAdd: true,
-
- // Enables edit of custom places (to your web application, not Google Maps!)
- // ... again the presence of the callback enables the functionality
- onSave: function(mapsed, newPlace) {
- var missing = [];
-
- // detect errors starting at bottom
- // ... we only have space for one error at a time, so this way we'll report
- // ... from the top down
- if (newPlace.postCode === "") missing.push("postcode");
- if (newPlace.street === "") missing.push("street");
- if (newPlace.name === "") missing.push("name");
-
- // anything missing?
- if (missing.length > 0) {
- // return the error message so the callback doesn't progress
- return "Required: " + missing.join();
+ if (newPlace) {
+ if (!newPlace.userData) {
+ // simulate a primary key being save to a db
+ newPlace.userData = parseInt(Math.random() * 100000);
}
- if (newPlace) {
- if (newPlace.markerType == "new") {
- // simulate a primary key being save to a db
- newPlace.userData = parseInt(Math.random() * 100000);
- }
- var title = "";
- var msg =
- "userData: " + newPlace.userData +
- "name: " + newPlace.name +
- "street: " + newPlace.street + ", " +
+ var title = "";
+ var msg =
+ "userData: " + newPlace.userData +
+ "<br />name: " + newPlace.name +
+ "<br />street: " + newPlace.street + ", " +
newPlace.area + ", " +
newPlace.town + ", " + newPlace.postCode +
- "telNo: " + newPlace.telNo +
- "website: " + newPlace.website +
- "more: " + newPlace.url
- ;
- if (newPlace.markerType == "new")
- title = "New place added!";
- else
- title = "Place saved!";
- mapsed.showMsg(title, msg);
+ "<br />telNo: " + newPlace.telNo +
+ "<br />website: " + newPlace.website +
+ "<br />more: " + newPlace.url
+ ;
+ if (newPlace.place_id) {
+ msg += "<br />Place_id: " + details.place_id
}
-
- // indicate form was OK and saved
- return "";
+ if (newPlace.markerType == "new") {
+ title = "New place added!";
+ } else {
+ title = "Place saved!";
+ }
+ m.showMsg(title, msg);
+ }
+
+ // indicate form was OK and saved
+ return "";
+}
+
+$("#add-places").mapsed({
+
+ // Enables edit of custom places (to your web application, not Google Maps!)
+ // ... again the presence of the callback enables the functionality
+ onSave: function(m, newPlace) {
+ return updateDatabase(m, newPlace);
+ },
+ // Adds the "+" button to the control bar at the top right of the map
+ // And wires up the save event for "new" places
+ onAddSave: function(m, newPlace) {
+ return updateDatabase(m, newPlace);
}
+
+ // .... >/snip<
});
@@ -301,10 +322,8 @@
Adding Places
button to make changes.
- Simply set the allowAdd
- property to true to enable the icon, and an
- onSave
- callback to save the new place (and subsequent edits).
+ Simply wire up the onAddSave
+ callback to save the new place. Wiring up the event also enables the icon
@@ -334,6 +353,7 @@
Deleting Places
{
autoShow: true,
canEdit: true,
+ canDelete: true,
lat: 53.798823,
lng:-1.5426760000000286,
name: "CITY Varieties Music Hall",
diff --git a/mapsed.js b/mapsed.js
index 8b14b59..95123eb 100644
--- a/mapsed.js
+++ b/mapsed.js
@@ -11,6 +11,7 @@
* - http://closure-compiler.appspot.com/
*
* History:
+ * v2.1 - https://github.com/toepoke/mapsed/releases/tag/2.1.0
* v2.0 - https://github.com/toepoke/mapsed/releases/tag/2.0.0
* v1.2 - https://github.com/toepoke/mapsed/releases/tag/1.2.0
* v1.1 - https://github.com/toepoke/mapsed/releases/tag/1.1.0
@@ -23,7 +24,7 @@
"use strict";
// singleton here (same variable across all instances of the plug-in)
- var _version = '(1.2.0)',
+ var _version = '(2.1.0)',
_plugInName = "mapsed",
_plugInInstances = 1
;
@@ -65,8 +66,9 @@
_toolbarContainer = null, // Container for mapsed tools (add, geo, help, etc)
_searchBarContainer = null, // Container for search control, button & more
gm = null, // Short cut reference to the Google Maps namespace (this is initialised in the constructor to give the Google API time to load on the page)
- gp = null // Short cut reference to the Google Places namespace (this is initialised in the constructor to give the Google API time to load on the page)
- ;
+ gp = null, // Short cut reference to the Google Places namespace (this is initialised in the constructor to give the Google API time to load on the page)
+ _selectedMarker = null
+ ;
/**
* Plug-in options:
@@ -131,10 +133,6 @@
// If you require custom maps, you need "disablePoi" set to false
disablePoi: false,
- // Flags that the user can add new places (as well as edit/delete), an "+" icon appears
- // at the top right of the map
- allowAdd: false,
-
searchOptions: {
// Flags that the user can search for places themselves
// ... adds a search box to the map
@@ -154,11 +152,26 @@
geoSearch: "5aside football near {POSITION}"
},
+ // Event fired when user clicks the "Add" button (+)
+ // Useful if you want to perform some initialisation on the marker/place details
+ // prototype: function(mapsed, marker)
+ onAdd: null,
+
+ // Event fired when user clicks "Save" button on a "new" place.
+ // The presence of this event adds the the "+" button to the toolbar.
+ // In many cases you can just re-use your "onSave" event handler.
+ // Seealso "onSave" which has the same prototype
+ // prototype: function(mapsed, newPlace)
+ // return a error message string if you're not happy with what's been entered
+ // return an empty string to confirm it's been saved
+ onAddSave: null,
+
// Event when user clicks the "Select" button
// prototype: function(mapsed, details)
onSelect: null,
- // Allows new places to be edited
+ // Allows custom places to be edited and then saved
+ // Seealso "onAddSave" which has the same prototype
// prototype: function(mapsed, newPlace)
// return a error message string if you're not happy with what's been entered
// return an empty string to confirm it's been saved
@@ -517,14 +530,23 @@
*/
function onMarkerClicked(evt) {
var canEdit = false;
+ var canDelete = false;
var currMarker = this;
closeTooltips();
+ if (_selectedMarker == currMarker) {
+ // Already selecting the marker, so treat as a toggle and turn
+ // it off again (closeTooltips above has already closed it)
+ _selectedMarker = null;
+ return;
+ }
+
_pagedMarkers = findNearbyMarkers(currMarker);
settings?.debugger?.logger("_pagedMarkers", _pagedMarkers, "_currMarkerPage", _currMarkerPage);
if (currMarker.details.markerType == "new") {
canEdit = true;
+ canDelete = true; // whilst it's just been created there's no reason they can't delete it again straight away ... may have changed their mind
if (settings.onAdd) {
settings.onAdd(_plugIn, currMarker);
}
@@ -532,6 +554,7 @@
// Initially we show the view template. User can then decide
// whether to SELECT, EDIT or DELETE the marker
canEdit = false;
+ canDelete = false;
}
currMarker.showTooltip(canEdit);
@@ -636,12 +659,24 @@
var $rw = root.find(".mapsed-edit");
var errors = "";
var place = getViewModel($rw);
+ var isNew = (place.markerType == "new");
+
+ // Ensure the end user has the event wired up
+ if (isNew) {
+ if (!settings.onAddSave) throw new Error("onAddSave event has not been defined");
+ } else {
+ if (!settings.onSave) throw new Error("onSave event has not been defined");
+ }
// if we're saving it can no longer be "new"
place.markerType = "custom";
// see if the calling code is happy with what's being changed
- errors = settings.onSave(_plugIn, place);
+ if (isNew) {
+ errors = settings.onAddSave(_plugIn, place);
+ } else {
+ errors = settings.onSave(_plugIn, place);
+ }
var errCtx = $rw.find(".mapsed-error");
if (errors && errors.length > 0) {
@@ -853,7 +888,7 @@
if (settings.onMapMoved) {
var hits = await settings.onMapMoved(_compass.north, _compass.south, _compass.east, _compass.west);
- if (hits) {
+ if (hits && hits.length > 0) {
for (var i = 0; i < hits.length; i++) {
var place = hits[i];
if (!place.lat || !place.lng) {
@@ -1130,17 +1165,24 @@
var settings = _plugIn.getSettings();
if (settings.onSelect || settings.onSave || settings.onDelete) {
- var showSelect, showSave, showDelete, canEdit;
+ var showSelect, showSave, showDelete, canEdit, canDelete;
canEdit = model.canEdit;
+ canDelete = model.canDelete;
// however if it's a google marker we can't, so ignore what the input says!
- if (model.markerType == "google")
+ if (model.markerType == "google") {
canEdit = false;
+ canDelete = false;
+ }
showSelect = settings.onSelect != null;
- showSave = (settings.onSave != null && canEdit);
+ showSave = (
+ settings.onSave != null && canEdit
+ // can only delete markers we created!
+ && model.markerType == "custom"
+ );
showDelete = (
- settings.onDelete != null && canEdit
+ settings.onDelete != null && canDelete
// can only delete markers we created!
&& model.markerType == "custom"
);
@@ -1270,8 +1312,11 @@
/**
- *
- * @returns
+ * Convenience function to determine if any markers were found "nearby"
+ * to the currently displayed marker. Used to determine if the pagination
+ * feature should become active.
+ * @returns - true => has markers nearby
+ * false => no markers nearby
*/
function hasNearbyMarkers() {
if (!_pagedMarkers) {
@@ -1478,50 +1523,6 @@
} // addHelpButton
- /**
- * Convenience function for creating control buttons on the map (re-uses
- * the public "addMapContainer" method. This is just a short-cut for buttons
- * @param {any} buttonText Text to appear in the button
- * You can also add a tooltip by prefixing it with a pipe, e.g. "Go|Perform a search" will give
- * a tooltip of "Perform a search"
- * @param {any} ctrlPos Where on the map the control should be added (TOP_LEFT, TOP_RIGHT, etc)
- * For options, see https://developers.google.com/maps/documentation/javascript/controls#ControlPositioning
- * @param {any} addClass Additional classes to add to the button (to target CSS)
- * @param {any} onClickEvent Callback to execute when the button is clicked
- * @returns Element of the button add (DOM element, not jQuery)
- */
- function addToolBarButton(buttonText, ctrlPos, addClass, onClickEvent) {
- var btn = null,
- classes = "",
- tooltip = ""
- ;
-
- if (addClass && addClass.length > 0) {
- classes = ` class='${addClass}' `;
- }
-
- // see if there's a tooltip added
- if (buttonText && buttonText.length > 0) {
- var arrSplit = buttonText.split("|");
- buttonText = arrSplit[0];
- tooltip = arrSplit[1];
- }
-
- var btn = document.createElement("BUTTON");
- var classArray = addClass.split(" ");
- btn.classList.add(...classArray);
- btn.innerHTML = buttonText;
- btn.setAttribute("title", tooltip);
- if (onClickEvent) {
- btn.addEventListener("click", onClickEvent);
- }
- _toolbarContainer.appendChild(btn);
-
- return btn;
-
- } // addToolBarButton
-
-
/**
* Closes all marker tooltips that are on-screen.
*/
@@ -1534,6 +1535,7 @@
}
}
+ settings?.debugger?.clearPolygon();
} // closeTooltips
@@ -1587,6 +1589,7 @@
telNo: "",
website: "",
url: "",
+ canDelete: (type == "new" || type == "custom"),
canEdit: (type == "new" || type == "custom")
};
@@ -1619,6 +1622,7 @@
+
@@ -1681,13 +1685,13 @@
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;
- }
+ var renderOptions = {};
+
+ if (settings.getHeaderTemplate) {
+ renderOptions.header = settings.getHeaderTemplate(marker, inRwMode);
+ }
+ if (settings.getFooterTemplate) {
+ renderOptions.footer = settings.getFooterTemplate(marker, inRwMode);
}
if (inRwMode) {
@@ -1706,6 +1710,8 @@
// re-open for the right width to be used
tip.open(_gMap, marker);
+ // flag which marker is open (so we can toggle off later)
+ _selectedMarker = marker;
} // showTooltip
@@ -1848,6 +1854,7 @@
var $root = $vw.parents(".mapsed-root");
var model = {
canEdit: ($root.find(".mapsed-can-edit").val() === "true"),
+ canDelete: ($root.find(".mapsed-can-delete").val() === "true"),
lat: $root.find(".mapsed-lat").val(),
lng: $root.find(".mapsed-lng").val(),
place_id: $root.find(".mapsed-place-id").val(),
@@ -1893,6 +1900,7 @@
// ... so make sure the data we return is sensible
function sanitise(place) {
if (!place.canEdit) place.canEdit = false;
+ if (!place.canDelete) place.canDelete = false;
if (!place.lat) place.lat = 0;
if (!place.lng) place.lng = 0;
if (!place.userData) place.userData = "";
@@ -2174,6 +2182,14 @@
}
);
}
+ if (settings.onAddSave) {
+ _mapContainer.on("click", "button.mapsed-save-button",
+ function () {
+ var element = $(this);
+ onPlaceSave(element);
+ }
+ );
+ }
if (settings.onDelete) {
_mapContainer.on("click", "button.mapsed-delete-button",
function () {
@@ -2222,7 +2238,7 @@
if (settings.getHelpWindow) {
addHelpButton();
}
- if (settings.allowAdd) {
+ if (settings.onAddSave) {
addNewPlaceButton();
}
if (settings.onPreInit) {