Skip to content

Instantly share code, notes, and snippets.

@ajturner

ajturner/index.html

Last active August 29, 2015 14:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ajturner/e175320f36df9b64f3e6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ajturner/e175320f36df9b64f3e6 to your computer and use it in GitHub Desktop.
Download ZIP
GIS_FIRE.Fire_Dept_Facilities
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href=
"http://js.arcgis.com/3.14/esri/css/esri.css">
<link rel="stylesheet" type="text/css" href=
"https://rawgit.com/benheb/legend/master/legend.css">
<title>Webmap created with Mundi</title>
<style>
#map { height:500px; } #mundi-link { position: absolute; right: 5px; z-index: 200; display: block; background: #FFF; text-decoration: none; color: #4C4C4C; top: 5px; padding: 5px; border-radius: 2px; } #legend-container { width: 218px; position: absolute; bottom: 20px; left: 13px; }
</style>
</head>
<body>
<div id="map">
<a id="mundi-link" href=
"http://benheb.github.io/mundi/?id=e175320f36df9b64f3e6"
target="_blank">View map in Mundi</a>
<div id="legend-container"></div>
</div><script src="//code.jquery.com/jquery-1.11.3.min.js">
</script> <script src=
"//code.jquery.com/jquery-migrate-1.2.1.min.js">
</script> <script src="http://js.arcgis.com/3.14/">
</script> <script src=
"https://rawgit.com/benheb/legend/master/legend.js">
</script> <script>
require(["esri/map","esri/urlUtils","esri/arcgis/utils","esri/layers/FeatureLayer","esri/renderers/SimpleRenderer","esri/renderers/jsonUtils","dojo/domReady!"], function(Map,urlUtils,arcgisUtils,FeatureLayer,SimpleRenderer,jsonUtils) { var legend = new Legend("legend-container", { editable: false, layers: [] }); $.getJSON("https://api.github.com/gists/e175320f36df9b64f3e6", function(data) { var webmap; for (var file in data.files ) { if ( file !== "index.html" ) { webmap = JSON.parse(data.files[file].content); } }; arcgisUtils.createMap(webmap, "map").then(function(response){ var map = response.map; map.graphicsLayerIds.forEach(function(layer) { var layer = map.getLayer(layer); layer.setMinScale(0); layer.setMaxScale(0); layer.redraw(); legend.addLayer({ "id": layer.id, "name": layer.name, "renderer": layer.renderer.toJson() }); }); }); }); });
</script>
</body>
</html>
Raw
webmap.json
{
"item": {
"title": "New Map",
"snippet": "GIS_FIRE.Fire_Dept_Facilities",
"extent": [
[
-76.0651468877742,
39.740105712882915
],
[
-74.3279337530079,
40.36032287492278
]
]
},
"itemData": {
"operationalLayers": [
{
"url": "https://services1.arcgis.com/tp9wqSVX1AitKgjd/arcgis/rest/services/Los_Angeles_Parklets/FeatureServer/0",
"visibility": true,
"opacity": 0.78,
"mode": 1,
"id": "409e42a7b6474d929208b4c2c93edec8_0",
"minScale": 0,
"maxScale": 0,
"layerDefinition": {
"drawingInfo": {
"renderer": {
"visualVariables": [
{
"type": "colorInfo",
"field": "TYPEID",
"stops": [
{
"value": 4,
"color": [
255,
247,
251,
200
],
"label": null
},
{
"value": 4,
"color": [
236,
226,
240,
200
],
"label": null
},
{
"value": 4,
"color": [
208,
209,
230,
200
],
"label": null
},
{
"value": 4,
"color": [
166,
189,
219,
200
],
"label": null
},
{
"value": 4,
"color": [
103,
169,
207,
200
],
"label": null
},
{
"value": 4,
"color": [
54,
144,
192,
200
],
"label": null
},
{
"value": 4,
"color": [
2,
129,
138,
200
],
"label": null
},
{
"value": 4,
"color": [
1,
100,
80,
200
],
"label": null
}
]
}
],
"type": "classBreaks",
"field": "VISIBLE",
"defaultSymbol": {
"color": [
43,
140,
190,
200
],
"size": 6,
"angle": 0,
"xoffset": 0,
"yoffset": 0,
"type": "esriSMS",
"style": "esriSMSCircle",
"outline": {
"color": [
255,
255,
255,
255
],
"width": 1.3,
"type": "esriSLS",
"style": "esriSLSSolid"
}
},
"minValue": 1,
"classBreakInfos": [
{
"symbol": {
"color": [
43,
140,
190,
200
],
"size": 4,
"angle": 0,
"xoffset": 0,
"yoffset": 0,
"type": "esriSMS",
"style": "esriSMSCircle",
"outline": {
"color": [
255,
255,
255,
255
],
"width": 1.3,
"type": "esriSLS",
"style": "esriSLSSolid"
}
},
"label": 1,
"classMaxValue": 1
},
{
"symbol": {
"color": [
43,
140,
190,
200
],
"size": 10,
"angle": 0,
"xoffset": 0,
"yoffset": 0,
"type": "esriSMS",
"style": "esriSMSCircle",
"outline": {
"color": [
255,
255,
255,
255
],
"width": 1.3,
"type": "esriSLS",
"style": "esriSLSSolid"
}
},
"label": "> 1 to 1",
"classMaxValue": 1
},
{
"symbol": {
"color": [
43,
140,
190,
200
],
"size": 16,
"angle": 0,
"xoffset": 0,
"yoffset": 0,
"type": "esriSMS",
"style": "esriSMSCircle",
"outline": {
"color": [
255,
255,
255,
255
],
"width": 1.3,
"type": "esriSLS",
"style": "esriSLSSolid"
}
},
"label": "> 1 to 1",
"classMaxValue": 1
},
{
"symbol": {
"color": [
43,
140,
190,
200
],
"size": 22,
"angle": 0,
"xoffset": 0,
"yoffset": 0,
"type": "esriSMS",
"style": "esriSMSCircle",
"outline": {
"color": [
255,
255,
255,
255
],
"width": 1.3,
"type": "esriSLS",
"style": "esriSLSSolid"
}
},
"label": "> 1 to 1",
"classMaxValue": 1
},
{
"symbol": {
"color": [
43,
140,
190,
200
],
"size": 30,
"angle": 0,
"xoffset": 0,
"yoffset": 0,
"type": "esriSMS",
"style": "esriSMSCircle",
"outline": {
"color": [
255,
255,
255,
255
],
"width": 1.3,
"type": "esriSLS",
"style": "esriSLSSolid"
}
},
"label": "> 1 to 1",
"classMaxValue": 1
}
]
}
}
}
},
{
"url": "https://services1.arcgis.com/tp9wqSVX1AitKgjd/arcgis/rest/services/BusStops_Lines_LandUse/FeatureServer/7",
"visibility": true,
"opacity": 0.78,
"mode": 1,
"id": "a8ee4082b0624d61aebf7fcd699a29fd_7",
"minScale": 0,
"maxScale": 0,
"layerDefinition": {
"drawingInfo": {
"renderer": {
"visualVariables": [
{
"type": "colorInfo",
"field": "LMS_ID",
"stops": [
{
"value": 0,
"color": [
247,
252,
253,
200
],
"label": null
},
{
"value": 7751.5,
"color": [
224,
236,
244,
200
],
"label": null
},
{
"value": 15503,
"color": [
191,
211,
230,
200
],
"label": null
},
{
"value": 23254.5,
"color": [
158,
188,
218,
200
],
"label": null
},
{
"value": 31006,
"color": [
140,
150,
198,
200
],
"label": null
},
{
"value": 38757.5,
"color": [
140,
107,
177,
200
],
"label": null
},
{
"value": 46509,
"color": [
136,
65,
157,
200
],
"label": null
},
{
"value": 54260.5,
"color": [
110,
1,
107,
200
],
"label": null
}
]
}
],
"type": "simple",
"label": "",
"description": "",
"symbol": {
"color": [
43,
140,
190,
200
],
"outline": {
"color": [
255,
255,
255,
255
],
"width": 1,
"type": "esriSLS",
"style": "esriSLSSolid"
},
"type": "esriSFS",
"style": "esriSFSSolid"
}
}
}
}
},
{
"url": "https://services1.arcgis.com/tp9wqSVX1AitKgjd/arcgis/rest/services/PeopleSt_MetroLinesStations_BlueLine/FeatureServer/1",
"visibility": true,
"opacity": 0.78,
"mode": 1,
"id": "0dec4f9c4be74736973cd7e7f83b427f_1",
"minScale": 0,
"maxScale": 0,
"layerDefinition": {
"drawingInfo": {
"renderer": {
"type": "classBreaks",
"field": "VAR_DIREC",
"defaultSymbol": {
"color": [
43,
140,
190,
200
],
"size": 6,
"angle": 0,
"xoffset": 0,
"yoffset": 0,
"type": "esriSMS",
"style": "esriSMSCircle",
"outline": {
"color": [
255,
255,
255,
255
],
"width": 1.3,
"type": "esriSLS",
"style": "esriSLSSolid"
}
},
"minValue": 1,
"classBreakInfos": [
{
"symbol": {
"color": [
43,
140,
190,
200
],
"size": 4,
"angle": 0,
"xoffset": 0,
"yoffset": 0,
"type": "esriSMS",
"style": "esriSMSCircle",
"outline": {
"color": [
255,
255,
255,
255
],
"width": 1.3,
"type": "esriSLS",
"style": "esriSLSSolid"
}
},
"label": 0,
"classMaxValue": 0
},
{
"symbol": {
"color": [
43,
140,
190,
200
],
"size": 10,
"angle": 0,
"xoffset": 0,
"yoffset": 0,
"type": "esriSMS",
"style": "esriSMSCircle",
"outline": {
"color": [
255,
255,
255,
255
],
"width": 1.3,
"type": "esriSLS",
"style": "esriSLSSolid"
}
},
"label": "> 0 to 0.375",
"classMaxValue": 0.375
},
{
"symbol": {
"color": [
43,
140,
190,
200
],
"size": 16,
"angle": 0,
"xoffset": 0,
"yoffset": 0,
"type": "esriSMS",
"style": "esriSMSCircle",
"outline": {
"color": [
255,
255,
255,
255
],
"width": 1.3,
"type": "esriSLS",
"style": "esriSLSSolid"
}
},
"label": "> 0.375 to 0.75",
"classMaxValue": 0.75
},
{
"symbol": {
"color": [
43,
140,
190,
200
],
"size": 22,
"angle": 0,
"xoffset": 0,
"yoffset": 0,
"type": "esriSMS",
"style": "esriSMSCircle",
"outline": {
"color": [
255,
255,
255,
255
],
"width": 1.3,
"type": "esriSLS",
"style": "esriSLSSolid"
}
},
"label": "> 0.75 to 1.125",
"classMaxValue": 1.125
},
{
"symbol": {
"color": [
43,
140,
190,
200
],
"size": 30,
"angle": 0,
"xoffset": 0,
"yoffset": 0,
"type": "esriSMS",
"style": "esriSMSCircle",
"outline": {
"color": [
255,
255,
255,
255
],
"width": 1.3,
"type": "esriSLS",
"style": "esriSLSSolid"
}
},
"label": "> 1.125 to 1.5",
"classMaxValue": 1.5
}
]
}
}
}
},
{
"url": "https://services.arcgis.com/fLeGjb7u4uXqeF9q/arcgis/rest/services/Fire_Dept_Facilities/FeatureServer/0",
"visibility": true,
"opacity": 0.78,
"mode": 1,
"id": "341526186e014aa0aa3ef7e08a394a78_0",
"minScale": 0,
"maxScale": 0,
"layerDefinition": {
"drawingInfo": {
"renderer": {
"type": "classBreaks",
"field": "LAD",
"defaultSymbol": {
"color": [
43,
140,
190,
200
],
"size": 6,
"angle": 0,
"xoffset": 0,
"yoffset": 0,
"type": "esriSMS",
"style": "esriSMSCircle",
"outline": {
"color": [
255,
255,
255,
255
],
"width": 1.3,
"type": "esriSLS",
"style": "esriSLSSolid"
}
},
"minValue": 1,
"classBreakInfos": [
{
"symbol": {
"color": [
43,
140,
190,
200
],
"size": 4,
"angle": 0,
"xoffset": 0,
"yoffset": 0,
"type": "esriSMS",
"style": "esriSMSCircle",
"outline": {
"color": [
255,
255,
255,
255
],
"width": 1.3,
"type": "esriSLS",
"style": "esriSLSSolid"
}
},
"label": 0,
"classMaxValue": 0
},
{
"symbol": {
"color": [
43,
140,
190,
200
],
"size": 10,
"angle": 0,
"xoffset": 0,
"yoffset": 0,
"type": "esriSMS",
"style": "esriSMSCircle",
"outline": {
"color": [
255,
255,
255,
255
],
"width": 1.3,
"type": "esriSLS",
"style": "esriSLSSolid"
}
},
"label": "> 0 to 4.25",
"classMaxValue": 4.25
},
{
"symbol": {
"color": [
43,
140,
190,
200
],
"size": 16,
"angle": 0,
"xoffset": 0,
"yoffset": 0,
"type": "esriSMS",
"style": "esriSMSCircle",
"outline": {
"color": [
255,
255,
255,
255
],
"width": 1.3,
"type": "esriSLS",
"style": "esriSLSSolid"
}
},
"label": "> 4.25 to 8.5",
"classMaxValue": 8.5
},
{
"symbol": {
"color": [
43,
140,
190,
200
],
"size": 22,
"angle": 0,
"xoffset": 0,
"yoffset": 0,
"type": "esriSMS",
"style": "esriSMSCircle",
"outline": {
"color": [
255,
255,
255,
255
],
"width": 1.3,
"type": "esriSLS",
"style": "esriSLSSolid"
}
},
"label": "> 8.5 to 12.75",
"classMaxValue": 12.75
},
{
"symbol": {
"color": [
43,
140,
190,
200
],
"size": 30,
"angle": 0,
"xoffset": 0,
"yoffset": 0,
"type": "esriSMS",
"style": "esriSMSCircle",
"outline": {
"color": [
255,
255,
255,
255
],
"width": 1.3,
"type": "esriSLS",
"style": "esriSLSSolid"
}
},
"label": "> 12.75 to 17",
"classMaxValue": 17
}
]
}
}
}
}
],
"baseMap": {
"baseMapLayers": [
{
"opacity": 0.5,
"visibility": false,
"url": "http://services.arcgisonline.com/arcgis/rest/services/Specialty/DeLorme_World_Base_Map/MapServer"
},
{
"opacity": 0.8,
"visibility": false,
"url": "http://services.arcgisonline.com/arcgis/rest/services/Canvas/World_Light_Gray_Base/MapServer"
},
{
"opacity": 1,
"visibility": true,
"url": "http://services.arcgisonline.com/arcgis/rest/services/Canvas/World_Dark_Gray_Base/MapServer"
}
],
"title": "basemap"
},
"version": "1.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment