Hi Abapers,
It was long time ago since I posted something on SCN and these days I'm trying to make, let's say, GIS inside SAP ERP..
So a wanted to be able to draw some polygon on map and then get his coordinates and save them inside SAPs database, but nowhere on the web I couldn't find the whole solution, just fragments. After a couple of days I finally made it and this is my most bare solution:
And the code of course:
*&---------------------------------------------------------------------*
*& Report Z_VE_MAP
*&
*&---------------------------------------------------------------------*
*&
*&
*&---------------------------------------------------------------------*
REPORT z_ve_map.
* objects for browser
DATA: html_control TYPE REF TO cl_gui_html_viewer,
html_container TYPE REF TO cl_gui_custom_container.
DATA: w_url TYPE char255.
TYPES : BEGIN OF y_html,
dataset(255) TYPE c,
END OF y_html.
DATA: e_data TYPE y_html,
ts_data TYPE STANDARD TABLE OF y_html.
DATA: myevent_tab TYPE cntl_simple_events,
myevent TYPE cntl_simple_event.
DATA: ok_code LIKE sy-ucomm,
save_ok LIKE sy-ucomm.
DATA: edframe(255),
edaction(256),
edgetdata(2048),
edpostdataline(1024),
postdata_tab TYPE cnht_post_data_tab,
postdata_wa TYPE cnht_post_data_line,
edquery_table TYPE cnht_query_table.
DATA: query_wa LIKE LINE OF edquery_table,
coord_string TYPE string.
TYPES: mytype TYPE char45.
DATA: lt_split TYPE TABLE OF mytype WITH HEADER LINE,
ls_split TYPE mytype.
TYPES: BEGIN OF coord_type,
flag TYPE c,
rbr TYPE n LENGTH 3,
coor TYPE char45,
END OF coord_type.
DATA: coord_itab TYPE TABLE OF coord_type,
coord_wa TYPE coord_type,
counter TYPE n LENGTH 3 VALUE 0.
*****************************************************
* CLASS cl_myevent_handler *
*****************************************************
CLASS cl_myevent_handler DEFINITION.
PUBLIC SECTION.
METHODS: on_sapevent
FOR EVENT sapevent OF cl_gui_html_viewer
IMPORTING action frame getdata postdata query_table.
ENDCLASS. "cl_myevent_handler DEFINITION
****************************************************
* cl_myevent_handler implementation *
****************************************************
CLASS cl_myevent_handler IMPLEMENTATION.
METHOD on_sapevent.
CLEAR: coord_string, lt_split, ls_split.
LOOP AT postdata INTO postdata_wa.
CONCATENATE coord_string postdata_wa INTO coord_string.
ENDLOOP.
SHIFT coord_string BY 4 PLACES.
SPLIT coord_string AT ')' INTO TABLE lt_split.
LOOP AT lt_split INTO ls_split.
SHIFT ls_split LEFT DELETING LEADING ','.
MODIFY lt_split FROM ls_split.
ENDLOOP.
CLEAR counter.
LOOP AT lt_split INTO ls_split.
SHIFT ls_split LEFT DELETING LEADING '('.
MODIFY lt_split FROM ls_split.
counter = counter + 1.
coord_wa-rbr = counter.
coord_wa-coor = ls_split.
APPEND coord_wa TO coord_itab.
CLEAR coord_wa.
ENDLOOP.
ENDMETHOD. "on_sapevent
ENDCLASS. "cl_myevent_handler IMPLEMENTATION
DATA: evt_receiver TYPE REF TO cl_myevent_handler.
*&---------------------------------------------------------------------*
*& Module STATUS_0100 OUTPUT
*&---------------------------------------------------------------------*
* text
*----------------------------------------------------------------------*
MODULE status_0100 OUTPUT.
* SET PF-STATUS 'xxxxxxxx'.
* SET TITLEBAR 'xxx'.
IF html_container IS INITIAL.
CREATE OBJECT html_container
EXPORTING
container_name = 'CC_BROWSER'
EXCEPTIONS
cntl_error = 1
cntl_system_error = 2
create_error = 3
lifetime_error = 4
lifetime_dynpro_dynpro_link = 5
OTHERS = 6.
CASE sy-subrc.
WHEN 0.
*
WHEN OTHERS.
RAISE cntl_error.
ENDCASE.
ENDIF.
IF html_control IS INITIAL.
CREATE OBJECT html_control
EXPORTING
parent = html_container
EXCEPTIONS
cntl_error = 1
cntl_install_error = 2
dp_install_error = 3
dp_error = 4
OTHERS = 5.
IF sy-subrc <> 0.
RAISE cntl_error.
ENDIF.
* register event
myevent-eventid = html_control->m_id_sapevent.
myevent-appl_event = 'x'.
APPEND myevent TO myevent_tab.
CALL METHOD html_control->set_registered_events
EXPORTING
events = myevent_tab.
CREATE OBJECT evt_receiver.
SET HANDLER evt_receiver->on_sapevent
FOR html_control.
PERFORM build_html.
CALL METHOD html_control->load_data
EXPORTING
type = 'text'
subtype = 'html'
IMPORTING
assigned_url = w_url
CHANGING
data_table = ts_data
EXCEPTIONS
dp_invalid_parameter = 1
dp_error_general = 2
cntl_error = 3
OTHERS = 4.
CALL METHOD html_control->show_url
EXPORTING
url = w_url
EXCEPTIONS
cntl_error = 1
cnht_error_not_allowed = 2
cnht_error_parameter = 3
dp_error_general = 4
OTHERS = 5.
ENDIF.
ENDMODULE. " STATUS_0100 OUTPUT
*&---------------------------------------------------------------------*
*& Form BUILD_HTML
*&---------------------------------------------------------------------*
* text
*----------------------------------------------------------------------*
* --> p1 text
* <-- p2 text
*----------------------------------------------------------------------*
FORM build_html .
CLEAR e_data.
FREE ts_data.
DEFINE e_data.
append &1 to ts_data.
END-OF-DEFINITION.
e_data:
'<html><head>',
'<meta name="viewport" content="initial-scale=1.0, user-scalable=no">',
'<meta charset="utf-8">',
'<style>html,body,#map-canvas{height:100%;margin:0px;padding:0px}</style>',
'<script type="text/javascript" ',
'src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing"></script>',
'<script> var map; var drawingManager; function initialize() {',
'var mapOptions = { zoom: 10,',
'center: new google.maps.LatLng(45.10842334, 20.15853882),',
'mapTypeId: google.maps.MapTypeId.TERRAIN };',
'map = new google.maps.Map(document.getElementById(''map-canvas''), mapOptions);',
'drawingManager = new google.maps.drawing.DrawingManager({',
'drawingMode: google.maps.drawing.OverlayType.POLYGON,',
'drawingControl: false, polygonOptions: {',
'fillColor: "#0080FF", fillOpacity: .6,',
'strokeWeight: 1, strokeColor: "#150070",',
'clickable: false, editable: true, zIndex: 1 } });',
'drawingManager.setMap(map);',
'google.maps.event.addListener(drawingManager, ''polygoncomplete'', function (polygon) {',
'var coordinates = (polygon.getPath().getArray());',
'var formInfo = document.forms[''info''];',
'formInfo.gps.value = coordinates;',
'document.getElementById("getcoord").submit(); }); }',
'google.maps.event.addDomListener(window, ''load'', initialize);',
'</script></head><body>',
'<div id="map-canvas"></div>',
'<form id="getcoord" method="POST" action=SAPEVENT:COORD name="info">',
'<input type="hidden" name="gps" value=""></form>',
'</body></html>'.
ENDFORM. " BUILD_HTML
*&SPWIZARD: DECLARATION OF TABLECONTROL 'TC_COORD' ITSELF
CONTROLS: tc_coord TYPE TABLEVIEW USING SCREEN 0100.
*&SPWIZARD: OUTPUT MODULE FOR TC 'TC_COORD'. DO NOT CHANGE THIS LINE!
*&SPWIZARD: UPDATE LINES FOR EQUIVALENT SCROLLBAR
MODULE tc_coord_change_tc_attr OUTPUT.
DESCRIBE TABLE coord_itab LINES tc_coord-lines.
ENDMODULE. "TC_COORD_CHANGE_TC_ATTR OUTPUT
*&SPWIZARD: INPUT MODUL FOR TC 'TC_COORD'. DO NOT CHANGE THIS LINE!
*&SPWIZARD: MARK TABLE
MODULE tc_coord_mark INPUT.
DATA: g_tc_coord_wa2 LIKE LINE OF coord_itab.
IF tc_coord-line_sel_mode = 1
AND coord_wa-flag = 'X'.
LOOP AT coord_itab INTO g_tc_coord_wa2
WHERE flag = 'X'.
g_tc_coord_wa2-flag = ''.
MODIFY coord_itab
FROM g_tc_coord_wa2
TRANSPORTING flag.
ENDLOOP.
ENDIF.
MODIFY coord_itab
FROM coord_wa
INDEX tc_coord-current_line
TRANSPORTING flag.
ENDMODULE. "TC_COORD_MARK INPUT
*&---------------------------------------------------------------------*
*& Module USER_COMMAND_0100 INPUT
*&---------------------------------------------------------------------*
* text
*----------------------------------------------------------------------*
MODULE user_command_0100 INPUT.
save_ok = ok_code.
CLEAR ok_code.
CASE save_ok.
WHEN 'DEL'.
CLEAR coord_itab.
ENDCASE.
ENDMODULE. " USER_COMMAND_0100 INPUT
Feel free to ask a question and I will gladly answer if I know the answer
Happy coding!