Scribd
Upload
41 views3 pages

Primer Mape U OpenLayers

1. The document discusses creating an earthquake heatmap map using OpenLayers. Shapefiles of earthquake data are converted to KML format for use in OpenLayers. 2. HTML code is provided to create the map, using a KML file of 2012 earthquake magnitudes as the vector source layer. Sliders are added to adjust the heatmap blur and radius. 3. The code loads basemap tiles, parses earthquake names and magnitudes from the KML file to set feature weights, and allows updating the blur and radius interactively with the sliders. The completed map visualizes the earthquake heatmap.

Uploaded by

Purple Rain
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
41 views3 pages

Primer Mape U OpenLayers

1. The document discusses creating an earthquake heatmap map using OpenLayers. Shapefiles of earthquake data are converted to KML format for use in OpenLayers. 2. HTML code is provided to create the map, using a KML file of 2012 earthquake magnitudes as the vector source layer. Sliders are added to adjust the heatmap blur and radius. 3. The code loads basemap tiles, parses earthquake names and magnitudes from the KML file to set feature weights, and allows updating the blur and radius interactively with the sliders. The completed map visualizes the earthquake heatmap.

Uploaded by

Purple Rain
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

1.

1 Primer mape u OpenLayers

OpenLayers moe da uita KML format, tako da je potrebno Shapefile konvertovati u


KML format u Quantum GIS-u. U 2012_Earthquakes_Mag5.kml sauvane su
magnitude svakog zemljotresa u toku 2012. godine.

HTML kod za kreiranje mape zemljotresa:

<!DOCTYPE html>
<html>
<head>
<title>Earthquakes Heatmap</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.3.2/css/ol.css"
type="text/css">
<script src="https://openlayers.org/en/v4.3.2/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<form>
<label>radius size</label>
<input id="radius" type="range" min="1" max="50" step="1" value="5"/>
<label>blur size</label>
<input id="blur" type="range" min="1" max="50" step="1" value="15"/>
</form>
<script>
var blur = document.getElementById('blur');
var radius = document.getElementById('radius');

var vector = new ol.layer.Heatmap({


source: new ol.source.Vector({
url:
'https://openlayers.org/en/v4.3.2/examples/data/kml/2012_Earthquakes_Mag5.kml',
format: new ol.format.KML({
extractStyles: false
})
}),
blur: parseInt(blur.value, 10),
radius: parseInt(radius.value, 10)
});

vector.getSource().on('addfeature', function(event) {
var name = event.feature.get('name');
var magnitude = parseFloat(name.substr(2));
event.feature.set('weight', magnitude - 5);
});
var raster = new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'toner'
})
});

var map = new ol.Map({


layers: [raster, vector],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});

blur.addEventListener('input', function() {
vector.setBlur(parseInt(blur.value, 10));
});

radius.addEventListener('input', function() {
vector.setRadius(parseInt(radius.value, 10));
});
</script>
</body>
</html>

Kod se uva u formatu .html i otvara u internet browser-u.

Slika 10: Mapa zemljotresa


2
3

You might also like