<html><head><meta http-equiv="Content-Type" content="text/html charset=us-ascii"></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;" class=""><p style="margin: 0px 0px 1em; padding: 0px; border: 0px; font-size: 15px; clear: both; color: rgb(34, 36, 38); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;" class="">I'm working on switching from OpenLayers 2 to OpenLayers 3 and supplementing my reading of <a href="https://leanpub.com/thebookofopenlayers3/feedback" rel="nofollow" data-jsbanchorprepared="8SUm1LRekdbqAhQ" style="margin: 0px; padding: 0px; border: 0px; text-decoration: none; cursor: pointer; color: rgb(53, 141, 170);" class="">The Book of OpenLayers 3</a> by trying some things out on my own. There's a project that I'm building <a href="http://www.tandooriallstars.com/tom/index2.php" rel="nofollow" data-jsbanchorprepared="JMyltqInffVggVI" style="margin: 0px; padding: 0px; border: 0px; text-decoration: none; cursor: pointer; color: rgb(53, 141, 170);" class="">here</a> that should be fairly simple: take form inputs and use them as parameters for building a vector layer. The interface works as intended, save for one problem.</p><p style="margin: 0px 0px 1em; padding: 0px; border: 0px; font-size: 15px; clear: both; color: rgb(34, 36, 38); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;" class="">Whenever I pan the map or zoom it, the vector layer seems to disappear. I can't for the life of me imagine what's going on. Anyone able to help me figure out what I can do to keep the layer in place?</p><p style="margin: 0px 0px 1em; padding: 0px; border: 0px; font-size: 15px; clear: both; color: rgb(34, 36, 38); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;" class="">Thanks!</p><p style="margin: 0px 0px 1em; padding: 0px; border: 0px; font-size: 15px; clear: both; color: rgb(34, 36, 38); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;" class="">Dheeraj</p><div class="">Code:</div><div class=""><br class=""></div><div class=""><div class=""><!DOCTYPE html></div><div class=""> <html></div><div class=""> <head></div><div class=""> <title>Chicago Data</title></div><div class=""> <script src="<a href="https://code.jquery.com/jquery-1.11.2.min.js" class="">https://code.jquery.com/jquery-1.11.2.min.js</a>"></script></div><div class=""> <link rel="stylesheet" href="<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" class="">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css</a>"></div><div class=""> <script src="<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" class="">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js</a>"></script></div><div class=""> <link rel="stylesheet" href="<a href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.css" class="">https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.css</a>" type="text/css"></div><div class=""> <link rel="stylesheet" href="styles.css" type="text/css"></div><div class=""> <link href='<a href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic,900'" class="">https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic,900'</a></div><div class=""> rel='stylesheet' type='text/css'></div><div class=""> <link href='<a href="https://fonts.googleapis.com/css?family=Montserrat:400,700'" class="">https://fonts.googleapis.com/css?family=Montserrat:400,700'</a> rel='stylesheet' type='text/css'></div><div class=""> <script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.js" class="">https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.js</a>"></script></div><div class=""> <script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.4.0/lodash.js" class="">https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.4.0/lodash.js</a>"></script></div><div class=""> </div><div class=""> </head></div><div class=""> <body></div><div class=""> <div class="container"></div><div class=""> </div><div class=""> <div class="row upper text-center"><!-- intro text --></div><div class=""> <div class="col-md-12"></div><div class=""> <h1>Chicago Crimes Data Browser</h1></div><div class=""> <h2>This is a simple interface to work with spatial data using <a href="<a href="http://www.openlayers.org" class="">http://www.openlayers.org</a>">OpenLayers</div><div class=""> 3</a>.</h2></div><div class=""> <hr/></div><div class=""> <h3>Please select both a year and a crime category to visualise, then click on the map!</h3></div><div class=""> </div></div><div class=""> </div><!-- END UPPER --></div><div class=""> </div><div class=""> <div class="row text-center"><!-- radio buttons top --></div><div class=""> <div class="col-md-4 col-md-offset-2" id="year"></div><div class=""> <h5>Year</h5></div><div class=""> </div><div class=""> <div class="radio-container"></div><div class=""> <div class="radio"></div><div class=""> <label></div><div class=""> <input type="radio" name="yearGroup" value="2016" checked></div><div class=""> 2016</div><div class=""> </label></div><div class=""> </div></div><div class=""> <div class="radio"></div><div class=""> <label></div><div class=""> <input type="radio" name="yearGroup" value="2015"></div><div class=""> 2015</div><div class=""> </label></div><div class=""> </div></div><div class=""> </div></div><div class=""> </div></div><div class=""> </div><div class=""> <div class="col-md-4" id="category"></div><div class=""> <h5>Crime Category</h5></div><div class=""> </div><div class=""> <div class="radio-container"></div><div class=""> <div class="radio"></div><div class=""> <label></div><div class=""> <input type="radio" name="categoryGroup" value="BURGLARY" checked></div><div class=""> Burglary</div><div class=""> </label></div><div class=""> </div></div><div class=""> <div class="radio"></div><div class=""> <label></div><div class=""> <input type="radio" name="categoryGroup" value="HOMICIDE"></div><div class=""> Homicide</div><div class=""> </label></div><div class=""> </div></div><div class=""> </div></div><div class=""> </div></div><div class=""> </div><!-- end radio buttons bottom --></div><div class=""> </div><div class=""> <div class="row text-center"></div><div class=""> <button class="btn btn-primary" type="submit" id="mapit">Map It</button></div><div class=""> </div></div><div class=""> </div><div class=""> <div class="row map"><!-- map section --></div><div class=""> <div class="col-md-12" id="map"></div></div><div class=""> </div><!-- end map --></div><div class=""> </div><div class=""> <div id="tabular"><!-- table section --></div><div class=""> </div><div class=""> <div class="row text-center"></div><div class=""> <div class="col-md-6 col-md-offset-3"></div><div class=""> <h3 class="map-output">Crimes in Chicago 2015</h3></div><div class=""> </div></div><div class=""> </div></div><div class=""> </div><div class=""> <div class="row text-center"></div><div class=""> <div class="col-md-2 col-md-offset-4"></div><div class=""> <h4 class="grid-headline grid-headline-ward">Ward</h4></div><div class=""> </div></div><div class=""> <div class="col-md-2"></div><div class=""> <h4 class="grid-headline grid-headline-count">Count</h4></div><div class=""> </div></div><div class=""> </div></div><div class=""> </div><div class=""> <div class="row text-center"></div><div class=""> <div class="col-md-2 col-md-offset-4"></div><div class=""> <p class="table-data">1</p></div><div class=""> </div></div><div class=""> <div class="col-md-2"></div><div class=""> <p class="table-data">15</p></div><div class=""> </div></div><div class=""> </div></div><div class=""> </div><div class=""> <div class="row text-center"></div><div class=""> <div class="col-md-2 col-md-offset-4"></div><div class=""> <p class="table-data">2</p></div><div class=""> </div></div><div class=""> <div class="col-md-2"></div><div class=""> <p class="table-data">34</p></div><div class=""> </div></div><div class=""> </div></div><div class=""> </div><div class=""> </div><!-- end table section --></div><div class=""> </div><div class=""> <div class="row"><!-- footer --></div><div class=""> <div class="col-md-12 footer"></div><div class=""> <div id="footer"><p>This the footer div. Copyright <a href="<a href="http://www.clarityandrigour.com" class="">http://www.clarityandrigour.com</a>">Clarity and</div><div class=""> Rigour 2016</a>. Please contact Dheeraj or John for more information.</p></div></div><div class=""> </div></div><div class=""> </div><!-- end footer --></div><div class=""> </div><div class=""> </div><!--END CONTAINER --></div><div class=""> <script></div><div class=""> /* The following is material to be used in helper functions*/</div><div class=""> </div><div class=""> </div><div class=""> var styleCache = {}, // create styleCache variable</div><div class=""> defaultStyle = new ol.style.Style({</div><div class=""> stroke: new ol.style.Stroke({</div><div class=""> color: [220, 220, 220, 1],</div><div class=""> width: 1</div><div class=""> })</div><div class=""> }), // default uggeaux style</div><div class=""> color1 = [250, 250, 250, 1],</div><div class=""> color2 = [250, 128, 128, 1],</div><div class=""> color3 = [250, 64, 64, 1],</div><div class=""> color4 = [250, 0, 0, 1],</div><div class=""> color5 = [128, 0, 0, 1],</div><div class=""> colorLevels = {</div><div class=""> 0: color1,</div><div class=""> 0.2: color2,</div><div class=""> 0.4: color3,</div><div class=""> 0.6: color4,</div><div class=""> 0.8: color5,</div><div class=""> }; // map the classfication level codes to a colour value, grouping them</div><div class=""> </div><div class=""> /* The following is helper functions that will be called by jQuery */</div><div class=""> </div><div class=""> function computeMinMaxFromProperty(total_data, property, year) {</div><div class=""> var geometries = (total_data.objects[year].geometries),</div><div class=""> incidents = _(geometries).map(function (g) {</div><div class=""> if (property in g.properties) {</div><div class=""> return g.properties[property];</div><div class=""> }</div><div class=""> })</div><div class=""> .filter()</div><div class=""> .value()</div><div class=""> .sort(function (a, b) {</div><div class=""> return a - b;</div><div class=""> });</div><div class=""> </div><div class=""> var minMax = {</div><div class=""> min: _(incidents).min(),</div><div class=""> max: _(incidents).max()</div><div class=""> };</div><div class=""> </div><div class=""> return minMax;</div><div class=""> } // close function definition for compute minMax</div><div class=""> </div><div class=""> </div><div class=""> function buildStyle(feature, resolution, property, minMax) {</div><div class=""> </div><div class=""> var theMin = minMax['min'],</div><div class=""> theMax = minMax['max'],</div><div class=""> incidentsCount = feature.get(property);</div><div class=""> </div><div class=""> var classification = _(colorLevels).keys()</div><div class=""> .map(function (cl) {</div><div class=""> if (((incidentsCount - theMin) / (theMax - theMin)) >= Number(cl)) {</div><div class=""> return Number(cl);</div><div class=""> }</div><div class=""> })</div><div class=""> .max()</div><div class=""> </div><div class=""> </div><div class=""> if (!incidentsCount || !colorLevels[classification]) {</div><div class=""> return [defaultStyle];</div><div class=""> </div><div class=""> }</div><div class=""> </div><div class=""> // check styleCache</div><div class=""> </div><div class=""> if (!styleCache[classification]) {</div><div class=""> styleCache[classification] = new ol.style.Style({</div><div class=""> fill: new ol.style.Fill({</div><div class=""> color: colorLevels[classification]</div><div class=""> }),</div><div class=""> stroke: defaultStyle.stroke</div><div class=""> });</div><div class=""> </div><div class=""> return [styleCache[classification]];</div><div class=""> </div><div class=""> }</div><div class=""> }// close buildstyle</div><div class=""> </div><div class=""> function buildLayer(property, minMax, filePath) {</div><div class=""> </div><div class=""> var vectorLayer = new ol.layer.Vector({</div><div class=""> source: new ol.source.Vector({</div><div class=""> url: filePath,</div><div class=""> format: new ol.format.TopoJSON()</div><div class=""> }),</div><div class=""> style: function (feat, res) {</div><div class=""> return buildStyle(feat, res, property, minMax);</div><div class=""> }</div><div class=""> });</div><div class=""> </div><div class=""> map.addLayer(vectorLayer);</div><div class=""> </div><div class=""> } //close function definition for buildlayer</div><div class=""> </div><div class=""> /* The following is OL3 code to build the map*/</div><div class=""> </div><div class=""> // create base layer</div><div class=""> </div><div class=""> var osmLayer = new ol.layer.Tile({</div><div class=""> source: new ol.source.OSM()</div><div class=""> });</div><div class=""> </div><div class=""> // populate the map, centred on Chicago</div><div class=""> </div><div class=""> var map = new ol.Map({</div><div class=""> layers: [osmLayer],</div><div class=""> target: 'map',</div><div class=""> view: new ol.View({</div><div class=""> center: ol.proj.transform([-87.623177, 41.881832], 'EPSG:4326', 'EPSG:3857'),</div><div class=""> zoom: 10,</div><div class=""> minZoom: 10</div><div class=""> })</div><div class=""> });</div><div class=""> </div><div class=""> </div><div class=""> // now we are going to listen for changes to the radio buttons and build a layer accordingly</div><div class=""> </div><div class=""> $('#mapit').on('click', function (event) {</div><div class=""> </div><div class=""> var year = $("#year input:checked").val(),</div><div class=""> category = $("#category input:checked").val(),</div><div class=""> filePath = './topojsons/' + year + '.topo.json',</div><div class=""> styleCache = {};</div><div class=""> </div><div class=""> </div><div class=""> $.getJSON(filePath).then(function (data) {</div><div class=""> return computeMinMaxFromProperty(data, category, year);</div><div class=""> }).then(function (minMax) {</div><div class=""> buildLayer(category, minMax, filePath);</div><div class=""> })</div><div class=""> });</div><div class=""> </div><div class=""> </script></div><div class=""> </body></div><div class=""> </html></div></div><div class=""><br class=""></div></body></html>