Created
June 5, 2018 07:25
-
-
Save ahmadwaliesipick/ea75f780003b3f9ab0b051df2fbfc481 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var featuresArr = []; | |
| var btnDelete, selectedGraphic, btnSave, alreadyLoad; | |
| var map, editToolbar; | |
| var lat = ""; | |
| var long = ""; | |
| var tb; | |
| var mapZoom; | |
| var shapeInfo = ''; | |
| var vectorLayerArr = []; | |
| var selectedTrekInfo = {}; | |
| var selectedTrekInfoData = []; | |
| var basemapInfoBM = ''; | |
| var pointBM = ''; | |
| var current_lat = ''; | |
| var current_lon = ''; | |
| var editOver = false; | |
| var myGlobalEditObj = {}; | |
| var undoManager; //undo/redo | |
| var graphicCount = 0; | |
| var mapSourceMinZoom, mapSourceMaxZoom; | |
| var prev_lat, prev_lon; | |
| var MINZOOM = 1 | |
| var MAXZOOM = 22 | |
| function EditTrekInfo(data, mapSourcesData) { | |
| //We will set mapZoom dynamically by data.mapZoom once come from db | |
| // mapZoom = 8; | |
| var basemapType = data.basemapType || 'topo'; | |
| var trpId = data._id; | |
| if (data.tripZoom == undefined) { | |
| mapZoom = 12; | |
| } | |
| else { | |
| mapZoom = data.tripZoom; | |
| } | |
| if((localStorage.getItem("zoomSet"+trpId) != '') && (localStorage.getItem("zoomSet"+trpId) != undefined) ){ | |
| mapZoom = localStorage.getItem("zoomSet"+trpId); | |
| //localStorage.setItem("zoomSet",'') | |
| } | |
| if((localStorage.getItem("lon"+trpId) != '') && (localStorage.getItem("lon"+trpId) != undefined) ){ | |
| lat = parseFloat(localStorage.getItem("lon"+trpId)); | |
| long = parseFloat(localStorage.getItem("lat"+trpId)); | |
| // localStorage.setItem("zoomSet",'') | |
| } | |
| localStorage.setItem("chkExistingTrek", 'Available'); | |
| for (var j = 0; j < data.features.length; j++) { | |
| if (data.features[j].geometry.type == "point" || data.features[j].geometry.type == "Point") { | |
| lat = data.features[j].geometry.coordinates.x || data.features[j].geometry.coordinates[0]; | |
| long = data.features[j].geometry.coordinates.y || data.features[j].geometry.coordinates[1]; | |
| } else if (data.features[j].geometry.type == "multipoint") { | |
| lat = data.features[j].geometry.coordinates[0][0]; | |
| long = data.features[j].geometry.coordinates[0][1]; | |
| } else if (data.features[j].geometry.type == "polyline" || data.features[j].geometry.type == "LineString") { | |
| lat = data.features[j].geometry.coordinates[0][0][0] || data.features[j].geometry.coordinates[0][0]; | |
| long = data.features[j].geometry.coordinates[0][0][1] || data.features[j].geometry.coordinates[0][1]; | |
| } else if (data.features[j].geometry.type == "polygon" || data.features[j].geometry.type == "Polygon") { | |
| lat = data.features[j].geometry.coordinates[0][0][0]; | |
| long = data.features[j].geometry.coordinates[0][0][1]; | |
| } else if (data.features[j].geometry.type == "extent") { | |
| lat = data.features[j].geometry.coordinates.xmin; | |
| long = data.features[j].geometry.coordinates.ymin; | |
| } | |
| if (lat !== '' && long !== '') { | |
| break; | |
| } | |
| } | |
| // //----------MapSource DeepLink Start------------- | |
| var checkMapSourceDeepLink = function(field, url) { | |
| var href = url ? url : window.location.href; | |
| var reg = new RegExp('[?&]' + field + '=([^&#]*)', 'i'); | |
| var string = reg.exec(href); | |
| return string ? string[1] : null; | |
| }; | |
| var bsTrip = checkMapSourceDeepLink('trp'); | |
| var bsMap = checkMapSourceDeepLink('m'); | |
| var bsCenter = checkMapSourceDeepLink('loc'); | |
| var bsZoom = checkMapSourceDeepLink('z'); | |
| if (bsMap !== null) { | |
| favoriteBasemap = bsMap; | |
| basemapInfoBM = bsMap; | |
| } else { | |
| // basemapInfoBM = mapInfo.basemapInfo | |
| basemapInfoBM = basemapType; | |
| } | |
| // //--------------------------End-------------------- | |
| require([ | |
| "esri/map", "esri/urlUtils", | |
| "esri/arcgis/utils", | |
| "esri/layers/WebTiledLayer", | |
| "esri/layers/OpenStreetMapLayer", | |
| "esri/layers/VectorTileLayer", "esri/dijit/BasemapGallery", | |
| "esri/toolbars/edit", | |
| "esri/toolbars/draw", | |
| "esri/graphic", | |
| "esri/Color", | |
| "esri/dijit/Search", | |
| // undo/redo start | |
| "esri/undoManager", | |
| "myModules/customoperation", | |
| "dojo/_base/connect", | |
| // "dijit/form/Button", | |
| // undo/redo end | |
| "esri/geometry/Multipoint", | |
| "esri/geometry/Point", | |
| "esri/geometry/Polyline", | |
| "esri/geometry/Polygon", | |
| "esri/geometry/Extent", | |
| "esri/geometry/webMercatorUtils", | |
| "esri/symbols/SimpleLineSymbol", | |
| "esri/symbols/SimpleFillSymbol", | |
| "esri/symbols/TextSymbol", | |
| "esri/symbols/SimpleMarkerSymbol", | |
| "esri/SpatialReference", | |
| "esri/geometry/projection", | |
| "dojo/_base/event", | |
| "dojo/parser", | |
| "dojo/dom", "dojo/on", | |
| "dojo/dom-style", | |
| "dijit/registry", | |
| "dijit/Menu", | |
| "esri/InfoTemplate", | |
| "dijit/form/ToggleButton", | |
| "dijit/form/DropDownButton", | |
| "dijit/CheckedMenuItem", | |
| "dijit/layout/BorderContainer", | |
| "dijit/layout/ContentPane", | |
| "dijit/TitlePane", | |
| "dojo/domReady!" | |
| ], function( | |
| Map, urlUtils, | |
| arcgisUtils, WebTiledLayer, OpenStreetMapLayer, VectorTileLayer, BasemapGallery, Edit, Draw, Graphic, Color, Search, | |
| UndoManager, CustomOperation, connect, //undo/redo | |
| Multipoint, Point, Polyline, Polygon, Extent, webMercatorUtils, | |
| SimpleLineSymbol, SimpleFillSymbol, TextSymbol, SimpleMarkerSymbol,SpatialReference,projection, | |
| event, parser, dom, on, domStyle, registry, Menu, InfoTemplate | |
| ) { | |
| if (!projection.isSupported()) { | |
| alert("client-side projection is not supported"); | |
| return; | |
| } | |
| // load the projection module | |
| const projectionPromise = projection.load(); | |
| //parser.parse(); | |
| esri.config.defaults.map.zoomDuration = 100; //time in milliseconds; default is 500 | |
| esri.config.defaults.map.zoomRate = 10; //refresh rate of zoom animation; default is 25 | |
| // $('#btnSave').hide(); | |
| // $('#btnCancel').show(); | |
| $('#undo').hide(); | |
| $('#redo').hide(); | |
| $('.userDashboard__drawTripActionGroup__saveTrip').hide(); | |
| $('.userDashboard__drawTripActionGroup__clearScreen').hide(); | |
| var locationLayer = new esri.layers.GraphicsLayer(); | |
| // domStyle.set(registry.byId("mainWindow").domNode, "visibility", "visible"); | |
| // undo/redo start | |
| undoManager = new UndoManager(); | |
| $("#undo").on("click", function() { | |
| undoManager.undo(); | |
| graphicCount = graphicCount - 1; | |
| editOver = true; | |
| }); | |
| $("#redo").on("click", function() { | |
| undoManager.redo(); | |
| graphicCount = graphicCount + 1; | |
| editOver = true; | |
| }); | |
| connect.connect(undoManager, "onChange", function() { | |
| //enable or disable buttons depending on current state of application | |
| if (undoManager.canUndo) { | |
| $("#undo").prop('disabled', false); | |
| // $('.userDashboard__drawTripActionGroup__saveTrip').show(); | |
| // $('.userDashboard__drawTripActionGroup__clearScreen').show(); | |
| } else { | |
| $("#undo").prop('disabled', true); | |
| $('.userDashboard__drawTripActionGroup__saveTrip').hide(); | |
| $('.userDashboard__drawTripActionGroup__clearScreen').hide(); | |
| } | |
| if (undoManager.canRedo) { | |
| $("#redo").prop('disabled', false); | |
| } else { | |
| $("#redo").prop('disabled', true); | |
| } | |
| }); | |
| // undo/redo end | |
| if (map) { | |
| alreadyLoad = map; | |
| } | |
| // map = new Map("EditTrekMapDiv", { | |
| // basemap: "topo", | |
| // center: [lat, long], | |
| // zoom: 8, | |
| // maxzoom: 22, | |
| // minzoom: 2 | |
| // }); | |
| // center of the map | |
| /* const pointss = new Point({ | |
| x: 6832.430696818978, | |
| y: -209082.39095501788, | |
| spatialReference: viewSpatialReference | |
| });*/ | |
| const viewSpatialReference = new SpatialReference({ | |
| wkid: 54042 // winkel III | |
| }); | |
| // simple marker symbol to represent earthquake locations | |
| const earthquakeMarker = new SimpleMarkerSymbol("solid", 8, null, new Color([238, 69, 0, 0.5])) | |
| // center of the map | |
| const pointss = new Point({ | |
| x: 6832.430696818978, | |
| y: -209082.39095501788, | |
| spatialReference: viewSpatialReference | |
| }); | |
| map = new Map("map", { | |
| basemap: "topo", | |
| //center: [lat, long], | |
| center: pointss, | |
| zoom: mapZoom, | |
| maxzoom: MAXZOOM, | |
| minzoom: MINZOOM | |
| }); | |
| var mapSources = {}; | |
| mapSources = mapSourcesData; | |
| searchWidgetAlready = dijit.byId("search"); | |
| if (searchWidgetAlready) { | |
| searchWidgetAlready.destroy(); | |
| searchWidgetAlready = null; | |
| } | |
| var search = new Search({ | |
| map: map, | |
| enableInfoWindow: false | |
| }, "search"); | |
| search.startup(); | |
| map.on("load", function() { | |
| projectionPromise.then(function () { | |
| // read the geojson data from esriRequest promise | |
| /*dataRequestPromise.then(function (response) { | |
| // loop through geojson earthquakes and process the data | |
| response.features.map(function (feature, i) { | |
| const inSpatialReference = new SpatialReference({ | |
| wkid: 4326 | |
| }); | |
| // create a point from a geoJSON point and set its spatialReference to WGS84 | |
| const point = new Point(feature.geometry.coordinates, inSpatialReference); | |
| // project the point from WGS84 to winkel III projection | |
| const projectedPoint = projection.project(point, viewSpatialReference); | |
| // create new graphic and set its geometry to the projected point | |
| const attributes = { | |
| ObjectID: i | |
| }; | |
| const graphic = new Graphic(projectedPoint, earthquakeMarker, attributes); | |
| // add the graphic representing earthquake location to the graphicslayer | |
| graphicsLayer.add(graphic); | |
| }); | |
| }) | |
| .otherwise(function (error) { | |
| console.log("error happened while projecting", error); | |
| });*/ | |
| }); | |
| createToolbar() | |
| }); | |
| //map.on("load", createToolbar); | |
| map.on("extent-change", showExtent); | |
| function showExtent(ext) { | |
| var pointBMx = map.extent.getCenter(); | |
| pointBM = webMercatorUtils.webMercatorToGeographic(pointBMx); | |
| zoomInfo = ext.lod.level; | |
| if(pointBM.y){ | |
| current_lat = pointBM.y; | |
| }else{ | |
| var bsCenterData = bsCenter.split(','); | |
| current_lat=parseFloat(bsCenterData[0]) | |
| pointBM.y = current_lat; | |
| } | |
| if(pointBM.x){ | |
| current_lon = pointBM.x; | |
| }else{ | |
| current_lon=parseFloat(bsCenterData[1]) | |
| pointBM.x = current_lon; | |
| } | |
| current_zoom = zoomInfo; | |
| if((localStorage.getItem("edit"+trpId) != '') && (localStorage.getItem("edit"+trpId) != undefined)) { | |
| if ((localStorage.getItem("lon"+trpId) != '') && (localStorage.getItem("lon"+trpId) != undefined)) { | |
| current_lat = parseFloat(localStorage.getItem("lon"+trpId)); | |
| current_lon = parseFloat(localStorage.getItem("lat"+trpId)); | |
| // localStorage.setItem("zoomSet",'') | |
| } | |
| if ((localStorage.getItem("zoomSet"+trpId) != '') && (localStorage.getItem("zoomSet"+trpId) != undefined)) { | |
| current_zoom = localStorage.getItem("zoomSet"+trpId); | |
| // localStorage.setItem("zoomSet",'') | |
| } | |
| localStorage.setItem("edit"+trpId, '') | |
| } | |
| if (mapSourceMinZoom == undefined) { | |
| mapSourceMinZoom = MINZOOM; | |
| } | |
| if (ext.lod.level == mapSourceMinZoom + 1) { | |
| prev_lat = current_lat; | |
| prev_lon = current_lon; | |
| } | |
| if (mapSourceMinZoom == undefined) { | |
| mapSourceMinZoom = MINZOOM; | |
| } | |
| if (mapSourceMaxZoom == undefined) { | |
| mapSourceMaxZoom = MAXZOOM; | |
| } | |
| if (ext.lod.level == mapSourceMinZoom + 1) { | |
| prev_lat = current_lat; | |
| prev_lon = current_lon; | |
| } | |
| if (ext.lod.level < mapSourceMinZoom) { | |
| zoomInfo = current_zoom = mapSourceMinZoom; | |
| // map.centerAndZoom([current_lon, current_lat], mapSourceMinZoom); | |
| map.centerAndZoom([prev_lon, prev_lat], mapSourceMinZoom); | |
| } | |
| if (ext.lod.level > mapSourceMaxZoom) { | |
| zoomInfo = current_zoom = mapSourceMaxZoom; | |
| map.centerAndZoom([current_lon, current_lat], mapSourceMaxZoom); | |
| } | |
| if((parseInt(mapSourceMinZoom) == parseInt(current_zoom))){ | |
| $('.esriSimpleSliderDecrementButton').addClass('esriSimpleSliderDisabledButton') | |
| }else{ | |
| $('.esriSimpleSliderDecrementButton').removeClass('esriSimpleSliderDisabledButton') | |
| } | |
| if((parseInt(mapSourceMaxZoom) == parseInt(current_zoom))){ | |
| map.disableScrollWheel(); | |
| map.disableRubberBandZoom(); | |
| map.disableDoubleClickZoom(); | |
| $('.esriSimpleSliderIncrementButton').addClass('esriSimpleSliderDisabledButton') | |
| }else{ | |
| map.enableScrollWheel(); | |
| map.enableRubberBandZoom(); | |
| map.enableDoubleClickZoom(); | |
| $('.esriSimpleSliderIncrementButton').removeClass('esriSimpleSliderDisabledButton') | |
| } | |
| // //------------Start mapSource DeepLink--------------- | |
| if (basemapInfoBM != '' ) { | |
| //console.log(basemapInfoBM); | |
| var vrdata = '#/trip?trp=' + data._id + '&m=' + basemapInfoBM + '&loc=' + current_lon + ',' + current_lat + '&z=' + current_zoom; | |
| window.location.replace(vrdata); | |
| // history.pushState(null, null, vrdata); | |
| } | |
| // //--------------------End----------------------------- | |
| } | |
| var polygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, | |
| new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, | |
| new Color([0, 0, 255]), | |
| 3), new Color([0, 255, 0, 0.2])); | |
| var polylineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, | |
| new Color([0, 0, 255]), | |
| 3); | |
| var pointSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 20, | |
| new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, | |
| new Color([0, 0, 255]), 1), | |
| new Color([0, 255, 0, 0.25])); | |
| function closeDialog() { | |
| map.graphics.clear(); | |
| map.infoWindow.hide(); | |
| } | |
| function createToolbar() { | |
| addGraphics(); | |
| initToolbar(); | |
| if (!alreadyLoad) { | |
| // editToolbar.deactivate(); | |
| // editToolbar.destroy(); | |
| } | |
| if ((localStorage.getItem("userName") != '') && (localStorage.getItem("userName") != undefined) && (localStorage.getItem("userName") == data.userName)) { | |
| editToolbar = new Edit(map); | |
| editToolbar.on("draw-end", addNewGraphics); | |
| editToolbar.on("scale-stop", function(evt) { | |
| evt.graphic.geometry.featureId = selectedTrekInfo.selectedGraphicId; | |
| evt.graphic.geometry.name = selectedTrekInfo.name; | |
| evt.graphic.geometry.cmt = selectedTrekInfo.cmt; | |
| evt.graphic.geometry.desc = selectedTrekInfo.desc; | |
| }); | |
| } | |
| //Activate the toolbar when you click on a graphic | |
| if ((localStorage.getItem("userName") != '') && (localStorage.getItem("userName") != undefined) && (localStorage.getItem("userName") == data.userName)) { | |
| map.graphics.on("click", function(evt) { | |
| //dbl-click | |
| // editToolbar.activate(Edit.EDIT_VERTICES , evt.graphic); | |
| editOver = true; | |
| if (shapeInfo == '') { | |
| $('.userDashboard__drawTripActionGroup__saveTrip').show(); | |
| $('.userDashboard__drawTripActionGroup__clearScreen').show(); | |
| // $('#btnSave').show(); | |
| // $('#btnCancel').show(); | |
| editOver = true; | |
| // event.stop(evt); | |
| selectedTrekInfo = {}; | |
| selectedTrekInfo.selectedGraphicId = evt.graphic.geometry.featureId; | |
| selectedTrekInfo.name = evt.graphic.geometry.name; | |
| selectedTrekInfo.cmt = evt.graphic.geometry.cmt; | |
| selectedTrekInfo.desc = evt.graphic.geometry.desc; | |
| // if(evt.graphic.geometry.name !=='' ||evt.graphic.geometry.cmt !=='' ||evt.graphic.geometry.desc !=='') | |
| // { | |
| // selectedTrekInfoData.push(selectedTrekInfo); | |
| // } | |
| selectedGraphic = evt.graphic; | |
| // $('#btnSaveGraphic').hide(); | |
| $('#btnDeleteGraphic').show(); | |
| $('#btnAddTrekInfo').show(); | |
| event.stop(evt); | |
| activateToolbar(evt.graphic); | |
| } | |
| }); | |
| } | |
| //deactivate the toolbar when you click outside a graphic | |
| map.on("click", function(evt) { | |
| console.log('click') | |
| // $('#btnSaveGraphic').show(); | |
| $('#btnDeleteGraphic').hide(); | |
| $('#btnAddTrekInfo').hide(); | |
| if (editOver) { | |
| editOver = false; | |
| } | |
| selectedGraphic = ""; | |
| editToolbar.deactivate(); | |
| newUpdateGraphics(); | |
| // updateGraphics(); | |
| }); | |
| map.on("double-click", function(evt) { | |
| evt.stopPropagation(); | |
| }); | |
| map.on("mouse-wheel", function(evt) { | |
| evt.stopPropagation(); | |
| }); | |
| map.graphics.enableMouseEvents(); | |
| // map.graphics.on("mouse-out", closeDialog); | |
| } | |
| myGlobalEditObj = { | |
| editTrek: function updateGraphics(objArr) { | |
| featuresArr = []; | |
| // var geoArr = map.graphics.graphics; | |
| var geoArr = objArr; | |
| for (var k = 0; k < geoArr.length; k++) { | |
| var trkInfoData; | |
| if (geoArr[k].geometry.featureId !== undefined && geoArr[k].geometry.featureId !== null) { | |
| trkInfoData = selectedTrekInfoData.find(x => x.selectedGraphicId === geoArr[k].geometry.featureId) | |
| } | |
| if (trkInfoData == undefined || trkInfoData == null || trkInfoData == '') { | |
| trkInfoData = {}; | |
| trkInfoData.name = ''; | |
| trkInfoData.cmt = ''; | |
| trkInfoData.desc = ''; | |
| } | |
| var featuresObj = { | |
| type: "Feature", | |
| properties: { | |
| color: new Color([255, 255, 0, 0.25]), | |
| width: 42, | |
| opacity: 1, | |
| name: trkInfoData.name || '', | |
| cmt: trkInfoData.cmt || '', | |
| desc: trkInfoData.desc || '' | |
| } | |
| }; | |
| var geometryObj = {}; | |
| var coordinates; | |
| switch (geoArr[k].geometry.type) { | |
| case "point": | |
| if (geoArr[k].geometry.x !== 0 && geoArr[k].geometry.y !== 0) { | |
| if ((geoArr[k].geometry.y <= 90 && geoArr[k].geometry.y >= -90)) { | |
| coordinates = [ | |
| geoArr[k].geometry.x, | |
| geoArr[k].geometry.y | |
| ]; | |
| } else { | |
| var geoConvert = webMercatorUtils.webMercatorToGeographic(geoArr[k].geometry) | |
| coordinates = [ | |
| geoConvert.x, | |
| geoConvert.y | |
| ]; | |
| } | |
| } | |
| break; | |
| case "multipoint": | |
| if ((geoArr[k].geometry.points[0][1] <= 90 && geoArr[k].geometry.points[0][1] >= -90)) { | |
| coordinates = geoArr[k].geometry.points; | |
| } else { | |
| var geoConvert = webMercatorUtils.webMercatorToGeographic(geoArr[k].geometry) | |
| coordinates = geoConvert.points; | |
| } | |
| break; | |
| //also for freehandpolyline | |
| case "polyline": | |
| //coordinates = geoArr[k].geometry.paths; | |
| if ((geoArr[k].geometry.paths[0][0][1] <= 90 && geoArr[k].geometry.paths[0][0][1] >= -90)) { | |
| coordinates = geoArr[k].geometry.paths; | |
| } else { | |
| var geoConvert = webMercatorUtils.webMercatorToGeographic(geoArr[k].geometry) | |
| coordinates = geoConvert.paths; | |
| } | |
| break; | |
| //also for circle,ellipse,polygon,freehand polygon | |
| case "polygon": | |
| //coordinates = geoArr[k].geometry.rings; | |
| if ((geoArr[k].geometry.rings[0][0][1] <= 90 && geoArr[k].geometry.rings[0][0][1] >= -90)) { | |
| coordinates = geoArr[k].geometry.rings; | |
| } else { | |
| var geoConvert = webMercatorUtils.webMercatorToGeographic(geoArr[k].geometry) | |
| coordinates = geoConvert.rings; | |
| } | |
| break; | |
| case "extent": | |
| if ((geoArr[k].geometry.ymin <= 90 && geoArr[k].geometry.ymin >= -90)) { | |
| coordinates = { | |
| xmin: geoArr[k].geometry.xmin, | |
| ymin: geoArr[k].geometry.ymin, | |
| xmax: geoArr[k].geometry.xmax, | |
| ymax: geoArr[k].geometry.ymax | |
| }; | |
| } else { | |
| var geoConvert = webMercatorUtils.webMercatorToGeographic(geoArr[k].geometry) | |
| coordinates = { | |
| xmin: geoConvert.xmin, | |
| ymin: geoConvert.ymin, | |
| xmax: geoConvert.xmax, | |
| ymax: geoConvert.ymax | |
| }; | |
| } | |
| break; | |
| } | |
| if (coordinates !== undefined && coordinates !== null && coordinates !== '') { | |
| geometryObj = { | |
| type: geoArr[k].geometry.type, | |
| coordinates: coordinates | |
| } | |
| featuresObj.geometry = geometryObj; | |
| featuresObj.basemapType = basemapType || 'topo'; | |
| featuresArr.push(featuresObj); | |
| } | |
| } | |
| var featureCollections = { | |
| type: "FeatureCollection", | |
| features: featuresArr | |
| } | |
| console.log(featuresArr); | |
| } | |
| } | |
| function addGraphics() { | |
| if (basemapType !== 'topo') { | |
| addLayerOnMap(basemapType, true); | |
| } else { | |
| $("#basemapthumbnailId").attr('src', 'modules/images/defaultBasemap.png'); | |
| $("#basemapSpanId").html(''); | |
| } | |
| $('#btnDeleteGraphic').hide(); | |
| $('#undo').show(); | |
| $('#redo').show(); | |
| var newGraphics; | |
| var trekName = data.trekName; | |
| var trekFolder = data.trekFolder; | |
| var imgUrl = (data.imageUrl == undefined || data.imageUrl == null || data.imageUrl == '') ? "modules/images/Background.jpg" : data.imageUrl; | |
| var propName, propCmt, propDesc, propType; | |
| for (var j = 0; j < data.features.length; j++) { | |
| if (data.features[j].geometry.type == "point" || data.features[j].geometry.type == "Point") { | |
| var pointX = data.features[j].geometry.coordinates.x || data.features[j].geometry.coordinates[0]; | |
| var pointY = data.features[j].geometry.coordinates.y || data.features[j].geometry.coordinates[1]; | |
| var point = new Point(pointX, pointY); | |
| // map.graphics.add(new Graphic(point, pointSymbol)); | |
| newGraphics = new Graphic(point, pointSymbol); | |
| // propName = data.features[j].properties.name || ''; | |
| // propCmt = data.features[j].properties.cmt || ''; | |
| // propDesc = data.features[j].properties.desc || ''; | |
| // propType = data.features[j].properties.type || ''; | |
| newGraphics.geometry.featureId = new Date().getTime(); | |
| newGraphics.geometry.name = data.features[j].properties.name || ''; | |
| newGraphics.geometry.cmt = data.features[j].properties.cmt || ''; | |
| newGraphics.geometry.desc = data.features[j].properties.desc || data.features[j].properties.description || ''; | |
| //map.graphics.add(newGraphics);//undo/redo | |
| //--------undo/redo Start------------ | |
| var operation = new CustomOperation.Add({ | |
| graphicsLayer: map.graphics, | |
| addedGraphic: newGraphics | |
| }); | |
| undoManager.add(operation); | |
| map.graphics.add(newGraphics); | |
| //--------undo/redo End-------------- | |
| } else if (data.features[j].geometry.type == "multipoint") { | |
| var multipoint = new Multipoint({ | |
| points: data.features[j].geometry.coordinates | |
| }); | |
| // map.graphics.add(new Graphic(multipoint, pointSymbol)); | |
| newGraphics = new Graphic(multipoint, pointSymbol); | |
| // propName = data.features[j].properties.name || ''; | |
| // propCmt = data.features[j].properties.cmt || ''; | |
| // propDesc = data.features[j].properties.desc || ''; | |
| // propType = data.features[j].properties.type || ''; | |
| newGraphics.geometry.featureId = new Date().getTime(); | |
| newGraphics.geometry.name = data.features[j].properties.name || ''; | |
| newGraphics.geometry.cmt = data.features[j].properties.cmt || ''; | |
| newGraphics.geometry.desc = data.features[j].properties.desc || data.features[j].properties.description || ''; | |
| //map.graphics.add(newGraphics);//undo/redo | |
| //--------undo/redo Start------------ | |
| var operation = new CustomOperation.Add({ | |
| graphicsLayer: map.graphics, | |
| addedGraphic: newGraphics | |
| }); | |
| graphicCount = graphicCount + 1; | |
| undoManager.add(operation); | |
| map.graphics.add(newGraphics); | |
| //--------undo/redo End-------------- | |
| } else if (data.features[j].geometry.type == "polyline" || data.features[j].geometry.type == "LineString") { | |
| var polyline; | |
| if (data.features[j].geometry.type == "LineString") { | |
| polyline = new Polyline({ | |
| "paths": [data.features[j].geometry.coordinates] | |
| }); | |
| } else { | |
| polyline = new Polyline({ | |
| "paths": data.features[j].geometry.coordinates | |
| }); | |
| } | |
| //map.graphics.add(new Graphic(polyline, polylineSymbol)); | |
| newGraphics = new Graphic(polyline, polylineSymbol); | |
| // propName = data.features[j].properties.name || ''; | |
| // propCmt = data.features[j].properties.cmt || ''; | |
| // propDesc = data.features[j].properties.desc || ''; | |
| // propType = data.features[j].properties.type || ''; | |
| newGraphics.geometry.featureId = new Date().getTime(); | |
| newGraphics.geometry.name = data.features[j].properties.name || ''; | |
| newGraphics.geometry.cmt = data.features[j].properties.cmt || ''; | |
| newGraphics.geometry.desc = data.features[j].properties.desc || data.features[j].properties.description || ''; | |
| //map.graphics.add(newGraphics);//undo/redo | |
| //--------undo/redo Start------------ | |
| var operation = new CustomOperation.Add({ | |
| graphicsLayer: map.graphics, | |
| addedGraphic: newGraphics | |
| }); | |
| graphicCount = graphicCount + 1; | |
| undoManager.add(operation); | |
| map.graphics.add(newGraphics); | |
| //--------undo/redo End-------------- | |
| } else if (data.features[j].geometry.type == "polygon" || data.features[j].geometry.type == "Polygon") { | |
| var polygon = new Polygon({ | |
| "rings": data.features[j].geometry.coordinates, | |
| }); | |
| //map.graphics.add(new Graphic(polygon, polygonSymbol)); | |
| newGraphics = new Graphic(polygon, polygonSymbol); | |
| // propName = data.features[j].properties.name || ''; | |
| // propCmt = data.features[j].properties.cmt || ''; | |
| // propDesc = data.features[j].properties.desc || ''; | |
| // propType = data.features[j].properties.type || ''; | |
| newGraphics.geometry.featureId = new Date().getTime(); | |
| newGraphics.geometry.name = data.features[j].properties.name || ''; | |
| newGraphics.geometry.cmt = data.features[j].properties.cmt || ''; | |
| newGraphics.geometry.desc = data.features[j].properties.desc || data.features[j].properties.description || ''; | |
| //map.graphics.add(newGraphics);//undo/redo | |
| //--------undo/redo Start------------ | |
| var operation = new CustomOperation.Add({ | |
| graphicsLayer: map.graphics, | |
| addedGraphic: newGraphics | |
| }); | |
| graphicCount = graphicCount + 1; | |
| undoManager.add(operation); | |
| map.graphics.add(newGraphics); | |
| //--------undo/redo End-------------- | |
| } else if (data.features[j].geometry.type == "extent") { | |
| var extent = new Extent({ | |
| "xmin": data.features[j].geometry.coordinates.xmin, | |
| "ymin": data.features[j].geometry.coordinates.ymin, | |
| "xmax": data.features[j].geometry.coordinates.xmax, | |
| "ymax": data.features[j].geometry.coordinates.ymax | |
| }); | |
| //map.graphics.add(new Graphic(extent, polygonSymbol)); | |
| newGraphics = new Graphic(extent, polygonSymbol); | |
| // propName = data.features[j].properties.name || ''; | |
| // propCmt = data.features[j].properties.cmt || ''; | |
| // propDesc = data.features[j].properties.desc || ''; | |
| // propType = data.features[j].properties.type || ''; | |
| newGraphics.geometry.featureId = new Date().getTime(); | |
| newGraphics.geometry.name = data.features[j].properties.name || ''; | |
| newGraphics.geometry.cmt = data.features[j].properties.cmt || ''; | |
| newGraphics.geometry.desc = data.features[j].properties.desc || data.features[j].properties.description || ''; | |
| //map.graphics.add(newGraphics);//undo/redo | |
| //--------undo/redo Start------------ | |
| var operation = new CustomOperation.Add({ | |
| graphicsLayer: map.graphics, | |
| addedGraphic: newGraphics | |
| }); | |
| graphicCount = graphicCount + 1; | |
| undoManager.add(operation); | |
| map.graphics.add(newGraphics); | |
| //--------undo/redo End-------------- | |
| } | |
| //Info window | |
| // var infoTemplate = new InfoTemplate(); | |
| // infoTemplate.setTitle("<b>"+propName+"</b>"); | |
| // infoTemplate.setContent("<b>cmt : </b>"+propCmt+"<br/>" + | |
| // "<b>desc : </b>"+propDesc+"<br/><br/>" + | |
| // "<b>type : </b>"+propType+"<br/>"); | |
| // | |
| // | |
| // newGraphics.setInfoTemplate(infoTemplate); | |
| // locationLayer.add(newGraphics); | |
| //locationLayer.setOpacity(0); | |
| // if(j==0){ | |
| // map.addLayer(locationLayer) // Makes sure that map is loaded | |
| // } | |
| } | |
| } | |
| // var highlightSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, | |
| // new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, | |
| // new Color([255, 0, 0]), 3), new Color([125, 125, 125, 0.35])); | |
| // locationLayer.on("mouse-over",function (event) { | |
| // | |
| // map.graphics.clear(); //use the maps graphics layer as the highlight layer | |
| // | |
| // var graphic = event.graphic; | |
| // map.infoWindow.setContent(graphic.getContent()); | |
| // map.infoWindow.setTitle(graphic.getTitle()); | |
| // // var highlightSymbol = graphic.geometry.type == "polygon" ? new SimpleFillSymbol():(graphic.geometry.type == "polyline"?new SimpleLineSymbol():new SimpleMarkerSymbol()); | |
| // | |
| // var highlightGraphic = new Graphic(graphic.geometry, highlightSymbol); | |
| // | |
| // map.graphics.add(highlightGraphic); | |
| // map.infoWindow.show(event.screenPoint, | |
| // map.getInfoWindowAnchor(event.screenPoint)); | |
| // | |
| // }); | |
| function activateToolbar(graphic) { | |
| var tool = 0; | |
| if (registry.byId("tool_move").checked) { | |
| tool = tool | Edit.MOVE; | |
| } | |
| if (registry.byId("tool_vertices").checked) { | |
| tool = tool | Edit.EDIT_VERTICES; | |
| } | |
| if (registry.byId("tool_scale").checked) { | |
| tool = tool | Edit.SCALE; | |
| } | |
| if (registry.byId("tool_rotate").checked) { | |
| tool = tool | Edit.ROTATE; | |
| } | |
| // enable text editing if a graphic uses a text symbol | |
| if (graphic.symbol.declaredClass === "esri.symbol.TextSymbol") { | |
| tool = tool | Edit.EDIT_TEXT; | |
| } | |
| //specify toolbar options | |
| var options = { | |
| allowAddVertices: registry.byId("vtx_ca").checked, | |
| allowDeleteVertices: registry.byId("vtx_cd").checked, | |
| uniformScaling: registry.byId("uniform_scaling").checked | |
| }; | |
| editToolbar.activate(tool, graphic, options); | |
| } | |
| //----------------------------------------------------------- | |
| function initToolbar() { | |
| tb = new Draw(map); | |
| tb.on("draw-end", addNewGraphics); | |
| // event delegation so a click handler is not | |
| // needed for each individual button | |
| // on(dom.byId("info"), "click", function(evt) { | |
| // if ( evt.target.id === "info" ) { | |
| // | |
| // return; | |
| // } | |
| // | |
| // var tool = evt.target.id.toLowerCase(); | |
| // | |
| // shapeInfo = tool; | |
| // map.disableMapNavigation(); | |
| // tb.activate(tool); | |
| // }); | |
| on(dom.byId("ulPoint"), "click", function(evt) { | |
| if (evt.target.id === "ulPoint") { | |
| return; | |
| } | |
| var tool = evt.target.id.toLowerCase(); | |
| shapeInfo = tool; | |
| map.disableMapNavigation(); | |
| tb.activate(tool); | |
| }); | |
| on(dom.byId("ulLine"), "click", function(evt) { | |
| if (evt.target.id === "ulLine") { | |
| return; | |
| } | |
| var tool = evt.target.id.toLowerCase(); | |
| shapeInfo = tool; | |
| map.disableMapNavigation(); | |
| tb.activate(tool); | |
| }); | |
| on(dom.byId("ulShape"), "click", function(evt) { | |
| if (evt.target.id === "ulShape") { | |
| return; | |
| } | |
| var tool = evt.target.id.toLowerCase(); | |
| shapeInfo = tool; | |
| map.disableMapNavigation(); | |
| tb.activate(tool); | |
| }); | |
| on(dom.byId("clear_draw"), "click", function(evt) { | |
| map.graphics.clear(); | |
| }); | |
| } | |
| function addNewGraphics(evt) { | |
| // $('#btnSave').show(); | |
| // $('#btnCancel').show(); | |
| $('.userDashboard__drawTripActionGroup__saveTrip').show(); | |
| $('.userDashboard__drawTripActionGroup__clearScreen').show(); | |
| shapeInfo = ''; | |
| // btnSave.style.display = "block"; | |
| // var polygonSymbol = new SimpleFillSymbol(); | |
| // var polylineSymbol = new SimpleLineSymbol(); | |
| // var pointSymbol = new SimpleMarkerSymbol(); | |
| //deactivate the toolbar and clear existing graphics | |
| tb.deactivate(); | |
| map.enableMapNavigation(); | |
| editOver = true; | |
| // figure out which symbol to use | |
| var symbol; | |
| if (evt.geometry.type === "point" || evt.geometry.type === "multipoint") { | |
| symbol = pointSymbol; | |
| } else if (evt.geometry.type === "line" || evt.geometry.type === "polyline") { | |
| symbol = polylineSymbol; | |
| } else { | |
| symbol = polygonSymbol; | |
| } | |
| var featuresObj = { | |
| type: "Feature", | |
| properties: { | |
| color: symbol.color, | |
| width: symbol.width, | |
| opacity: 1 | |
| } | |
| }; | |
| //map.graphics.add(new Graphic(evt.geometry, symbol)); | |
| var graphic = new Graphic(evt.geometry, symbol); | |
| //--------undo/redo Start------------ | |
| var operation = new CustomOperation.Add({ | |
| graphicsLayer: map.graphics, | |
| addedGraphic: graphic | |
| }); | |
| graphicCount = graphicCount + 1; | |
| undoManager.add(operation); | |
| map.graphics.add(graphic); | |
| //--------undo/redo End-------------- | |
| } | |
| //----------------------------------------------------------- | |
| //basemap gallary | |
| changeVectorLayerOnMap = function(vectorLayerStyleId) { | |
| var vectorLayerStyle = vectorLayerStyleId.getAttribute("data-mapListVectorId"); | |
| var vectorLayerStyleData = vectorLayerArr.vectorlayer.find(x => x.style === vectorLayerStyle); | |
| map.removeAllLayers(); | |
| // map.centerAndZoom([vectorLayerArr.lon, vectorLayerArr.lat], vectorLayerArr.zoom); | |
| map.centerAndZoom([current_lon, current_lat], vectorLayerArr.zoom); | |
| if (vectorLayerStyleData.mapsubtype == "arcgis") { | |
| var vctrlayerStyle = new VectorTileLayer(vectorLayerStyleData.styleurl); | |
| map.addLayer(vctrlayerStyle); | |
| } else { | |
| var vctrlayerStyle = new OpenStreetMapLayer(vectorLayerStyleData.styleurl); | |
| map.addLayer(vctrlayerStyle); | |
| } | |
| // console.log('vectorLayerStyleData',vectorLayerStyleData); | |
| } | |
| addLayerOnMap = function(mapListId, addBasemap) { | |
| $("#vectorLyrId").hide(); | |
| vectorLayerArr = []; | |
| var mapid = ''; | |
| var LayerDataMapArr = ''; | |
| if (!addBasemap) { | |
| mapid = mapListId.getAttribute("data-mapListId"); | |
| LayerDataMapArr = mapSources.find(x => x.shortname === mapid) | |
| if (current_lat !== 0 && current_lon !== 0 && current_lat !== '' && current_lon !== '') { | |
| LayerDataMapArr.lat = current_lat; | |
| LayerDataMapArr.lon = current_lon; | |
| LayerDataMapArr.zoom = current_zoom; | |
| } | |
| } else { | |
| LayerDataMapArr = mapSources.find(x => x.shortname === mapListId) | |
| //Set trek lon lat and zoom for map center | |
| LayerDataMapArr.lon = lat; | |
| LayerDataMapArr.lat = long; | |
| LayerDataMapArr.zoom = mapZoom; | |
| } | |
| // //----------MapSource DeepLink Start------------- | |
| // if (bsMap != null) { | |
| // var vrBsCenterr = ''; | |
| // vrBsCenterr = bsCenter; | |
| // var vrBsCenterrArr = vrBsCenterr.split(','); | |
| // LayerDataMapArr.lat = vrBsCenterrArr[1]; | |
| // LayerDataMapArr.lon = vrBsCenterrArr[0]; | |
| // LayerDataMapArr.zoom = bsZoom; | |
| // } | |
| basemapInfoBM = LayerDataMapArr.shortname; | |
| mapSourceMinZoom = LayerDataMapArr.minzoom; | |
| mapSourceMaxZoom = LayerDataMapArr.maxzoom; | |
| // if(!addBasemap){ | |
| // angular.element(document.getElementById('mainController')).scope().GetCurrentCatalog('',LayerDataMapArr); | |
| // } | |
| //------------------------Show Map by MapId-------------------- | |
| if (LayerDataMapArr != undefined && LayerDataMapArr.maptype.trim() != '' && LayerDataMapArr.maptype == "mapwithmapid") { | |
| map.removeAllLayers(); | |
| arcgisUtils.getItem(LayerDataMapArr.vectorlayer[0].webmapid).then(function(response) { | |
| map.centerAndZoom([LayerDataMapArr.lon, LayerDataMapArr.lat], LayerDataMapArr.zoom); | |
| var webtileurl = response.itemData.baseMap.baseMapLayers[0].templateUrl; | |
| var addWebTilepLayer = new WebTiledLayer(webtileurl); | |
| map.addLayer(addWebTilepLayer); | |
| var resData = response.itemData.operationalLayers; | |
| for (var i = 0; i < resData.length; i++) { | |
| var vctrlayerStyle = new VectorTileLayer(resData[i].styleUrl); | |
| map.addLayer(vctrlayerStyle); | |
| } | |
| }); | |
| } | |
| //-------------------------------End----------------------------- | |
| else if (LayerDataMapArr != undefined && LayerDataMapArr.maptype.trim() != '' && LayerDataMapArr.maptype == "vector") { | |
| // vectorLayerArr=LayerDataMapArr; | |
| // map.removeAllLayers(); | |
| // map.centerAndZoom([LayerDataMapArr.lon, LayerDataMapArr.lat], LayerDataMapArr.zoom); | |
| // var vctrlayer = new VectorTileLayer(LayerDataMapArr.vectorlayer[1].styleurl); | |
| // map.addLayer(vctrlayer); | |
| // $("#vectorLyrId").show(); | |
| LayerDataMapArr.vectorlayer.forEach( | |
| function(layeritem) { | |
| if (layeritem.mapsubtype == "arcgis") { | |
| var vctrlayerStyle = new VectorTileLayer(layeritem.styleurl); | |
| map.addLayer(vctrlayerStyle); | |
| return; | |
| } else { | |
| var vctrlayerStyle = new OpenStreetMapLayer(layeritem.styleurl); | |
| map.addLayer(vctrlayerStyle); | |
| return; | |
| } | |
| }); | |
| } else if (LayerDataMapArr != undefined && LayerDataMapArr.maptype.trim() != '' && LayerDataMapArr.maptype == "SHASHPLUSONE") { | |
| map.removeAllLayers(); | |
| if (LayerDataMapArr != undefined) { | |
| var layerDatafinalUrl = LayerDataMapArr.baseurl; | |
| map.centerAndZoom([LayerDataMapArr.lon, LayerDataMapArr.lat], LayerDataMapArr.zoom); | |
| var finalUrlForabc = layerDatafinalUrl.replace("{SHASH}", "1"); //"${subDomain}"); | |
| var addMapLayer = new WebTiledLayer(finalUrlForabc, { | |
| "baseurl": finalUrlForabc, | |
| "classtype": LayerDataMapArr.classtype, | |
| "copyright": LayerDataMapArr.copyright, | |
| "copyrighturl": LayerDataMapArr.copyrighturl, | |
| "desc": LayerDataMapArr.desc, | |
| "image": LayerDataMapArr.image, | |
| "lat": LayerDataMapArr.lat, | |
| "lon": LayerDataMapArr.lon, | |
| "maxzoom": LayerDataMapArr.maxzoom, | |
| "minzoom": LayerDataMapArr.minzoom, | |
| "name": LayerDataMapArr.name, | |
| "shortname": LayerDataMapArr.shortname, | |
| "tileresolvertype": LayerDataMapArr.tileresolvertype, | |
| "zoom": LayerDataMapArr.zoom //, | |
| //"subDomains": ["1", "2","3","4"] | |
| //"opacity": LayerDataMapArr.alpha | |
| }); | |
| addMapLayer.getTileUrl = function(level, row, column) { | |
| basemapInfoBM = LayerDataMapArr.shortname; | |
| zoomInfo = level; | |
| var pointBMx = map.extent.getCenter(); | |
| pointBM = webMercatorUtils.webMercatorToGeographic(pointBMx); | |
| if (LayerDataMapArr.alturl) { | |
| for (var zm = 0; zm < LayerDataMapArr.alturl.length; zm++) { | |
| if (level <= LayerDataMapArr.alturl[zm].maxzoom) { | |
| finalFilterUrl = replaceURLString(level, row, column, LayerDataMapArr.alturl[zm].url); | |
| return finalFilterUrl; | |
| } | |
| } | |
| } | |
| //if out of range of alturl, use baseurl | |
| finalFilterUrl = replaceURLString(level, row, column, layerDatafinalUrl); | |
| return finalFilterUrl; | |
| }; | |
| // console.log(addMapLayer.getTileUrl) | |
| map.addLayer(addMapLayer); | |
| } | |
| } | |
| else if (LayerDataMapArr != undefined && LayerDataMapArr.maptype.trim() != '' && LayerDataMapArr.maptype == "SHASH") { | |
| map.removeAllLayers(); | |
| if (LayerDataMapArr != undefined) { | |
| var layerDatastrUrl = LayerDataMapArr.baseurl; | |
| var layerDatafinalUrl = LayerDataMapArr.baseurl; | |
| map.centerAndZoom([LayerDataMapArr.lon, LayerDataMapArr.lat], LayerDataMapArr.zoom); | |
| var finalUrlForabc = layerDatafinalUrl.replace("{SHASH}", "0"); //"${subDomain}"); | |
| var addMapLayer = new WebTiledLayer(finalUrlForabc, { | |
| "baseurl": finalUrlForabc, | |
| "classtype": LayerDataMapArr.classtype, | |
| "copyright": LayerDataMapArr.copyright, | |
| "copyrighturl": LayerDataMapArr.copyrighturl, | |
| "desc": LayerDataMapArr.desc, | |
| "image": LayerDataMapArr.image, | |
| "lat": LayerDataMapArr.lat, | |
| "lon": LayerDataMapArr.lon, | |
| "maxzoom": LayerDataMapArr.maxzoom, | |
| "minzoom": LayerDataMapArr.minzoom, | |
| "name": LayerDataMapArr.name, | |
| "shortname": LayerDataMapArr.shortname, | |
| "tileresolvertype": LayerDataMapArr.tileresolvertype, | |
| "zoom": LayerDataMapArr.zoom //, | |
| //"subDomains": ["0", "1", "2","3"] | |
| //"opacity": LayerDataMapArr.alpha | |
| }); | |
| addMapLayer.getTileUrl = function(level, row, column) { | |
| basemapInfoBM = LayerDataMapArr.shortname; | |
| zoomInfo = level; | |
| var pointBMx = map.extent.getCenter(); | |
| pointBM = webMercatorUtils.webMercatorToGeographic(pointBMx); | |
| if (LayerDataMapArr.alturl) { | |
| for (var zm = 0; zm < LayerDataMapArr.alturl.length; zm++) { | |
| if (level <= LayerDataMapArr.alturl[zm].maxzoom) { | |
| finalFilterUrl = replaceURLString(level, row, column, LayerDataMapArr.alturl[zm].url); | |
| return finalFilterUrl; | |
| } | |
| } | |
| } | |
| //if out of range of alturl, use baseurl | |
| finalFilterUrl = replaceURLString(level, row, column, layerDatafinalUrl); | |
| return finalFilterUrl; | |
| }; | |
| //console.log(addMapLayer.getTileUrl) | |
| map.addLayer(addMapLayer); | |
| } | |
| } else if (LayerDataMapArr != undefined && LayerDataMapArr.maptype.trim() != '' && LayerDataMapArr.maptype == "abc") { | |
| map.removeAllLayers(); | |
| if (LayerDataMapArr != undefined) { | |
| var layerDatastrUrl = LayerDataMapArr.baseurl; | |
| var layerDatafinalUrl = ''; | |
| layerDatafinalUrl = LayerDataMapArr.baseurl; | |
| map.centerAndZoom([LayerDataMapArr.lon, LayerDataMapArr.lat], LayerDataMapArr.zoom); | |
| var finalUrlForabc = layerDatafinalUrl.replace("{abc}", "a"); //"${subDomain}"); | |
| var addMapLayer = new WebTiledLayer(finalUrlForabc, { | |
| "baseurl": finalUrlForabc, | |
| "classtype": LayerDataMapArr.classtype, | |
| "copyright": LayerDataMapArr.copyright, | |
| "copyrighturl": LayerDataMapArr.copyrighturl, | |
| "desc": LayerDataMapArr.desc, | |
| "image": LayerDataMapArr.image, | |
| "lat": LayerDataMapArr.lat, | |
| "lon": LayerDataMapArr.lon, | |
| "maxzoom": LayerDataMapArr.maxzoom, | |
| "minzoom": LayerDataMapArr.minzoom, | |
| "name": LayerDataMapArr.name, | |
| "shortname": LayerDataMapArr.shortname, | |
| "tileresolvertype": LayerDataMapArr.tileresolvertype, | |
| "zoom": LayerDataMapArr.zoom //, | |
| //"subDomains": ["a", "b", "c"] | |
| //"opacity": LayerDataMapArr.alpha | |
| }); | |
| addMapLayer.getTileUrl = function(level, row, column) { | |
| basemapInfoBM = LayerDataMapArr.shortname; | |
| zoomInfo = level; | |
| var pointBMx = map.extent.getCenter(); | |
| pointBM = webMercatorUtils.webMercatorToGeographic(pointBMx); | |
| if (LayerDataMapArr.alturl) { | |
| for (var zm = 0; zm < LayerDataMapArr.alturl.length; zm++) { | |
| if (level <= LayerDataMapArr.alturl[zm].maxzoom) { | |
| finalFilterUrl = replaceURLString(level, row, column, LayerDataMapArr.alturl[zm].url); | |
| return finalFilterUrl; | |
| } | |
| } | |
| } | |
| //if out of range of alturl, use baseurl | |
| finalFilterUrl = replaceURLString(level, row, column, finalUrlForabc); | |
| return finalFilterUrl; | |
| }; | |
| map.addLayer(addMapLayer); | |
| } | |
| } | |
| else if (LayerDataMapArr != undefined && LayerDataMapArr.maptype.trim() != '' && LayerDataMapArr.maptype == "webtile") { | |
| map.removeAllLayers(); | |
| pointBMx = map.extent.getCenter(); | |
| if (LayerDataMapArr != undefined) { | |
| var layerDatastrUrl = LayerDataMapArr.baseurl; | |
| var layerDatafinalUrl = LayerDataMapArr.baseurl; | |
| map.centerAndZoom([LayerDataMapArr.lon, LayerDataMapArr.lat], LayerDataMapArr.zoom); | |
| // console.log(layerDatafinalUrl); | |
| var WebTiledLayerOptions = { | |
| "baseurl": layerDatafinalUrl, | |
| "classtype": LayerDataMapArr.classtype, | |
| "copyright": LayerDataMapArr.copyright, | |
| "copyrighturl": LayerDataMapArr.copyrighturl, | |
| "desc": LayerDataMapArr.desc, | |
| "image": LayerDataMapArr.image, | |
| "lat": LayerDataMapArr.lat, | |
| "lon": LayerDataMapArr.lon, | |
| "maxzoom": parseInt(LayerDataMapArr.maxzoom), | |
| "minzoom": parseInt(LayerDataMapArr.minzoom), | |
| "name": LayerDataMapArr.name, | |
| "shortname": LayerDataMapArr.shortname, | |
| "tileresolvertype": LayerDataMapArr.tileresolvertype, | |
| //"zoom": LayerDataMapArr.zoom, | |
| "zoom": parseInt((parseInt(LayerDataMapArr.maxzoom) + parseInt(LayerDataMapArr.minzoom)) /2), | |
| //"opacity": LayerDataMapArr.alpha | |
| }; | |
| //console.log(WebTiledLayerOptions) | |
| var addMapLayer = new WebTiledLayer(layerDatafinalUrl, WebTiledLayerOptions ); | |
| addMapLayer.refresh(); | |
| //set the getTitleUrl | |
| addMapLayer.getTileUrl = function(level, row, column) { | |
| basemapInfoBM = LayerDataMapArr.shortname; | |
| zoomInfo = level; | |
| var pointBMx = map.extent.getCenter(); | |
| pointBM = webMercatorUtils.webMercatorToGeographic(pointBMx); | |
| if (LayerDataMapArr.alturl) { | |
| for (var zm = 0; zm < LayerDataMapArr.alturl.length; zm++) { | |
| // console.log('has_alturl') | |
| if (level <= LayerDataMapArr.alturl[zm].maxzoom) { | |
| finalFilterUrl = replaceURLString(level, row, column, LayerDataMapArr.alturl[zm].url); | |
| return finalFilterUrl; | |
| } | |
| } | |
| } | |
| //if out of range of alturl, use baseurl | |
| finalFilterUrl = replaceURLString(level, row, column, layerDatafinalUrl); | |
| return finalFilterUrl; | |
| }; | |
| map.addLayer(addMapLayer); | |
| } | |
| } | |
| else if (LayerDataMapArr != undefined && LayerDataMapArr.maptype.trim() != '' && LayerDataMapArr.maptype == "multilayer") | |
| { | |
| map.removeAllLayers(); | |
| LayerDataMapArr.maplayer.forEach(function(multilayermapitem) { | |
| var layerData = mapSources.find(x => x.visibility === "layer" && x.shortname === multilayermapitem.layer) | |
| if (layerData != undefined) { | |
| // var layerDatastrUrl = layerData.baseurl; | |
| var layerDatafinalUrl = layerData.baseurl; | |
| map.centerAndZoom([LayerDataMapArr.lon, LayerDataMapArr.lat], LayerDataMapArr.zoom); | |
| // map.centerAndZoom([layerData.lon, layerData.lat], layerData.zoom); | |
| var addMapLayer = new WebTiledLayer(layerDatafinalUrl, { | |
| "baseurl": layerDatafinalUrl, | |
| "classtype": layerData.classtype, | |
| "copyright": layerData.copyright, | |
| "copyrighturl": layerData.copyrighturl, | |
| "desc": layerData.desc, | |
| "image": layerData.image, | |
| "lat": layerData.lat, | |
| "lon": layerData.lon, | |
| "maxzoom": layerData.maxzoom, | |
| "minzoom": layerData.minzoom, | |
| "name": layerData.name, | |
| "shortname": layerData.shortname, | |
| "tileresolvertype": layerData.tileresolvertype, | |
| "zoom": layerData.zoom, | |
| "opacity": multilayermapitem.alpha | |
| }); | |
| //getTileUrl Start----------------- | |
| //var finalFilterUrl ; | |
| addMapLayer.getTileUrl = function(level, row, column) { | |
| basemapInfoBM = LayerDataMapArr.shortname; | |
| zoomInfo = level; | |
| var pointBMx = map.extent.getCenter(); | |
| pointBM = webMercatorUtils.webMercatorToGeographic(pointBMx); | |
| if (LayerDataMapArr.alturl) { | |
| for (var zm = 0; zm < LayerDataMapArr.alturl.length; zm++) { | |
| if (level <= LayerDataMapArr.alturl[zm].maxzoom) { | |
| finalFilterUrl = replaceURLString(level, row, column, LayerDataMapArr.alturl[zm].url); | |
| return finalFilterUrl; | |
| } | |
| } | |
| } | |
| //if out of range of alturl, use baseurl | |
| finalFilterUrl = replaceURLString(level, row, column, layerDatafinalUrl); | |
| return finalFilterUrl; | |
| }; | |
| map.addLayer(addMapLayer); | |
| } | |
| }); | |
| } | |
| $("#basemapthumbnailId").attr('src', "https://crittermap-bc865.firebaseapp.com/images/" + LayerDataMapArr.image); | |
| $("#basemapSpanId").html(LayerDataMapArr.name); | |
| $('.modal-backdrop').remove(); | |
| $("#basemapModal").modal('hide'); | |
| } | |
| function replaceURLString(level, row, column, finalFilterUrl) { | |
| finalFilterUrl = finalFilterUrl.replace("{z}", level).replace("{x}", column).replace("{y}", row); | |
| finalFilterUrl = finalFilterUrl.replace("${level}", level).replace("${col}", column).replace("${row}", row); | |
| finalFilterUrl = finalFilterUrl.replace("{l}", level); | |
| finalFilterUrl = finalFilterUrl.replace("{abc}", "a").replace("{SHASH}", "0").replace("{SHASHPLUSONE}", "1"); | |
| if (finalFilterUrl.indexOf("{nzy}") !== -1) { | |
| var filterUrl = finalFilterUrl.replace("{z}", level).replace("{x}", column).replace("{y}", row); | |
| var vData = ((1 << level) - 1 - row); | |
| finalFilterUrl = filterUrl.replace("{nzy}", vData); | |
| } | |
| if (finalFilterUrl.indexOf("{quadtree}") !== -1) { | |
| var quadtree = ""; | |
| row = ((1 << level) - 1) - row; | |
| for (var i = level; i >= 1; i--) { | |
| var digit = 0; | |
| var mask = 1 << (i - 1); | |
| if ((column & mask) != 0) | |
| digit += 1; | |
| if ((row & mask) != 0) | |
| digit += 2; | |
| quadtree += digit; | |
| } | |
| finalFilterUrl = finalFilterUrl.replace("{quadtree}", quadtree); | |
| } | |
| if (finalFilterUrl.indexOf("{MBBOX}") !== -1) { | |
| var xMin, xMax, yMin, yMax; | |
| var boundsmercator; | |
| initialResolution = 2 * Math.PI * 6378137 / 256; // == 156543.0339 | |
| originShift = 2 * Math.PI * 6378137 / 2.0; // == 20037508.34 | |
| res = initialResolution / Math.pow(2, level); | |
| row = ((1 << level) - row - 1); // TMS | |
| xMin = Math.round((column * 256 * res - originShift)); | |
| xMax = Math.round(((column + 1) * 256 * res - originShift)); | |
| yMin = Math.round((row * 256 * res - originShift)); | |
| yMax = Math.round(((row + 1) * 256 * res - originShift)); | |
| if (xMin > xMax) { | |
| xMax = Math.round((column * 256 * res - originShift)); | |
| xMin = Math.round(((column + 1) * 256 * res - originShift)); | |
| } | |
| if (yMin > yMax) { | |
| yMax = Math.round((row * 256 * res - originShift)); | |
| yMin = Math.round(((row + 1) * 256 * res - originShift)); | |
| } | |
| boundsmercator = xMin + "," + yMin + "," + xMax + "," + yMax; | |
| finalFilterUrl = finalFilterUrl.replace("{MBBOX}", boundsmercator); | |
| } | |
| return finalFilterUrl; | |
| } | |
| //basemap gallary | |
| }); | |
| } | |
| function uuid() { | |
| return s4() + s4() + '-' + s4() + '-' + s4() + '-' + | |
| s4() + '-' + s4() + s4() + s4(); | |
| } | |
| function s4() { | |
| return Math.floor((1 + Math.random()) * 0x10000) | |
| .toString(16) | |
| .substring(1); | |
| } | |
| function deleteGraphic() { | |
| map.disableDoubleClickZoom(); | |
| graphicCount = graphicCount - 1; | |
| if (graphicCount < 1) { | |
| var r = confirm("Do you want to clear/remove trip"); | |
| if (r == true) { //pressed ok | |
| if (window.location.hash.includes('#/trip?trp=')) { | |
| angular.element(document.getElementById('mainController')).scope().deleteSelectedTrek(''); | |
| } else { | |
| map.graphics.remove(selectedGraphic); | |
| editToolbar.deactivate(); | |
| $('#btnDeleteGraphic').hide(); | |
| $('.userDashboard__drawTripActionGroup__saveTrip').hide(); | |
| $('.userDashboard__drawTripActionGroup__clearScreen').hide(); | |
| selectedGraphic = ""; | |
| graphicCount = 0; | |
| } | |
| } else { | |
| editToolbar.deactivate(); | |
| $('#btnDeleteGraphic').hide(); | |
| selectedGraphic = ""; | |
| } | |
| } else { | |
| map.graphics.remove(selectedGraphic); | |
| editToolbar.deactivate(); | |
| $('#btnDeleteGraphic').hide(); | |
| selectedGraphic = ""; | |
| } | |
| } | |
| function newUpdateGraphics() { | |
| console.log(editOver) | |
| $('#btnDeleteGraphic').hide(); | |
| $('#btnAddTrekInfo').hide(); | |
| if (editOver) { | |
| editOver = false; | |
| } | |
| selectedGraphic = ""; | |
| //editToolbar.deactivate(); | |
| var geoArr = map.graphics.graphics; | |
| myGlobalEditObj.editTrek(geoArr); | |
| //updateGraphics(geoArr); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment