mapbox show dynamic icon

mapbox-gl css animate by setting marker, dynamic flashing effect, to put the effect of FIG.

1. The main element is to set up an animation,

myfirst animation elements enlarged so that over time

 1 .marker {
 2             /* background: url("./image/loc.png"); */
 3             background-position: center center;
 4             width:20px;
 5             height:20px;
 6             display: flex;
 7             display: -webkit-flex;
 8             align-items: center;
 9             justify-content: center;
10         }
11         .marker p{
12             background-color: rgba(250, 0, 0, 0.2);
13             width: 10px;
14             height: 10px;
15             border-radius:50%;
16             animation: myfirst 1.5s infinite;
17             box-shadow: 0px 0px 2px #f00;
18         }
19         @keyframes myfirst{
20             10% {transform: scale(1.2);}
21             20% {transform: scale(2);}
22             40% {transform: scale(3);}
23             60% {transform: scale(4);}
24             80% {transform: scale(6);}
25             100% {transform: scale(8);}
26         }

2. Create a marker, its application of the above elements to style

The complete code is as follows:

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset='utf-8' />
  5     <title>Add custom icons with Markers</title>
  6     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  7     <script src="style/MapStyle.js"></script>
  8     <script src="style/dynamic-traffic-info.js"></script>
  9     <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script>
 10     <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />
 11     <style>
 12         body { margin:0; padding:0; }
 13         #map { position:absolute; top:0; bottom:0; width:100%; }
 14         *{
 15             margin: 0;
 16             padding: 0;
 17         }
 18         .dd{
 19             height: 50px;
 20             background-color: #aaa;
 21         }
 22         .marker {
 23             /* background: url("./image/loc.png"); */
 24             background-position: center center;
 25             width:20px;
 26             height:20px;
 27             display: flex;
 28             display: -webkit-flex;
 29             align-items: center;
 30             justify-content: center;
 31         }
 32         .marker p{
 33             background-color: rgba(250, 0, 0, 0.2);
 34             width: 10px;
 35             height: 10px;
 36             border-radius:50%;
 37             animation: myfirst 1.5s infinite;
 38             box-shadow: 0px 0px 2px #f00;
 39         }
 40         @keyframes myfirst{
 41             10% {transform: scale(1.2);}
 42             20% {transform: scale(2);}
 43             40% {transform: scale(3);}
 44             60% {transform: scale(4);}
 45             80% {transform: scale(6);}
 46             100% {transform: scale(8);}
 47         }
 48     </style>
 49 </head>
 50 <body>
 51 <div id='map'></div>
 52 <script>
 53 mapboxgl.accessToken = 'pk.eyJ1IjoibHhxanNzIiwiYSI6ImNqY3NkanRjajB1MWwzM3MwcnA0dDJrYngifQ.ApTVfmm2zBM_kF22DvtowQ';
 54 var map = new mapboxgl.Map({
 55     container: 'map',
 56     // // style: getTrafficStyle(),
 57     // style: 'mapbox://styles/mapbox/navigation-preview-day-v2',
 58     style: 'mapbox://styles/mapbox/light-v10',
 59     center: [116.270169, 40.087127],
 60     zoom: 4
 61 });
 62 map.on('click', function(event){
 63     let lng = event.lngLat.lng.toFixed(6)
 64     let lat = event.lngLat.lat.toFixed(6)
 65     let zoom = map.getZoom()
 66     console.log('Clicked at : ' + lng + ', ' + lat + '. Zoom: ' + zoom)
 67   // var style = map.getStyle();
 68   //   console.info(JSON.stringify(style));
 69 });
 70 
 71 var geojson = {
 72   "type": "FeatureCollection",
 73   "features": [
 74     {
 75       "type": "Feature",
 76       "geometry": {
 77         "type": "Point",
 78         "coordinates": [
 79           120.1904296875,
 80           30.391830328088137
 81         ]
 82       }
 83     },
 84     {
 85       "type": "Feature",
 86       "geometry": {
 87         "type": "Point",
 88         "coordinates": [
 89           121.44287109374999,
 90           31.16580958786196
 91         ]
 92       }
 93     },
 94     {
 95       "type": "Feature",
 96       "geometry": {
 97         "type": "Point",
 98         "coordinates": [
 99           118.828125,
100           32.18491105051798
101         ]
102       }
103     },
104     {
105       "type": "Feature",
106       "geometry": {
107         "type": "Point",
108         "coordinates": [
109           117.11975097656249,
110           31.812229022640704
111         ]
112       }
113     },
114     {
115       "type": "Feature",
116       "geometry": {
117         "type": "Point",
118         "coordinates": [
119           116.45507812500001,
120           40.07807142745009
121         ]
122       }
123     },
124     {
125       "type": "Feature",
126       "geometry": {
127         "type": "Point",
128         "coordinates": [
129           113.35693359375,
130           23.160563309048314
131         ]
132       }
133     }
134   ]
135 };
136 
137 geojson.features.forEach(function(marker) {
138     var el = document.createElement('div');
139     el.className = 'marker';
140 
141     var el1 = document.createElement('p');
142     el.appendChild(el1);
143     var el2 = document.createElement('span');
144     el1.appendChild(el2);
145 
146     new mapboxgl.Marker(el)
147         .setLngLat(marker.geometry.coordinates)
148         .addTo(map);
149 });
150 </script>
151 
152 </body>
153 </html>

View Code

mapbox show dynamic icon

Guess you like