https://stepansite.com/uk/tags/coding/Recent content in Coding on stepansiteHugoukTue, 21 Jan 2020 22:00:00 +0000https://stepansite.com/2020/places-map/Tue, 21 Jan 2020 22:00:00 +0000https://stepansite.com/2020/places-map/<p>Давно хотів відмічати міста в яких довелось побувати. Тому, натрапивши на <a href="https://gist.github.com/janikvonrotz/37dc61480790b07ab91d88d624caef2b" target="_blank" rel="noreferrer">гітхаб</a> одного швейцарця вирішив зробити й собі таку.</p> <blockquote> <p>маркери клікабельні</p> </blockquote> <script src='https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.js'></script> <link href='https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.css' rel='stylesheet' /> <div id='map' style='width: 100%; height: 500px;'></div> <script defer> mapboxgl.accessToken = "pk.eyJ1Ijoic3RlcGhhbjIxIiwiYSI6ImNsMm5lOHViMTE2YmQzb3BraGtrd2hzdXIifQ.UVLMX1yr359G9FroBX5cdQ"; const map = new mapboxgl.Map({ container: "map", style: "mapbox://styles/mapbox/light-v10?optimize=true", zoom: 3, center: [14.0213,47.9296] }); fetch("\/2020\/places-map\/places.json") .then( response => response.json() ) .then( data => { map.loadImage("https://a.tiles.mapbox.com/v4/marker/pin-m+7e7e7e.png?access_token=" + mapboxgl.accessToken, function(error, image) { if (error) throw error; map.addImage("custom-marker", image); map.addLayer({ id: "markers", type: "symbol", source: { type: "geojson", data: data }, "minzoom": 0.5, "maxzoom": 15, layout: { "icon-image": "custom-marker", "icon-allow-overlap": true } }); }); }); map.on('click', function(e) { var features = map.queryRenderedFeatures(e.point, { layers: ['markers'] }); if (!features.length) { return; } var feature = features[0]; var popup = new mapboxgl.Popup({ offset: [0, -15] }) .setLngLat(feature.geometry.coordinates) .setHTML('<h4>' + feature.properties.title + '</h4><i>' + feature.properties.date + '</i>') .addTo(map); }); map.addControl(new mapboxgl.FullscreenControl()); </script> <h2 id="how-to">How-to</h2> <p>Позначки на карті записані в <a href="https://docs.mapbox.com/help/glossary/geojson/" target="_blank" rel="noreferrer">GeoJSON</a> форматі, який можна згенерувати на одному з сервісів на зразок <a href="https://geojson.io/" target="_blank" rel="noreferrer">geojson.io</a> чи <a href="https://geojson.net/" target="_blank" rel="noreferrer">geojson.net</a>. Потрібно лише поставити маркер на карті і, клікнувши на нього, записати додаткові параметри.</p>