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 PropertyDescription canEditFlags this an editable place, i.e. when it's clicked on the map it has an edit button. + canDeleteFlags this a deletable place, i.e. when it's clicked on the map it has an delete button. latLatitude position of the place. lngLongitude position of the place. place_idUnique 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: "
I came from Google Places
", - } - } - } + + getFooterTemplate: function(marker, isEditing) { + // Same footer for view & edit template + return "
Selected from Google Places
"; + }, }); // 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: "
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
" - } - } + var markerType = marker.markerType; + var mode = (isEditing ? "edit" : "view"); + + return `
${markerType} ${mode} 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) {