Convert GIS to HTML



فيديوهات شرح منظومة سمارت جى اى اس Smart GIS Tutorials Videos
GIS Software Convert GIS Shape files and rectified images to HTML Google Map Web Mapping and Mobile Application by Smart GIS Map Editor and GPS Tracking 2017

Kindly find Our Convert GIS to HTML Open Source Code Library functions names.

All the following functions are available and running in our converted HTML GIS Web and Mobile Applications.



How to convert shape files to HTML? 
1. Download the free GIS Software Elshayal Smart GIS 17.001
https://drive.google.com/file/d/0B2qR4wxKKE_VUmR6V2hYRHRqb2c/view?usp=sharing

2. Setup it and then run ElshayalSmart.exe

3. for Example kindly download Cairo shape files and open project Cairo.arb
https://drive.google.com/file/d/0B2qR4wxKKE_VaEw4QlNkcmFZOFU/view?usp=sharing

4. Adjust Layer color  : Layer proprieties -> color

5. Adjust Layer Label :  Layer proprieties -> Label

6. Press menu -> Tools -> convert shape files to HTML GIS web site application

7. In  Convert all visible shape files to html GIS web site application frame
    a. Press Browse to Select your Html5 web site target sub directory
    b. Check Table Data box to assure sending attribute text data table
    c. Press Convert

As On line example of Converted GIS Shape files to HTML Google Map Web Mapping and Mobile Application 
by using GIS Software Elshayal Smart GIS 
http://smartgis.us/
OR
http://egygpstracking.com/SmartGIS/index.html

Example of Mobile Application
https://play.google.com/store/apps/details?id=com.freesmartgisgmail.com.gpstrackingmap

https://play.google.com/store/apps/details?id=com.freesmartgisgmail.com.SmartGISGPSSoftware

Shape Converting Example









تسجيل منظومة سمارت جى اى اس  ايتيدا  Smart GIS Registeration in ITIDA
https://login.itida.gov.eg/ViewProfileFull.aspx?ID=2814

شهادات منظومة سمارت جى اى اس Smart GIS Certificates
https://drive.google.com/folderview?id=0B2qR4wxKKE_VflFBZk5mcTRneWRoTVhMLUlPTXZ6SXJuOUdfdFp6amMyQURHSlYxZUoyR0U&usp=sharing

HTML5 Web Site result

Smart GIS Headers
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBwvUThAyuM3yUnAVBRpNMUp9syAbMaWzg&libraries=places&v=3.exp&language="></script>
<script type="text/javascript" charset="UTF-8" src="https://storage.googleapis.com/mapapi/api/16007/SGapi.js" async></script>

 <!--#include file="DBcls.asp"-->


Smart GIS Layers Open Source functions

A)  Menu Functions  
1)      ShowDiv('DivId') ;
2)      HideDiv('DivId') ;
3)      ClearDropDown('DivId') ;

B)  XmlHttpRequest Functions
1)      SendFunc('fUrl', 'fParam', 'fTarget') ;
2)      SendFuncGet('fUrl', 'fParam', 'fTarget') ;
3)      SendFuncPost('fUrl', 'fParam', 'fTarget') ;
4)      SetSendFuncPath('Fpath') ;
5)      GetFormParams('FormID') ;

C)  Event Functions
1)      StartTimeOutFunc('FuncName()', TimeML) ;
2)      StopTimeOutFunc() ;
3)      SetGMapEventFunc('MapEventFunc') ;
4)      StartGpsWatch(LyrNo, 'clr', 'str', TimerInterval) ;
5)      StopGpsWatch() ;
6)      SetGpsMoveFunc('GpsMvFunc') ;
7)      SetGpsClickFunc('GpsClkFunc') ;
8)      SetGClickFunc(LyrNo, 'ClickFunc') ;
return true to open info window
9)      SetGDragFunc(LyrNo, 'DragFunc') ;

D) Map Functions
1)      SetGMap(MapNo, 'DivId', zom, Lat, Lng, Mtyp, scleCntrl, navigatCntrl, disableDblClickZom, scrllwhel, drggble) ;
   Mtyp :
   google.maps.MapTypeId.ROADMAP
   google.maps.MapTypeId.SATELLITE
   google.maps.MapTypeId.TERRAIN
   google.maps.MapTypeId.HYBRID
