[OpenLayers-Users] Vector Layer disappears when maps pans/zooms
Dheeraj Chand
dheeraj at dheerajchand.com
Wed Feb 24 22:11:24 PST 2016
I'm working on switching from OpenLayers 2 to OpenLayers 3 and supplementing my reading of The Book of OpenLayers 3 <https://leanpub.com/thebookofopenlayers3/feedback> by trying some things out on my own. There's a project that I'm building here <http://www.tandooriallstars.com/tom/index2.php> 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.
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?
Thanks!
Dheeraj
Code:
<!DOCTYPE html>
<html>
<head>
<title>Chicago Data</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.css" type="text/css">
<link rel="stylesheet" href="styles.css" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic,900'
rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.4.0/lodash.js"></script>
</head>
<body>
<div class="container">
<div class="row upper text-center"><!-- intro text -->
<div class="col-md-12">
<h1>Chicago Crimes Data Browser</h1>
<h2>This is a simple interface to work with spatial data using <a href="http://www.openlayers.org">OpenLayers
3</a>.</h2>
<hr/>
<h3>Please select both a year and a crime category to visualise, then click on the map!</h3>
</div>
</div><!-- END UPPER -->
<div class="row text-center"><!-- radio buttons top -->
<div class="col-md-4 col-md-offset-2" id="year">
<h5>Year</h5>
<div class="radio-container">
<div class="radio">
<label>
<input type="radio" name="yearGroup" value="2016" checked>
2016
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="yearGroup" value="2015">
2015
</label>
</div>
</div>
</div>
<div class="col-md-4" id="category">
<h5>Crime Category</h5>
<div class="radio-container">
<div class="radio">
<label>
<input type="radio" name="categoryGroup" value="BURGLARY" checked>
Burglary
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="categoryGroup" value="HOMICIDE">
Homicide
</label>
</div>
</div>
</div>
</div><!-- end radio buttons bottom -->
<div class="row text-center">
<button class="btn btn-primary" type="submit" id="mapit">Map It</button>
</div>
<div class="row map"><!-- map section -->
<div class="col-md-12" id="map"></div>
</div><!-- end map -->
<div id="tabular"><!-- table section -->
<div class="row text-center">
<div class="col-md-6 col-md-offset-3">
<h3 class="map-output">Crimes in Chicago 2015</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-2 col-md-offset-4">
<h4 class="grid-headline grid-headline-ward">Ward</h4>
</div>
<div class="col-md-2">
<h4 class="grid-headline grid-headline-count">Count</h4>
</div>
</div>
<div class="row text-center">
<div class="col-md-2 col-md-offset-4">
<p class="table-data">1</p>
</div>
<div class="col-md-2">
<p class="table-data">15</p>
</div>
</div>
<div class="row text-center">
<div class="col-md-2 col-md-offset-4">
<p class="table-data">2</p>
</div>
<div class="col-md-2">
<p class="table-data">34</p>
</div>
</div>
</div><!-- end table section -->
<div class="row"><!-- footer -->
<div class="col-md-12 footer">
<div id="footer"><p>This the footer div. Copyright <a href="http://www.clarityandrigour.com">Clarity and
Rigour 2016</a>. Please contact Dheeraj or John for more information.</p></div>
</div>
</div><!-- end footer -->
</div><!--END CONTAINER -->
<script>
/* The following is material to be used in helper functions*/
var styleCache = {}, // create styleCache variable
defaultStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: [220, 220, 220, 1],
width: 1
})
}), // default uggeaux style
color1 = [250, 250, 250, 1],
color2 = [250, 128, 128, 1],
color3 = [250, 64, 64, 1],
color4 = [250, 0, 0, 1],
color5 = [128, 0, 0, 1],
colorLevels = {
0: color1,
0.2: color2,
0.4: color3,
0.6: color4,
0.8: color5,
}; // map the classfication level codes to a colour value, grouping them
/* The following is helper functions that will be called by jQuery */
function computeMinMaxFromProperty(total_data, property, year) {
var geometries = (total_data.objects[year].geometries),
incidents = _(geometries).map(function (g) {
if (property in g.properties) {
return g.properties[property];
}
})
.filter()
.value()
.sort(function (a, b) {
return a - b;
});
var minMax = {
min: _(incidents).min(),
max: _(incidents).max()
};
return minMax;
} // close function definition for compute minMax
function buildStyle(feature, resolution, property, minMax) {
var theMin = minMax['min'],
theMax = minMax['max'],
incidentsCount = feature.get(property);
var classification = _(colorLevels).keys()
.map(function (cl) {
if (((incidentsCount - theMin) / (theMax - theMin)) >= Number(cl)) {
return Number(cl);
}
})
.max()
if (!incidentsCount || !colorLevels[classification]) {
return [defaultStyle];
}
// check styleCache
if (!styleCache[classification]) {
styleCache[classification] = new ol.style.Style({
fill: new ol.style.Fill({
color: colorLevels[classification]
}),
stroke: defaultStyle.stroke
});
return [styleCache[classification]];
}
}// close buildstyle
function buildLayer(property, minMax, filePath) {
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url: filePath,
format: new ol.format.TopoJSON()
}),
style: function (feat, res) {
return buildStyle(feat, res, property, minMax);
}
});
map.addLayer(vectorLayer);
} //close function definition for buildlayer
/* The following is OL3 code to build the map*/
// create base layer
var osmLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
// populate the map, centred on Chicago
var map = new ol.Map({
layers: [osmLayer],
target: 'map',
view: new ol.View({
center: ol.proj.transform([-87.623177, 41.881832], 'EPSG:4326', 'EPSG:3857'),
zoom: 10,
minZoom: 10
})
});
// now we are going to listen for changes to the radio buttons and build a layer accordingly
$('#mapit').on('click', function (event) {
var year = $("#year input:checked").val(),
category = $("#category input:checked").val(),
filePath = './topojsons/' + year + '.topo.json',
styleCache = {};
$.getJSON(filePath).then(function (data) {
return computeMinMaxFromProperty(data, category, year);
}).then(function (minMax) {
buildLayer(category, minMax, filePath);
})
});
</script>
</body>
</html>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/openlayers-users/attachments/20160225/9d35a07f/attachment-0001.html>
More information about the Users
mailing list