diff options
Diffstat (limited to 'admin/survey/script/Maps/VnaprejMarkers.js')
| -rw-r--r-- | admin/survey/script/Maps/VnaprejMarkers.js | 621 |
1 files changed, 621 insertions, 0 deletions
diff --git a/admin/survey/script/Maps/VnaprejMarkers.js b/admin/survey/script/Maps/VnaprejMarkers.js new file mode 100644 index 0000000..3bca4e6 --- /dev/null +++ b/admin/survey/script/Maps/VnaprejMarkers.js @@ -0,0 +1,621 @@ +// Author: Uroš Podkrižnik (22.2.2017)
+// Tip vprasanja = 26
+
+//MARKERS - adding markers in branching
+
+//storing active shape, to for instance disable edit mode when needed
+var active_shape;
+
+/**
+ * Ce obstajajo podatki v bazi (rec. uporabnik klikne 'Prejsnja stran').
+ * Kreirajo se markerji, shranjeni v bazi.
+ * @param spremenljivka int id spremenljivke
+ * @param map_data JSON Object
+ * @param locked boolean true, if survey is locked in branching
+ */
+function map_data_fill_vnaprej_mrkerji(spremenljivka, map_data, locked) {
+ for (var row in map_data) {
+ var row_object = map_data[row];
+ var pos = {lat: row_object.lat, lng: row_object.lng};
+
+ createMarkerVnaprej(spremenljivka, row_object.address, row_object.naslov,
+ ustvari_basic_marker(spremenljivka, pos, false), row_object.id, true, locked);
+ }
+}
+
+/**
+ * Ce obstajajo podatki v bazi izrisi info shapes
+ * Kreirajo se markerji, shranjeni v bazi.
+ * @param spremenljivka int id spremenljivke
+ * @param map_data JSON Object
+ * @param locked boolean true, if survey is locked in branching
+ * @returns {int} ID of last shape
+ */
+function map_data_fill_vnaprej_shapes(spremenljivka, map_data, locked) {
+ //pridobi mapo spremenljivke
+ var map = document.getElementById("br_map_" + spremenljivka).gMap;
+
+ var shapeOption = polylineOptions(map);
+ var last_id = 0;
+ for (var i = 0; i < map_data.length; i++)
+ {
+
+ last_id = map_data[i].overlay_id;
+ var color = mapShapeColors[map_data[i].overlay_id-1 % mapShapeColors.length];
+
+ //set and show the shape
+ shapeOption.path = map_data[i].path;
+ shapeOption.strokeColor = '#' + color;
+ shapeOption.strokeColorOrg = '#' + color;
+ shapeOption.editable = false;
+ var shape = new google.maps.Polyline(shapeOption);
+
+ shape.overlay_id = map_data[i].overlay_id;
+ shape.address = map_data[i].address;
+ shape.infowin = makeShapeInfoWindow(spremenljivka, shape, locked);
+ setListenersShapeVM(spremenljivka, shape, map, locked);
+
+ //google.maps.event.addListener(shape, 'mouseover', function() { this.setOptions({strokeWeight: 6, strokeColor: 'black', zIndex: 2}); });
+ //google.maps.event.addListener(shape, 'mouseout', function() { this.setOptions({strokeWeight: 4, strokeColor: this.strokeColorOrg , zIndex: 1}); });
+ }
+ return last_id;
+}
+
+/**
+ * Ustvari in vrne basic marker, na mapo spremenljivke z danimi koordinatami
+ * @param {type} spremenljivka - int - id spremenljivke
+ * @param {type} pos - koordinate - objekt {lat: ???, lng: ???}
+ * @param {string} addressFromSearchBox - address if adding marker from searchBox, null otherwise
+ * (used for ignoring duplicates)
+ * @returns {google.maps.Marker}
+ */
+function ustvari_basic_marker(spremenljivka, pos, addressFromSearchBox) {
+ var marker = addressFromSearchBox ? findMarkerFromAddress(addressFromSearchBox, spremenljivka) : null;
+
+ if (!marker) {
+ //pridobi mapo spremenljivke
+ var map = document.getElementById("br_map_" + spremenljivka).gMap;
+
+ //kreiraj marker
+ var marker = new google.maps.Marker({
+ position: new google.maps.LatLng(pos.lat, pos.lng),
+ map: map,
+ identifier: getMarkerUniqueId(pos.lat, pos.lng, spremenljivka),
+ icon: {url: "img_0/marker_text_off.png"}
+ });
+
+ //hide warning text for 'no values yet'
+ var no_value_warning = document.getElementById("variabla_no_value_" + spremenljivka);
+ no_value_warning.style.display = "none";
+
+ allMarkers[spremenljivka].push(marker);
+
+ return marker;
+ } else {
+ //trigger click on marker, to focus it and open infowindow
+ google.maps.event.trigger(marker, 'click');
+ return null
+ }
+}
+
+/**
+ * funkcija, ki kreira osnovni marker (rdec)
+ * @param {type} spremenljivka - int - id spremenljivke
+ * @param {type} add - String - label o informacijah markerja
+ * @param {type} text - string - text za windowinfo textarea
+ * @param {type} marker - google maps new created marker
+ * @returns {undefined}
+ */
+function shraniMarker(spremenljivka, add, text, marker) {
+ if (marker != null) {
+ //save new marker in DB
+ $.post('ajax.php?t=branching&a=save_marker', {spr_id: spremenljivka, address: add,
+ lat: marker.getPosition().lat(), lng: marker.getPosition().lng(), anketa: srv_meta_anketa_id},
+ function (id) {
+ //id - id markerja v bazi
+ createMarkerVnaprej(spremenljivka, add, text, marker, id, false);
+ });
+ }
+}
+
+/**
+ * funkcija, ki kreira osnovni marker (rdec)
+ * @param {type} spremenljivka - int - id spremenljivke
+ * @param {type} add - String - label o informacijah markerja
+ * @param {type} naslov - string - text za windowinfo textarea
+ * @param {type} marker - google maps new created marker
+ * @param {type} id - id vrednosti markerja iz tabele srv_vrednost
+ * @param {type} fromLoad - boolean true, if data for map already axists and
+ * this function was used to load a map with existing markers
+ * @param locked boolean true, if survey is locked in branching
+ * @returns {undefined}
+ */
+function createMarkerVnaprej(spremenljivka, add, naslov, marker, id, fromLoad, locked) {
+ if (marker != null) {
+ //pridobi mapo spremenljivke
+ var map = document.getElementById("br_map_" + spremenljivka).gMap;
+
+ marker.address = add;
+ marker.id = id;
+
+ bounds[spremenljivka].extend(marker.position);
+
+ //markers[markerId] = marker; // cache marker in markers object
+ //dont set listeners if survey is locked
+ if (!locked)
+ bindMarkerEventsVM(spremenljivka, marker, map); // bind right click event to marker
+
+ //Create a div element for container.
+ var container = document.createElement("div");
+ //margin, da se pri italic ne odreze zadja crka
+ container.style.cssText = 'margin-right:1px';
+
+ //Create a textarea for the input text
+ var textBoxTitle = document.createElement("input");
+ textBoxTitle.style.cssText = "font-weight:bold; font-size:1em";
+ textBoxTitle.type = "text";
+ textBoxTitle.value = naslov;
+ textBoxTitle.id = "input_map_vre_" + id;
+ textBoxTitle.className = "input_title";
+ container.appendChild(textBoxTitle);
+ container.appendChild(document.createElement("br"));
+ //ce je anketa locked, disablaj urejanje naslova
+ if (locked)
+ textBoxTitle.disabled = "disabled";
+
+ //ko se spremeni textarea v windowinfo, spremeni value inputa za text
+ google.maps.event.addDomListener(textBoxTitle, "change", function () {
+ //save title of marker in DB
+ $.post('ajax.php?t=vprasanjeinline&a=inline_vrednost_naslov_save', {
+ spremenljivka: spremenljivka, vrednost: id, naslov: textBoxTitle.value,
+ anketa: srv_meta_anketa_id, lang_id: srv_meta_lang_id});
+ });
+
+ //Create a label element for address.
+ var address = document.createElement("label");
+ address.innerHTML = '<i>' + add + '</i>';
+ address.style.cssText = 'font-size:0.85em;';
+ container.appendChild(address);
+ container.appendChild(document.createElement("br"));
+
+ //create label for subquestion if exist or is not empty string
+ if (podvprasanje_naslov[spremenljivka]) {
+ container.appendChild(document.createElement("br"));
+ //Create a label element for subquestion.
+ var podvprasanje = document.createElement("label");
+ podvprasanje.innerHTML = '<b>' + podvprasanje_naslov[spremenljivka] + '</b>';
+ podvprasanje.style.cssText = 'font-size:0.95em';
+ container.appendChild(podvprasanje);
+ container.appendChild(document.createElement("br"));
+ }
+
+ var textBox = document.createElement("textarea");
+ //textBox.setAttribute("id", markerId + "_textarea");
+ textBox.style.width = "100%";
+ textBox.className = "boxsizingBorder";
+ textBox.disabled = "disabled";
+ textBox.style.height = "50px";
+ textBox.style.resize = "none";
+ container.appendChild(textBox);
+
+ //listener ob kliku na marker
+ google.maps.event.addListener(marker, 'click', function () {
+ //if infowindow in opened, blur focus, so saving in DB can be triggered
+ blurTitleInfowindow(false);
+
+ infowindow.setContent(container);
+ infowindow.open(map, marker);
+ $("#input_map_vre_" + id).focus();
+ });
+
+ if (!fromLoad) {
+ //if infowindow in opened, blur focus, so saving in DB can be triggered
+ blurTitleInfowindow(true);
+
+ //nastavi label
+ infowindow.setContent(container);
+ //odpre marker - prikaze label (kot da bi ga kliknil)
+ infowindow.open(map, marker);
+ //fokus na input
+ $("#input_map_vre_" + id).focus();
+ } else {
+ //zemljevid se prilagodi okviru
+ map.fitBounds(bounds[spremenljivka]);
+ }
+
+ st_markerjev[spremenljivka]++;
+ }
+}
+
+/**
+ * handler za desni klik in dvojni klik na markerja
+ * @param {type} spremenljivka - int - id spremenljivke
+ * @param {type} marker
+ * @param {type} map - google map
+ */
+function bindMarkerEventsVM(spremenljivka, marker, map) {
+ google.maps.event.addListener(marker, "rightclick", function () {
+ //removeMarker(spremenljivka, marker); // remove marker from array
+ deleteMenu.open(map, null, null, spremenljivka, null, null, marker);
+ });
+ google.maps.event.addListener(marker, "dblclick", function () {
+ //removeMarker(spremenljivka, marker); // remove marker from array
+ deleteMenu.open(map, null, null, spremenljivka, null, null, marker);
+ });
+}
+
+/**
+ * All necessaries to remove marker - from map, DB, global variables
+ * @param {type} spremenljivka - int - id spremenljivke
+ * @param {type} marker
+ */
+function removeMarkerVM(spremenljivka, marker) {
+ function callback() {
+ marker.setMap(null); // set markers setMap to null to remove it from map
+ //remove marker from marker array
+ var index = allMarkers[spremenljivka].indexOf(marker);
+ if (index > -1)
+ allMarkers[spremenljivka].splice(index, 1);
+ st_markerjev[spremenljivka]--;
+ if (st_markerjev[spremenljivka] < 1) {
+ //show warning text for 'no values yet'
+ var no_value_warning = document.getElementById("variabla_no_value_" + spremenljivka);
+ no_value_warning.style.display = "inline-block";
+ }
+ }
+ inline_vrednost_delete(spremenljivka, marker.id, 0, callback);
+}
+
+/**
+ * Function to set parameters for drawing a polygon on map
+ *
+ * @param {type} spremenljivka - id spremenljivke
+ * @returns {undefined}
+ */
+function drawMarkers(spremenljivka) {
+ var map = document.getElementById("br_map_" + spremenljivka).gMap;
+
+ var startDrawingMode = google.maps.drawing.OverlayType.MARKER;
+
+ var icon = {
+ url: "img_0/marker_text_off.png"
+ };
+
+ var drawingManager = new google.maps.drawing.DrawingManager({
+ drawingMode: startDrawingMode,
+ drawingControl: true,
+ drawingControlOptions: {
+ position: google.maps.ControlPosition.TOP_RIGHT,
+ drawingModes: ['marker', 'polyline']
+ },
+ markerOptions: {icon: icon},
+ polylineOptions: polylineOptions(map)
+ });
+
+ //listener when user creates a marker
+ google.maps.event.addListener(drawingManager, 'markercomplete', function (marker) {
+
+ //hide warning text for 'no values yet'
+ var no_value_warning = document.getElementById("variabla_no_value_" + spremenljivka);
+ no_value_warning.style.display = "none";
+
+ //koordinate
+ var pos = {
+ lat: marker.getPosition().lat(),
+ lng: marker.getPosition().lng()
+ };
+
+ marker.indentifier = getMarkerUniqueId(pos.lat, pos.lng, spremenljivka);
+ allMarkers[spremenljivka].push(marker);
+
+ // naslov se pridobi, da se klice geocoding
+ GeocodingF(pos, function (data) {
+ //ce ne vrne null - je nasel naslov
+ if (data != null) {
+ //createMarkerVnaprej(spremenljivka, data.formatted_address, '', marker);
+ shraniMarker(spremenljivka, data.formatted_address, '', marker);
+ } else {
+ marker.setMap(null);
+ //odpre se okno, ce je prislo do napake - null - (mozen je tudi prekratek delay med geocoding requesti)
+ alert(lang['srv_resevanje_alert_location_not_found_map']);
+ }
+ });
+ });
+
+ //listener when user creates a line
+ google.maps.event.addListener(drawingManager, 'polylinecomplete', function (line) {
+ afterShapeCompleteSettingsVM(line, spremenljivka, map);
+ });
+
+ drawingManager.setMap(map);
+
+ google.maps.event.addListener(map, 'click', function () {
+ changeFocusLine(null);
+ });
+}
+
+/**
+ * Do some things when focus is changed when inculdin lines
+ * @param {type} shape - shape that is clicked or wanted to be in focus
+ * @returns {undefined}
+ */
+function changeFocusLine(shape) {
+ if (active_shape != shape) {
+ if (active_shape)
+ active_shape.setOptions({editable: false});
+ active_shape = shape;
+ }
+ blurTitleInfowindow(true);
+}
+
+/**
+ * Trigger a blur() on titlein ifnowindow
+ * @param {type} closeInfowindow - true to close infowindow afterwards
+ * @returns {undefined}
+ */
+function blurTitleInfowindow(closeInfowindow) {
+ if (infowindow.getMap()) {
+ //if infowindow in opened, blur focus, so saving in DB can be triggered
+ infowindow.content.getElementsByClassName("input_title")[0].blur();
+ if (closeInfowindow)
+ infowindow.close();
+ }
+}
+
+/**
+ * Polyline options holder
+ * @param map google map, to put polyline in it
+ * @returns {polylineOptions.PolylineAnonym$6}
+ */
+function polylineOptionsVM(map) {
+ return {
+ strokeColor: 'black',
+ strokeColorOrg: 'black',
+ strokeWeight: 4,
+ clickable: true,
+ editable: !viewMode,
+ zIndex: 1,
+ map: map
+ };
+}
+
+/**
+ * Sets all kind of settings after shape is completed
+ *
+ * @param {google's shape} shape - polyline or polygon if already exists
+ * @param {type} spremenljivka - id spremenljivke
+ * @param {type} map - google map
+ * @returns {undefined}
+ */
+function afterShapeCompleteSettingsVM(shape, spremenljivka, map) {
+ st_shapes[spremenljivka]['last_id']++;
+ shape.overlay_id = st_shapes[spremenljivka]['last_id'];
+ shape.address = '';
+ shape.infowin = makeShapeInfoWindow(spremenljivka, shape);
+
+ saveNewLineInDB(spremenljivka, shape.getPath().getArray(), st_shapes[spremenljivka]['last_id']);
+
+ var color = mapShapeColors[shape.overlay_id-1 % mapShapeColors.length];
+ st_shapes[spremenljivka]['count']++;
+
+ //set shape
+ shape.setOptions({strokeColor: '#' + color});
+
+ changeFocusLine(shape);
+
+ //open infowindow
+ infowindow.setContent(shape.infowin);
+ var pathArr = shape.getPath().getArray();
+ //set position to rounded middle point
+ infowindow.setPosition(pathArr[Math.round((pathArr.length - 1) / 2)]);
+ infowindow.open(map);
+
+ setListenersShapeVM(spremenljivka, shape, map);
+
+ //focus on input
+ $("#map_input_overlay_id_" + spremenljivka + "_" + shape.overlay_id).focus();
+}
+
+/**
+ * Creates and returns a html container for infowindow
+ * @param {type} spremenljivka - id spremenljivke
+ * @param {type} shape - googles shape - polyline or polygon
+ * @param locked boolean true, if survey is locked in branching
+ * @returns {makeShapeInfoWindow.container|Element}
+ */
+function makeShapeInfoWindow(spremenljivka, shape, locked) {
+ //Create a div element for container.
+ var container = document.createElement("div");
+ //margin, da se pri italic ne odreze zadja crka
+ container.style.cssText = 'margin-right:1px';
+
+ //Create a textarea for the input text
+ var textBoxTitle = document.createElement("input");
+ textBoxTitle.style.cssText = "font-weight:bold; font-size:1em !important; display: block; float: left;";
+ textBoxTitle.type = "text";
+ textBoxTitle.value = shape.address;
+ textBoxTitle.className = "input_title";
+ textBoxTitle.id = "map_input_overlay_id_" + spremenljivka + "_" + shape.overlay_id;
+ container.appendChild(textBoxTitle);
+ //container.appendChild(document.createElement("br"));
+ //disable changing title if locked
+ if (locked)
+ textBoxTitle.disabled = "disabled";
+
+ //dont show delete image if survey is locked and no need for listeners
+ if (!locked) {
+ var deleteImg = document.createElement("span");
+ deleteImg.className = "faicon delete icon-grey_dark_link";
+ deleteImg.title = lang['srv_vprasanje_delete_line_map'];
+ deleteImg.style.cssText = "height:1.65em; display: block; float: left; margin-left:7px; cursor: pointer;";
+ container.appendChild(deleteImg);
+
+ //ko se spremeni textarea v windowinfo, spremeni value inputa za text
+ google.maps.event.addDomListener(deleteImg, "click", function () {
+ if (confirm(lang['srv_vprasanje_delete_line_confirm_map']))
+ deleteLineInDB(spremenljivka, shape);
+ });
+
+ //ko se spremeni textarea v windowinfo, spremeni value inputa za text
+ google.maps.event.addDomListener(textBoxTitle, "change", function () {
+ //save title of SHAPE in DB
+ var lineData = {anketa: srv_meta_anketa_id, spr_id: spremenljivka,
+ overlay_id: shape.overlay_id, address: textBoxTitle.value};
+ $.post('ajax.php?t=branching&a=edit_naslov_polyline', lineData);
+ });
+ }
+
+ return container;
+}
+
+/**
+ * Set Liteners when editing a shape
+ * @param {type} spremenljivka - id spremenljivke
+ * @param {type} shape - googles shape to set listeners on
+ * @param {type} map - google map
+ * @param locked boolean true, if survey is locked in branching
+ * @returns {undefined}
+ */
+function setListenersShapeVM(spremenljivka, shape, map, locked) {
+ //listener ob kliku na marker
+ google.maps.event.addListener(shape, 'click', function (ev) {
+ //pusti editable false, ce je locked
+ if (!locked)
+ this.setOptions({editable: true});
+ changeFocusLine(this);
+
+ //open infowindow
+ infowindow.setContent(this.infowin);
+ infowindow.setPosition(ev.latLng);
+ infowindow.open(map);
+
+ $("#map_input_overlay_id_" + spremenljivka + "_" + shape.overlay_id).focus();
+ });
+
+ //no need for listeners if survey is locked
+ if (!locked) {
+ //when editing end or start point
+ google.maps.event.addListener(shape.getPath(), 'set_at', function (index, obj) {
+ saveEditedLineInDB(spremenljivka, shape.getPath().getArray(), shape.overlay_id);
+ });
+ //when inserting new point (break old one)
+ google.maps.event.addListener(shape.getPath(), 'insert_at', function (index, obj) {
+ saveEditedLineInDB(spremenljivka, shape.getPath().getArray(), shape.overlay_id);
+ });
+ //when deleting a point -> undo
+ google.maps.event.addListener(shape.getPath(), 'remove_at', function (index, obj) {
+ saveEditedLineInDB(spremenljivka, shape.getPath().getArray(), shape.overlay_id);
+ });
+
+ setDeleteMenu(shape, map, spremenljivka)
+ }
+}
+
+/**
+ * Sets rightclick and dblclick listeners to open delete menu
+ * @param {type} shape - shape to set listeners on
+ * @param {type} map - map on which to hover menu (shape's map)
+ * @param {type} spremenljivka - id of variable
+ * @returns {undefined}
+ */
+function setDeleteMenu(shape, map, spremenljivka) {
+ google.maps.event.addListener(shape, 'rightclick', function (e) {
+ // Check if click was on a vertex control point
+ if (e.vertex == undefined) {
+ return;
+ }
+ //removeVertexVM(spremenljivka, shape, e.vertex);
+ deleteMenu.open(map, shape, e.vertex, spremenljivka, null, null);
+ });
+ google.maps.event.addListener(shape, 'dblclick', function (e) {
+ // Check if click was on a vertex control point
+ if (e.vertex == undefined) {
+ return;
+ }
+ //removeVertexVM(spremenljivka, shape, e.vertex);
+ deleteMenu.open(map, shape, e.vertex, spremenljivka, null, null);
+ });
+}
+
+/**
+ * Creates json data of shape to later insert or update DB
+ * @param {type} spremenljivka - id spremenljivke
+ * @param {type} pathArray - array of path of shape (shape.getPath().getArray())
+ * @param {type} overlay_id - id of overlay
+ * @returns {createLineData.lineData}
+ */
+function createLineData(spremenljivka, pathArray, overlay_id) {
+ var lineData = {anketa: srv_meta_anketa_id, spr_id: spremenljivka, overlay_id: overlay_id, path: []};
+
+ for (var i = 0, n = pathArray.length; i < n; i++) {
+ var latLng = pathArray[i];
+ var vrstni_red = i + 1;
+ lineData.path[i] = {lat: latLng.lat(), lng: latLng.lng(), vrstni_red: i + 1};
+ }
+
+ return lineData;
+}
+
+/**
+ * Saves newly created line in DB
+ * @param {type} spremenljivka - id spremenljivke
+ * @param {type} pathArray - array of path of shape (shape.getPath().getArray())
+ * @param {type} overlay_id - id of overlay
+ * @returns {undefined}
+ */
+function saveNewLineInDB(spremenljivka, pathArray, overlay_id) {
+ var lineData = createLineData(spremenljivka, pathArray, overlay_id);
+ $.post('ajax.php?t=branching&a=save_polyline', lineData);
+}
+
+/**
+ * Saves edited line in DB
+ * @param {type} spremenljivka - id spremenljivke
+ * @param {type} pathArray - array of path of shape (shape.getPath().getArray())
+ * @param {type} overlay_id - id of overlay
+ * @returns {undefined}
+ */
+function saveEditedLineInDB(spremenljivka, pathArray, overlay_id) {
+ var lineData = createLineData(spremenljivka, pathArray, overlay_id);
+ $.post('ajax.php?t=branching&a=edit_polyline', lineData);
+}
+
+/**
+ * Deletes line in DB
+ * @param {type} spremenljivka - id spremenljivke
+ * @param {type} shape - shape to be deleted
+ * @returns {undefined}
+ */
+function deleteLineInDB(spremenljivka, shape) {
+ shape.setMap(null);
+ st_shapes[spremenljivka]['count']--;
+ blurTitleInfowindow(true);
+ var lineData = {anketa: srv_meta_anketa_id, spr_id: spremenljivka, overlay_id: shape.overlay_id};
+ $.post('ajax.php?t=branching&a=delete_polyline', lineData);
+}
+
+/**
+ * Removes a vertex/point of shape and if it after last it clears the map
+ * and sets drawing mode on again
+ * @param {type} spremenljivka - id spremenljivke
+ * @param {google's shape} shape - polyline or polygon if already exists
+ * @param {type} vertex - vertex or point which was selected
+ * @returns {undefined}
+ */
+/*function removeVertexVM(spremenljivka, shape, vertex) {
+ if (!shape || vertex == undefined){
+ //closes menu
+ this.close();
+ return;
+ }
+
+ shape.getPath().removeAt(vertex);
+ saveEditedLineInDB(spremenljivka, shape.getPath().getArray(), shape.overlay_id);
+
+ if (shape.getPath().length < 2) {
+ //remove shape
+ deleteLineInDB(spremenljivka, shape);
+ }
+ //closes menu
+ this.close();
+}*/
\ No newline at end of file |