2)      SetGMapNo(MapNo) ;
3)      SetGMapOptions(MapNo, zom, Lat, Lng, Mtyp, scleCntrl, navigatCntrl, disableDblClickZom, scrllwhel, drggble) ;
4)      SetGMapFreeOptions(MapNo, 'Options') ;
5)      ShowGTrafficLayer(MapNo) ;
6)      HideGTrafficLayer(MapNo) ;
7)      GetGmapZoom(MapNo) ;
8)      GetGmapType(MapNo) ;
9)      GetGmapCntrLat(MapNo) ;
10)  GetGmapCntrLng(MapNo) ;
11)  LoadGCookies(MapNo) ;
12)  SaveGCookies(MapNo) ;
13)  GetGAddressPlaces(MapNo, 'Address', LyrNo, 'DivID', 'DivHdr', 'Allclr', 'ClickClr', zom) ;
14)  SetGInputSearchBox(MapNo, 'InputBoxID', LyrNo, 'DivID', 'DivHdr', 'Allclr', 'ClickClr', zom) ;
  InputBoxID: the id of your Input Search box
15)  getAddress('address', 'hdr', LyrNo, 'DivID', 'Allclr', 'ClickClr', zom) ;
16)  SetGDirStart(LyrNo) ;
17)  SetGDirEnd(LyrNo) ;
18)  ShowGoogleDirection(LyrNo, 'DivId') ;
19)  HideGoogleDirection(LyrNo, 'DivId') ;
20)  CalcRoute(LyrNo, 'TrvMode', 'DivId') ;
  TrvMode:
   DRIVING
   WALKING
   BICYCLING
   TRANSIT
21)  CalcRouteWayPoints(LyrNo, WpsLyrNo, 'TrvMode', 'DivId') ;
22)  getGpsPos(LyrNo, 'clr', 'str') ;
23)  GetGpsLat() ;
24)  GetGpsLng() ;
25)  SetGpsCenter() ;

E)   Layer Functions
1)      GetGLayersCount() ;
2)      GetGFeatsCount(LyrNo) ;
3)      SetGLabelClsNm('clsNm') ;
4)      SetGFeatLabelClsNm(LyrNo, id, 'LabelClsNm') ;
5)      SetGLayerLabelClsNm(LyrNo, 'LabelClsNm') ;
6)      SetGLayer(LyrNo, GTyp) ;
   GTyp :
   1 for points
   2 for polyline
   3 for polygon
7)      GetGLayerType(LyrNo) ;
8)      GetGLayerMapNo(LyrNo) ;
9)      SetGFeatInfo(LyrNo, id, 'cod', 'lbl', 'strokeColor', strokeOpacity, strokeWeight, 'fillColor', fillOpacity, size) ;
10)  SetGLayerInfo(LyrNo, 'strokeColor', strokeOpacity, strokeWeight, 'fillColor', fillOpacity, size) ;
11)  SetGPath(LyrNo, id, pth) ;
12)  SetGPoint(LyrNo, id, Lat, Lng) ;
13)  SetGPolyline(LyrNo, id, cntLat, cntLng) ;
14)  SetGPolygon(LyrNo, id, cntLat, cntLng) ;
15)  SetGImageFirstPoint(LyrNo, Lat, Lng) ;
16)  SetGImageSecondPoint(LyrNo, Lat, Lng) ;
17)  SetGImage(LyrNo, 'ImgSrc') ;
18)  SetGInfoWinContent(LyrNo, id, 'contentStr') ;
19)  SetGLayerZoom(LyrNo, Min, Max) ;
20)  SetGLabelZoom(LyrNo, Min, Max) ;
21)  RefreshGFeature(LyrNo, id) ;
22)  IsSelectedGFeature(LyrNo, id) ;
23)  SelectGFeature(LyrNo, id, 'clr') ;
24)  UnSelectGFeature(LyrNo, id) ;
25)  SetGMarkerCenter(LyrNo, id) ;
26)  SetGFeatCenter(LyrNo, id) ;
27)  SetGDraggable(LyrNo, id, TF) ;
  TF: true or false
28)  SetGFeatDraggable(LyrNo, id, TF) ;
  TF: true or false
29)  SetGLayerDraggable(LyrNo, TF) ;
  TF: true or false
