Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- About deleted-user-yA_w_FC9FKe5
deleted-user-yA
New Contributor III
since
07-04-2014
11-11-2020
180
Posts created
1
Kudos given
0
Solutions
7
Kudos received
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
My Ideas
(0 Idea Submissions)Latest Contributions by deleted-user-yA_w_FC9FKe5
|
POST
|
I would suggest creating a ToggleButton. When clicked, a graphicsLayer is created to store the Text Symbol graphics. When clicked again, it removes the graphicsLayer from the application. Here is an example: <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title></title>
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
</style>
<script src="http://js.arcgis.com/3.9/"></script>
<script>
var findTask, findParams;
var map, center, zoom;
var grid, store;
var textLayer;
require([
"esri/map",
"esri/graphic",
"esri/layers/GraphicsLayer",
"esri/tasks/FindTask",
"esri/tasks/FindParameters",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/Font",
"esri/symbols/TextSymbol",
"dijit/form/ToggleButton",
"esri/Color",
"dojo/on",
"dojo/dom",
"dijit/registry",
"dojo/_base/array",
"dojo/_base/connect",
"dojox/grid/DataGrid",
"dojo/data/ItemFileReadStore",
"dijit/form/Button",
"dojo/parser",
"dojo/_base/array",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(
Map, Graphic, GraphicsLayer, FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Font, TextSymbol,
ToggleButton, Color, on, dom, registry, arrayUtils, connect, DataGrid, ItemFileReadStore, Button, parser, array
) {
parser.parse();
registry.byId("search").on("click", doFind);
//registry.byId("showLabels").on("click", doShowLabels);
center = [-83.266, 42.568];
zoom = 4;
map = new Map("map", {
basemap: "gray",
center: center,
zoom: zoom
});
//Create Find Task using the URL of the map service to search
findTask = new FindTask("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/");
map.on("load", function () {
//Create the find parameters
findParams = new FindParameters();
findParams.returnGeometry = true;
findParams.layerIds = [0];
findParams.searchFields = ["areaname","st","pop2000"];
findParams.outSpatialReference = map.spatialReference;
});
function doFind() {
//Set the search text to the value in the box
findParams.searchText = dom.byId("cityName").value;
findTask.execute(findParams, showResults);
}
function doShowLabels(){
findParams.searchText = dom.byId("cityName").value;
findTask.execute(findParams, showLabels);
}
function showResults(results) {
map.graphics.clear();
var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 15,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL, new Color([255, 0, 0, 1]), 1), new Color([255, 0, 0, 1])
);
//create array of attributes
var items = arrayUtils.map(results, function (result) {
var graphic = result.feature;
graphic.setSymbol(symbol);
map.graphics.add(graphic);
return result.feature.attributes;
});
//Create data object to be used in store
var data = {
identifier : "OBJECTID", //This field needs to have unique values
label : "OBJECTID", //Name field for display. Not pertinent to a grid but may be used elsewhere.
items : items
};
//Create data store and bind to grid.
store = new ItemFileReadStore({
data : data
});
var grid = registry.byId("grid");
grid.setStore(store);
grid.on("rowclick", onRowClickHandler);
//Zoom back to the initial map extent
map.centerAndZoom(center, zoom);
}
function showLabels(results){
var items = arrayUtils.map(results, function (result) {
var geom = result.feature.geometry;
var displayText = result.feature.attributes.AREANAME;
var font = new Font(
"16pt",
Font.STYLE_NORMAL,
Font.VARIANT_NORMAL,
Font.WEIGHT_BOLD,
"Helvetica"
);
var textSymbol = new TextSymbol(
displayText,
font,
new Color("#DC143C")
);
textSymbol.setOffset(0,18);
textLayer = new GraphicsLayer();
textLayer.add(new Graphic(geom, textSymbol));
map.addLayer(textLayer);
//map.graphics.add(new Graphic(geom, textSymbol));
});
}
//Zoom to the parcel when the user clicks a row
function onRowClickHandler(evt) {
var clickedCityName = evt.grid.getItem(evt.rowIndex).OBJECTID;
var selectedCityName = arrayUtils.filter(map.graphics.graphics, function(graphic) {
return ((graphic.attributes) && graphic.attributes.OBJECTID === clickedCityName);
});
if (selectedCityName.length) {
var center = [selectedCityName[0].geometry.getLongitude(), selectedCityName[0].geometry.getLatitude()];
var zoom = 15;
map.centerAndZoom(center, zoom);
}
}
new ToggleButton({
showLabel: true,
onChange: function(val){
if(val == true){
findTask.execute(findParams, showLabels);
this.set('label', 'Hide Labels');
}
else{
textLayer.clear();
this.set('label', 'Show Labels');
}
},
label: "Show Labels"
}, "showLabels");
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%;height:100%;margin:0;">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="height:40px;">
City: <input type="text" id="cityName" size="60" value="Redlands" />
<button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >Search
</button>
<button id="showLabels"></button>
</div>
<div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:1px solid #000;"></div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="height:150px;">
<table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="grid" id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
<thead>
<tr>
<th field="OBJECTID">ObjectID</th>
<th field="AREANAME">City</th>
<th field="ST" >State</th>
<th field="POP2000">Population</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
</html>
... View more
05-29-2014
03:49 AM
|
0
|
0
|
295
|
|
POST
|
thanks for the quick response. I already have information in the top container and having it set to a certain size to fit the contents of the title pane kind of takes away from the idea here. I'm currently experiementing with making it an absolute position. the problem with that is it covers part of the map. In the end it may be my best option. Just figured I could not have been the first person to have this problem with the title pane. <div id="filterTitlePane" data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'Filter Properties', open: false" style="position:absolute; left:0px; bottom:0px; width:100%; z-Index:999;">
... View more
05-27-2014
05:11 AM
|
0
|
0
|
176
|
|
POST
|
I am trying to create floating panels in Javascript for the Measurement widget. I think my problem is pretty simple for someone smarter than I am. My problem lies in that when I click on the map using this tool the place where I click is way off from where the flag shows up on the map. I think it has to do with the titlepane but I need to keep that. This is just a simple example but what I am doing is using the title pane as a filter and then bringing in the measument tool via a button and floating panel. The problem is the same and I believe it is because of the title pan. If you click on the tool and create to points you will see they are way off. then if you downsize the title pane and then click again you will see they are closer together but still off.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>
Measure Tool
</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/claro/claro.css">
<style type="text/css">
html,body {
height:100%;
width:100%;
margin:0;
}
body {
background-color:#FFF;
overflow:hidden;
font-family:"Trebuchet MS";
}
#map {
border:solid 2px #808775;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
margin:5px;
padding:0px;
}
#titlePane{
width:240px;
}
.claro .dijitTitlePaneTitle {
background: #808775;
font-weight:600;
border:solid 1px #29201A;
}
.claro .dijitTitlePaneTitleHover {
background:#808775;
}
.claro .dijitTitlePaneTitleActive {
background:#808775;
}
.claro .dijitTitlePaneContentOuter {
border-right: solid 2px #808775 !important;
border-bottom: solid 2px #808775 !important;
border-left: solid 2px #808775 !important;
}
</style>
<script type="text/javascript">
djConfig = {
parseOnLoad:true
};
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.TitlePane");
dojo.require("dijit.form.CheckBox");
dojo.require("esri.map");
dojo.require("esri.dijit.Measurement");
dojo.require("esri.SnappingManager");
dojo.require("esri.dijit.Scalebar");
dojo.require("esri.layers.FeatureLayer");
var map;
var measurement;
function init() {
//This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications
esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
var initialExtent = new esri.geometry.Extent({"xmin":-9545482,"ymin":4615382,"xmax":-9544248,"ymax":4616059,"spatialReference":{"wkid":102100}});
map = new esri.Map("map", {
extent:initialExtent
});
dojo.connect(map, 'onLoad', function(map) {
//resize the map when the browser resizes
dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
});
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer");
map.addLayer(basemap);
var sfs = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
new dojo.Color([195,176,23]), 2),null);
var parcelsLayer = new esri.layers.FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/MapServer/0", {
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
});
parcelsLayer.setRenderer(new esri.renderer.SimpleRenderer(sfs));
dojo.connect(map, "onLayersAddResult", function(results){
//dojo.keys.copyKey maps to CTRL on windows and Cmd on Mac.
var snapManager = map.enableSnapping({snapKey:dojo.keys.copyKey});
var layerInfos = [{layer: parcelsLayer}];
snapManager.setLayerInfos(layerInfos);
createMeasure();
});
map.addLayers([parcelsLayer]);
}
//show map on load
dojo.addOnLoad(init);
function createMeasure(){
measurement = new esri.dijit.Measurement({
map: map
}, dojo.create('measure'));
dojo.place(measurement.domNode,dojo.byId('measurementDiv'));
measurement.startup();
measurement.setTool("distance", true);
}
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:'false'"
style="width:100%; height:100%;">
<div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
<button id="tglMeasurementOff" type="button" onclick="tglMeasurementOff();">toogleMeasurementOff</button>
<button id="tglMeasurementOn" type="button" onclick="tglMeasurementOn();">toogleMeasurementOn</button>
<div id="titlePane" data-dojo-type="dijit.TitlePane" data-dojo-props="title:'Measurement', closable:'false', open:'false'">
<div id="measurementDiv"></div>
<span style="font-size:smaller;padding:5px 5px;">Press <b>CTRL</b> to enable snapping.</span>
</div>
</div>
</div>
</body>
</html>
.
... View more
05-21-2014
08:59 AM
|
0
|
0
|
913
|
|
POST
|
Just bringing this back to the top in hopes someone might be able to help lead me in the right direction.
... View more
05-12-2014
03:25 AM
|
0
|
0
|
178
|
|
POST
|
Either can be used as a showcase for seeing how the code works. Are you sure it's not working? It's designed to filter when you click on the "Apply filter" text. For example, choosing Smallmouth Bass and LMBV will show 2 features. You could alter it to apply the filter when you select the dropdown box instead.
... View more
04-24-2014
07:01 PM
|
0
|
0
|
813
|
|
POST
|
hmm seems as thought the weekend hasn't helped so far but I am far more relaxed.
... View more
04-28-2014
05:24 AM
|
0
|
0
|
571
|
|
POST
|
Hi Michael, You will need to change the grid.on("rowclick", onRowClickHandler) to grid.on("rowclick", zoomRow). Also, for the zoomRow function variable, set this to 'evt'. I couldn't figure out how to show the zoom-in icon, but here is an example that works with a sample service. It will zoom to the point feature when a row is clicked. <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Display Find Task results in Dojo DataGrid</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
</style>
<script src="http://js.arcgis.com/3.8/"></script>
<style type="text/css">
.dojoxGrid table {
margin: 0;
}
.dojoxGrid th, tr {
font-size: 8pt;
}
</style>
<script>
require([
"esri/map",
"esri/tasks/FindTask",
"esri/tasks/FindParameters",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/layers/FeatureLayer",
"dojo/_base/Color",
"dojo/on",
"dojo/dom",
"dijit/registry",
"dojo/_base/array",
"dojo/_base/connect",
"dojox/grid/DataGrid",
"dojo/data/ItemFileReadStore",
"dijit/form/Button",
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(
Map, FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, FeatureLayer,
Color, on, dom, registry, arrayUtils, connect, DataGrid, ItemFileReadStore, Button, parser
) {
var findTask, findParams;
var map, center, zoom;
var grid, store;
parser.parse();
registry.byId("search").on("click", doFind);
center = [-98.258, 38.236];
zoom = 4;
map = new esri.Map("map", {
basemap: "streets",
center: center,
zoom: zoom
});
var flMCY_Stores = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0", {
outFields: ["*"]
});
map.addLayer(flMCY_Stores);
findTask = new FindTask("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer");
map.on("load", function () {
findParams = new FindParameters();
findParams.returnGeometry = true;
findParams.layerIds = [0];
findParams.searchFields = ["AREANAME"];
findParams.outSpatialReference = map.spatialReference;
});
function doFind() {
findParams.searchText = dom.byId("txtStoreName").value;
findTask.execute(findParams, showResults);
}
function showResults(results) {
map.graphics.clear();
var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 12,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL, new Color([0, 0, 0, 0.9]), 1), new Color([0, 0, 0, 0.5])
);
var items = arrayUtils.map(results, function (result) {
var graphic = result.feature;
graphic.setSymbol(symbol);
map.graphics.add(graphic);
return result.feature.attributes;
});
var data = {
identifier : "OBJECTID",
label : "OBJECTID",
items : items
};
store = new ItemFileReadStore({
data : data
});
var grid = registry.byId("grid");
grid.setStore(store);
grid.setSortIndex(3,"true");
grid.on("rowclick", zoomRow);
map.centerAndZoom(center, zoom);
}
function makeZoomButton(id){
var zBtn = "<div data-dojo-type='dijit.form.Button'><img src='images/zoom.png'";
zBtn = zBtn + " width='18' height='18'";
zBtn = zBtn + " onClick=\"zoomRow('"+id+"')\"></div>";
return zBtn;
}
function zoomRow(evt){
var clickedTaxLotId = evt.grid.getItem(evt.rowIndex).OBJECTID;
var selectedTaxLot = arrayUtils.filter(map.graphics.graphics, function (graphic) {
return ((graphic.attributes) && graphic.attributes.OBJECTID === clickedTaxLotId);
});
var center2 = [selectedTaxLot[0].geometry.getLongitude(), selectedTaxLot[0].geometry.getLatitude()];
var zoom2 = 15;
map.centerAndZoom(center2, zoom2);
}
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%;height:100%;margin:0;">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="height:40px;">
<p>Store name:
<input type="text" id="txtStoreName" size="100px" value="Dothan" />
</p>
<p> </p>
<button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >Search
</button>
</div>
<div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:1px solid #000;"></div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="height:150px;">
<table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="grid" id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
<thead>
<tr>
<th field="OBJECTID" formatter='makeZoomButton' width="40px">
<img alt="+" src="images/zoom.png" width="18" height="18"/>
</th>
<th field="OBJECTID" width="50px">ID</th>
<th field="CLASS" width="70px">Store No</th>
<th field="AREANAME" width="150px">Store Name</th>
<th field="CAPITAL" width="250px">Address</th>
<th field="POP2000" width="50px">Sales</th>
<th field="ST" width="50">GSF</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
</html>
... View more
04-23-2014
03:53 AM
|
0
|
0
|
265
|
|
POST
|
Michael, Steve's suggestion is definitely the way you want to go. You can also use the more general extent-change event handler. The full code to turn the button on/off based on zoom level is the following. Just change the level, which is set at 13 in this example: map.on("extent-change", changeZoom);
function changeZoom(evt){
if (evt.lod.level > 13) {
alert("Current Scale is high: " + evt.lod.level);
document.getElementById("btnBufferTool").disabled = true;
}
else {
alert("Current Scale is low: " + evt.lod.level);
document.getElementById("btnBufferTool").disabled = false;
}
} Brad
... View more
04-21-2014
09:11 AM
|
0
|
0
|
474
|
|
POST
|
Here's yet another way, based on this jFiddle: http://jsfiddle.net/6aNrp/274/ This way removes the splitter bar - in fact, it just removes the left pane from the page and then replaces it later (the pane object (held in the myLeftContentPane variable) still exists the whole time, it's just removed from and added to the page's overarching BorderContainer object (held in the myBorderContainer variable - this is the same thing as registry.byId("mainDiv")). function toggleLeftPane() {[INDENT]if (leftPaneIsOpen) { [/INDENT] [INDENT=2]myBorderContainer.removeChild(myLeftContentPane); [/INDENT] [INDENT] } else { [/INDENT] [INDENT=2]myBorderContainer.addChild(myLeftContentPane); [/INDENT] [INDENT] } registry.byId("mainDiv").resize(); map.resize(true); map.reposition(); leftPaneIsOpen = !leftPaneIsOpen; [/INDENT] } EDIT: Unfortunately, if you have a Legend widget in your left pane and you minimize (removeChild) the pane before the Legend has loaded, it breaks the Legend and it never loads.
... View more
04-22-2014
09:31 AM
|
0
|
0
|
1326
|
|
POST
|
Michael, you should start getting in the habit of marking the threads you start as answered. You have quite a few posts with many responses but haven't marked any of them as having answered your question. Marking a post as the answer to your question will help others as they search for a solution to similar issues. Please look at this page if you have any questions about that.
... View more
04-15-2014
06:41 AM
|
0
|
0
|
138
|
|
POST
|
If the total size of your data is less than 5 MB, you can serialize the data and store it using the browser's local storage mechanism. However, if your data is greater than 5 MB and you lack an internet connection, this becomes much more complicated and you might want to look into using a native application, rather than a web application. If being a Javascript application is a requirement, and you need to store more data than local storage allows, you may want to look into a hybrid application using a framework like PhoneGap (http://phonegap.com/).
... View more
04-01-2014
12:44 PM
|
0
|
0
|
242
|
|
POST
|
You can use parseInt() to convert the strings to integers: function sumTransactions(features) {
var transTotal = 0;
for (var x = 0; x < features.length; x++) {
transTotal = transTotal + parseInt(features .attributes["DIVISIONNA"]);
}
return transTotal;
}
... View more
03-12-2014
08:59 AM
|
0
|
0
|
173
|
|
POST
|
Thanks that was very usefull Glad to help. Don't forget to mark the post as answered to help those who are searching on this question.
... View more
03-20-2014
06:03 AM
|
0
|
0
|
471
|
|
POST
|
if you want to put your bookmarks in another file you can do something like this: html file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Bookmark Widget (Editable)</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<style>
html, body {
height: 100%; width: 100%;
margin: 0; padding: 0;
}
body{
background-color: #fff; overflow:hidden;
font-family: sans-serif;
}
#header {
padding-top: 4px;
padding-right: 15px;
background-color:#444;
color:#fff;
font-size:16pt; text-align:right;font-weight:bold;
height:55px;
}
#subheader {
font-size:small;
color: #cfcfcf;
text-align:right;
}
#leftPane{
margin: 0;
padding: 5px;
width: 250px;
color: #3C1700;
background-color: #fff;
}
.ds { background: #000; overflow: hidden; position: absolute; z-index: 2; }
#ds-h div { width: 100%; }
#ds-l div { height: 100%; }
#ds .o1 { filter: alpha(opacity=10); opacity: .1; }
#ds .o2 { filter: alpha(opacity=8); opacity: .08; }
#ds .o3 { filter: alpha(opacity=6); opacity: .06; }
#ds .o4 { filter: alpha(opacity=4); opacity: .04; }
#ds .o5 { filter: alpha(opacity=2); opacity: .02; }
#ds .h1 { height: 1px; }
#ds .h2 { height: 2px; }
#ds .h3 { height: 3px; }
#ds .h4 { height: 4px; }
#ds .h5 { height: 5px; }
#ds .v1 { width: 1px; }
#ds .v2 { width: 2px; }
#ds .v3 { width: 3px; }
#ds .v4 { width: 4px; }
#ds .v5 { width: 5px; }
</style>
<script> var dojoConfig = { parseOnLoad: true };</script>
<script src="http://js.arcgis.com/3.8/"></script>
<script type="text/javascript" src="bookmarks.js">
</script>
<script>
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("esri.dijit.Bookmarks");
var map;
function init() {
map = new esri.Map("map", {
basemap: "topo",
center: [-100, 40],
zoom: 4
});
// Create the bookmark widget
// specify "editable" as true to enable editing
var bookmarkWidget = new esri.dijit.Bookmarks({
map: map,
bookmarks: [],
editable: true
}, dojo.byId('bookmark'));
dojo.forEach(bookmarks, function (bookmark, i) {
console.log("bookmark", bookmark);
bookmarkWidget.addBookmark(bookmark);
});
}
//show map on load
dojo.ready(init);
</script>
</head>
<body class="nihilo">
<div id="mainWindow"
data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline',gutters:false"
style="width: 100%; height: 100%; margin: 0;">
<div id="header"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'top'">
Bookmark Widget Sample
<div id="subheader">Create, update and delete bookmarks</div>
</div>
<div id="leftPane"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'left'">
<div id="bookmark"></div>
</div>
<div id="map" class="shadow"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'center'">
<div id="ds"> <!-- drop shadow divs -->
<div id="ds-h">
<div class="ds h1 o1"></div>
<div class="ds h2 o2"></div>
<div class="ds h3 o3"></div>
<div class="ds h4 o4"></div>
<div class="ds h5 o5"></div>
</div>
<div id="ds-l">
<div class="ds v1 o1"></div>
<div class="ds v2 o2"></div>
<div class="ds v3 o3"></div>
<div class="ds v4 o4"></div>
<div class="ds v5 o5"></div>
</div>
</div> <!-- end drop shadow divs -->
</div>
</div>
</body>
</html>
bookmarks.js file:
// Add bookmarks to the widget
bookmarks=[];
var bookmarkCA = {
"extent": {
"spatialReference": {
"wkid": 102100
},
"xmin": -14201669,
"ymin": 4642975,
"xmax": -13021482,
"ymax": 5278931
},
"name": "Northern California"
}
var bookmarkPA = {
"extent": {
"spatialReference": {
"wkid": 102100
},
"xmin": -8669334,
"ymin": 4982379,
"xmax": -8664724,
"ymax": 4984864
},
"name": "Central Pennsylvania"
}
bookmarks.push(bookmarkCA);
bookmarks.push(bookmarkPA);
Davide
... View more
03-07-2014
07:11 AM
|
0
|
0
|
190
|
My kudoed posts
| Title | Kudos | Posted |
|---|---|---|
| 1 | 04-18-2014 06:58 AM | |
| 6 | 08-11-2014 06:27 AM |
Activity Feed
- Got a Kudo for Disable button based on zoom. 01-05-2023 10:19 AM
- Got a Kudo for Re: What widget do you want most. 06-09-2016 10:20 AM
- Got a Kudo for Re: What widget do you want most. 05-26-2016 07:27 AM
- Posted Re: Save my drawings as a layer on ArcGIS JavaScript Maps SDK Questions. 05-19-2015 06:58 PM
- Posted Re: Drawing and CAD file on ArcGIS JavaScript Maps SDK Questions. 05-19-2015 06:54 PM
- Posted Re: Drawing and CAD file on ArcGIS JavaScript Maps SDK Questions. 05-19-2015 11:41 AM
- Posted Save my drawings as a layer on ArcGIS JavaScript Maps SDK Questions. 05-19-2015 11:32 AM
- Posted Re: Drawing and CAD file on ArcGIS JavaScript Maps SDK Questions. 03-24-2015 11:28 AM
- Posted Re: Drawing and CAD file on ArcGIS JavaScript Maps SDK Questions. 03-24-2015 11:17 AM
- Posted ArcGIS importing CAD file into the right location and size on Developers Questions. 03-24-2015 11:11 AM
- Posted Re: Drawing and CAD file on ArcGIS JavaScript Maps SDK Questions. 03-24-2015 11:05 AM
- Posted Re: Drawing and CAD file on ArcGIS JavaScript Maps SDK Questions. 03-24-2015 08:04 AM
- Posted Drawing and CAD file on ArcGIS JavaScript Maps SDK Questions. 03-24-2015 07:45 AM
- Got a Kudo for Re: What widget do you want most. 02-11-2015 08:04 AM
- Got a Kudo for Re: What widget do you want most. 10-15-2014 11:40 AM
- Got a Kudo for Re: What widget do you want most. 10-14-2014 12:50 PM
- Posted Re: Remove layer from Table of Contents on ArcGIS JavaScript Maps SDK Questions. 10-09-2014 06:44 AM
- Posted Re: Remove layer from Table of Contents on ArcGIS JavaScript Maps SDK Questions. 10-08-2014 10:49 AM
- Posted Re: Remove layer from Table of Contents on ArcGIS JavaScript Maps SDK Questions. 10-08-2014 09:53 AM
- Posted Re: Remove layer from Table of Contents on ArcGIS JavaScript Maps SDK Questions. 10-08-2014 09:12 AM
Contact Me
| Online Status |
Offline
|
| Date Last Visited |
11-11-2020
02:23 AM
|