Skip to content

Commit

Permalink
Merge pull request #88 from Esri/symbol-samples
Browse files Browse the repository at this point in the history 
two new symbol samples
  • Loading branch information
@alaframboise
alaframboise committed Jul 2, 2014
2 parents a9dadb5 + 4949144 commit cf926df
Show file tree
Hide file tree
Showing 3 changed files with 261 additions and 5 deletions.
10 changes: 5 additions & 5 deletions html/graphics/graphics_toolbar.html
View file
Expand Up @@ -29,11 +29,10 @@
"esri/graphic",
"dojo/_base/Color",
"dojo/query",
"dojo/on",
"dojo/_base/connect",
"dojo/on",
"dojo/dom",
"dojo/domReady!"],
function(Map, Draw, SimpleMarkerSymbol, SimpleLineSymbol, CartographicLineSymbol, Graphic, color, query, on, conn, dom) {
function(Map, Draw, SimpleMarkerSymbol, SimpleLineSymbol, CartographicLineSymbol, Graphic, color, query, on, dom) {
"use strict"

var tb;
Expand All @@ -57,7 +56,7 @@
function initToolbar() {
tb = new Draw(map);
// Do something after graphics are sketched on the map
conn.connect(tb, "onDrawEnd", addGraphic);
tb.on("draw-end", addGraphic);
// Override the default marker symbol
tb.markerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 7,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new color([255,0,0]), 1),
Expand Down Expand Up @@ -99,7 +98,8 @@
}

// Add the graphic with symbol
function addGraphic(geometry) {
function addGraphic(evt) {
var geometry = evt.geometry;
var symbol = dom.byId("symbol").value;
if (symbol) {
symbol = eval(symbol);
Expand Down
126 changes: 126 additions & 0 deletions html/symbols/symbols_lines.html
View file
@@ -0,0 +1,126 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Line Symbols</title>
<link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
<!-- ArcGIS API for JavaScript CSS-->
<link rel="stylesheet" href="//js.arcgis.com/3.9/js/esri/css/esri.css">
<!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
<style>
html, body, #mapDiv {
height: 100%;
width: 100%;
}
</style>

<!-- ArcGIS API for JavaScript library references -->
<script src="//js.arcgis.com/3.9compact"></script>
<script>
/*
*/
require(["esri/map",
"esri/InfoTemplate",
"esri/layers/FeatureLayer",
"esri/Color",
"esri/renderers/UniqueValueRenderer",
"esri/symbols/SimpleLineSymbol",
"dojo/on",
"dojo/dom",
"dojo/domReady!"],
function(Map, InfoTemplate, FeatureLayer, Color, UniqueValueRenderer, SimpleLineSymbol, on, dom) {
"use strict"

var originalRenderer;

// Create map
var map = new Map("mapDiv", {
basemap: "topo",
center: [-122.6561, 45.5210], //long, lat
zoom: 15
});

var bikeLanes = new FeatureLayer("http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/bike_rte/FeatureServer/0", {outFields: ["*"]});

var defaultSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
//color and width of outline
new Color([0,255,0]), 4);

var sharrowSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
//color and width of outline
new Color([0,0,255]), 4);

var laneSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
//color and width of outline
new Color([255,255,0]), 4);

var categoryRenderer = new UniqueValueRenderer(defaultSymbol, "BIKEMODE");

categoryRenderer.addValue("High traffic through street" ,sharrowSymbol);
categoryRenderer.addValue("Bike lane" ,laneSymbol);

bikeLanes.setInfoTemplate(new InfoTemplate("type:", "${BIKEMODE}"));
map.addLayer(bikeLanes);

bikeLanes.on("load", function(evt) {
originalRenderer = evt.layer.renderer;
evt.layer.setRenderer(categoryRenderer);
evt.layer.refresh();
});

// Set popup
var popup = map.infoWindow;
popup.highlight = false;
popup.titleInBody = false;

//wire an event listener to detect when someone has selected a new dropdown value
on(dom.byId("symbol"), "change", changeSymbol);

function changeSymbol() {
map.infoWindow.hide();
var e = dom.byId("symbol");
var sym = e.options[e.selectedIndex].value;

switch (sym) {
case "cat":
//substitute a unique value renderer to draw the graphics
bikeLanes.setRenderer(categoryRenderer);
break
case "default":
map.infoWindow.hide();
//replace the clientside renderer with what was originally defined for the service
bikeLanes.setRenderer(originalRenderer);
break
}
bikeLanes.refresh();
}
}
);
</script>
</head>
<body>
<div class="panel panel-primary panel-fixed">
<div class="panel-heading">
<h3 class="panel-title">Lines</h3>
</div>
<div class="panel-body">
<div class="form-inline">
<div>
Apply different symbols based on feature attributes<br><br>
</div>
<div class="form-group">
<select class="form-control" id="symbol">
<option value="cat" selected="selected">bike lanes (by type)</option>
<option value="default" >default (defined in service)</option>
</select>
</div>
</div>
</div>
</div>
<div id="mapDiv"></div>
</body>
</html>
130 changes: 130 additions & 0 deletions html/symbols/symbols_pts.html
View file
@@ -0,0 +1,130 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Point Symbols</title>
<link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
<!-- ArcGIS API for JavaScript CSS-->
<link rel="stylesheet" href="//js.arcgis.com/3.9/js/esri/css/esri.css">
<!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
<style>
html, body, #mapDiv {
height: 100%;
width: 100%;
}
</style>

