<!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>Simple Map</title> <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css"> <style> html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; } body { background-color: #FFF; overflow: hidden; font-family: "Trebuchet MS"; } </style> <script>dojoConfig = {async: true, parseOnLoad: true}</script> <script src="http://js.arcgis.com/3.8/"></script> <script> var map, dialog; require([ "dojo/dom-construct", "dojo/on", "dojo/dom", "esri/map", "esri/layers/FeatureLayer", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/renderers/SimpleRenderer", "esri/graphic", "esri/lang", "dojo/_base/Color", "dojo/number", "dojo/dom-style", "dijit/TooltipDialog", "dijit/popup", "dojo/domReady!" ], function( domConstruct, on, dom, Map, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol, SimpleRenderer, Graphic, esriLang, Color, number, domStyle, TooltipDialog, dijitPopup ) { map = new Map("map", { basemap: "streets", center: [-80.94, 33.646], zoom: 8, slider: false }); window.myMap = map; var southCarolinaCounties = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3", { mode: FeatureLayer.MODE_SNAPSHOT, outFields: ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"] }); southCarolinaCounties.setDefinitionExpression("STATE_NAME = 'South Carolina'"); var symbol = new SimpleFillSymbol( SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([255,255,255,0.35]), 1 ), new Color([125,125,125,0.35]) ); southCarolinaCounties.setRenderer(new SimpleRenderer(symbol)); map.addLayer(southCarolinaCounties); map.infoWindow.resize(245,125); dialog = new TooltipDialog({ id: "tooltipDialog", style: "position: absolute; width: 250px; font: normal normal normal 10pt Helvetica;z-index:100" }); dialog.startup(); var highlightSymbol = new SimpleFillSymbol( SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0]), 3 ), new Color([125,125,125,0.35]) ); //close the dialog when the mouse leaves the highlight graphic map.on("load", function(){ map.graphics.enableMouseEvents(); map.graphics.on("mouse-out", closeDialog); }); //listen for when the onMouseOver event fires on the countiesGraphicsLayer //when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layer southCarolinaCounties.on("mouse-over", function(evt){ var t = "<b>${NAME}</b><hr><b>2000 Population: </b>${POP2000:NumberFormat}<br>" + "<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI:NumberFormat}<br>" + "<b>2007 Population: </b>${POP2007:NumberFormat}<br>" + "<b>2007 Population per Sq. Mi.: </b>${POP07_SQMI:NumberFormat}"; var content = esriLang.substitute(evt.graphic.attributes,t); var highlightGraphic = new Graphic(evt.graphic.geometry,highlightSymbol); map.graphics.add(highlightGraphic); dialog.setContent(content); domStyle.set(dialog.domNode, "opacity", 0.85); dijitPopup.open({ popup: dialog, x: evt.pageX, y: evt.pageY }); }); function closeDialog() { map.graphics.clear(); dijitPopup.close(dialog); } on(dom.byId("hideMapBtn"), "click", function(){ console.log("HIDE"); window.myMap.container.style.display="none"; var mapNode = dojo.byId("map"); domConstruct.place(mapNode,dojo.byId('hidecontent'),"last"); var contentPane =dijit.registry.byId("mapdiv"); contentPane.setHref("load.html"); }); on(dom.byId("showMapBtn"), "click", function(){ console.log("SHOW"); if(window.myMap.container.style.display == "none"){ var contentPane =dijit.registry.byId("mapdiv"); contentPane.setHref("mapcontainer.html"); contentPane.set("onDownloadEnd",function(){ var mapNode = dojo.byId("map"); domConstruct.place(mapNode,dojo.byId('mapcontainer'),"last"); window.myMap.container.style.display="block"; }); } }); }); </script> </head> <body class="claro"> <div id="hidecontent"></div> <div id="mapdiv" data-dojo-type="dijit/layout/ContentPane" > <div id="map"></div> </div> <input id="hideMapBtn" type='submit'> <input id="showMapBtn" type='submit' value='show'> </body> </html>
<!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>Simple Map</title> <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css"> <style> html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; } body { background-color: #FFF; overflow: hidden; font-family: "Trebuchet MS"; } </style> <script>dojoConfig = {async: true, parseOnLoad: true}</script> <script src="http://js.arcgis.com/3.8/"></script> <script> var map, dialog; require([ "esri/map", "esri/layers/FeatureLayer", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/renderers/SimpleRenderer", "esri/graphic", "esri/lang", "dojo/_base/Color", "dojo/number", "dojo/dom-style", "dijit/TooltipDialog", "dijit/popup", "dojo/domReady!" ], function( Map, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol, SimpleRenderer, Graphic, esriLang, Color, number, domStyle, TooltipDialog, dijitPopup ) { map = new Map("map", { basemap: "streets", center: [-80.94, 33.646], zoom: 8, slider: false }); var southCarolinaCounties = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3", { mode: FeatureLayer.MODE_SNAPSHOT, outFields: ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"] }); southCarolinaCounties.setDefinitionExpression("STATE_NAME = 'South Carolina'"); var symbol = new SimpleFillSymbol( SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([255,255,255,0.35]), 1 ), new Color([125,125,125,0.35]) ); southCarolinaCounties.setRenderer(new SimpleRenderer(symbol)); map.addLayer(southCarolinaCounties); map.infoWindow.resize(245,125); dialog = new TooltipDialog({ id: "tooltipDialog", style: "position: absolute; width: 250px; font: normal normal normal 10pt Helvetica;z-index:100" }); dialog.startup(); var highlightSymbol = new SimpleFillSymbol( SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0]), 3 ), new Color([125,125,125,0.35]) ); //close the dialog when the mouse leaves the highlight graphic map.on("load", function(){ map.graphics.enableMouseEvents(); map.graphics.on("mouse-out", closeDialog); }); //listen for when the onMouseOver event fires on the countiesGraphicsLayer //when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layer southCarolinaCounties.on("mouse-over", function(evt){ var t = "<b>${NAME}</b><hr><b>2000 Population: </b>${POP2000:NumberFormat}<br>" + "<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI:NumberFormat}<br>" + "<b>2007 Population: </b>${POP2007:NumberFormat}<br>" + "<b>2007 Population per Sq. Mi.: </b>${POP07_SQMI:NumberFormat}"; var content = esriLang.substitute(evt.graphic.attributes,t); var highlightGraphic = new Graphic(evt.graphic.geometry,highlightSymbol); map.graphics.add(highlightGraphic); dialog.setContent(content); domStyle.set(dialog.domNode, "opacity", 0.85); dijitPopup.open({ popup: dialog, x: evt.pageX, y: evt.pageY }); }); function closeDialog() { map.graphics.clear(); dijitPopup.close(dialog); } }); function showMap(){ require(["dijit/layout/ContentPane","dojo/dom-construct"],function(layout,domConstruct){ var contentPane =dijit.registry.byId("mapdiv"); console.log(" contentPane"+contentPane); contentPane.setHref("mapcontainer.html"); contentPane.set("onDownloadEnd",function(){ var mapNode = dojo.byId("map"); dojo.byId("map").style.display="block"; domConstruct.place(mapNode,dojo.byId('mapcontainer'),"last"); }); }); } function hideMap(){ var mapNode = dojo.byId("map"); dojo.byId("map").style.display="none"; require(["dijit/layout/ContentPane","dojo/dom-construct"],function(layout,domConstruct){ domConstruct.place(mapNode,dojo.byId('hidecontent'),"last"); dojo.byId("map").style.display="none"; var contentPane =dijit.registry.byId("mapdiv"); console.log(" contentPane"+contentPane); contentPane.setHref("load.html"); }); } </script> </head> <body class="claro"> <div id="hidecontent"></div> <div id="mapdiv" data-dojo-type="dijit/layout/ContentPane" > <div id="map"></div> </div> <input type='submit' onclick='hideMap();'> <input type='submit' value='show' onclick='showMap();'> </body> </html>
<div id="mapcontainer"> </div>
<div id="temp"> </div>
Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
.png){kind=avatar}