Scribd Logo
Upload

Welcome to Scribd!

  • Primer Mape U OpenLayers

    Uploaded by

    Purple Rain
    8 views3 pages
    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.

    Original Description:

    OpenLayers

    Original Title

    Primer Mape u OpenLayers

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    8 views3 pages

    Primer Mape U OpenLayers

    Uploaded by

    Purple Rain
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 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