397 lines
14 KiB
JavaScript
397 lines
14 KiB
JavaScript
|
// Author: Uroš Podkrižnik (24.1.2017)
|
||
|
|
// Tip vprasanja = 26
|
||
|
|
|
||
|
|
//DRAWING POLYLINE
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Function to set parameters for drawing a shape on map
|
||
|
|
*
|
||
|
|
* @param {type} spremenljivka - id spremenljivke
|
||
|
|
* @param {google's shape} shape - polyline or polygon if already exists
|
||
|
|
* @param shape_type - string - type of shape 'polyline' or 'polygon'
|
||
|
|
* @returns {undefined}
|
||
|
|
*/
|
||
|
|
function drawShape(spremenljivka, shape, shape_type) {
|
||
|
|
var map = document.getElementById("map_"+spremenljivka).gMap;
|
||
|
|
|
||
|
|
var drawingMode = (shape_type === 'polyline') ?
|
||
|
|
google.maps.drawing.OverlayType.POLYLINE : google.maps.drawing.OverlayType.POLYGON;
|
||
|
|
var startDrawingMode = shape!==null ? null : drawingMode;
|
||
|
|
var shapeOptions = (shape_type === 'polyline') ? polylineOptions() : polygonOptions();
|
||
|
|
|
||
|
|
var drawingManager = new google.maps.drawing.DrawingManager({
|
||
|
|
drawingMode: startDrawingMode,
|
||
|
|
drawingControl: shape===null,
|
||
|
|
drawingControlOptions: {
|
||
|
|
position: google.maps.ControlPosition.TOP_RIGHT,
|
||
|
|
drawingModes: [shape_type]
|
||
|
|
},
|
||
|
|
polylineOptions: shapeOptions,
|
||
|
|
polygonOptions: shapeOptions
|
||
|
|
});
|
||
|
|
|
||
|
|
//settings for custom drawing controls
|
||
|
|
var drawingControlDiv = document.createElement('div');
|
||
|
|
var DrawingControl = new drawingControl(drawingControlDiv, map, spremenljivka);
|
||
|
|
drawingControlDiv.index = 1;
|
||
|
|
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(drawingControlDiv);
|
||
|
|
//at start, there is no shape, so no need to show delete button
|
||
|
|
DrawingControl.style.display = (shape!==null && !viewMode) ? 'inline-block' : 'none';
|
||
|
|
|
||
|
|
if(shape!==null){
|
||
|
|
shape.type = shape_type;
|
||
|
|
createBoundsFromPath( shape.getPath() , spremenljivka );
|
||
|
|
map.fitBounds(bounds[spremenljivka]);
|
||
|
|
afterShapeCompleteSettings(drawingManager, DrawingControl, shape, spremenljivka, map);
|
||
|
|
}
|
||
|
|
|
||
|
|
//listener when user colpetes shape
|
||
|
|
google.maps.event.addListener(drawingManager, shape_type+'complete', function(shape) {
|
||
|
|
shape.type = shape_type;
|
||
|
|
afterShapeCompleteSettings(drawingManager, DrawingControl, shape, spremenljivka, map);
|
||
|
|
});
|
||
|
|
|
||
|
|
drawingManager.setMap(map);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Sets all kind of settings after shape is complete
|
||
|
|
*
|
||
|
|
* @param {type} drawingManager - google's drawingManager
|
||
|
|
* @param {type} DrawingControl - button for removing a shape
|
||
|
|
* @param {google's shape} shape - polyline or polygon if already exists
|
||
|
|
* @param {type} spremenljivka - id spremenljivke
|
||
|
|
* @param {type} map - google map on which we are drawing shape
|
||
|
|
* @returns {undefined}
|
||
|
|
*/
|
||
|
|
function afterShapeCompleteSettings(drawingManager, DrawingControl, shape, spremenljivka, map){
|
||
|
|
//hide controls
|
||
|
|
drawingManager.setOptions({
|
||
|
|
drawingControl: false
|
||
|
|
});
|
||
|
|
//stop drawing
|
||
|
|
drawingManager.setDrawingMode(null);
|
||
|
|
//show delete button
|
||
|
|
DrawingControl.style.display = 'inline-block';
|
||
|
|
|
||
|
|
// Setup the click event listener for delete button
|
||
|
|
DrawingControl.addEventListener('click', function() {
|
||
|
|
clearAndMakeDrawableAgain(spremenljivka, shape, DrawingControl, drawingManager);
|
||
|
|
});
|
||
|
|
|
||
|
|
shapeInputHandler(shape, spremenljivka);
|
||
|
|
|
||
|
|
//hide warning info for ending a shape
|
||
|
|
var end_info_warning = document.getElementById("end_shape_info_"+spremenljivka);
|
||
|
|
end_info_warning.style.display = "none";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Liteners when editing a shape
|
||
|
|
*/
|
||
|
|
//when editing end or start point
|
||
|
|
google.maps.event.addListener(shape.getPath(), 'set_at', function(index, obj) {
|
||
|
|
shapeInputHandler(shape, spremenljivka);
|
||
|
|
});
|
||
|
|
//when inserting new point (break old one)
|
||
|
|
google.maps.event.addListener(shape.getPath(), 'insert_at', function(index, obj) {
|
||
|
|
shapeInputHandler(shape, spremenljivka);
|
||
|
|
});
|
||
|
|
//when deleting a point -> undo
|
||
|
|
google.maps.event.addListener(shape.getPath(), 'remove_at', function(index, obj) {
|
||
|
|
shapeInputHandler(shape, spremenljivka);
|
||
|
|
});
|
||
|
|
|
||
|
|
setDeleteMenu(shape, map, spremenljivka, DrawingControl, drawingManager)
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 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
|
||
|
|
* @param {type} drawingManager - google's drawingManager
|
||
|
|
* @param {type} DrawingControl - button for removing a shape
|
||
|
|
* @returns {undefined}
|
||
|
|
*/
|
||
|
|
function setDeleteMenu(shape, map, spremenljivka, DrawingControl, drawingManager) {
|
||
|
|
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, DrawingControl, drawingManager);
|
||
|
|
});
|
||
|
|
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, DrawingControl, drawingManager);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Ce obstajajo podatki v bazi izrisi info shapes
|
||
|
|
* Kreirajo se markerji, shranjeni v bazi.
|
||
|
|
* @param spremenljivka int id spremenljivke
|
||
|
|
* @param map_data JSON Object
|
||
|
|
*/
|
||
|
|
function map_data_fill_info_shapes(spremenljivka, map_data) {
|
||
|
|
//because of viewing a filled survey at data section
|
||
|
|
var fillMode = (document.getElementById("map_"+spremenljivka) !== null);
|
||
|
|
|
||
|
|
//pridobi mapo spremenljivke
|
||
|
|
var map;
|
||
|
|
if(fillMode)
|
||
|
|
map = document.getElementById("map_"+spremenljivka).gMap;
|
||
|
|
else
|
||
|
|
map = document.getElementById("map_canvas_all").gMap;
|
||
|
|
|
||
|
|
|
||
|
|
var shapeOption = polylineOptions(map);
|
||
|
|
|
||
|
|
for (var i=0; i<map_data.length; i++)
|
||
|
|
{
|
||
|
|
var color = mapShapeColors[i % 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);
|
||
|
|
|
||
|
|
//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 label for title
|
||
|
|
var Title = document.createElement("label");
|
||
|
|
Title.style.cssText = "font-size:1em;";
|
||
|
|
Title.innerHTML = '<b>' + map_data[i].address + '</b>';
|
||
|
|
container.appendChild(Title);
|
||
|
|
|
||
|
|
shape.ifnowin = container;
|
||
|
|
shape.address = map_data[i].address;
|
||
|
|
var infow = new google.maps.InfoWindow();
|
||
|
|
|
||
|
|
google.maps.event.addListener(shape, 'mouseover', function(ev) {
|
||
|
|
this.setOptions({strokeWeight: 6, zIndex: 2});
|
||
|
|
//open infowindow if title exists
|
||
|
|
if(this.address){
|
||
|
|
infow.setContent(this.ifnowin);
|
||
|
|
infow.setPosition(ev.latLng);
|
||
|
|
infow.open(map);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
google.maps.event.addListener(shape, 'mouseout', function() {
|
||
|
|
this.setOptions({strokeWeight: 4, zIndex: 1});
|
||
|
|
infow.close();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Clears the map, deletes all inputs, hides "Clear" button and sets drawing mode on
|
||
|
|
* @param {type} spremenljivka - id spremenljivke
|
||
|
|
* @param {google's shape} shape - polyline or polygon
|
||
|
|
* @param {type} drawingManager - google's drawingManager
|
||
|
|
* @param {type} DrawingControl - button for removing a shape
|
||
|
|
* @returns {undefined}
|
||
|
|
*/
|
||
|
|
function clearAndMakeDrawableAgain(spremenljivka, shape, DrawingControl, drawingManager){
|
||
|
|
//remove shape
|
||
|
|
shape.setMap(null);
|
||
|
|
//remove all hidden inputs of a shape
|
||
|
|
deleteAllShapeInputs(spremenljivka);
|
||
|
|
//hide delete button
|
||
|
|
DrawingControl.style.display = 'none';
|
||
|
|
//show drawing controls
|
||
|
|
drawingManager.setOptions({
|
||
|
|
drawingControl: true
|
||
|
|
});
|
||
|
|
|
||
|
|
//start drawing
|
||
|
|
drawingManager.setDrawingMode(shape.type);
|
||
|
|
|
||
|
|
//show warning info for ending a shape
|
||
|
|
var end_info_warning = document.getElementById("end_shape_info_"+spremenljivka);
|
||
|
|
end_info_warning.style.display = "inline-block";
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 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
|
||
|
|
* @param {type} drawingManager - google's drawingManager
|
||
|
|
* @param {type} DrawingControl - button for removing a shape
|
||
|
|
* @returns {undefined}
|
||
|
|
*/
|
||
|
|
/*function removeVertex(spremenljivka, shape, vertex, DrawingControl, drawingManager) {
|
||
|
|
if (!shape || vertex == undefined)
|
||
|
|
return;
|
||
|
|
|
||
|
|
shape.getPath().removeAt(vertex);
|
||
|
|
|
||
|
|
if(shape.getPath().length < 2){
|
||
|
|
clearAndMakeDrawableAgain(spremenljivka, shape, DrawingControl, drawingManager);
|
||
|
|
}
|
||
|
|
}*/
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Handle hidden input - remove old, create new
|
||
|
|
* @param {google's shape} shape - polyline or polygon
|
||
|
|
* @param {int} spremenljivka - id spremenljivke
|
||
|
|
* @returns {undefined}
|
||
|
|
*/
|
||
|
|
function shapeInputHandler(shape, spremenljivka){
|
||
|
|
deleteAllShapeInputs(spremenljivka);
|
||
|
|
createAllShapeInputs( shape.getPath(), spremenljivka );
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* create hidden inputs of all points of shape
|
||
|
|
* @param {type} path shape.getPath()
|
||
|
|
* @param {int} spremenljivka - id spremenljivke
|
||
|
|
*/
|
||
|
|
function createAllShapeInputs( path , spremenljivka ) {
|
||
|
|
var pathArray = path.getArray();
|
||
|
|
for( var i = 0, n = pathArray.length; i < n; i++ ) {
|
||
|
|
var latLng = pathArray[i];
|
||
|
|
createShapeInput(spremenljivka, { lat: latLng.lat(), lng: latLng.lng() }, i+1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* create hidden input of shape data
|
||
|
|
* @param {type} spremenljivka - int - id spremenljivke
|
||
|
|
* @param {type} vertices - array of lat and lng
|
||
|
|
* @param {type} index - order of point
|
||
|
|
* @returns {undefined}
|
||
|
|
*/
|
||
|
|
function createShapeInput(spremenljivka, vertices, index) {
|
||
|
|
//najdi element za drzanje variabel
|
||
|
|
var $variable_holder = $("#spremenljivka_" + spremenljivka + "_variabla");
|
||
|
|
|
||
|
|
//kreiraj input s statičnimi podatki markerja
|
||
|
|
var $shapeInput = $("<input>", {name: "vrednost_" + spremenljivka + "[]",
|
||
|
|
type: "hidden", class: "shape_input",
|
||
|
|
value: index + "|" + vertices.lat + "|" + vertices.lng});
|
||
|
|
$variable_holder.append($shapeInput);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* delete all hidden inputs of shape
|
||
|
|
* @param {type} spremenljivka - id spremenljivke
|
||
|
|
*/
|
||
|
|
function deleteAllShapeInputs(spremenljivka) {
|
||
|
|
//brisi vse inpute s staticnimi podatki shape
|
||
|
|
$('#spremenljivka_' + spremenljivka + '_variabla').find('input.shape_input').remove();
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Ce obstajajo podatki v bazi (rec. uporabnik klikne 'Prejsnja stran').
|
||
|
|
* Kreira se shape, shranjena v bazi.
|
||
|
|
* @param spremenljivka int id spremenljivke
|
||
|
|
* @param map_data JSON Object
|
||
|
|
* @param shape_type - string - type of shape 'polyline' or 'polygon'
|
||
|
|
*/
|
||
|
|
function map_data_fill_shape(spremenljivka, map_data, shape_type){
|
||
|
|
//because of viewing a filled survey at data section
|
||
|
|
var fillMode = (document.getElementById("map_"+spremenljivka) !== null);
|
||
|
|
|
||
|
|
//pridobi mapo spremenljivke
|
||
|
|
var map;
|
||
|
|
if(fillMode)
|
||
|
|
map = document.getElementById("map_"+spremenljivka).gMap;
|
||
|
|
else
|
||
|
|
map = document.getElementById("map_canvas_all").gMap;
|
||
|
|
|
||
|
|
var shapeOption = shape_type === 'polyline' ? polylineOptions(map) : polygonOptions(map);
|
||
|
|
|
||
|
|
//for respondents, fill a map
|
||
|
|
if(fillMode){
|
||
|
|
//set and show the shape
|
||
|
|
shapeOption.path = map_data;
|
||
|
|
var shape = shape_type === 'polyline' ?
|
||
|
|
new google.maps.Polyline(shapeOption) : new google.maps.Polygon(shapeOption);
|
||
|
|
|
||
|
|
//alsways viewMode = false, except at insight into survey at data
|
||
|
|
//if not viewMode, create shape inputs and start drawing
|
||
|
|
if(!viewMode){
|
||
|
|
//create hidden inputs of shape
|
||
|
|
createAllShapeInputs( shape.getPath() , spremenljivka );
|
||
|
|
|
||
|
|
//set all data for shape drawing
|
||
|
|
drawShape(spremenljivka, shape, shape_type);
|
||
|
|
}
|
||
|
|
//if viewMode, just create and fit bounds
|
||
|
|
else{
|
||
|
|
//set bounds
|
||
|
|
createBoundsFromPath( shape.getPath() , spremenljivka );
|
||
|
|
map.fitBounds(bounds[spremenljivka]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//for admins, show shapes
|
||
|
|
else{
|
||
|
|
var keys = Object.keys(map_data);
|
||
|
|
|
||
|
|
for (var i=0; i<keys.length; i++)
|
||
|
|
{
|
||
|
|
var color = mapShapeColors[i % mapShapeColors.length];
|
||
|
|
|
||
|
|
//set and show the shape
|
||
|
|
shapeOption.path = map_data[keys[i]];
|
||
|
|
shapeOption.strokeColor = '#'+color;
|
||
|
|
shapeOption.strokeColorOrg = '#'+color;
|
||
|
|
var shape = shape_type === 'polyline' ?
|
||
|
|
new google.maps.Polyline(shapeOption) : new google.maps.Polygon(shapeOption);
|
||
|
|
|
||
|
|
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}); });
|
||
|
|
|
||
|
|
//set bounds
|
||
|
|
createBoundsFromPath( shape.getPath() , 'all' );
|
||
|
|
map.fitBounds(bounds['all']);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Polyline options holder
|
||
|
|
* @param map google map, to put polyline in it
|
||
|
|
* @returns {polylineOptions.PolylineAnonym$6}
|
||
|
|
*/
|
||
|
|
function polylineOptions(map){
|
||
|
|
return {
|
||
|
|
strokeColor: 'black',
|
||
|
|
strokeColorOrg: 'black',
|
||
|
|
strokeWeight: 4,
|
||
|
|
clickable: true,
|
||
|
|
editable: !viewMode,
|
||
|
|
zIndex: 1,
|
||
|
|
map: map
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Polygon options holder
|
||
|
|
* @param map google map, to put polygon in it
|
||
|
|
* @returns {polygonOptions.PolygonAnonym$6}
|
||
|
|
*/
|
||
|
|
function polygonOptions(map){
|
||
|
|
return {
|
||
|
|
strokeColor: 'black',
|
||
|
|
strokeColorOrg: 'black',
|
||
|
|
strokeWeight: 4,
|
||
|
|
clickable: true,
|
||
|
|
editable: !viewMode,
|
||
|
|
zIndex: 1,
|
||
|
|
map: map
|
||
|
|
};
|
||
|
|
}
|