<!-- ArcGIS API for JavaScript library references -->
<script src="//js.arcgis.com/3.9compact"></script>
<script>
/*
*/
require(["esri/map",
"esri/InfoTemplate",
"esri/layers/FeatureLayer",
"esri/Color",
"esri/renderers/SimpleRenderer",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/PictureMarkerSymbol",
"dojo/on",
"dojo/dom",
"dojo/domReady!"],
function(Map, InfoTemplate, FeatureLayer, Color, SimpleRenderer, SimpleMarkerSymbol, SimpleLineSymbol, PictureMarkerSymbol, on, dom) {
"use strict"

var originalRenderer;

// Create map
var map = new Map("mapDiv", {
basemap: "osm",
center: [-94.58, 39.10], //long, lat
zoom: 14
});

var pointFL = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0", {outFields: ["*"]});

//we can define an image resource to use as an alternative symbol (within a simple renderer)
var bmpSymbol = new PictureMarkerSymbol("http://webarchive.okfn.org/okfn.org/201404/assets.okfn.org/p/opengovernment/img/icon-512.png", 12, 12);
var bmpRenderer = new SimpleRenderer(bmpSymbol);

//we can also define a simple SVG symbol for all points (green diamond with blue outline)
var markerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_DIAMOND, 12,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
//color and width of outline
new Color([0,0,255]), 1.5),
//color of fill (r,g,b,alpha/transparency)
new Color([0,255,0,0.50]));

//if all features should be symobolized the same we use a simple renderer, other renderers give us the ability to differentiate based on attributess
var simpleRenderer = new SimpleRenderer(markerSymbol);

pointFL.setInfoTemplate(new InfoTemplate("Census Block: ${TRACT}/${BLOCK}", "Pop. in 2000: ${POP2000}"));
map.addLayer(pointFL);

pointFL.on("load", function(evt) {
//once the feature layer has loaded, we can retrieve the renderer defined for the service itself (which displays larger circles )
originalRenderer = evt.layer.renderer;
});

// Set popup
var popup = map.infoWindow;
popup.highlight = false;
popup.titleInBody = false;

//wire an event listener to detect when someone has selected a new dropdown value
on(dom.byId("symbol"), "change", changeSymbol);

function changeSymbol() {
var e = dom.byId("symbol");
var sym = e.options[e.selectedIndex].value;

switch (sym) {
case "bmp":
//substitute a PictureMarkerSymbol to draw the graphics
pointFL.setRenderer(bmpRenderer);
pointFL.refresh();
break
case "svg":
//substitute a SimpleMarkerSymbol to draw the graphics
pointFL.setRenderer(simpleRenderer);
pointFL.refresh();
break
case "default":
//replace the original renderer using the class breaks defined in the service itself
pointFL.setRenderer(originalRenderer);
pointFL.refresh();
break
}
}
}
);
</script>
</head>
<body>
<div class="panel panel-primary panel-fixed">
<div class="panel-heading">
<h3 class="panel-title">Points</h3>
</div>
<div class="panel-body">
<div class="form-inline">
<div>
Apply different symbols to point graphics in the map<br><br>
</div>
<div class="form-group">
<select class="form-control" id="symbol">
<option value="default" selected="selected">default (defined in service)</option>
<option value="bmp">Picture Image</option>
<option value="svg">SVG Marker</option>
</select>
</div>
</div>
</div>
</div>
<div id="mapDiv"></div>
</body>
</html>

0 comments on commit cf926df

Please sign in to comment.