andygup · March 24, 2017 20:55
diff --git a/geoenrichment_block.html b/geoenrichment_block.html
 <!DOCTYPE html>
 <html>
 <head>
    <!--

        Finds Esri Geoenrichment data within a 1 mile radius of a map click event

    -->
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>Get started with SceneView - Create a 3D map - 4.3</title>
    <style>
        html,
        body,
        #view-div {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        #header-div {
            font-family: Helvetica;
            padding: 14px;
        }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
    <script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.5.0.js"></script>
    <script src="https://js.arcgis.com/4.3/"></script>

    <script>

        require([
            "esri/Map",
            "esri/views/SceneView",
            "esri/geometry/Point",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/Graphic",
            "dojo/domReady!"
        ], function(Map, SceneView, Point, SimpleMarkerSymbol, Graphic) {

            var pubnub = null, subscriptionListener = null;
          
            var SUBSCRIBE_KEY = "YOUR_PUBNUB_SUBSCRIBE_KEY";
            var PUBLISH_KEY = "YOUR_PUBNUB_PUBLISH_KEY";
            VAR CHANNEL = "YOUR_PUBNUB_CHANNEL";

            // Create a symbol for drawing the point
            var markerSymbol = new SimpleMarkerSymbol({
                color: [226, 119, 40],
                outline: { // autocasts as new SimpleLineSymbol()
                    color: [255, 255, 255],
                    width: 2
                }
            });

            initializePubnub();

            var map = new Map({
                basemap: "streets",
                ground: "world-elevation"
            });

            // Set the map to 3D
            var view = new SceneView({
                container: "view-div",
                map: map,
                camera: {
                    position: [
                        -122.44149,
                        37.65,
                        7000
                    ],
                    heading: 0,
                    tilt: 60
                }
            });

            // Listen for a map click event
            view.on("click", function(evt) {
                view.graphics.removeAll();
                publishMessage(evt.mapPoint.latitude, evt.mapPoint.longitude);
            });

            function initializePubnub() {

                pubnub = new PubNub({
                    publishKey : PUBLISH_KEY,
                    subscribeKey : SUBSCRIBE_KEY
                });

                subscriptionListener = pubnub.addListener({
                    status: function(statusEvent) {
                        if (statusEvent.category === "PNConnectedCategory") {
                            console.log("Okay we are ready to publish");
                        }
                    },
                    message: function(result) {
                        addGraphicToMap(result.message.lat, result.message.lon, result.message.data);
                    },
                    presence: function(presenceEvent) {
                        // handle presence
                    }
                });

                console.log("Subscribing..");

                pubnub.subscribe({
                    channels: [CHANNEL]
                });
            }

            // Send a message to pubnub service
            function publishMessage(lat, lon) {

                var publishConfig = {
                    channel : CHANNEL,
                    message : {
                        "lat": lat,
                        "lon": lon
                    }
                };

                pubnub.publish(publishConfig, function(status, response) {
                    console.log("Sending message: " + status, response);
                })
            }

            // Remove the pubnub subscription
            function unsubscribe() {
                pubnub.removeListener(subscriptionListener);
                pubnub.unsubscribe({
                    channels: [CHANNEL]
                })
            }

            // Add graphic to map and open popup
            function addGraphicToMap(lat, lon, data){

                view.popup.open({
                    title: "Geoenrichment Data",
                    location: new Point({
                        latitude: lat,
                        longitude: lon
                    }) // Set the location of the popup to the clicked location
                });

                // Inject content into the popup
                view.popup.content = "Total popuplation: " + data.totalPopulation + "<br>" +
                    "Median age: " + data.medianAge + "<br>" +
                    "Median income: " + data.medianHouseholdIncome;

                var pointGraphic = new Graphic({
                    geometry: new Point({
                        latitude: lat,
                        longitude: lon
                    }),
                    symbol: markerSymbol
                });

                view.graphics.add(pointGraphic);
            }
        });
    </script>
 </head>

 <body>
 <div id="header-div">Click on the map to get geoenrichment data in a 1 mile radius.</div>
 <div id="view-div"></div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<!--

	Finds Esri Geoenrichment data within a 1 mile radius of a map click event

	-->
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
	<title>Get started with SceneView - Create a 3D map - 4.3</title>
	<style>
	html,
	body,
	#view-div {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	}
	#header-div {
	font-family: Helvetica;
	padding: 14px;
	}
	</style>

	<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
	<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.5.0.js"></script>
	<script src="https://js.arcgis.com/4.3/"></script>

	<script>

	require([
	"esri/Map",
	"esri/views/SceneView",
	"esri/geometry/Point",
	"esri/symbols/SimpleMarkerSymbol",
	"esri/Graphic",
	"dojo/domReady!"
	], function(Map, SceneView, Point, SimpleMarkerSymbol, Graphic) {

	var pubnub = null, subscriptionListener = null;

	var SUBSCRIBE_KEY = "YOUR_PUBNUB_SUBSCRIBE_KEY";
	var PUBLISH_KEY = "YOUR_PUBNUB_PUBLISH_KEY";
	VAR CHANNEL = "YOUR_PUBNUB_CHANNEL";

	// Create a symbol for drawing the point
	var markerSymbol = new SimpleMarkerSymbol({
	color: [226, 119, 40],
	outline: { // autocasts as new SimpleLineSymbol()
	color: [255, 255, 255],
	width: 2
	}
	});

	initializePubnub();

	var map = new Map({
	basemap: "streets",
	ground: "world-elevation"
	});

	// Set the map to 3D
	var view = new SceneView({
	container: "view-div",
	map: map,
	camera: {
	position: [
	-122.44149,
	37.65,
	7000
	],
	heading: 0,
	tilt: 60
	}
	});

	// Listen for a map click event
	view.on("click", function(evt) {
	view.graphics.removeAll();
	publishMessage(evt.mapPoint.latitude, evt.mapPoint.longitude);
	});

	function initializePubnub() {

	pubnub = new PubNub({
	publishKey : PUBLISH_KEY,
	subscribeKey : SUBSCRIBE_KEY
	});

	subscriptionListener = pubnub.addListener({
	status: function(statusEvent) {
	if (statusEvent.category === "PNConnectedCategory") {
	console.log("Okay we are ready to publish");
	}
	},
	message: function(result) {
	addGraphicToMap(result.message.lat, result.message.lon, result.message.data);
	},
	presence: function(presenceEvent) {
	// handle presence
	}
	});

	console.log("Subscribing..");

	pubnub.subscribe({
	channels: [CHANNEL]
	});
	}

	// Send a message to pubnub service
	function publishMessage(lat, lon) {

	var publishConfig = {
	channel : CHANNEL,
	message : {
	"lat": lat,
	"lon": lon
	}
	};

	pubnub.publish(publishConfig, function(status, response) {
	console.log("Sending message: " + status, response);
	})
	}

	// Remove the pubnub subscription
	function unsubscribe() {
	pubnub.removeListener(subscriptionListener);
	pubnub.unsubscribe({
	channels: [CHANNEL]
	})
	}

	// Add graphic to map and open popup
	function addGraphicToMap(lat, lon, data){

	view.popup.open({
	title: "Geoenrichment Data",
	location: new Point({
	latitude: lat,
	longitude: lon
	}) // Set the location of the popup to the clicked location
	});

	// Inject content into the popup
	view.popup.content = "Total popuplation: " + data.totalPopulation + "<br>" +
	"Median age: " + data.medianAge + "<br>" +
	"Median income: " + data.medianHouseholdIncome;

	var pointGraphic = new Graphic({
	geometry: new Point({
	latitude: lat,
	longitude: lon
	}),
	symbol: markerSymbol
	});

	view.graphics.add(pointGraphic);
	}
	});
	</script>
	</head>

	<body>
	<div id="header-div">Click on the map to get geoenrichment data in a 1 mile radius.</div>
	<div id="view-div"></div>
	</body>
	</html>
No results found