30)  GetGClickFunc(LyrNo) ;
31)  ConfirmClick(LyrNo, id) ;
32)  ConfirmDrag(LyrNo, id) ;
33)  CancelDrag(LyrNo, id) ;
34)  FindPolygonByPoint(LyrNo, Pnt, StrtFeat) ;
35)  FindFeatByCode(LyrNo, 'cod', StrtFeat) ;
36)  ChangeGClrByCode(LyrNo, 'cod', 'strokeColor', strokeOpacity, strokeWeight, 'fillColor', fillOpacity, size) ;
37)  FindFeatByLabel(LyrNo, 'lbl', StrtFeat) ;
38)  GetLabels(LyrNo, 'lbl', hdr, 'DivID', 'Clr', zom) ;
39)  SetGIcon(LyrNo, id, 'IcoSrc') ;
40)  SetGFeatIcon(LyrNo, id, 'IcoSrc') ;
41)  SetGLayerIcon(LyrNo, 'IcoSrc') ;
42)  HideGFeatIcon(LyrNo, id) ;
43)  HideGLayerIcon(LyrNo) ;
44)  SetGPolylineIcon(LyrNo, id, iconSymbol, Pos) ;
45)  RefreshGLayerExtend(LyrNo) ;
46)  RefreshGLayer(LyrNo) ;
47)  ShowGLayer(LyrNo) ;
48)  HideGLayer(LyrNo, Opacity) ;
49)  ShowGLayerLabel(LyrNo) ;
50)  HideGLayerLabel(LyrNo) ;
51)  SetGLayerExtend(LyrNo) ;
52)  ZoomToGLayer(LyrNo) ;
53)  UnSelectGLayer(LyrNo) ;
54)  SetGfullExtend() ;
55)  ZoomToAllGLayer() ;



















Smart GIS Open Source Code Samples

<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="-1">
    <meta name="Author" content="Mohamed Elshayal">
    <title>GIS Software Elshayal Smart GIS</title>
    <link rel="stylesheet" type="text/css" href="index.css">
    <link rel="icon" href="https://storage.googleapis.com/mapapi/icons/favicon.ico">

    <script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBwvUThAyuM3yUnAVBRpNMUp9syAbMaWzg&libraries=places&v=3.exp&language="></script>
    <script type="text/javascript" charset="UTF-8" src="https://storage.googleapis.com/mapapi/api/16007/SGapi.js" async></script>
    <script type="text/javascript" charset="UTF-8" src="Road.js"></script>
    <script type="text/javascript" charset="UTF-8" src="Points.js"></script>

    <script type="text/javascript" charset="UTF-8">

        function OnResizeFunc() {
            WinWidth = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || screen.width);
            WinHeight = (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || screen.height);
            document.getElementById(String('GoogleDiv')).style.height = String((WinHeight - 48) + 'px');
        }

        function OnLoadFunc() {
            OnResizeFunc();
            SetSendFuncPath('http://egygpstracking.com/SmartGIS/');
            SetGMap(1, 'GoogleDiv', 15, 30.0647135, 31.2198430, google.maps.MapTypeId.ROADMAP, truetruefalsetruetrue);
            SetGLabelClsNm('GoogleLabel');
            try {
                SetPointsGLayer(2); HideGLayerLabel(2); SetGLayerZoom(2, 1, 21); SetGLabelZoom(2, 17, 21);
                SetRoadGLayer(1); HideGLayerLabel(1); SetGLayerZoom(1, 1, 21); SetGLabelZoom(1, 17, 21);
            } catch (err) { }
            ZoomToAllGLayer();
            getGpsPos(100, '#00FFFF''My Location');
            StartGpsWatch(100, '#00FFFF''My Location', 11111);
            SetGInputSearchBox(1, '', 101, '''Places''Green''yellow'null);
            ShowGTrafficLayer(1);
        }
    </script>
</head>
<body class="MainBody" onload="JavaScript: OnLoadFunc();" onresize="JavaScript: OnResizeFunc();">
    <table class="MainLayoutTbl" style="width100%;">
        <tr id="BodyTR" style="width100%;">
            <td id="GoogleTD" class="GooglePrt" style="width100%;">
                <div id="GooglePrtDiv" style="positionrelativewidth100%;">
                    <div id="GoogleDiv" style="width:100%height:500px;"></div>
                    <div id="GoogleBtns" style="positionabsolutetop5ptright20ptz-index1directionltr;">
                        <button class="Btn" onclick="JavaScript: SetGfullExtend();" title="Full Extent">Full Extent</button>
                    </div>
                </div>
            </td>
        </tr>
        <tr id="FooterTR">
            <td class="FooterPrt">
                Copyright resrved for Smart GIS ( Mohamed Elshayal )
            </td>
        </tr>
    </table>
</body>
</html>



No comments:

Post a Comment

Featured Post

GIS Open Source