Skip to content

Instantly share code, notes, and snippets.

@phpmaps

phpmaps/SVG-CSS

Created July 1, 2014 15:49
Show Gist options
  • Save phpmaps/c3fcafb48bda847df3ed to your computer and use it in GitHub Desktop.
Save phpmaps/c3fcafb48bda847df3ed to your computer and use it in GitHub Desktop.
Download ZIP
SVG w/ CSS on Feature Layer
Raw
SVG-CSS
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>SVG PictureMarkerSymbol</title>
<link rel="stylesheet" type="text/css" href="//js.arcgis.com/3.9/js/esri/css/esri.css"/>
<style>
html, body, #map {padding:0; margin:0; width:100%; height:100%;}
#cities{
fill: none;
stroke: #F70019;
stroke-width: 22;
stroke-opacity: 0.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.cities{
fill: none;
stroke: #F70019;
stroke-width: 22;
stroke-opacity: 0.2;
stroke-linecap: round;
stroke-linejoin: round;
}
</style>
<script type="text/javascript" src="//js.arcgis.com/3.9/"></script>
<script>
require([
"esri/symbols/PictureMarkerSymbol",
"esri/renderers/SimpleRenderer",
"esri/map",
"esri/layers/FeatureLayer",
"dojo/parser",
"dojo/ready"
], function (PictureMarkerSymbol, SimpleRenderer, Map, FeatureLayer, parser, ready) {
parser.parse();
var map;
ready(function () {
map = new Map("map", {
basemap:"gray",
center:[-98.5795, 39.828175],
zoom:4
});
var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0", {
id:"cities", // Thinking this one should link to #cities in the styles section
className:"cities", // Thinking this one should link to .cities in the styles section
outFields: ["*"],
mode: FeatureLayer.MODE_ONDEMAND,
styling:false,
surfaceType: "svg"
});
map.addLayer(featureLayer);
});
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment