From 14146c4789604507def445448155ff8ac4825235 Mon Sep 17 00:00:00 2001 From: Ryota Yamanaka Date: Tue, 15 Dec 2020 08:23:46 +0900 Subject: [PATCH] add 'change tile layer for the basemap' demo (#139) --- .../demos/h/change_tilelayers.html | 35 + spatial/mvc-map-api/demos/h/shared_links.html | 164 ++-- .../mvc-map-api/demos/u/alta_peak_trail.html | 38 +- .../demos/u/change_tilelayers.html | 68 ++ .../mvc-map-api/demos/u/js/alta_peak_trail.js | 688 +++++++------- .../demos/u/js/change_tilelayers.js | 286 ++++++ spatial/mvc-map-api/demos/u/js/dtl_jdbc.js | 830 ++++++++-------- .../demos/u/js/jdbc_states_labels.js | 476 +++++----- .../demos/u/js/state_county_drilldown.js | 882 +++++++++--------- .../demos/u/js/tileLayer_custom.js | 242 ++--- 10 files changed, 2051 insertions(+), 1658 deletions(-) create mode 100755 spatial/mvc-map-api/demos/h/change_tilelayers.html create mode 100755 spatial/mvc-map-api/demos/u/change_tilelayers.html create mode 100755 spatial/mvc-map-api/demos/u/js/change_tilelayers.js diff --git a/spatial/mvc-map-api/demos/h/change_tilelayers.html b/spatial/mvc-map-api/demos/h/change_tilelayers.html new file mode 100755 index 00000000..5598add7 --- /dev/null +++ b/spatial/mvc-map-api/demos/h/change_tilelayers.html @@ -0,0 +1,35 @@ + + + + Demo: Change tile layers + + + + + + Maps API Demos +
+ +
+ +
+ + + + +
+ +
+
+
+
+
+ + diff --git a/spatial/mvc-map-api/demos/h/shared_links.html b/spatial/mvc-map-api/demos/h/shared_links.html index 688214dc..58e53bc9 100644 --- a/spatial/mvc-map-api/demos/h/shared_links.html +++ b/spatial/mvc-map-api/demos/h/shared_links.html @@ -1,80 +1,84 @@ - - -
- - - - - - - - - - - - - - - - - - - - - -
Oracle Maps
Custom Tile Layer
Offline Tile Layer
HERE Maps
OSM Maps
- -
- - - - - - - - - - - - - - - - - - - - - - - - - -
Vector Layer (JDBC)
Vector Layer (DATAPACK)
Vector Layer Style Binding
Vector Layer Drill Down
Alta Peak Trail
- -
- - - - - - -
Dynamic Tile Layer
- -
- - - - - - -
Geometry Editing
- -
- - - -
- - - + + +
+ + + + + + + + + + + + + + + + + + + + + +
Oracle Maps
Custom Tile Layer
Offline Tile Layer
HERE Maps
OSM Maps
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
Vector Layer (JDBC)
Vector Layer (DATAPACK)
Vector Layer Style Binding
Vector Layer Drill Down
Alta Peak Trail
+ +
+ + + + + + +
Dynamic Tile Layer
+ +
+ + + + + + + + + + +
Geometry Editing
Change Tile Layers
+ +
+ + + +
+ + + diff --git a/spatial/mvc-map-api/demos/u/alta_peak_trail.html b/spatial/mvc-map-api/demos/u/alta_peak_trail.html index f1f31f95..ffb2b74d 100644 --- a/spatial/mvc-map-api/demos/u/alta_peak_trail.html +++ b/spatial/mvc-map-api/demos/u/alta_peak_trail.html @@ -1,19 +1,19 @@ - - - - Map API Demo: Alta Peak Trail - - - - - - - -
- - + + + + Map API Demo: Alta Peak Trail + + + + + + + +
+ + diff --git a/spatial/mvc-map-api/demos/u/change_tilelayers.html b/spatial/mvc-map-api/demos/u/change_tilelayers.html new file mode 100755 index 00000000..3bdcdb3d --- /dev/null +++ b/spatial/mvc-map-api/demos/u/change_tilelayers.html @@ -0,0 +1,68 @@ + + + + Map API Demo: Change Tile Layers + + + + + + + +
+ + + + + + + +
+
+
+ + + + + + + + + + + + + + +
Tile LayerVector Layer
+
+
+ Select tile layer as basemap
+ Oracle Maps
+ BI World Maps
+ OSM Positron
+ OSM Dark
+
+
+ 		+
+
+ Select vector layer
+ States
+ Counties
+ Cities
+ Customers
+
+
+
+ This demo illustrates how to change the tile layers as basemaps. +
+
+
+ + + diff --git a/spatial/mvc-map-api/demos/u/js/alta_peak_trail.js b/spatial/mvc-map-api/demos/u/js/alta_peak_trail.js index bebba3b1..47662742 100644 --- a/spatial/mvc-map-api/demos/u/js/alta_peak_trail.js +++ b/spatial/mvc-map-api/demos/u/js/alta_peak_trail.js @@ -1,345 +1,345 @@ - function showMap() { - var map = new OM.Map(document.getElementById('map')) ; - - var tileLayer = new OM.layer.ElocationTileLayer("oracle_tilelayer", - {"layerName": "BI_WORLD_MAP_LIGHT" - });// 'WORLD_MAP', 'BI_WORLD_MAP', or 'BI_WORLD_MAP_LIGHT'. - map.addLayer(tileLayer); - addLayer_Polygons(map); - addLayer_Lines(map); - addLayer_Points(map); - map.setMapCenter(new OM.geometry.Point(-118,34,8307) ); - map.setMapZoomLevel(8) ; - map.init() ; - //Adds various map controls to the map. - addMapControls(map); - }; - - //add map controls to the provided OM.Map instance - function addMapControls(map) { - addMapLayerControl(map); - addMapNavControl(map) - addMapCopyright(map); - addMapScale(map); - addToolBar(map); - } - - function addLayer_Points(map) { - // the POI data set - var style_food = {"textColor":"000000","text":"F","color":"B6EB79"}; - var style_hotel = {"textColor":"000000","text":"H","color":"79B6EB"}; - var style_scene = {"textColor":"000000","text":"S","color":"5DBE3F"}; - var style_parking = {"textColor":"000000","text":"P","color":"FFDE00"}; - var markersData = [ - {"x":-122.26246,"y":37.5307,"id":"1","name":"Orcle Cafeteria","type":"FOOD","style": style_food} - ,{"x":-122.301113,"y":37.556272,"id":"2","name":"San Mateo Marriott","type":"HOTEL","style":style_hotel} - ,{"x":-118.664078,"y":36.591072,"id":"3","name":"Alta peak","type":"SCENE","style":style_scene} - ,{"x":-118.765588,"y":36.546872,"id":"4","name":"Moro Rock","type":"SCENE","style":style_scene} - ,{"x":-122.263637,"y":37.531705,"id":"5","name":"Orale 420 Garage","type":"PK","style":style_parking} - ,{"x":-118.734787,"y":36.596239,"id":"6","name":"Trail Head","type":"PK","style":style_parking} - ]; - - var fillColor = {"F":"B6EB79", - "H":"79B6EB", - "S":"5DBE3F", - "P":"FFDE00"}; - var vecLayer1 = new OM.layer.VectorLayer("FOIs", { - def: {type: OM.layer.VectorLayer.TYPE_LOCAL}, - boundingTheme : true - }); - - markersData.forEach(function (marker){ - var point = new OM.geometry.Point(marker.x, marker.y); - var path1= "M11.894,32.906c-1.053-6.41-4.529-10.265-7.82-13.417C2.1,17.598,1.009,14.972,1,12.093C0.992,9.111,2.203,6.224,4.323,4.17C6.433,2.126,9.189,1,12.083,1c2.881,0,5.601,1.123,7.658,3.162c2.111,2.093,3.3,4.995,3.259,7.962c-0.039,2.864-1.179,5.492-3.21,7.397C16.465,22.645,12.954,26.469,11.894,32.906z"; - path1 = path1.replace(/([0-9])([\-])/g, '$1 $2'); //ensure there is a space separating negative numbers - - m1 = new OM.style.Marker({ - vectorDef : [ - {shape:{type: "svg", svgPath:path1 }, - style: {fill:fillColor[marker.style.text], stroke:"#2d1d85", strokeThickness:'2'} - } - ], - width: 24, - height: 37, - yOffset: -16, - textStyle:{fontSize:14, fontWeight:OM.Text.FONTWEIGHT_NORMAL}, - textOffset:{x:0, y:-8}, - }); - var markerOpt = {renderingStyle: new OM.style.Marker(m1)}; - var feature = new OM.Feature(marker.id, point, markerOpt); - - feature.setVisible(true); - feature.setMarkerText(marker.style.text); - feature.attributes = {"ID":marker.id, "TYPE":marker.type, "NAME":marker.name}; - vecLayer1.addFeature(feature); - }); - - vecLayer1.setBringToTopOnMouseOver(true); - var hoverStyle = new OM.style.Color({ - fill: "#FF0000", - }); - var selectStyle = new OM.style.Color({ - fill: "#00ff00", - }); - - map.addLayer(vecLayer1); - vecLayer1.enableToolTip(false); - vecLayer1.setHoverStyle(hoverStyle); - vecLayer1.setSelectStyle(selectStyle); - } - - function addLayer_Lines(map) { - var l1 = new OM.style.Line( - { styleName:"myLineSty1", - stroke:"#0000cf", - strokeThickness:7, - strokeOpacity: 1.0, - centerLine:"#ffff00", - centerLineWidth:3, - strokeLineCap: OM.LineCaps.ROUND, - centerLineDash:[7,7], - }); - var l2 = new OM.style.Line( - { styleName:"myLineSty2", - stroke:"#00cf00", - strokeThickness:5, - strokeOpacity: 1.0, - centerLine:"#ffff00", - centerLineWidth:3, - strokeLineCap: OM.LineCaps.BUTT, - centerLineDash:[3,3] - }); - var l3 = new OM.style.Line( - { styleName:"myLineSty0", - stroke:"#ff0000", - strokeThickness:4, - strokeOpacity: 1.0, - strokeLineCap: OM.LineCaps.BUTT, - strokeDash:[4,4] - }); - - var c1 = new OM.style.CollectionBucket({ - values:["ROAD"] - }); - var c2 = new OM.style.CollectionBucket({ - values:["PATH"] - }); - var c3 = new OM.style.CollectionBucket({ - values:["TRAIL"] - }); - - var cStyle = new OM.style.BucketStyle({ - buckets:[c1, c2, c3], - styles:[l1, l2, l3] - }); - var hoverStyle = new OM.style.Line({stroke:"#ff0000",strokeThickness:5}); - var selectStyle = new OM.style.Line({stroke:"#00ff00",strokeThickness:5}); - - var vecLayer2 = new OM.layer.VectorLayer("Paths", - { def:{ - type: OM.layer.VectorLayer.TYPE_DATAPACK, - url: "data/apexmaps_lines.json" - }, - renderingStyle: cStyle, - styleAttributes:['TYPE'] - }); -// var vecLayer2 = new OM.layer.VectorLayer("Roads&Tails", -// { def:{ -// type: OM.layer.VectorLayer.TYPE_JDBC, -// dataSource:"apexmaps", -// sql: "select ID, TYPE, NAME, GEOM from lines", -// url: "http://localhost:8080/mapviewer" -// }, -// //boundingTheme: true, -// renderingStyle: cStyle, -// styleAttributes:['TYPE'] -// }); - vecLayer2.setBringToTopOnMouseOver(true); - vecLayer2.setHoverStyle(hoverStyle); - vecLayer2.setSelectStyle(selectStyle); - - map.addLayer(vecLayer2) ; - vecLayer2.bringToTop(); - vecLayer2.enableToolTip(false); - } - - function addLayer_Polygons(map) { - var s1 = new OM.style.Color({ - fill:"ffef00", - fillOpacity:0.5, - stroke:"#009900", - strokeThickness:3, - strokeOpacity:0.75, - strokeDash:[3,1] - }); - var s2 = new OM.style.Color({ - fill:"e70000", - fillOpacity:0.5, - stroke:"#009900", - strokeThickness:3, - strokeOpacity:0.75, - strokeDash:[3,1] - }); - var s3 = new OM.style.Color({ - fill:"00811f", - fillOpacity:0.5, - stroke:"#000000", - strokeThickness:3, - strokeOpacity:0.75, - strokeDash:[3,1] - }); - - var s4 = new OM.style.Color({ - fill:"0044ff", - fillOpacity:0.5, - stroke:"#009900", - strokeThickness:3, - strokeOpacity:0.75, - strokeDash:[3,1] - }); - - var hoverStyle = new OM.style.Color({ - fill:"ff0000", - fillOpacity:0.25, - stroke:"#009900", - strokeThickness:3, - strokeOpacity:0.75, - strokeDash:[3,1] - }); - - var selectStyle = new OM.style.Color({ - fill:"00ff00", - fillOpacity:0.25, - stroke:"#009900", - strokeThickness:3, - strokeOpacity:0.75, - strokeDash:[3,1] - }); - - var cb1 = new OM.style.CollectionBucket({ - values:["Sequoia National Park"] - }); - var cb2 = new OM.style.CollectionBucket({ - values:["Yosemite National Park"] - }); - var cb3 = new OM.style.CollectionBucket({ - values:["Redwood National PARK"] - }); - var cb4 = new OM.style.CollectionBucket({ - values:["Death Valley National Park"] - }); - - var cStyle = new OM.style.BucketStyle({ - buckets:[cb1, cb2, cb3, cb4], - styles:[s1, s2, s3, s4] - }); - - - var vecLayer3 = new OM.layer.VectorLayer("Parks", - { def:{ - type: OM.layer.VectorLayer.TYPE_DATAPACK, - url: "data/apexmaps_polygons.json" - }, - //boundingTheme: true, - renderingStyle: cStyle, - styleAttributes:['NAME'] - }); -// var vecLayer3 = new OM.layer.VectorLayer("Parks", -// { def:{ -// type: OM.layer.VectorLayer.TYPE_JDBC, -// dataSource:"apexmaps", -// sql: "select ID, TYPE, NAME, GEOM from polygons", -// url: "http://localhost:8080/mapviewer" -// }, -// boundingTheme: true, -// renderingStyle: cStyle, -// styleAttributes:['NAME'] -// }); - vecLayer3.setBringToTopOnMouseOver(true); - vecLayer3.setHoverStyle(hoverStyle); - vecLayer3.setSelectStyle(selectStyle); - vecLayer3.enableToolTip(false); - - map.addLayer(vecLayer3); - vecLayer3.sendToBottom(); - } - - - function addMapScale(map) { - //defines the basic properties for the map scale bars - var sbConfig = { - format: "BOTH", // imperial and metric units - anchorPosition: 5 - }; - - //creates the actual sacle bar instance and sets the display style - var scaleBar = new OM.control.ScaleBar(sbConfig); - - //defines the display style of the scale bars - var sbStyle = { - barThickness:4, // default is 3 - scaleBarColor: '#0000d0', // default is black - fontColor: '#0000d0' // default is black - }; - scaleBar.setStyle(sbStyle); - - //adds the scale bar to the map decoration - map.addMapDecoration(scaleBar); - } - - function addMapNavControl(map) { - var options = { - anchorPosition: 3, - style: OM.control.NavigationPanelBar.STYLE_PAN_AND_ZOOM_BUTTONS - //STYLE_FULL - //STYLE_ZOOM_ONLY - //STYLE_ZOOM_BUTTONS_ONLY //--default value - //STYLE_PAN_ONLY - //STYLE_PAN_AND_ZOOM_BUTTONS - }; - - var navigationPanelBar = new OM.control.NavigationPanelBar(options); - navigationPanelBar.setZoomLevelInfoTips({ - 2: "Country", - 5: "State", - 7: "City", - 15: "Street" - }); - //adds the scale bar to the map decoration - map.addMapDecoration(navigationPanelBar); - } - - function addMapCopyright(map) { - var mapCopyRight = new OM.control.CopyRight({ - anchorPosition:4, - textValue:'©2020 Oracle APEX Office Hours; Oracle Maps', - fontSize:10, - fontFamily:'"Gill Sans","Helvetics Neue",Helvetica,Arial,sans-serif', - fontColor:"#104a7e" - }); - //var mapCopyRight = new OM.control.CopyRight({anchorPosition:5,textValue:'Map data: Natural Earth ',fontSize:12,fontFamily:'Arial',fontColor:'black'}); - map.addMapDecoration(mapCopyRight); - } - - function addToolBar(map) { - var toolbar = new OM.control.ToolBar("toolbar1", - { - builtInButtons : [OM.control.ToolBar.BUILTIN_ALL] - }); - toolbar.setPosition(0.45, 0); - map.addToolBar(toolbar); - } - function addMapLayerControl(map) { - var layerControl=new OM.control.LayerControl({ - anchorPosition:1, - minWidth:200, - maxHeight:400, - left:20, - top:20, - font_size:14, - font_family:"arial" - }); - map.addMapDecoration(layerControl); - } - + function showMap() { + var map = new OM.Map(document.getElementById('map')) ; + + var tileLayer = new OM.layer.ElocationTileLayer("oracle_tilelayer", + {"layerName": "BI_WORLD_MAP_LIGHT" + });// 'WORLD_MAP', 'BI_WORLD_MAP', or 'BI_WORLD_MAP_LIGHT'. + map.addLayer(tileLayer); + addLayer_Polygons(map); + addLayer_Lines(map); + addLayer_Points(map); + map.setMapCenter(new OM.geometry.Point(-118,34,8307) ); + map.setMapZoomLevel(8) ; + map.init() ; + //Adds various map controls to the map. + addMapControls(map); + }; + + //add map controls to the provided OM.Map instance + function addMapControls(map) { + addMapLayerControl(map); + addMapNavControl(map) + addMapCopyright(map); + addMapScale(map); + addToolBar(map); + } + + function addLayer_Points(map) { + // the POI data set + var style_food = {"textColor":"000000","text":"F","color":"B6EB79"}; + var style_hotel = {"textColor":"000000","text":"H","color":"79B6EB"}; + var style_scene = {"textColor":"000000","text":"S","color":"5DBE3F"}; + var style_parking = {"textColor":"000000","text":"P","color":"FFDE00"}; + var markersData = [ + {"x":-122.26246,"y":37.5307,"id":"1","name":"Orcle Cafeteria","type":"FOOD","style": style_food} + ,{"x":-122.301113,"y":37.556272,"id":"2","name":"San Mateo Marriott","type":"HOTEL","style":style_hotel} + ,{"x":-118.664078,"y":36.591072,"id":"3","name":"Alta peak","type":"SCENE","style":style_scene} + ,{"x":-118.765588,"y":36.546872,"id":"4","name":"Moro Rock","type":"SCENE","style":style_scene} + ,{"x":-122.263637,"y":37.531705,"id":"5","name":"Orale 420 Garage","type":"PK","style":style_parking} + ,{"x":-118.734787,"y":36.596239,"id":"6","name":"Trail Head","type":"PK","style":style_parking} + ]; + + var fillColor = {"F":"B6EB79", + "H":"79B6EB", + "S":"5DBE3F", + "P":"FFDE00"}; + var vecLayer1 = new OM.layer.VectorLayer("FOIs", { + def: {type: OM.layer.VectorLayer.TYPE_LOCAL}, + boundingTheme : true + }); + + markersData.forEach(function (marker){ + var point = new OM.geometry.Point(marker.x, marker.y); + var path1= "M11.894,32.906c-1.053-6.41-4.529-10.265-7.82-13.417C2.1,17.598,1.009,14.972,1,12.093C0.992,9.111,2.203,6.224,4.323,4.17C6.433,2.126,9.189,1,12.083,1c2.881,0,5.601,1.123,7.658,3.162c2.111,2.093,3.3,4.995,3.259,7.962c-0.039,2.864-1.179,5.492-3.21,7.397C16.465,22.645,12.954,26.469,11.894,32.906z"; + path1 = path1.replace(/([0-9])([\-])/g, '$1 $2'); //ensure there is a space separating negative numbers + + m1 = new OM.style.Marker({ + vectorDef : [ + {shape:{type: "svg", svgPath:path1 }, + style: {fill:fillColor[marker.style.text], stroke:"#2d1d85", strokeThickness:'2'} + } + ], + width: 24, + height: 37, + yOffset: -16, + textStyle:{fontSize:14, fontWeight:OM.Text.FONTWEIGHT_NORMAL}, + textOffset:{x:0, y:-8}, + }); + var markerOpt = {renderingStyle: new OM.style.Marker(m1)}; + var feature = new OM.Feature(marker.id, point, markerOpt); + + feature.setVisible(true); + feature.setMarkerText(marker.style.text); + feature.attributes = {"ID":marker.id, "TYPE":marker.type, "NAME":marker.name}; + vecLayer1.addFeature(feature); + }); + + vecLayer1.setBringToTopOnMouseOver(true); + var hoverStyle = new OM.style.Color({ + fill: "#FF0000", + }); + var selectStyle = new OM.style.Color({ + fill: "#00ff00", + }); + + map.addLayer(vecLayer1); + vecLayer1.enableToolTip(false); + vecLayer1.setHoverStyle(hoverStyle); + vecLayer1.setSelectStyle(selectStyle); + } + + function addLayer_Lines(map) { + var l1 = new OM.style.Line( + { styleName:"myLineSty1", + stroke:"#0000cf", + strokeThickness:7, + strokeOpacity: 1.0, + centerLine:"#ffff00", + centerLineWidth:3, + strokeLineCap: OM.LineCaps.ROUND, + centerLineDash:[7,7], + }); + var l2 = new OM.style.Line( + { styleName:"myLineSty2", + stroke:"#00cf00", + strokeThickness:5, + strokeOpacity: 1.0, + centerLine:"#ffff00", + centerLineWidth:3, + strokeLineCap: OM.LineCaps.BUTT, + centerLineDash:[3,3] + }); + var l3 = new OM.style.Line( + { styleName:"myLineSty0", + stroke:"#ff0000", + strokeThickness:4, + strokeOpacity: 1.0, + strokeLineCap: OM.LineCaps.BUTT, + strokeDash:[4,4] + }); + + var c1 = new OM.style.CollectionBucket({ + values:["ROAD"] + }); + var c2 = new OM.style.CollectionBucket({ + values:["PATH"] + }); + var c3 = new OM.style.CollectionBucket({ + values:["TRAIL"] + }); + + var cStyle = new OM.style.BucketStyle({ + buckets:[c1, c2, c3], + styles:[l1, l2, l3] + }); + var hoverStyle = new OM.style.Line({stroke:"#ff0000",strokeThickness:5}); + var selectStyle = new OM.style.Line({stroke:"#00ff00",strokeThickness:5}); + + var vecLayer2 = new OM.layer.VectorLayer("Paths", + { def:{ + type: OM.layer.VectorLayer.TYPE_DATAPACK, + url: "data/apexmaps_lines.json" + }, + renderingStyle: cStyle, + styleAttributes:['TYPE'] + }); +// var vecLayer2 = new OM.layer.VectorLayer("Roads&Tails", +// { def:{ +// type: OM.layer.VectorLayer.TYPE_JDBC, +// dataSource:"apexmaps", +// sql: "select ID, TYPE, NAME, GEOM from lines", +// url: location.protocol + "//"+ location.host+"/mapviewer" +// }, +// //boundingTheme: true, +// renderingStyle: cStyle, +// styleAttributes:['TYPE'] +// }); + vecLayer2.setBringToTopOnMouseOver(true); + vecLayer2.setHoverStyle(hoverStyle); + vecLayer2.setSelectStyle(selectStyle); + + map.addLayer(vecLayer2) ; + vecLayer2.bringToTop(); + vecLayer2.enableToolTip(false); + } + + function addLayer_Polygons(map) { + var s1 = new OM.style.Color({ + fill:"ffef00", + fillOpacity:0.5, + stroke:"#009900", + strokeThickness:3, + strokeOpacity:0.75, + strokeDash:[3,1] + }); + var s2 = new OM.style.Color({ + fill:"e70000", + fillOpacity:0.5, + stroke:"#009900", + strokeThickness:3, + strokeOpacity:0.75, + strokeDash:[3,1] + }); + var s3 = new OM.style.Color({ + fill:"00811f", + fillOpacity:0.5, + stroke:"#000000", + strokeThickness:3, + strokeOpacity:0.75, + strokeDash:[3,1] + }); + + var s4 = new OM.style.Color({ + fill:"0044ff", + fillOpacity:0.5, + stroke:"#009900", + strokeThickness:3, + strokeOpacity:0.75, + strokeDash:[3,1] + }); + + var hoverStyle = new OM.style.Color({ + fill:"ff0000", + fillOpacity:0.25, + stroke:"#009900", + strokeThickness:3, + strokeOpacity:0.75, + strokeDash:[3,1] + }); + + var selectStyle = new OM.style.Color({ + fill:"00ff00", + fillOpacity:0.25, + stroke:"#009900", + strokeThickness:3, + strokeOpacity:0.75, + strokeDash:[3,1] + }); + + var cb1 = new OM.style.CollectionBucket({ + values:["Sequoia National Park"] + }); + var cb2 = new OM.style.CollectionBucket({ + values:["Yosemite National Park"] + }); + var cb3 = new OM.style.CollectionBucket({ + values:["Redwood National PARK"] + }); + var cb4 = new OM.style.CollectionBucket({ + values:["Death Valley National Park"] + }); + + var cStyle = new OM.style.BucketStyle({ + buckets:[cb1, cb2, cb3, cb4], + styles:[s1, s2, s3, s4] + }); + + + var vecLayer3 = new OM.layer.VectorLayer("Parks", + { def:{ + type: OM.layer.VectorLayer.TYPE_DATAPACK, + url: "data/apexmaps_polygons.json" + }, + //boundingTheme: true, + renderingStyle: cStyle, + styleAttributes:['NAME'] + }); +// var vecLayer3 = new OM.layer.VectorLayer("Parks", +// { def:{ +// type: OM.layer.VectorLayer.TYPE_JDBC, +// dataSource:"apexmaps", +// sql: "select ID, TYPE, NAME, GEOM from polygons", +// url: location.protocol + "//"+ location.host+"/mapviewer" +// }, +// boundingTheme: true, +// renderingStyle: cStyle, +// styleAttributes:['NAME'] +// }); + vecLayer3.setBringToTopOnMouseOver(true); + vecLayer3.setHoverStyle(hoverStyle); + vecLayer3.setSelectStyle(selectStyle); + vecLayer3.enableToolTip(false); + + map.addLayer(vecLayer3); + vecLayer3.sendToBottom(); + } + + + function addMapScale(map) { + //defines the basic properties for the map scale bars + var sbConfig = { + format: "BOTH", // imperial and metric units + anchorPosition: 5 + }; + + //creates the actual sacle bar instance and sets the display style + var scaleBar = new OM.control.ScaleBar(sbConfig); + + //defines the display style of the scale bars + var sbStyle = { + barThickness:4, // default is 3 + scaleBarColor: '#0000d0', // default is black + fontColor: '#0000d0' // default is black + }; + scaleBar.setStyle(sbStyle); + + //adds the scale bar to the map decoration + map.addMapDecoration(scaleBar); + } + + function addMapNavControl(map) { + var options = { + anchorPosition: 3, + style: OM.control.NavigationPanelBar.STYLE_PAN_AND_ZOOM_BUTTONS + //STYLE_FULL + //STYLE_ZOOM_ONLY + //STYLE_ZOOM_BUTTONS_ONLY //--default value + //STYLE_PAN_ONLY + //STYLE_PAN_AND_ZOOM_BUTTONS + }; + + var navigationPanelBar = new OM.control.NavigationPanelBar(options); + navigationPanelBar.setZoomLevelInfoTips({ + 2: "Country", + 5: "State", + 7: "City", + 15: "Street" + }); + //adds the scale bar to the map decoration + map.addMapDecoration(navigationPanelBar); + } + + function addMapCopyright(map) { + var mapCopyRight = new OM.control.CopyRight({ + anchorPosition:4, + textValue:'©2020 Oracle APEX Office Hours; Oracle Maps', + fontSize:10, + fontFamily:'"Gill Sans","Helvetics Neue",Helvetica,Arial,sans-serif', + fontColor:"#104a7e" + }); + //var mapCopyRight = new OM.control.CopyRight({anchorPosition:5,textValue:'Map data: Natural Earth ',fontSize:12,fontFamily:'Arial',fontColor:'black'}); + map.addMapDecoration(mapCopyRight); + } + + function addToolBar(map) { + var toolbar = new OM.control.ToolBar("toolbar1", + { + builtInButtons : [OM.control.ToolBar.BUILTIN_ALL] + }); + toolbar.setPosition(0.45, 0); + map.addToolBar(toolbar); + } + function addMapLayerControl(map) { + var layerControl=new OM.control.LayerControl({ + anchorPosition:1, + minWidth:200, + maxHeight:400, + left:20, + top:20, + font_size:14, + font_family:"arial" + }); + map.addMapDecoration(layerControl); + } + \ No newline at end of file diff --git a/spatial/mvc-map-api/demos/u/js/change_tilelayers.js b/spatial/mvc-map-api/demos/u/js/change_tilelayers.js new file mode 100755 index 00000000..eed9a4a8 --- /dev/null +++ b/spatial/mvc-map-api/demos/u/js/change_tilelayers.js @@ -0,0 +1,286 @@ + var layer21; + var layer22; + var layer23; + var layer24; + var layer31; + var layer32; + var layer33; + var layer34; + var map; + var baseURL=document.location.protocol +"//"+ document.location.host+"/mapviewer"; + + function showMap() + { + map = new OM.Map(document.getElementById('map'),{mapviewerURL:baseURL}); + + var myradiobtn = document.getElementById('radioBtn31'); + myradiobtn.checked = true; + radio_selTileLayer(myradiobtn); + map.setMapCenter(new OM.geometry.Point(-100, 35, 8307)); // all + map.setMapZoomLevel(4); + map.init() ; + addMapControls(map); + } + + function checkBox_Toggle(checkBox){ + var id = checkBox.id; + var checkBox = document.getElementById(id); + if (id === "checkBox21") { + if (OM.isNull(layer21)) { + layer21 = new OM.layer.VectorLayer("layer21", {def:{type:OM.layer.VectorLayer.TYPE_PREDEFINED, + dataSource:"mvdemo", theme:"THEME_DEMO_STATES", + url: baseURL}, + boundingTheme:true}); + map.addLayer(layer21); + } else { + map.removeLayer(layer21); + layer21 = null; + } + }else if (id === "checkBox22") { + if (OM.isNull(layer22)) { + layer22 = new OM.layer.VectorLayer("layer22", {def:{type:OM.layer.VectorLayer.TYPE_PREDEFINED, + dataSource:"mvdemo", theme:"THEME_DEMO_COUNTIES", + url: baseURL}, + boundingTheme:true}); + map.addLayer(layer22); + } else { + map.removeLayer(layer22); + layer22 = null; + } + }else if (id === "checkBox23") { + if (OM.isNull(layer23)) { + layer23 = new OM.layer.VectorLayer("layer23", {def:{type:OM.layer.VectorLayer.TYPE_PREDEFINED, + dataSource:"mvdemo", theme:"THEME_DEMO_CITIES", + url: baseURL}, + boundingTheme:true}); + map.addLayer(layer23); + } else { + map.removeLayer(layer23); + layer23 = null; + } + }else if (id === "checkBox24") { + if (OM.isNull(layer24)) { + layer24 = new OM.layer.VectorLayer("layer24", {def:{type:OM.layer.VectorLayer.TYPE_PREDEFINED, + dataSource:"mvdemo", theme:"CUSTOMERS", + url: baseURL}, + boundingTheme:true}); + map.addLayer(layer24); + } else { + map.removeLayer(layer24); + layer24 = null; + } + } + } + + function radio_selTileLayer(radio){ + var id = radio.id; + if (id === "radioBtn31") { + if (OM.notNull(layer32) ) { + map.removeLayer(layer32); + layer32=null; + } + if (OM.notNull(layer33) ) { + map.removeLayer(layer33); + layer33=null; + } + if (OM.notNull(layer34) ) { + map.removeLayer(layer34); + layer34=null; + } + + if (OM.isNull(layer31)) { + layer31 = new OM.layer.ElocationTileLayer("eloc"); + } + map.addLayer(layer31); + } else if (id === "radioBtn32") { + if (OM.notNull(layer31) ) { + map.removeLayer(layer31); + layer31=null; + } + if (OM.notNull(layer33) ) { + map.removeLayer(layer33); + layer33=null; + } + if (OM.notNull(layer34) ) { + map.removeLayer(layer34); + layer34=null; + } + + if (OM.isNull(layer32)) { + layer32 = new OM.layer.TileLayer( + "bi_world_map", + { + dataSource:"ELOCATION_MERCATOR", + tileLayer:"bi_world_map", + tileServerURL: "https://elocation.oracle.com/mapviewer/mcserver", + }); + + } + map.addLayer(layer32); + } else if (id === "radioBtn33") { + if (OM.notNull(layer32) ) { + map.removeLayer(layer32); + layer32=null; + } + if (OM.notNull(layer34) ) { + map.removeLayer(layer34); + layer34=null; + } + if (OM.notNull(layer31) ) { + map.removeLayer(layer31); + layer31=null; + } + + if (OM.isNull(layer33)) { + layer33 = new OM.layer.TileLayer( + "osm_positron", + { + dataSource:"ELOCATION_MERCATOR", + tileLayer:"osm_positron", + tileServerURL: "https://elocation.oracle.com/mapviewer/mcserver", + }); + } + map.addLayer(layer33); + } else if (id === "radioBtn34") { + if (OM.notNull(layer32) ) { + map.removeLayer(layer32); + layer32=null; + } + if (OM.notNull(layer33) ) { + map.removeLayer(layer33); + layer33=null; + } + if (OM.notNull(layer31) ) { + map.removeLayer(layer31); + layer31=null; + } + + if (OM.isNull(layer34)) { + layer34 = new OM.layer.TileLayer( + "osm_dark", + { + dataSource:"ELOCATION_MERCATOR", + tileLayer:"osm_darkmatter", + tileServerURL: "https://elocation.oracle.com/mapviewer/mcserver", + }); + } + map.addLayer(layer34); + } + } + + +//add map controls to the provided OM.Map instance +function addMapControls(map) { + //addMapLayerControl(map); + addMapNavControl(map) + addMapCopyright(map); + //addMapTitle(map); + //addMapLegend(map); + addMapScale(map); + addToolBar(map); +} + +function addMapScale(map) { + //defines the basic properties for the map scale bars + var sbConfig = { + format: "BOTH", // imperial and metric units + anchorPosition: 5 + }; + + //creates the actual sacle bar instance and sets the display style + var scaleBar = new OM.control.ScaleBar(sbConfig); + + //defines the display style of the scale bars + var sbStyle = { + barThickness: 4, // default is 3 + scaleBarColor: '#0000d0', // default is black + fontColor: '#0000d0' // default is black + }; + scaleBar.setStyle(sbStyle); + + //adds the scale bar to the map decoration + map.addMapDecoration(scaleBar); + } + + function addMapTitle(map) { + var maptitle = new OM.control.MapDecoration(null, + { + anchorPosition: 2, + title:" Map API Displaying OSM Maps", + draggable:true, collapsible: false, + titleStyle:{ "font-size":"22px", + "font-weight":"bold", + "font-family":'Arial', + "color":"#0000d0", + "backgroundColor":"#c0c0c0", + "opacity":"0.75" + } + }); + //adds the scale bar to the map decoration + map.addMapDecoration(maptitle); +} + +function addMapScale(map) { + //defines the basic properties for the map scale bars + var sbConfig = { + format: "BOTH", // imperial and metric units + anchorPosition: 4 + }; + + //creates the actual sacle bar instance and sets the display style + var scaleBar = new OM.control.ScaleBar(sbConfig); + + //defines the display style of the scale bars + var sbStyle = { + barThickness:4, // default is 3 + scaleBarColor: '#0000d0', // default is black + fontColor: '#0000d0' // default is black + }; + scaleBar.setStyle(sbStyle); + + //adds the scale bar to the map decoration + map.addMapDecoration(scaleBar); + } + +function addMapNavControl(map) { + var options = { + anchorPosition: 3, + style: OM.control.NavigationPanelBar.STYLE_FULL + //STYLE_FULL + //STYLE_ZOOM_ONLY + //STYLE_ZOOM_BUTTONS_ONLY //--default value + //STYLE_PAN_ONLY + //STYLE_PAN_AND_ZOOM_BUTTONS + }; + + var navigationPanelBar = new OM.control.NavigationPanelBar(options); + //navigationPanelBar.setZoomLevelInfoTips({ + // 2: "Country", + // 5: "State", + // 7: "City", + // 15: "Street" + //}); + //adds the scale bar to the map decoration + map.addMapDecoration(navigationPanelBar); +} + +function addMapCopyright(map) { + var mapCopyRight = new OM.control.CopyRight({ + anchorPosition:5, + textValue:'©2020 Oracle Map API demos using ©OpenStreetMap', + fontSize:12, + fontFamily:'"Gill Sans","Helvetics Neue",Helvetica,Arial,sans-serif', + fontColor:"#104a7e" + }); + //var mapCopyRight = new OM.control.CopyRight({anchorPosition:5,textValue:'Map data: Natural Earth ',fontSize:12,fontFamily:'Arial',fontColor:'black'}); + map.addMapDecoration(mapCopyRight); +} + +function addToolBar(map) { + var toolbar = new OM.control.ToolBar("toolbar1", + { + builtInButtons : [OM.control.ToolBar.BUILTIN_ALL] + }); + toolbar.setPosition(0.01, 0.01); + map.addToolBar(toolbar); +} \ No newline at end of file diff --git a/spatial/mvc-map-api/demos/u/js/dtl_jdbc.js b/spatial/mvc-map-api/demos/u/js/dtl_jdbc.js index c07f747d..6377ba2d 100644 --- a/spatial/mvc-map-api/demos/u/js/dtl_jdbc.js +++ b/spatial/mvc-map-api/demos/u/js/dtl_jdbc.js @@ -1,416 +1,416 @@ - var myuniv; - var myconfig; - var baseURL = "http://localhost:8080/mapviewer"; - function showMap() { - var map = new OM.Map( - document.getElementById('map'), - { - mapviewerURL:baseURL, - disableOverviewMap:false - }); - - var tileLayer = new OM.layer.ElocationTileLayer("elocation", - { - //"layerName": "WORLD_MAP" - "layerName": "BI_WORLD_MAP" - //"layerName": "BI_WORLD_MAP_LIGHT" - }); - map.addLayer(tileLayer) ; - - //addDTL_States(map); - addDTL_Counties(map); - addDTL_Cities(map); - - map.setMapCenter(new OM.geometry.Point(-100, 35, 8307)); // all - map.setMapZoomLevel(3) ; // level 11 to test max_size_in_px - - map.init(); - addMapControls(map); - } - - function addDTL_States(map) { - //------------------------------------------------- - // DTL1: states using jdbc theme - // step 1: create styles and themes - // step 1.1 create style - var myc1 = new OM.style.Color({ - styleName: "mycolor1", - stroke: "#000000", - strokeOpacity: 0.5, - fill: "#F2EFE9", - fillOpacity: 0.0 - }); - - // - // step 1.2: create themes (jdbc theme) - var jdbcTStates= new OM.server.ServerJDBCTheme('theme_jdbc_states'); - jdbcTStates.setDataSourceName('mvdemo'); - jdbcTStates.setSRID('8307'); - jdbcTStates.setGeometryColumnName('geom'); - var sql='select totpop, poppsqmi, state, state_abrv, geom from states'; - jdbcTStates.setQuery(sql); - jdbcTStates.addInfoColumn({column: 'state_abrv', name:'State'}); - jdbcTStates.addInfoColumn({column: 'totpop', name:'Population'}); - jdbcTStates.addInfoColumn({column: 'poppsqmi', name:'Pop. Density'}); - jdbcTStates.setRenderingStyleName('mycolor1'); - - // Step 2: Create a server map request object; set its properties; and add themes and styles into it. - // 2.1 - var req = new OM.server.ServerMapRequest(baseURL); - // 2.2 - req.setProperties({ - dataSource:"MVDEMO", - transparent:true, - antialiase:"false" - }); - req.addTheme(jdbcTStates); - req.addStyle(myc1); - - // Step 3: Create DTL required elements: universe, config, properties; create a DTL instance and add it into OM.Map object - // 3.1 create universe, config, and dtl needed properties - myuniv= new OM.universe.WorldMercatorUniverse(); - myconfig=new OM.layer.TileLayerConfig( - { - tileImageWidth: 256, - tileImageHeight: 256 - }); - // for a DTL, the following properties precedes req's properties - var dtl_props = { // dtl specific properties - //dataSource:"MVDEMO", // if not provided, it comes from ServerMapRequest; - universe: myuniv, - tileLayerConfig: myconfig, - tileServerURL: baseURL + "/omserver", // required, if not provided, it will take ServerMapRequest's baseURL + '/omserver' - enableUTFGrid: true, - enableUTFGridInfoWindow: true, - utfGridResolution: 4 - }; - // step 3.2: create a dtl instance and added into an OM.Map instance - layerJDBCStates = new OM.layer.DynamicTileLayer("layerJDBCStates", dtl_props, req); - map.addLayer(layerJDBCStates); - } - - function addDTL_Counties(map) { - //------------------------------------------------- - // DTL2: counties using jdbc theme - // step 1: create styles and themes - // step 1.1 create styles - var sty1 = new OM.style.Color({ - styleName: "myc1",stroke: "#B77640", strokeOpacity: 0.1, fill: "#FFE6B4", fillOpacity: 0.3 - }); - var sty2 = new OM.style.Color({ - styleName: "myc2",stroke: "#B77640", strokeOpacity: 0.1,fill: "#EFBD81", fillOpacity: 0.5 - }); - var sty3 = new OM.style.Color({ - styleName: "myc3",stroke: "#B77640", strokeOpacity: 0.1,fill: "#CB8347", fillOpacity: 0.6 - }); - var sty4 = new OM.style.Color({ - styleName: "myc4",stroke: "#B77640", strokeOpacity: 0.1,fill: "#B41E00", fillOpacity: 0.7 - }); - var bkt1 = new OM.style.RangedBucket({seq:0,label: "0 - 50,000",low:0,high:50000}); - var bkt2 = new OM.style.RangedBucket({seq:1,label:"50,000 - 2.5K",low:50000,high:250000}); - var bkt3 = new OM.style.RangedBucket({seq:2,label:"2.5K - 7.5K",low:250000,high:7500000}); - var bkt4 = new OM.style.RangedBucket({seq:3,label:"> 7.5K",low:7500000,high:99999999}); - /* -- for poppsqmi - var bkt1 = new OM.style.RangedBucket({seq:0,low:0,high:100}); - var bkt2 = new OM.style.RangedBucket({seq:1,low:100,high:500}); - var bkt3 = new OM.style.RangedBucket({seq:2,low:500,high:2000}); - var bkt4 = new OM.style.RangedBucket({seq:3,low:2000,high:99999999});*/ - var bucketStyle = new OM.style.BucketStyle({ - classification: "custom", - styleName: 'my_adv_buckets', - styles: [sty1, sty2, sty3, sty4], - buckets: [bkt1, bkt2, bkt3, bkt4], - numClasses: 4, - defaultStyle: sty2 - }); - - // step 1.2: create jdbc theme - var jdbcTCounties= new OM.server.ServerJDBCTheme('theme_jdbc_counties'); - jdbcTCounties.setDataSourceName('mvdemo'); - jdbcTCounties.setSRID('8307'); - jdbcTCounties.setGeometryColumnName('geom'); - var sql='select totpop, poppsqmi, county, state_abrv, geom from counties'; - jdbcTCounties.setQuery(sql); - jdbcTCounties.addInfoColumn({column: 'state_abrv', name:'State'}); - jdbcTCounties.addInfoColumn({column: 'county', name:'County'}); - jdbcTCounties.addInfoColumn({column: 'totpop', name:'Population'}); - jdbcTCounties.addInfoColumn({column: 'poppsqmi', name:'Pop. Density'}); - jdbcTCounties.setRenderingStyleName('my_adv_buckets'); - //jdbcTCounties.setRenderingStyleValueColumns('poppsqmi'); // the column that is bound to the bucket style - jdbcTCounties.setRenderingStyleValueColumns('totpop'); // the column that is bound to the bucket style - - // step 2 Create server map request instance; set its properties; and add themes and styles into it. - // step 2.1 create server map request object - var req1 = new OM.server.ServerMapRequest(baseURL); - - // step 2.2: set req properties - req1.setProperties({ - dataSource:"MVDEMO", - transparent:true, - antialiase:"false" - }); - // step 2.3: add themes and styles into request - req1.addTheme(jdbcTCounties); - req1.addStyle(bucketStyle); - - // for a DTL, the following properties precedes req's properties - var dtl_props = { // dtl specific properties - //dataSource:"MVDEMO", // if not provided, it comes from ServerMapRequest; - universe: myuniv, - tileLayerConfig: myconfig, - tileServerURL: baseURL + "/omserver", // required, if not provided, it will take ServerMapRequest's baseURL + '/omserver' - enableUTFGrid: true, - enableUTFGridInfoWindow: true, - utfGridResolution: 4 - }; - // step 3: create DTL and add it into map obj - var layerJDBCCounties = new OM.layer.DynamicTileLayer("layerJDBCCounties", dtl_props, req1); - map.addLayer(layerJDBCCounties); - - } - - function addDTL_Cities(map) { - //DTL 3: cities using jdbc theme - // step 1: create styles and themes - // step 1.1 create styles - // scalable circle with size capped - var m1 = new OM.style.Marker({ - styleName: 'mym1', - width: 8, - height: 8, - lengthUnit: "pixel", - vectorDef: [{ - shape: {type: "circle", x: 0, y:0, width:10, height:10}, - style: {fill: "#FF9C87", fillOpacity:1, - stroke: "#ffffff", strokeThickness:1} - }] - }); - // test 2: scalable rectangle with size capped - var m2 = new OM.style.Marker({ - styleName: 'mym2', - width: 14, - height: 14, - lengthUnit: "pixel", - vectorDef: [{ - shape: {type: "circle", cx: 0, cy: 0}, - //style: {fill: "#979CA0", fillOpacity:0.7, - style: {fill: "#FFFF97", fillOpacity:0.7, - stroke: "#ffffff", strokeThickness:1} - }] - }); - // test 3: - var m3 = new OM.style.Marker({ - styleName: 'mym3', - width: 18, - height: 18, - lengthUnit: "px", - vectorDef: [{ - shape: {type: "circle", cx: 0, cy: 0}, - style: {fill: "#A7ACB0", fillOpacity:0.7, - stroke: "#ffffff", strokeThickness:1} - }] - }); - - var t1 = new OM.style.Text({ - styleName:"myt1", - fill:"#000000", - fontStyle: OM.Text.FONTSTYLE_NORMAL, // plain - fontFamily:"Dialog", - fontSize:10, - hAlign:OM.Text.HORIZONTALALIGN_LEFT - }); - - var t2 = new OM.style.Text({ - styleName:"myt2", - fill:"#000000", - fontStyle: OM.Text.FONTSTYLE_NORMAL, // plain - fontFamily:"Dialog", - fontSize:12, - hAlign:OM.Text.HORIZONTALALIGN_LEFT - }); - - var t3 = new OM.style.Text({ - styleName:"myt3", - fill:"#111111", - fontStyle: OM.Text.FONTSTYLE_NORMAL, // plain - fontFamily:"Dialog", - fontSize:14, - hAlign:OM.Text.HORIZONTALALIGN_LEFT - }); - - // step 1.2: create jdbc theme - var jdbcTCities_small= new OM.server.ServerJDBCTheme('theme_jdbc_cities_small'); - jdbcTCities_small.setDataSourceName('mvdemo'); - jdbcTCities_small.setSRID('8307'); - jdbcTCities_small.setGeometryColumnName('location'); - jdbcTCities_small.setLabelColumnName('city'); - jdbcTCities_small.setLabelStyleName('myt1'); - - jdbcTCities_small.setQuery('select location, city, state_abrv, pop90, rank90 from cities_us where pop90 < 250000'); - jdbcTCities_small.addInfoColumn({column: 'state_abrv', name:'State'}); - jdbcTCities_small.addInfoColumn({column: 'city', name:'City'}); - jdbcTCities_small.addInfoColumn({column: 'pop90', name:'Population'}); - jdbcTCities_small.addInfoColumn({column: 'rank90', name:'Rank'}); - jdbcTCities_small.setRenderingStyleName('mym1'); - - var jdbcTCities_medium= new OM.server.ServerJDBCTheme('theme_jdbc_cities_medium'); - jdbcTCities_medium.setDataSourceName('mvdemo'); - jdbcTCities_medium.setSRID('8307'); - jdbcTCities_medium.setGeometryColumnName('location'); - jdbcTCities_medium.setLabelColumnName('city'); - jdbcTCities_medium.setLabelStyleName('myt2'); - - jdbcTCities_medium.setQuery('select location, city, state_abrv, pop90, rank90 from cities_us where pop90 between 250000 and 500000'); - jdbcTCities_medium.addInfoColumn({column: 'state_abrv', name:'State'}); - jdbcTCities_medium.addInfoColumn({column: 'city', name:'City'}); - jdbcTCities_medium.addInfoColumn({column: 'pop90', name:'Population'}); - jdbcTCities_medium.addInfoColumn({column: 'rank90', name:'Rank'}); - jdbcTCities_medium.setRenderingStyleName('mym2'); - - var jdbcTCities_big= new OM.server.ServerJDBCTheme('theme_jdbc_cities_big'); - jdbcTCities_big.setDataSourceName('mvdemo'); - jdbcTCities_big.setSRID('8307'); - jdbcTCities_big.setGeometryColumnName('location'); - jdbcTCities_big.setLabelColumnName('city'); - jdbcTCities_big.setLabelStyleName('myt3'); - - jdbcTCities_big.setQuery('select location, city, state_abrv, pop90, rank90 from cities_us where pop90 > 500000'); - jdbcTCities_big.addInfoColumn({column: 'state_abrv', name:'State'}); - jdbcTCities_big.addInfoColumn({column: 'city', name:'City'}); - jdbcTCities_big.addInfoColumn({column: 'pop90', name:'Population'}); - jdbcTCities_big.addInfoColumn({column: 'rank90', name:'Rank'}); - jdbcTCities_big.setRenderingStyleName('mym3'); - // - // step 2 Create server map request instance; set its properties; and add themes and styles into it. - // step 2.1 create server map request object - var req2 = new OM.server.ServerMapRequest(baseURL); - - // step 2.2: set req properties - req2.setProperties({ - dataSource:"MVDEMO", - transparent:true, - antialiase:"false" - }); - // step 2.3: add themes and styles into req - //req2.addThemes([jdbcTCities_small, jdbcTCities_medium, jdbcTCities_big]); - //req2.addStyles([m1, t1, t2, m2, t3, m3]); // add all needed styles into request - req2.addThemes([jdbcTCities_big]); - req2.addStyles([t3, m3]); // add all needed styles into request - - //Step 3: Create DTL required elements: universe, config, properties; create a DTL instance and add it into OM.Map object - // for dyn tile layer, the following properties are considered first (override what's in ServerMapRequest) - var dtl_props2 = { // those are dtl specific - //dataSource:"MVDEMO", // if not provided, it comes from ServerMapRequest; - universe: myuniv, - tileLayerConfig: myconfig, - tileServerURL: baseURL + "/omserver", // required, if not provided, it will take ServerMapReq's baseURL + '/omserver' - enableUTFGrid: true, - //enableUTFGridInfoWindow: false, - utfGridResolution: 4 - } - - //create DTL and add it into map obj - var layerJDBCCities = new OM.layer.DynamicTileLayer("layerJDBCCities", dtl_props2, req2); - //two lines below are designated for testing - layerJDBCCities.enableUTFGridInfoWindow(true); // use function call to enable built-in infor window - //layerJDBCStates.enableUTFGridInfoWindow(false); // use function call to enable built-in infor window - map.addLayer(layerJDBCCities) ; - } - - function addMapControls(map) { - addMapNavControl(map) - addMapCopyright(map); - addMapTitle(map); - addMapScale(map); - addToolBar(map); - } - - - function addMapTitle(map) { - var maptitle = new OM.control.MapDecoration(null, - { - anchorPosition: 2, - title:" Dynamic Tile Layer", - draggable:true, collapsible: false, - titleStyle:{ "font-size":"22px", - "font-weight":"bold", - "font-family":'Arial', - "color":"#0000d0", - "backgroundColor":"#FfFfFf", - "opacity":"0.75" - } - }); - map.addMapDecoration(maptitle); - } - - function addMapScale(map) { - //defines the basic properties for the map scale bars - var sbConfig = { - format: "BOTH", // imperial and metric units - anchorPosition: 4 - }; - - //creates the actual sacle bar instance and sets the display style - var scaleBar = new OM.control.ScaleBar(sbConfig); - - //defines the display style of the scale bars - var sbStyle = { - barThickness:4, // default is 3 - scaleBarColor: '#0000d0', // default is black - fontColor: '#0000d0' // default is black - }; - scaleBar.setStyle(sbStyle); - - - //adds the scale bar to the map decoration - map.addMapDecoration(scaleBar); - } - - function addMapNavControl(map) { - var options = { - anchorPosition: 1, - style: OM.control.NavigationPanelBar.STYLE_PAN_AND_ZOOM_BUTTONS - //STYLE_FULL - //STYLE_ZOOM_ONLY - //STYLE_ZOOM_BUTTONS_ONLY //--default value - //STYLE_PAN_ONLY - //STYLE_PAN_AND_ZOOM_BUTTONS - }; - - var navigationPanelBar = new OM.control.NavigationPanelBar(options); - navigationPanelBar.setZoomLevelInfoTips({ - 2: "Country", - 5: "State", - 7: "City", - 15: "Street" - }); - map.addMapDecoration(navigationPanelBar); - } - - function addMapLayerControl(map) { - var layerControl=new OM.control.LayerControl({ - anchorPosition:1, - minWidth:200, - maxHeight:400, - left:20, - top:20, - font_size:14, - font_family:"arial" - }); - map.addMapDecoration(layerControl); - } - - function addMapCopyright(map) { - var mapCopyRight = new OM.control.CopyRight({anchorPosition:5, - textValue:'Map data: Natural Earth ', - fontSize:12,fontFamily:'Arial',fontColor:'black'}); - map.addMapDecoration(mapCopyRight); - } - function addToolBar(map) { - var toolbar = new OM.control.ToolBar("toolbar1", - { - builtInButtons : [OM.control.ToolBar.BUILTIN_ALL] - }); - toolbar.setPosition(0.8,0.0); - map.addToolBar(toolbar); + var myuniv; + var myconfig; + var baseURL = location.protocol + "//" + location.host + "/mapviewer"; + function showMap() { + var map = new OM.Map( + document.getElementById('map'), + { + mapviewerURL:baseURL, + disableOverviewMap:false + }); + + var tileLayer = new OM.layer.ElocationTileLayer("elocation", + { + //"layerName": "WORLD_MAP" + "layerName": "BI_WORLD_MAP" + //"layerName": "BI_WORLD_MAP_LIGHT" + }); + map.addLayer(tileLayer) ; + + //addDTL_States(map); + addDTL_Counties(map); + addDTL_Cities(map); + + map.setMapCenter(new OM.geometry.Point(-100, 35, 8307)); // all + map.setMapZoomLevel(3) ; // level 11 to test max_size_in_px + + map.init(); + addMapControls(map); + } + + function addDTL_States(map) { + //------------------------------------------------- + // DTL1: states using jdbc theme + // step 1: create styles and themes + // step 1.1 create style + var myc1 = new OM.style.Color({ + styleName: "mycolor1", + stroke: "#000000", + strokeOpacity: 0.5, + fill: "#F2EFE9", + fillOpacity: 0.0 + }); + + // + // step 1.2: create themes (jdbc theme) + var jdbcTStates= new OM.server.ServerJDBCTheme('theme_jdbc_states'); + jdbcTStates.setDataSourceName('mvdemo'); + jdbcTStates.setSRID('8307'); + jdbcTStates.setGeometryColumnName('geom'); + var sql='select totpop, poppsqmi, state, state_abrv, geom from states'; + jdbcTStates.setQuery(sql); + jdbcTStates.addInfoColumn({column: 'state_abrv', name:'State'}); + jdbcTStates.addInfoColumn({column: 'totpop', name:'Population'}); + jdbcTStates.addInfoColumn({column: 'poppsqmi', name:'Pop. Density'}); + jdbcTStates.setRenderingStyleName('mycolor1'); + + // Step 2: Create a server map request object; set its properties; and add themes and styles into it. + // 2.1 + var req = new OM.server.ServerMapRequest(baseURL); + // 2.2 + req.setProperties({ + dataSource:"MVDEMO", + transparent:true, + antialiase:"false" + }); + req.addTheme(jdbcTStates); + req.addStyle(myc1); + + // Step 3: Create DTL required elements: universe, config, properties; create a DTL instance and add it into OM.Map object + // 3.1 create universe, config, and dtl needed properties + myuniv= new OM.universe.WorldMercatorUniverse(); + myconfig=new OM.layer.TileLayerConfig( + { + tileImageWidth: 256, + tileImageHeight: 256 + }); + // for a DTL, the following properties precedes req's properties + var dtl_props = { // dtl specific properties + //dataSource:"MVDEMO", // if not provided, it comes from ServerMapRequest; + universe: myuniv, + tileLayerConfig: myconfig, + tileServerURL: baseURL + "/omserver", // required, if not provided, it will take ServerMapRequest's baseURL + '/omserver' + enableUTFGrid: true, + enableUTFGridInfoWindow: true, + utfGridResolution: 4 + }; + // step 3.2: create a dtl instance and added into an OM.Map instance + layerJDBCStates = new OM.layer.DynamicTileLayer("layerJDBCStates", dtl_props, req); + map.addLayer(layerJDBCStates); + } + + function addDTL_Counties(map) { + //------------------------------------------------- + // DTL2: counties using jdbc theme + // step 1: create styles and themes + // step 1.1 create styles + var sty1 = new OM.style.Color({ + styleName: "myc1",stroke: "#B77640", strokeOpacity: 0.1, fill: "#FFE6B4", fillOpacity: 0.3 + }); + var sty2 = new OM.style.Color({ + styleName: "myc2",stroke: "#B77640", strokeOpacity: 0.1,fill: "#EFBD81", fillOpacity: 0.5 + }); + var sty3 = new OM.style.Color({ + styleName: "myc3",stroke: "#B77640", strokeOpacity: 0.1,fill: "#CB8347", fillOpacity: 0.6 + }); + var sty4 = new OM.style.Color({ + styleName: "myc4",stroke: "#B77640", strokeOpacity: 0.1,fill: "#B41E00", fillOpacity: 0.7 + }); + var bkt1 = new OM.style.RangedBucket({seq:0,label: "0 - 50,000",low:0,high:50000}); + var bkt2 = new OM.style.RangedBucket({seq:1,label:"50,000 - 2.5K",low:50000,high:250000}); + var bkt3 = new OM.style.RangedBucket({seq:2,label:"2.5K - 7.5K",low:250000,high:7500000}); + var bkt4 = new OM.style.RangedBucket({seq:3,label:"> 7.5K",low:7500000,high:99999999}); + /* -- for poppsqmi + var bkt1 = new OM.style.RangedBucket({seq:0,low:0,high:100}); + var bkt2 = new OM.style.RangedBucket({seq:1,low:100,high:500}); + var bkt3 = new OM.style.RangedBucket({seq:2,low:500,high:2000}); + var bkt4 = new OM.style.RangedBucket({seq:3,low:2000,high:99999999});*/ + var bucketStyle = new OM.style.BucketStyle({ + classification: "custom", + styleName: 'my_adv_buckets', + styles: [sty1, sty2, sty3, sty4], + buckets: [bkt1, bkt2, bkt3, bkt4], + numClasses: 4, + defaultStyle: sty2 + }); + + // step 1.2: create jdbc theme + var jdbcTCounties= new OM.server.ServerJDBCTheme('theme_jdbc_counties'); + jdbcTCounties.setDataSourceName('mvdemo'); + jdbcTCounties.setSRID('8307'); + jdbcTCounties.setGeometryColumnName('geom'); + var sql='select totpop, poppsqmi, county, state_abrv, geom from counties'; + jdbcTCounties.setQuery(sql); + jdbcTCounties.addInfoColumn({column: 'state_abrv', name:'State'}); + jdbcTCounties.addInfoColumn({column: 'county', name:'County'}); + jdbcTCounties.addInfoColumn({column: 'totpop', name:'Population'}); + jdbcTCounties.addInfoColumn({column: 'poppsqmi', name:'Pop. Density'}); + jdbcTCounties.setRenderingStyleName('my_adv_buckets'); + //jdbcTCounties.setRenderingStyleValueColumns('poppsqmi'); // the column that is bound to the bucket style + jdbcTCounties.setRenderingStyleValueColumns('totpop'); // the column that is bound to the bucket style + + // step 2 Create server map request instance; set its properties; and add themes and styles into it. + // step 2.1 create server map request object + var req1 = new OM.server.ServerMapRequest(baseURL); + + // step 2.2: set req properties + req1.setProperties({ + dataSource:"MVDEMO", + transparent:true, + antialiase:"false" + }); + // step 2.3: add themes and styles into request + req1.addTheme(jdbcTCounties); + req1.addStyle(bucketStyle); + + // for a DTL, the following properties precedes req's properties + var dtl_props = { // dtl specific properties + //dataSource:"MVDEMO", // if not provided, it comes from ServerMapRequest; + universe: myuniv, + tileLayerConfig: myconfig, + tileServerURL: baseURL + "/omserver", // required, if not provided, it will take ServerMapRequest's baseURL + '/omserver' + enableUTFGrid: true, + enableUTFGridInfoWindow: true, + utfGridResolution: 4 + }; + // step 3: create DTL and add it into map obj + var layerJDBCCounties = new OM.layer.DynamicTileLayer("layerJDBCCounties", dtl_props, req1); + map.addLayer(layerJDBCCounties); + + } + + function addDTL_Cities(map) { + //DTL 3: cities using jdbc theme + // step 1: create styles and themes + // step 1.1 create styles + // scalable circle with size capped + var m1 = new OM.style.Marker({ + styleName: 'mym1', + width: 8, + height: 8, + lengthUnit: "pixel", + vectorDef: [{ + shape: {type: "circle", x: 0, y:0, width:10, height:10}, + style: {fill: "#FF9C87", fillOpacity:1, + stroke: "#ffffff", strokeThickness:1} + }] + }); + // test 2: scalable rectangle with size capped + var m2 = new OM.style.Marker({ + styleName: 'mym2', + width: 14, + height: 14, + lengthUnit: "pixel", + vectorDef: [{ + shape: {type: "circle", cx: 0, cy: 0}, + //style: {fill: "#979CA0", fillOpacity:0.7, + style: {fill: "#FFFF97", fillOpacity:0.7, + stroke: "#ffffff", strokeThickness:1} + }] + }); + // test 3: + var m3 = new OM.style.Marker({ + styleName: 'mym3', + width: 18, + height: 18, + lengthUnit: "px", + vectorDef: [{ + shape: {type: "circle", cx: 0, cy: 0}, + style: {fill: "#A7ACB0", fillOpacity:0.7, + stroke: "#ffffff", strokeThickness:1} + }] + }); + + var t1 = new OM.style.Text({ + styleName:"myt1", + fill:"#000000", + fontStyle: OM.Text.FONTSTYLE_NORMAL, // plain + fontFamily:"Dialog", + fontSize:10, + hAlign:OM.Text.HORIZONTALALIGN_LEFT + }); + + var t2 = new OM.style.Text({ + styleName:"myt2", + fill:"#000000", + fontStyle: OM.Text.FONTSTYLE_NORMAL, // plain + fontFamily:"Dialog", + fontSize:12, + hAlign:OM.Text.HORIZONTALALIGN_LEFT + }); + + var t3 = new OM.style.Text({ + styleName:"myt3", + fill:"#111111", + fontStyle: OM.Text.FONTSTYLE_NORMAL, // plain + fontFamily:"Dialog", + fontSize:14, + hAlign:OM.Text.HORIZONTALALIGN_LEFT + }); + + // step 1.2: create jdbc theme + var jdbcTCities_small= new OM.server.ServerJDBCTheme('theme_jdbc_cities_small'); + jdbcTCities_small.setDataSourceName('mvdemo'); + jdbcTCities_small.setSRID('8307'); + jdbcTCities_small.setGeometryColumnName('location'); + jdbcTCities_small.setLabelColumnName('city'); + jdbcTCities_small.setLabelStyleName('myt1'); + + jdbcTCities_small.setQuery('select location, city, state_abrv, pop90, rank90 from cities_us where pop90 < 250000'); + jdbcTCities_small.addInfoColumn({column: 'state_abrv', name:'State'}); + jdbcTCities_small.addInfoColumn({column: 'city', name:'City'}); + jdbcTCities_small.addInfoColumn({column: 'pop90', name:'Population'}); + jdbcTCities_small.addInfoColumn({column: 'rank90', name:'Rank'}); + jdbcTCities_small.setRenderingStyleName('mym1'); + + var jdbcTCities_medium= new OM.server.ServerJDBCTheme('theme_jdbc_cities_medium'); + jdbcTCities_medium.setDataSourceName('mvdemo'); + jdbcTCities_medium.setSRID('8307'); + jdbcTCities_medium.setGeometryColumnName('location'); + jdbcTCities_medium.setLabelColumnName('city'); + jdbcTCities_medium.setLabelStyleName('myt2'); + + jdbcTCities_medium.setQuery('select location, city, state_abrv, pop90, rank90 from cities_us where pop90 between 250000 and 500000'); + jdbcTCities_medium.addInfoColumn({column: 'state_abrv', name:'State'}); + jdbcTCities_medium.addInfoColumn({column: 'city', name:'City'}); + jdbcTCities_medium.addInfoColumn({column: 'pop90', name:'Population'}); + jdbcTCities_medium.addInfoColumn({column: 'rank90', name:'Rank'}); + jdbcTCities_medium.setRenderingStyleName('mym2'); + + var jdbcTCities_big= new OM.server.ServerJDBCTheme('theme_jdbc_cities_big'); + jdbcTCities_big.setDataSourceName('mvdemo'); + jdbcTCities_big.setSRID('8307'); + jdbcTCities_big.setGeometryColumnName('location'); + jdbcTCities_big.setLabelColumnName('city'); + jdbcTCities_big.setLabelStyleName('myt3'); + + jdbcTCities_big.setQuery('select location, city, state_abrv, pop90, rank90 from cities_us where pop90 > 500000'); + jdbcTCities_big.addInfoColumn({column: 'state_abrv', name:'State'}); + jdbcTCities_big.addInfoColumn({column: 'city', name:'City'}); + jdbcTCities_big.addInfoColumn({column: 'pop90', name:'Population'}); + jdbcTCities_big.addInfoColumn({column: 'rank90', name:'Rank'}); + jdbcTCities_big.setRenderingStyleName('mym3'); + // + // step 2 Create server map request instance; set its properties; and add themes and styles into it. + // step 2.1 create server map request object + var req2 = new OM.server.ServerMapRequest(baseURL); + + // step 2.2: set req properties + req2.setProperties({ + dataSource:"MVDEMO", + transparent:true, + antialiase:"false" + }); + // step 2.3: add themes and styles into req + //req2.addThemes([jdbcTCities_small, jdbcTCities_medium, jdbcTCities_big]); + //req2.addStyles([m1, t1, t2, m2, t3, m3]); // add all needed styles into request + req2.addThemes([jdbcTCities_big]); + req2.addStyles([t3, m3]); // add all needed styles into request + + //Step 3: Create DTL required elements: universe, config, properties; create a DTL instance and add it into OM.Map object + // for dyn tile layer, the following properties are considered first (override what's in ServerMapRequest) + var dtl_props2 = { // those are dtl specific + //dataSource:"MVDEMO", // if not provided, it comes from ServerMapRequest; + universe: myuniv, + tileLayerConfig: myconfig, + tileServerURL: baseURL + "/omserver", // required, if not provided, it will take ServerMapReq's baseURL + '/omserver' + enableUTFGrid: true, + //enableUTFGridInfoWindow: false, + utfGridResolution: 4 + } + + //create DTL and add it into map obj + var layerJDBCCities = new OM.layer.DynamicTileLayer("layerJDBCCities", dtl_props2, req2); + //two lines below are designated for testing + layerJDBCCities.enableUTFGridInfoWindow(true); // use function call to enable built-in infor window + //layerJDBCStates.enableUTFGridInfoWindow(false); // use function call to enable built-in infor window + map.addLayer(layerJDBCCities) ; + } + + function addMapControls(map) { + addMapNavControl(map) + addMapCopyright(map); + addMapTitle(map); + addMapScale(map); + addToolBar(map); + } + + + function addMapTitle(map) { + var maptitle = new OM.control.MapDecoration(null, + { + anchorPosition: 2, + title:" Dynamic Tile Layer", + draggable:true, collapsible: false, + titleStyle:{ "font-size":"22px", + "font-weight":"bold", + "font-family":'Arial', + "color":"#0000d0", + "backgroundColor":"#FfFfFf", + "opacity":"0.75" + } + }); + map.addMapDecoration(maptitle); + } + + function addMapScale(map) { + //defines the basic properties for the map scale bars + var sbConfig = { + format: "BOTH", // imperial and metric units + anchorPosition: 4 + }; + + //creates the actual sacle bar instance and sets the display style + var scaleBar = new OM.control.ScaleBar(sbConfig); + + //defines the display style of the scale bars + var sbStyle = { + barThickness:4, // default is 3 + scaleBarColor: '#0000d0', // default is black + fontColor: '#0000d0' // default is black + }; + scaleBar.setStyle(sbStyle); + + + //adds the scale bar to the map decoration + map.addMapDecoration(scaleBar); + } + + function addMapNavControl(map) { + var options = { + anchorPosition: 1, + style: OM.control.NavigationPanelBar.STYLE_PAN_AND_ZOOM_BUTTONS + //STYLE_FULL + //STYLE_ZOOM_ONLY + //STYLE_ZOOM_BUTTONS_ONLY //--default value + //STYLE_PAN_ONLY + //STYLE_PAN_AND_ZOOM_BUTTONS + }; + + var navigationPanelBar = new OM.control.NavigationPanelBar(options); + navigationPanelBar.setZoomLevelInfoTips({ + 2: "Country", + 5: "State", + 7: "City", + 15: "Street" + }); + map.addMapDecoration(navigationPanelBar); + } + + function addMapLayerControl(map) { + var layerControl=new OM.control.LayerControl({ + anchorPosition:1, + minWidth:200, + maxHeight:400, + left:20, + top:20, + font_size:14, + font_family:"arial" + }); + map.addMapDecoration(layerControl); + } + + function addMapCopyright(map) { + var mapCopyRight = new OM.control.CopyRight({anchorPosition:5, + textValue:'Map data: Natural Earth ', + fontSize:12,fontFamily:'Arial',fontColor:'black'}); + map.addMapDecoration(mapCopyRight); + } + function addToolBar(map) { + var toolbar = new OM.control.ToolBar("toolbar1", + { + builtInButtons : [OM.control.ToolBar.BUILTIN_ALL] + }); + toolbar.setPosition(0.8,0.0); + map.addToolBar(toolbar); } \ No newline at end of file diff --git a/spatial/mvc-map-api/demos/u/js/jdbc_states_labels.js b/spatial/mvc-map-api/demos/u/js/jdbc_states_labels.js index 1b83fb42..9924b0d6 100644 --- a/spatial/mvc-map-api/demos/u/js/jdbc_states_labels.js +++ b/spatial/mvc-map-api/demos/u/js/jdbc_states_labels.js @@ -1,239 +1,239 @@ - var colorScheme; - function showMap() { - //the DIV where the map lives; it needs to be passed into the map instance - var mapDiv = document.getElementById('map'); - //create a map instance - var map = new OM.Map(mapDiv); - - var tileLayer = new OM.layer.ElocationTileLayer("my_background_map", - { - //layerName: 'WORLD_MAP' // default - //layerName: 'BI_WORLD_MAP' - layerName: 'BI_WORLD_MAP_LIGHT' - }); - map.addLayer(tileLayer) ; - - //add jdbc vector layer for population density using color ramp - addDensityLayer(map); - //add jdbc vector layer for population using markers - addMarkerLayer(map); - map.setMapCenter(new OM.geometry.Point(-105,36) ); - map.setMapZoomLevel(3) ; - map.init() ; - addMapControls(map); - } - - function addDensityLayer(map) { - var layer = new OM.layer.VectorLayer("Population Density", { - def:{ - type: OM.layer.VectorLayer.TYPE_JDBC, - dataSource: "mvdemo", - sql: "select state, POPPSQMI, geom from states", - url: "http://localhost:8080/mapviewer", - loadOnDemand: true // only load the data if in viewport - }, - renderingStyle: getColorScheme(), - styleAttributes:['POPPSQMI'] - }); - map.addLayer(layer); - } - - function addMarkerLayer (map) { - var styVarMarkers = new OM.style.VariableMarker({ - classification: "equal", - marker: new OM.style.Marker({ - vectorDef: [{ - shape: { type: "circle", cx: 5, cy: 5, width: 10, height: 10 }, - style: { fill: "#008080", strokeThickness:2, stroke: "#ffffff", fillOpacity: 0.85 } - }] - //textStyle: new OM.style.Text({ fill: "#000000" }) - }), - startSize: 30, - increment: 10, - numClasses: 6 - }); - var textStyle = new OM.style.Text({ - styleName: "markerText", - fill: "#ffffff", - fontStyle: OM.Text.FONTSTYLE_ITALIC, - fontWeight: OM.Text.FONTWEIGHT_BOLD, - fontSize: 12, - sticky: true - }) - - var layer_MarkerWithText = new OM.layer.VectorLayer("Total Population", { - def:{type: OM.layer.VectorLayer.TYPE_JDBC, - dataSource: "mvdemo", - sql: "select state_abrv, totpop, geom from states", - url: "http://localhost:8080/mapviewer", - loadOnDemand: true, - labelColumn: "STATE_ABRV" - }, - renderingStyle: styVarMarkers, - //styleAttributes:['POPPSQMI'] - styleAttributes:["TOTPOP"] - }); - layer_MarkerWithText.setBringToTopOnMouseOver(true); - layer_MarkerWithText.setLabelingStyle(textStyle); - - map.addLayer(layer_MarkerWithText); - } - - /** - * Returns an array. Each element defines the lower and upper bound of populatin density - * @returns {Array} a custom edited JSON array. - */ - function getRangeBuckegArray () { - return [ - {low:0, high:10}, - {low:10, high:50}, - {low:50, high:250}, - {low:250, high:500}, - {low:500, high:99999} - ]; - } - - /** - * Returns the color scheme - * @returns {OM.style.ColorScheme} the color scheme - */ - function getColorScheme() { - if (colorScheme) { - return colorScheme; - } - - var ra = getRangeBuckegArray(); - var buckets = [] - for (var i=0; i" + ra[i].low+"..." + ra[i].high + "" - } - str += ""; - var legend = new OM.control.MapDecoration(str, - { anchorPosition:4, - title:"Pop. Density", - draggable:true, - titleStyle:{"opacity":"1.0", - "border-color":"#000000", - "border-width":"1px", - "font-weight":"bold", - "text-align":"center", - "font-family":'Courier New', - "backgroundColor":"#A0A0A0" - }, - contentStyle:{"opacity":"0.7","backgroundColor":"#EAEAEA"} - }); - map.addMapDecoration(legend); - } - - function addMapTitle(map) { - var maptitle = new OM.control.MapDecoration(null, - { - anchorPosition: 2, - title:" State Population and Population Density", - draggable:true, collapsible: false, - titleStyle:{ "font-size":"22px", - "font-weight":"bold", - "font-family":'Arial', - "color":"#0000d0", - "backgroundColor":"#FfFfFf", - "opacity":"0.95" - } - }); - map.addMapDecoration(maptitle); - } - - function addMapScale(map) { - //defines the basic properties for the map scale bars - var sbConfig = { - format: "BOTH", // imperial and metric units - anchorPosition: 6 - }; - - //creates the actual sacle bar instance and sets the display style - var scaleBar = new OM.control.ScaleBar(sbConfig); - - //defines the display style of the scale bars - var sbStyle = { - barThickness:6, // default is 3 - scaleBarColor: '#0000d0', // default is black - fontColor: '#0000d0' // default is black - }; - scaleBar.setStyle(sbStyle); - - - //adds the scale bar to the map decoration - map.addMapDecoration(scaleBar); - } - - function addMapNavControl(map) { - var options = { - anchorPosition: 3, - style: OM.control.NavigationPanelBar.STYLE_PAN_AND_ZOOM_BUTTONS, - //STYLE_FULL - //STYLE_ZOOM_ONLY - //STYLE_ZOOM_BUTTONS_ONLY //--default value - //STYLE_PAN_ONLY - //STYLE_PAN_AND_ZOOM_BUTTONS - backgroundColor: "#FF0000" - }; - - var navigationPanelBar = new OM.control.NavigationPanelBar(options); - navigationPanelBar.setZoomLevelInfoTips({ - 2: "Country", - 5: "State", - 7: "City", - 15: "Street" - }); - map.addMapDecoration(navigationPanelBar); - } - - function addMapLayerControl(map) { - var layerControl=new OM.control.LayerControl({ - anchorPosition:1, - minWidth:200, - maxHeight:400, - left:20, - top:20, - font_size:14, - font_family:"arial" - }); - map.addMapDecoration(layerControl); - } - - function addMapCopyright(map) { - var mapCopyRight = new OM.control.CopyRight({anchorPosition:5,textValue:'Map data: Natural Earth ',fontSize:12,fontFamily:'Arial',fontColor:'black'}); - map.addMapDecoration(mapCopyRight); + var colorScheme; + function showMap() { + //the DIV where the map lives; it needs to be passed into the map instance + var mapDiv = document.getElementById('map'); + //create a map instance + var map = new OM.Map(mapDiv); + + var tileLayer = new OM.layer.ElocationTileLayer("my_background_map", + { + //layerName: 'WORLD_MAP' // default + //layerName: 'BI_WORLD_MAP' + layerName: 'BI_WORLD_MAP_LIGHT' + }); + map.addLayer(tileLayer) ; + + //add jdbc vector layer for population density using color ramp + addDensityLayer(map); + //add jdbc vector layer for population using markers + addMarkerLayer(map); + map.setMapCenter(new OM.geometry.Point(-105,36) ); + map.setMapZoomLevel(3) ; + map.init() ; + addMapControls(map); + } + + function addDensityLayer(map) { + var layer = new OM.layer.VectorLayer("Population Density", { + def:{ + type: OM.layer.VectorLayer.TYPE_JDBC, + dataSource: "mvdemo", + sql: "select state, POPPSQMI, geom from states", + url: location.protocol + "//" + location.host + "/mapviewer", + loadOnDemand: true // only load the data if in viewport + }, + renderingStyle: getColorScheme(), + styleAttributes:['POPPSQMI'] + }); + map.addLayer(layer); + } + + function addMarkerLayer (map) { + var styVarMarkers = new OM.style.VariableMarker({ + classification: "equal", + marker: new OM.style.Marker({ + vectorDef: [{ + shape: { type: "circle", cx: 5, cy: 5, width: 10, height: 10 }, + style: { fill: "#008080", strokeThickness:2, stroke: "#ffffff", fillOpacity: 0.85 } + }] + //textStyle: new OM.style.Text({ fill: "#000000" }) + }), + startSize: 30, + increment: 10, + numClasses: 6 + }); + var textStyle = new OM.style.Text({ + styleName: "markerText", + fill: "#ffffff", + fontStyle: OM.Text.FONTSTYLE_ITALIC, + fontWeight: OM.Text.FONTWEIGHT_BOLD, + fontSize: 12, + sticky: true + }) + + var layer_MarkerWithText = new OM.layer.VectorLayer("Total Population", { + def:{type: OM.layer.VectorLayer.TYPE_JDBC, + dataSource: "mvdemo", + sql: "select state_abrv, totpop, geom from states", + url: location.protocol + "//" + location.host + "/mapviewer", + loadOnDemand: true, + labelColumn: "STATE_ABRV" + }, + renderingStyle: styVarMarkers, + //styleAttributes:['POPPSQMI'] + styleAttributes:["TOTPOP"] + }); + layer_MarkerWithText.setBringToTopOnMouseOver(true); + layer_MarkerWithText.setLabelingStyle(textStyle); + + map.addLayer(layer_MarkerWithText); + } + + /** + * Returns an array. Each element defines the lower and upper bound of populatin density + * @returns {Array} a custom edited JSON array. + */ + function getRangeBuckegArray () { + return [ + {low:0, high:10}, + {low:10, high:50}, + {low:50, high:250}, + {low:250, high:500}, + {low:500, high:99999} + ]; + } + + /** + * Returns the color scheme + * @returns {OM.style.ColorScheme} the color scheme + */ + function getColorScheme() { + if (colorScheme) { + return colorScheme; + } + + var ra = getRangeBuckegArray(); + var buckets = [] + for (var i=0; i" + ra[i].low+"..." + ra[i].high + "" + } + str += ""; + var legend = new OM.control.MapDecoration(str, + { anchorPosition:4, + title:"Pop. Density", + draggable:true, + titleStyle:{"opacity":"1.0", + "border-color":"#000000", + "border-width":"1px", + "font-weight":"bold", + "text-align":"center", + "font-family":'Courier New', + "backgroundColor":"#A0A0A0" + }, + contentStyle:{"opacity":"0.7","backgroundColor":"#EAEAEA"} + }); + map.addMapDecoration(legend); + } + + function addMapTitle(map) { + var maptitle = new OM.control.MapDecoration(null, + { + anchorPosition: 2, + title:" State Population and Population Density", + draggable:true, collapsible: false, + titleStyle:{ "font-size":"22px", + "font-weight":"bold", + "font-family":'Arial', + "color":"#0000d0", + "backgroundColor":"#FfFfFf", + "opacity":"0.95" + } + }); + map.addMapDecoration(maptitle); + } + + function addMapScale(map) { + //defines the basic properties for the map scale bars + var sbConfig = { + format: "BOTH", // imperial and metric units + anchorPosition: 6 + }; + + //creates the actual sacle bar instance and sets the display style + var scaleBar = new OM.control.ScaleBar(sbConfig); + + //defines the display style of the scale bars + var sbStyle = { + barThickness:6, // default is 3 + scaleBarColor: '#0000d0', // default is black + fontColor: '#0000d0' // default is black + }; + scaleBar.setStyle(sbStyle); + + + //adds the scale bar to the map decoration + map.addMapDecoration(scaleBar); + } + + function addMapNavControl(map) { + var options = { + anchorPosition: 3, + style: OM.control.NavigationPanelBar.STYLE_PAN_AND_ZOOM_BUTTONS, + //STYLE_FULL + //STYLE_ZOOM_ONLY + //STYLE_ZOOM_BUTTONS_ONLY //--default value + //STYLE_PAN_ONLY + //STYLE_PAN_AND_ZOOM_BUTTONS + backgroundColor: "#FF0000" + }; + + var navigationPanelBar = new OM.control.NavigationPanelBar(options); + navigationPanelBar.setZoomLevelInfoTips({ + 2: "Country", + 5: "State", + 7: "City", + 15: "Street" + }); + map.addMapDecoration(navigationPanelBar); + } + + function addMapLayerControl(map) { + var layerControl=new OM.control.LayerControl({ + anchorPosition:1, + minWidth:200, + maxHeight:400, + left:20, + top:20, + font_size:14, + font_family:"arial" + }); + map.addMapDecoration(layerControl); + } + + function addMapCopyright(map) { + var mapCopyRight = new OM.control.CopyRight({anchorPosition:5,textValue:'Map data: Natural Earth ',fontSize:12,fontFamily:'Arial',fontColor:'black'}); + map.addMapDecoration(mapCopyRight); } \ No newline at end of file diff --git a/spatial/mvc-map-api/demos/u/js/state_county_drilldown.js b/spatial/mvc-map-api/demos/u/js/state_county_drilldown.js index f28ecf16..7c544ce8 100644 --- a/spatial/mvc-map-api/demos/u/js/state_county_drilldown.js +++ b/spatial/mvc-map-api/demos/u/js/state_county_drilldown.js @@ -1,442 +1,442 @@ -var map = null; -var statesLayer = null, countiesLayer=null; -var stateCountyLayer = null; -var layerName="States"; -var mapCenterLon = -20000; -var mapCenterLat = 1750000; -var mapZoom = 2; -var mpoint = new OM.geometry.Point(mapCenterLon,mapCenterLat,32775); -var currentPalette = null, currentStyle=null; -var myDefaultSty = 'YlBr5';//'Greys5'; - -var bucketRanges = { -"States3" : { buckets:3, - ranges: [ - {lo:0, hi:1722850}, - {lo:1722850, hi:4866692}, - {lo:4866692, hi:500000000} - ] - }, -"States5" : { buckets:5, - ranges: [ - {lo:0, hi:1006749}, - {lo:1006749, hi:2573216}, - {lo:2573216, hi:4219972}, - {lo:4219972, hi:6478216}, - {lo:6478216, hi:500000000} - ] - }, -"Counties3" : { buckets:3, - ranges:[ - {lo:0, hi:12823}, - {lo:12823, hi:36882}, - {lo:36882, hi:50000000} - ] - }, -"Counties5" : { buckets:5, - ranges: [ - {lo:0, hi:10000}, - {lo:10000, hi:25000}, - {lo:25000, hi:60000}, - {lo:60000, hi:100000}, - {lo:100000, hi:50000000} - ] - } -}; - -/** - * color series from ColorBrewer site (http://colorbrewer2.org/). - */ - -var colorSeries = { - -//multi-hue color scheme #10 YlBl. - -"YlBl3": { classes:3, - imgFileName:"mh10_3.png", - fill: [0xEDF8B1, 0x7FCDBB, 0x2C7FB8], - stroke:[0xB5DF9F, 0x72B8A8, 0x2872A6], - limit:[0xFAFDE8, 0xD9F0EB, 0xC0D9EA] - }, - -"YlBl5": { classes:5, - imgFileName:"mh10_5.png", - fill:[0xFFFFCC, 0xA1DAB4, 0x41B6C4, 0x2C7FB8, 0x253494], - stroke:[0xE6E6B8, 0x91BCA2, 0x3AA4B0, 0x2872A6, 0x212F85], - limit:[0xFFFFEB, 0xE3F1E8, 0xD9F0F3, 0xC0D9EA, 0xBEC2DF] - }, - -//multi-hue color scheme #11 YlBr. - - "YlBr3": {classes:3, - imgFileName:"mh11_3.png", - fill:[0xFFF7BC, 0xFEC44F, 0xD95F0E], - stroke:[0xE6DEA9, 0xE5B047, 0xC5360D], - limit:[0xFFFDEB, 0xFFEDCA, 0xF4CFB7] - - }, - -"YlBr5": {classes:5, - imgFileName:"mh11_5.png", - fill:[0xFFFFD4, 0xFED98E, 0xFE9929, 0xD95F0E, 0x993404], - stroke:[0xE6E6BF, 0xE5C380, 0xE58A25, 0xC35663, 0x8A2F04], - limit:[0xFFFFF2, 0xFFF4DD, 0xFFE0BF, 0xF0BFC5, 0xE0C2B4] - }, -// single-hue color schemes (blues, greens, greys, oranges, reds, purples) -"Purples5": {classes:5, - imgFileName:"mh11_5.png", - fill:[0xf2f0f7, 0xcbc9e2, 0x9e9ac8, 0x756bb1, 0x54278f], - stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3], - limit:[0xFFFFF2, 0xFFF4DD, 0xFFE0BF, 0xF0BFC5, 0xE0C2B4] - }, -"Blues5": {classes:5, - imgFileName:"mh11_5.png", - fill:[0xEFF3FF, 0xbdd7e7, 0x68aed6, 0x3182bd, 0x18519C], - stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3], - limit:[0xFFFFF2, 0xFFF4DD, 0xFFE0BF, 0xF0BFC5, 0xE0C2B4] - }, -"Greens5": {classes:5, - imgFileName:"mh11_5.png", - fill:[0xedf8e9, 0xbae4b3, 0x74c476, 0x31a354, 0x116d2c], - stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3], - limit:[0xFFFFF2, 0xFFF4DD, 0xFFE0BF, 0xF0BFC5, 0xE0C2B4] - }, -"Greys5": {classes:5, - imgFileName:"mh11_5.png", - fill:[0xf7f7f7, 0xcccccc, 0x969696, 0x636363, 0x454545], - stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3], - limit:[0xFFFFF2, 0xFFF4DD, 0xFFE0BF, 0xF0BFC5, 0xE0C2B4] - }, -"Oranges5": {classes:5, - imgFileName:"mh11_5.png", - fill:[0xfeedde, 0xfdb385, 0xfd8d3c, 0xe6550d, 0xa63603], - stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3], - limit:[0xFFFFF2, 0xFFF4DD, 0xFFE0BF, 0xF0BFC5, 0xE0C2B4] - }, -"Reds5": {classes:5, - imgFileName:"mh11_5.png", - fill:[0xfee5d9, 0xfcae91, 0xfb6a4a, 0xde2d26, 0xa50f15], - stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3], - limit:[0xFFFFF2, 0xFFF4DD, 0xFFE0BF, 0xF0BFC5, 0xE0C2B4] - } -}; - -function showMap() { - OM.gv.setResourcePath("../.."); - - $('#demo-htmlselect').ddslick({ - width: "220px", - background: "#cccccc", - selectText: "Select color palette", - onSelected: function () { - var ddData = $('#demo-htmlselect').data('ddslick'); - displaySelectedData(ddData); - }}); - - var myUniv= new OM.universe.Universe( - { - srid : 32775, - bounds : new OM.geometry.Rectangle( - -3280000, 170000, 2300000, 3200000, 32775), - numberOfZoomLevels: 16 - }); - map = new OM.Map( - document.getElementById('map'), - { mapviewerURL: "http://localhost:8080mapviewer", - universe: myUniv - }) ; - states(); - addMapControls(map); -} - - - -function createBucketColorStyle(colorName, colorSeries, rangeName, bucketRanges) -{ - var theBucketStyle; - var bucketStyleDef; - var theBuckets = []; - var theStyles = []; - var theColors = []; - var aBucket, aStyle, aColor, aRange; - var numClasses ; - - numClasses = colorSeries[colorName].classes; - - // create buckets - for (var i=0; i < numClasses; i++) { - aBucket = new OM.style.RangedBucket( - { low:bucketRanges[rangeName].ranges[i].lo, - high:bucketRanges[rangeName].ranges[i].hi - }); - - theBuckets.push(aBucket); - }; - - // create Styles - for (var i=0; i < numClasses; i++) { - theStyles[i] = new OM.style.Color( - {fill: colorSeries[colorName].fill[i], - stroke:colorSeries[colorName].stroke[i], - strokeOpacity: 1 - }); - }; - - bucketStyleDef = { - numClasses : colorSeries[colorName].classes, - classification: 'custom', //since we are supplying all the buckets - buckets: theBuckets, - styles: theStyles, - gradient: 'off' - //gradient: useGradient? 'radial' : 'off' - }; - - - theBucketStyle = new OM.style.BucketStyle(bucketStyleDef); - - - return theBucketStyle; -} - -function states() -{ - layerName = "States"; - - if(statesLayer) - { - if(countiesLayer) - countiesLayer.setVisible(false); - // states where already visible with a white outline - // set the style to the currently selected one - // statesLayer.setVisible(true); - var theDDdata = $('#demo-htmlselect').data('ddslick'); - setStyle(theDDdata.selectedData.value); - } - else - { - - var layer2 = new OM.layer.VectorLayer("vLayer2", - { - def: - { - type: OM.layer.VectorLayer.TYPE_PREDEFINED, - dataSource: "mvdemo", - theme: "us_states_bi", - url: "http://localhost:8080/mapviewer", - loadOnDemand: false - }, - boundingTheme:true - }); - - // add drop shadow effect and hover style - var shadowFilter = new OM.visualfilter.DropShadow({opacity:0.5, color:"#000000", offset:6, radius:10}); - // layer2.setVisualFilter(shadowFilter); - - var hoverStyle = new OM.style.Color( - {stroke:"#FFFFFF", strokeThickness:2}); - // remove fill so that the thematic fill is preserved when on hover - //{fill:"#D95F0E", stroke:"#EFA95B", strokeThickness:1}); - - layer2.setHoverStyle(hoverStyle); - layer2.setHoverVisualFilter(shadowFilter); - - layer2.enableFeatureHover(true); - - layer2.enableFeatureSelection(false); - layer2.setLabelsVisible(true); - -// override rendering style with programmatic one - - var theRenderingStyle = - createBucketColorStyle(myDefaultSty, colorSeries, 'States5', bucketRanges, true); - - layer2.setRenderingStyle(theRenderingStyle); - - currentPalette = myDefaultSty; - - var stLayerIdx = map.addLayer(layer2); - //alert('State Layer Idx = ' + stLayerIdx); - - map.setMapCenter(mpoint); - - map.setMapZoomLevel(mapZoom) ; - - //map.hideOverviewMap(); - map.init() ; - - statesLayer=layer2; - - // add rt-click event listener - layer2.addListener(OM.event.MouseEvent.MOUSE_RIGHT_CLICK, stateRtClick); - } // end if - -} // end states - - -function setStyle(styleName) -{ - // alert("Selected Style = " + styleName); - - var newRenderingStyle = null; - if (layerName === "States") - { - if(/3/.test(styleName)) - { - newRenderingStyle = - createBucketColorStyle(styleName, colorSeries, 'States3', bucketRanges, false); - currentStyle = createBucketColorStyle(styleName, colorSeries, 'Counties3', bucketRanges, false); - } - else - { - newRenderingStyle = - createBucketColorStyle(styleName, colorSeries, 'States5', bucketRanges, false); - currentStyle = createBucketColorStyle(styleName, colorSeries, 'Counties5', bucketRanges, false); - } - statesLayer.setRenderingStyle(newRenderingStyle); - if (stateCountyLayer) - stateCountyLayer.setRenderingStyle(currentStyle, ["TOTPOP"]); - } else if (layerName === "Counties") { - if(/3/.test(styleName)) { - newRenderingStyle = - createBucketColorStyle(styleName, colorSeries, 'Counties3', bucketRanges, false); - } else { - newRenderingStyle = - createBucketColorStyle(styleName, colorSeries, 'Counties5', bucketRanges, false); - } - - countiesLayer.setRenderingStyle(newRenderingStyle); - //currentStyle = newRenderingStyle; - } -} // end setStyle - -function stateRtClick(evt){ - var foi = evt.feature; - // display another layer with counties info - // layer may change on each rt-click so create and add each time. - var countyByState = null ; - - if (currentStyle === null) - currentStyle = createBucketColorStyle(myDefaultSty, colorSeries, 'Counties5', bucketRanges, false); - - // remove existing layer - if(stateCountyLayer) - map.removeLayer(stateCountyLayer); - - countyByState = new OM.layer.VectorLayer("stCountyLayer", - {def:{type: OM.layer.VectorLayer.TYPE_JDBC, - dataSource: "mvdemo", - sql: "select county,totpop,geom32775 from counties_32775_moved where state_abrv="+ - "'"+foi.getAttributeValue('_label_')+"'", - url: "http://localhost:8080/mapviewer"}}); - - - countyByState.setVisible(true); - countyByState.setRenderingStyle(currentStyle, ["TOTPOP"]); - - map.addLayer(countyByState); - - //map.addLayer(countyByState); - stateCountyLayer = countyByState; -} // end stateRtClick - -function displaySelectedData(ddData) -{ - // if only testing ddslick by itself then alert else do required tasks - if(map) - { - // code to update renderStyle goes here - //alert('will try to change render style'); - setStyle(ddData.selectedData.value); - } - else - { - // do nothing - } -} - - function addMapControls(map) { - addMapNavControl(map) - addMapCopyright(map); - addMapTitle(map); - addMapScale(map); - } - - - function addMapTitle(map) { - var maptitle = new OM.control.MapDecoration(null, - { - anchorPosition: 2, - title:" State Pop. Density and County Population", - draggable:true, collapsible: false, - titleStyle:{ "font-size":"22px", - "font-weight":"bold", - "font-family":'Arial', - "color":"#0000d0", - "backgroundColor":"#FfFfFf", - "opacity":"0.75" - } - }); - map.addMapDecoration(maptitle); - } - - function addMapScale(map) { - //defines the basic properties for the map scale bars - var sbConfig = { - format: "BOTH", // imperial and metric units - anchorPosition: 4 - }; - - //creates the actual sacle bar instance and sets the display style - var scaleBar = new OM.control.ScaleBar(sbConfig); - - //defines the display style of the scale bars - var sbStyle = { - barThickness:4, // default is 3 - scaleBarColor: '#0000d0', // default is black - fontColor: '#0000d0' // default is black - }; - scaleBar.setStyle(sbStyle); - - - //adds the scale bar to the map decoration - map.addMapDecoration(scaleBar); - } - - function addMapNavControl(map) { - var options = { - anchorPosition: 1, - style: OM.control.NavigationPanelBar.STYLE_PAN_AND_ZOOM_BUTTONS - //STYLE_FULL - //STYLE_ZOOM_ONLY - //STYLE_ZOOM_BUTTONS_ONLY //--default value - //STYLE_PAN_ONLY - //STYLE_PAN_AND_ZOOM_BUTTONS - }; - - var navigationPanelBar = new OM.control.NavigationPanelBar(options); - navigationPanelBar.setZoomLevelInfoTips({ - 2: "Country", - 5: "State", - 7: "City", - 15: "Street" - }); - map.addMapDecoration(navigationPanelBar); - } - - function addMapLayerControl(map) { - var layerControl=new OM.control.LayerControl({ - anchorPosition:1, - minWidth:200, - maxHeight:400, - left:20, - top:20, - font_size:14, - font_family:"arial" - }); - map.addMapDecoration(layerControl); - } - - function addMapCopyright(map) { - var mapCopyRight = new OM.control.CopyRight({anchorPosition:5,textValue:'Map data: Natural Earth ',fontSize:12,fontFamily:'Arial',fontColor:'black'}); - map.addMapDecoration(mapCopyRight); +var map = null; +var statesLayer = null, countiesLayer=null; +var stateCountyLayer = null; +var layerName="States"; +var mapCenterLon = -20000; +var mapCenterLat = 1750000; +var mapZoom = 2; +var mpoint = new OM.geometry.Point(mapCenterLon,mapCenterLat,32775); +var currentPalette = null, currentStyle=null; +var myDefaultSty = 'YlBr5';//'Greys5'; + +var bucketRanges = { +"States3" : { buckets:3, + ranges: [ + {lo:0, hi:1722850}, + {lo:1722850, hi:4866692}, + {lo:4866692, hi:500000000} + ] + }, +"States5" : { buckets:5, + ranges: [ + {lo:0, hi:1006749}, + {lo:1006749, hi:2573216}, + {lo:2573216, hi:4219972}, + {lo:4219972, hi:6478216}, + {lo:6478216, hi:500000000} + ] + }, +"Counties3" : { buckets:3, + ranges:[ + {lo:0, hi:12823}, + {lo:12823, hi:36882}, + {lo:36882, hi:50000000} + ] + }, +"Counties5" : { buckets:5, + ranges: [ + {lo:0, hi:10000}, + {lo:10000, hi:25000}, + {lo:25000, hi:60000}, + {lo:60000, hi:100000}, + {lo:100000, hi:50000000} + ] + } +}; + +/** + * color series from ColorBrewer site (http://colorbrewer2.org/). + */ + +var colorSeries = { + +//multi-hue color scheme #10 YlBl. + +"YlBl3": { classes:3, + imgFileName:"mh10_3.png", + fill: [0xEDF8B1, 0x7FCDBB, 0x2C7FB8], + stroke:[0xB5DF9F, 0x72B8A8, 0x2872A6], + limit:[0xFAFDE8, 0xD9F0EB, 0xC0D9EA] + }, + +"YlBl5": { classes:5, + imgFileName:"mh10_5.png", + fill:[0xFFFFCC, 0xA1DAB4, 0x41B6C4, 0x2C7FB8, 0x253494], + stroke:[0xE6E6B8, 0x91BCA2, 0x3AA4B0, 0x2872A6, 0x212F85], + limit:[0xFFFFEB, 0xE3F1E8, 0xD9F0F3, 0xC0D9EA, 0xBEC2DF] + }, + +//multi-hue color scheme #11 YlBr. + + "YlBr3": {classes:3, + imgFileName:"mh11_3.png", + fill:[0xFFF7BC, 0xFEC44F, 0xD95F0E], + stroke:[0xE6DEA9, 0xE5B047, 0xC5360D], + limit:[0xFFFDEB, 0xFFEDCA, 0xF4CFB7] + + }, + +"YlBr5": {classes:5, + imgFileName:"mh11_5.png", + fill:[0xFFFFD4, 0xFED98E, 0xFE9929, 0xD95F0E, 0x993404], + stroke:[0xE6E6BF, 0xE5C380, 0xE58A25, 0xC35663, 0x8A2F04], + limit:[0xFFFFF2, 0xFFF4DD, 0xFFE0BF, 0xF0BFC5, 0xE0C2B4] + }, +// single-hue color schemes (blues, greens, greys, oranges, reds, purples) +"Purples5": {classes:5, + imgFileName:"mh11_5.png", + fill:[0xf2f0f7, 0xcbc9e2, 0x9e9ac8, 0x756bb1, 0x54278f], + stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3], + limit:[0xFFFFF2, 0xFFF4DD, 0xFFE0BF, 0xF0BFC5, 0xE0C2B4] + }, +"Blues5": {classes:5, + imgFileName:"mh11_5.png", + fill:[0xEFF3FF, 0xbdd7e7, 0x68aed6, 0x3182bd, 0x18519C], + stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3], + limit:[0xFFFFF2, 0xFFF4DD, 0xFFE0BF, 0xF0BFC5, 0xE0C2B4] + }, +"Greens5": {classes:5, + imgFileName:"mh11_5.png", + fill:[0xedf8e9, 0xbae4b3, 0x74c476, 0x31a354, 0x116d2c], + stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3], + limit:[0xFFFFF2, 0xFFF4DD, 0xFFE0BF, 0xF0BFC5, 0xE0C2B4] + }, +"Greys5": {classes:5, + imgFileName:"mh11_5.png", + fill:[0xf7f7f7, 0xcccccc, 0x969696, 0x636363, 0x454545], + stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3], + limit:[0xFFFFF2, 0xFFF4DD, 0xFFE0BF, 0xF0BFC5, 0xE0C2B4] + }, +"Oranges5": {classes:5, + imgFileName:"mh11_5.png", + fill:[0xfeedde, 0xfdb385, 0xfd8d3c, 0xe6550d, 0xa63603], + stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3], + limit:[0xFFFFF2, 0xFFF4DD, 0xFFE0BF, 0xF0BFC5, 0xE0C2B4] + }, +"Reds5": {classes:5, + imgFileName:"mh11_5.png", + fill:[0xfee5d9, 0xfcae91, 0xfb6a4a, 0xde2d26, 0xa50f15], + stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3], + limit:[0xFFFFF2, 0xFFF4DD, 0xFFE0BF, 0xF0BFC5, 0xE0C2B4] + } +}; + +function showMap() { + OM.gv.setResourcePath("../.."); + + $('#demo-htmlselect').ddslick({ + width: "220px", + background: "#cccccc", + selectText: "Select color palette", + onSelected: function () { + var ddData = $('#demo-htmlselect').data('ddslick'); + displaySelectedData(ddData); + }}); + + var myUniv= new OM.universe.Universe( + { + srid : 32775, + bounds : new OM.geometry.Rectangle( + -3280000, 170000, 2300000, 3200000, 32775), + numberOfZoomLevels: 16 + }); + map = new OM.Map( + document.getElementById('map'), + { mapviewerURL: location.protocol + "//" + location.host + "/mapviewer", + universe: myUniv + }) ; + states(); + addMapControls(map); +} + + + +function createBucketColorStyle(colorName, colorSeries, rangeName, bucketRanges) +{ + var theBucketStyle; + var bucketStyleDef; + var theBuckets = []; + var theStyles = []; + var theColors = []; + var aBucket, aStyle, aColor, aRange; + var numClasses ; + + numClasses = colorSeries[colorName].classes; + + // create buckets + for (var i=0; i < numClasses; i++) { + aBucket = new OM.style.RangedBucket( + { low:bucketRanges[rangeName].ranges[i].lo, + high:bucketRanges[rangeName].ranges[i].hi + }); + + theBuckets.push(aBucket); + }; + + // create Styles + for (var i=0; i < numClasses; i++) { + theStyles[i] = new OM.style.Color( + {fill: colorSeries[colorName].fill[i], + stroke:colorSeries[colorName].stroke[i], + strokeOpacity: 1 + }); + }; + + bucketStyleDef = { + numClasses : colorSeries[colorName].classes, + classification: 'custom', //since we are supplying all the buckets + buckets: theBuckets, + styles: theStyles, + gradient: 'off' + //gradient: useGradient? 'radial' : 'off' + }; + + + theBucketStyle = new OM.style.BucketStyle(bucketStyleDef); + + + return theBucketStyle; +} + +function states() +{ + layerName = "States"; + + if(statesLayer) + { + if(countiesLayer) + countiesLayer.setVisible(false); + // states where already visible with a white outline + // set the style to the currently selected one + // statesLayer.setVisible(true); + var theDDdata = $('#demo-htmlselect').data('ddslick'); + setStyle(theDDdata.selectedData.value); + } + else + { + + var layer2 = new OM.layer.VectorLayer("vLayer2", + { + def: + { + type: OM.layer.VectorLayer.TYPE_PREDEFINED, + dataSource: "mvdemo", + theme: "us_states_bi", + url: location.protocol + "//" + location.host + "/mapviewer", + loadOnDemand: false + }, + boundingTheme:true + }); + + // add drop shadow effect and hover style + var shadowFilter = new OM.visualfilter.DropShadow({opacity:0.5, color:"#000000", offset:6, radius:10}); + // layer2.setVisualFilter(shadowFilter); + + var hoverStyle = new OM.style.Color( + {stroke:"#FFFFFF", strokeThickness:2}); + // remove fill so that the thematic fill is preserved when on hover + //{fill:"#D95F0E", stroke:"#EFA95B", strokeThickness:1}); + + layer2.setHoverStyle(hoverStyle); + layer2.setHoverVisualFilter(shadowFilter); + + layer2.enableFeatureHover(true); + + layer2.enableFeatureSelection(false); + layer2.setLabelsVisible(true); + +// override rendering style with programmatic one + + var theRenderingStyle = + createBucketColorStyle(myDefaultSty, colorSeries, 'States5', bucketRanges, true); + + layer2.setRenderingStyle(theRenderingStyle); + + currentPalette = myDefaultSty; + + var stLayerIdx = map.addLayer(layer2); + //alert('State Layer Idx = ' + stLayerIdx); + + map.setMapCenter(mpoint); + + map.setMapZoomLevel(mapZoom) ; + + //map.hideOverviewMap(); + map.init() ; + + statesLayer=layer2; + + // add rt-click event listener + layer2.addListener(OM.event.MouseEvent.MOUSE_RIGHT_CLICK, stateRtClick); + } // end if + +} // end states + + +function setStyle(styleName) +{ + // alert("Selected Style = " + styleName); + + var newRenderingStyle = null; + if (layerName === "States") + { + if(/3/.test(styleName)) + { + newRenderingStyle = + createBucketColorStyle(styleName, colorSeries, 'States3', bucketRanges, false); + currentStyle = createBucketColorStyle(styleName, colorSeries, 'Counties3', bucketRanges, false); + } + else + { + newRenderingStyle = + createBucketColorStyle(styleName, colorSeries, 'States5', bucketRanges, false); + currentStyle = createBucketColorStyle(styleName, colorSeries, 'Counties5', bucketRanges, false); + } + statesLayer.setRenderingStyle(newRenderingStyle); + if (stateCountyLayer) + stateCountyLayer.setRenderingStyle(currentStyle, ["TOTPOP"]); + } else if (layerName === "Counties") { + if(/3/.test(styleName)) { + newRenderingStyle = + createBucketColorStyle(styleName, colorSeries, 'Counties3', bucketRanges, false); + } else { + newRenderingStyle = + createBucketColorStyle(styleName, colorSeries, 'Counties5', bucketRanges, false); + } + + countiesLayer.setRenderingStyle(newRenderingStyle); + //currentStyle = newRenderingStyle; + } +} // end setStyle + +function stateRtClick(evt){ + var foi = evt.feature; + // display another layer with counties info + // layer may change on each rt-click so create and add each time. + var countyByState = null ; + + if (currentStyle === null) + currentStyle = createBucketColorStyle(myDefaultSty, colorSeries, 'Counties5', bucketRanges, false); + + // remove existing layer + if(stateCountyLayer) + map.removeLayer(stateCountyLayer); + + countyByState = new OM.layer.VectorLayer("stCountyLayer", + {def:{type: OM.layer.VectorLayer.TYPE_JDBC, + dataSource: "mvdemo", + sql: "select county,totpop,geom32775 from counties_32775_moved where state_abrv="+ + "'"+foi.getAttributeValue('_label_')+"'", + url: location.protocol + "//" + location.host + "/mapviewer"}}); + + + countyByState.setVisible(true); + countyByState.setRenderingStyle(currentStyle, ["TOTPOP"]); + + map.addLayer(countyByState); + + //map.addLayer(countyByState); + stateCountyLayer = countyByState; +} // end stateRtClick + +function displaySelectedData(ddData) +{ + // if only testing ddslick by itself then alert else do required tasks + if(map) + { + // code to update renderStyle goes here + //alert('will try to change render style'); + setStyle(ddData.selectedData.value); + } + else + { + // do nothing + } +} + + function addMapControls(map) { + addMapNavControl(map) + addMapCopyright(map); + addMapTitle(map); + addMapScale(map); + } + + + function addMapTitle(map) { + var maptitle = new OM.control.MapDecoration(null, + { + anchorPosition: 2, + title:" State Pop. Density and County Population", + draggable:true, collapsible: false, + titleStyle:{ "font-size":"22px", + "font-weight":"bold", + "font-family":'Arial', + "color":"#0000d0", + "backgroundColor":"#FfFfFf", + "opacity":"0.75" + } + }); + map.addMapDecoration(maptitle); + } + + function addMapScale(map) { + //defines the basic properties for the map scale bars + var sbConfig = { + format: "BOTH", // imperial and metric units + anchorPosition: 4 + }; + + //creates the actual sacle bar instance and sets the display style + var scaleBar = new OM.control.ScaleBar(sbConfig); + + //defines the display style of the scale bars + var sbStyle = { + barThickness:4, // default is 3 + scaleBarColor: '#0000d0', // default is black + fontColor: '#0000d0' // default is black + }; + scaleBar.setStyle(sbStyle); + + + //adds the scale bar to the map decoration + map.addMapDecoration(scaleBar); + } + + function addMapNavControl(map) { + var options = { + anchorPosition: 1, + style: OM.control.NavigationPanelBar.STYLE_PAN_AND_ZOOM_BUTTONS + //STYLE_FULL + //STYLE_ZOOM_ONLY + //STYLE_ZOOM_BUTTONS_ONLY //--default value + //STYLE_PAN_ONLY + //STYLE_PAN_AND_ZOOM_BUTTONS + }; + + var navigationPanelBar = new OM.control.NavigationPanelBar(options); + navigationPanelBar.setZoomLevelInfoTips({ + 2: "Country", + 5: "State", + 7: "City", + 15: "Street" + }); + map.addMapDecoration(navigationPanelBar); + } + + function addMapLayerControl(map) { + var layerControl=new OM.control.LayerControl({ + anchorPosition:1, + minWidth:200, + maxHeight:400, + left:20, + top:20, + font_size:14, + font_family:"arial" + }); + map.addMapDecoration(layerControl); + } + + function addMapCopyright(map) { + var mapCopyRight = new OM.control.CopyRight({anchorPosition:5,textValue:'Map data: Natural Earth ',fontSize:12,fontFamily:'Arial',fontColor:'black'}); + map.addMapDecoration(mapCopyRight); } \ No newline at end of file diff --git a/spatial/mvc-map-api/demos/u/js/tileLayer_custom.js b/spatial/mvc-map-api/demos/u/js/tileLayer_custom.js index ff5dbb86..7c711be3 100644 --- a/spatial/mvc-map-api/demos/u/js/tileLayer_custom.js +++ b/spatial/mvc-map-api/demos/u/js/tileLayer_custom.js @@ -1,122 +1,122 @@ -function showMap() { - OM.gv.setResourcePath("../.."); - - //This is the DIV that will display the map; it needs to be passed into - //the map instance. - var mapDiv = document.getElementById('map'); - - var map = new OM.Map(mapDiv); - - var tileLayer = new OM.layer.TileLayer("layer1", - { dataSource:"mvdemo", - tileLayer:"demo_map", - tileServerURL: "http://localhost:8080/mapviewer/mcserver" - }); - - map.addLayer(tileLayer); - - // set the initial zoom level - map.setMapZoomLevel(5); // optional, default is level 0 - map.setMapCenter(new OM.geometry.Point(-122.5, 38)); //in long/lat order // default is at 0,0 - - //call this init() method once - //Note map layers and map decorations can be added before or after invoking this map.init() method. - map.init(); - - //Adds various map controls to the map. - addMapControls(map); -}; - -//add map controls to the provided OM.Map instance -function addMapControls(map) { - //addMapLayerControl(map); - addMapNavControl(map) - addMapCopyright(map); - addMapTitle(map); - //addMapLegend(map); - addMapScale(map); - addToolBar(map); -} - -function addMapTitle(map) { - var maptitle = new OM.control.MapDecoration(null, - { - anchorPosition: 2, - title:"Map Viz Tile Layer", - draggable:true, collapsible: false, - titleStyle:{ "font-size":"22px", - "font-weight":"bold", - "font-family":'Arial', - "color":"#0000d0", - "backgroundColor":"#a0a0a0", - "opacity":"0.75" - } - }); - //adds the scale bar to the map decoration - map.addMapDecoration(maptitle); -} - -function addMapScale(map) { - //defines the basic properties for the map scale bars - var sbConfig = { - format: "BOTH", // imperial and metric units - anchorPosition: 4 - }; - - //creates the actual sacle bar instance and sets the display style - var scaleBar = new OM.control.ScaleBar(sbConfig); - - //defines the display style of the scale bars - var sbStyle = { - barThickness:4, // default is 3 - scaleBarColor: '#0000d0', // default is black - fontColor: '#0000d0' // default is black - }; - scaleBar.setStyle(sbStyle); - - //adds the scale bar to the map decoration - map.addMapDecoration(scaleBar); - } - -function addMapNavControl(map) { - var options = { - anchorPosition: 3, - style: OM.control.NavigationPanelBar.STYLE_PAN_AND_ZOOM_BUTTONS - //STYLE_FULL - //STYLE_ZOOM_ONLY - //STYLE_ZOOM_BUTTONS_ONLY //--default value - //STYLE_PAN_ONLY - //STYLE_PAN_AND_ZOOM_BUTTONS - }; - - var navigationPanelBar = new OM.control.NavigationPanelBar(options); - navigationPanelBar.setZoomLevelInfoTips({ - 2: "Country", - 5: "State", - 7: "City", - 15: "Street" - }); - //adds the scale bar to the map decoration - map.addMapDecoration(navigationPanelBar); -} - -function addMapCopyright(map) { - var mapCopyRight = new OM.control.CopyRight({ - anchorPosition:5, - textValue:'©2020 Map API demos of Oracle Maps', - fontSize:10, - fontFamily:'"Gill Sans","Helvetics Neue",Helvetica,Arial,sans-serif', - fontColor:"#104a7e" - }); - //var mapCopyRight = new OM.control.CopyRight({anchorPosition:5,textValue:'Map data: Natural Earth ',fontSize:12,fontFamily:'Arial',fontColor:'black'}); - map.addMapDecoration(mapCopyRight); -} - -function addToolBar(map) { - var toolbar = new OM.control.ToolBar("toolbar1", - { - builtInButtons : [OM.control.ToolBar.BUILTIN_ALL] - }); - toolbar.setPosition(0, 0); - map.addToolBar(toolbar); +function showMap() { + OM.gv.setResourcePath("../.."); + + //This is the DIV that will display the map; it needs to be passed into + //the map instance. + var mapDiv = document.getElementById('map'); + + var map = new OM.Map(mapDiv); + + var tileLayer = new OM.layer.TileLayer("layer1", + { dataSource:"mvdemo", + tileLayer:"demo_map", + tileServerURL: location.protocol + "//" + location.host + "/mapviewer" + }); + + map.addLayer(tileLayer); + + // set the initial zoom level + map.setMapZoomLevel(5); // optional, default is level 0 + map.setMapCenter(new OM.geometry.Point(-122.5, 38)); //in long/lat order // default is at 0,0 + + //call this init() method once + //Note map layers and map decorations can be added before or after invoking this map.init() method. + map.init(); + + //Adds various map controls to the map. + addMapControls(map); +}; + +//add map controls to the provided OM.Map instance +function addMapControls(map) { + //addMapLayerControl(map); + addMapNavControl(map) + addMapCopyright(map); + addMapTitle(map); + //addMapLegend(map); + addMapScale(map); + addToolBar(map); +} + +function addMapTitle(map) { + var maptitle = new OM.control.MapDecoration(null, + { + anchorPosition: 2, + title:"Map Viz Tile Layer", + draggable:true, collapsible: false, + titleStyle:{ "font-size":"22px", + "font-weight":"bold", + "font-family":'Arial', + "color":"#0000d0", + "backgroundColor":"#a0a0a0", + "opacity":"0.75" + } + }); + //adds the scale bar to the map decoration + map.addMapDecoration(maptitle); +} + +function addMapScale(map) { + //defines the basic properties for the map scale bars + var sbConfig = { + format: "BOTH", // imperial and metric units + anchorPosition: 4 + }; + + //creates the actual sacle bar instance and sets the display style + var scaleBar = new OM.control.ScaleBar(sbConfig); + + //defines the display style of the scale bars + var sbStyle = { + barThickness:4, // default is 3 + scaleBarColor: '#0000d0', // default is black + fontColor: '#0000d0' // default is black + }; + scaleBar.setStyle(sbStyle); + + //adds the scale bar to the map decoration + map.addMapDecoration(scaleBar); + } + +function addMapNavControl(map) { + var options = { + anchorPosition: 3, + style: OM.control.NavigationPanelBar.STYLE_PAN_AND_ZOOM_BUTTONS + //STYLE_FULL + //STYLE_ZOOM_ONLY + //STYLE_ZOOM_BUTTONS_ONLY //--default value + //STYLE_PAN_ONLY + //STYLE_PAN_AND_ZOOM_BUTTONS + }; + + var navigationPanelBar = new OM.control.NavigationPanelBar(options); + navigationPanelBar.setZoomLevelInfoTips({ + 2: "Country", + 5: "State", + 7: "City", + 15: "Street" + }); + //adds the scale bar to the map decoration + map.addMapDecoration(navigationPanelBar); +} + +function addMapCopyright(map) { + var mapCopyRight = new OM.control.CopyRight({ + anchorPosition:5, + textValue:'©2020 Map API demos of Oracle Maps', + fontSize:10, + fontFamily:'"Gill Sans","Helvetics Neue",Helvetica,Arial,sans-serif', + fontColor:"#104a7e" + }); + //var mapCopyRight = new OM.control.CopyRight({anchorPosition:5,textValue:'Map data: Natural Earth ',fontSize:12,fontFamily:'Arial',fontColor:'black'}); + map.addMapDecoration(mapCopyRight); +} + +function addToolBar(map) { + var toolbar = new OM.control.ToolBar("toolbar1", + { + builtInButtons : [OM.control.ToolBar.BUILTIN_ALL] + }); + toolbar.setPosition(0, 0); + map.addToolBar(toolbar); } \ No newline at end of file