https://stepansite.com/en/tags/projects/Recent content in Projects on stepansiteHugoenMon, 07 Sep 2020 20:00:00 +0000https://stepansite.com/en/2021/places-map/Mon, 07 Sep 2020 20:00:00 +0000https://stepansite.com/en/2021/places-map/<p>I tend to forget everything, so I wanted to make a map with the markers of the visited places for a while. One day I saw someone&rsquo;s <a href="https://gist.github.com/janikvonrotz/37dc61480790b07ab91d88d624caef2b" target="_blank" rel="noreferrer">gist</a> and decided to create one for myself.</p> <blockquote> <p>markers are clickable</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>Markers data is stored in <a href="https://docs.mapbox.com/help/glossary/geojson/" target="_blank" rel="noreferrer">GeoJSON</a> that you can generate using one of online services: <a href="https://geojson.io/" target="_blank" rel="noreferrer">geojson.io</a>, <a href="https://geojson.net/" target="_blank" rel="noreferrer">geojson.net</a>. All you have to do is put the marker on the map and click it to add more parameters.</p>