1 | goog.require('ol.Map');
|
2 | goog.require('ol.View');
|
3 | goog.require('ol.format.KML');
|
4 | goog.require('ol.layer.Tile');
|
5 | goog.require('ol.layer.Vector');
|
6 | goog.require('ol.source.Stamen');
|
7 | goog.require('ol.source.Vector');
|
8 | goog.require('ol.style.Circle');
|
9 | goog.require('ol.style.Fill');
|
10 | goog.require('ol.style.Stroke');
|
11 | goog.require('ol.style.Style');
|
12 |
|
13 |
|
14 | var styleCache = {};
|
15 | var styleFunction = function(feature) {
|
16 |
|
17 |
|
18 |
|
19 | var name = feature.get('name');
|
20 | var magnitude = parseFloat(name.substr(2));
|
21 | var radius = 5 + 20 * (magnitude - 5);
|
22 | var style = styleCache[radius];
|
23 | if (!style) {
|
24 | style = new ol.style.Style({
|
25 | image: new ol.style.Circle({
|
26 | radius: radius,
|
27 | fill: new ol.style.Fill({
|
28 | color: 'rgba(255, 153, 0, 0.4)'
|
29 | }),
|
30 | stroke: new ol.style.Stroke({
|
31 | color: 'rgba(255, 204, 0, 0.2)',
|
32 | width: 1
|
33 | })
|
34 | })
|
35 | });
|
36 | styleCache[radius] = style;
|
37 | }
|
38 | return style;
|
39 | };
|
40 |
|
41 | var vector = new ol.layer.Vector({
|
42 | source: new ol.source.Vector({
|
43 | url: 'data/kml/2012_Earthquakes_Mag5.kml',
|
44 | format: new ol.format.KML({
|
45 | extractStyles: false
|
46 | })
|
47 | }),
|
48 | style: styleFunction
|
49 | });
|
50 |
|
51 | var raster = new ol.layer.Tile({
|
52 | source: new ol.source.Stamen({
|
53 | layer: 'toner'
|
54 | })
|
55 | });
|
56 |
|
57 | var map = new ol.Map({
|
58 | layers: [raster, vector],
|
59 | target: 'map',
|
60 | view: new ol.View({
|
61 | center: [0, 0],
|
62 | zoom: 2
|
63 | })
|
64 | });
|
65 |
|
66 | var info = $('#info');
|
67 | info.tooltip({
|
68 | animation: false,
|
69 | trigger: 'manual'
|
70 | });
|
71 |
|
72 | var displayFeatureInfo = function(pixel) {
|
73 | info.css({
|
74 | left: pixel[0] + 'px',
|
75 | top: (pixel[1] - 15) + 'px'
|
76 | });
|
77 | var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
|
78 | return feature;
|
79 | });
|
80 | if (feature) {
|
81 | info.tooltip('hide')
|
82 | .attr('data-original-title', feature.get('name'))
|
83 | .tooltip('fixTitle')
|
84 | .tooltip('show');
|
85 | } else {
|
86 | info.tooltip('hide');
|
87 | }
|
88 | };
|
89 |
|
90 | map.on('pointermove', function(evt) {
|
91 | if (evt.dragging) {
|
92 | info.tooltip('hide');
|
93 | return;
|
94 | }
|
95 | displayFeatureInfo(map.getEventPixel(evt.originalEvent));
|
96 | });
|
97 |
|
98 | map.on('click', function(evt) {
|
99 | displayFeatureInfo(evt.pixel);
|
100 | });
|