diff --git a/README.md b/README.md new file mode 100644 index 0000000..cd184c3 --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# WIP + +Documentation will be here shortly diff --git a/icons/capital.png b/icons/capital.png new file mode 100644 index 0000000..d5a26a3 Binary files /dev/null and b/icons/capital.png differ diff --git a/icons/city.png b/icons/city.png new file mode 100644 index 0000000..600d736 Binary files /dev/null and b/icons/city.png differ diff --git a/icons/landmark.png b/icons/landmark.png new file mode 100644 index 0000000..172bb12 Binary files /dev/null and b/icons/landmark.png differ diff --git a/index.css b/index.css new file mode 100644 index 0000000..4ecb26d --- /dev/null +++ b/index.css @@ -0,0 +1,53 @@ +.mapboxgl-popup-tip{ + display: none; +} + +.mapboxgl-popup-close-button { + display: none; +} + +.mapboxgl-popup-content{ + background: #fff0 !important; + padding: 0 !important; + box-shadow: none !important; +} + +.about { + text-decoration: none; + padding: 5px; + transition: .25s; + margin-top: 5px; +} + + + +.glass, .about, .menu { + background: rgba(120, 120, 120, 0.411) !important; + box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ) !important; + backdrop-filter: blur( 20px ) !important; + -webkit-backdrop-filter: blur( 20px ) !important; + border-radius: 20px !important; + border: 1px solid rgba( 255, 255, 255, 0.18 ) !important; + color: white !important; +} + +.about:hover { + transition: .25s; + background: rgba(48, 48, 48, 0.3) !important; +} + +.about-img{ + border-radius: 20px; + margin-bottom: 5px; +} + +.menu { + position: absolute; + z-index: 1000; + top: 25px; + left: 50%; + transform: translate(-50%); + padding: 10px 15px; + text-align: center; + border-radius: 10px; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..b5fdd95 --- /dev/null +++ b/index.html @@ -0,0 +1,65 @@ + + + + + + + + + + + CIMEngine + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..86935ea --- /dev/null +++ b/index.js @@ -0,0 +1,252 @@ +function loginfo(...str) { + let info = str.shift(); + console.log( + `%c ${info} `, + "color:white; background-color: #78d6fa; border-radius:10px;", + ...str + ); +} +function logmarker(...str) { + let info = str.shift(); + console.log( + `%c ${info} `, + "color:white; background-color: #9300fc; border-radius:10px;", + ...str + ); +} +function logland(...str) { + let info = str.shift(); + console.log( + `%c ${info} `, + "color:white; background-color: #0c7700; border-radius:10px;", + ...str + ); +} +function logoccupation(...str) { + let info = str.shift(); + console.log( + `%c ${info} `, + "color:white; background-color: #B22222; border-radius:10px;", + ...str + ); +} + +function onMapClick(e) { + loginfo("Даблклик", e.latlng.toString()); +} + +window.onload = async () => { + const params = new Proxy(new URLSearchParams(window.location.search), { + get: (searchParams, prop) => searchParams.get(prop), + }); + + const projection = params.projection; + const geoURL = params.geoURL; + const countryInfoUrl = params.countryInfoUrl; + + mapboxgl.accessToken = + "pk.eyJ1IjoiYXJ0ZWdvc2VyIiwiYSI6ImNrcDViN3BhcDAwbW0ydnBnOXZ0ZzFreXUifQ.FIVtaBNr9dr_TIw672Zqdw"; + let movc = new mapboxgl.Map({ + container: "map", + style: "mapbox://styles/artegoser/clfm612fg002601nlcika2018", + center: [53.19, 41.28], + zoom: 3, + projection: projection || "globe", + }); + + let converter = new showdown.Converter(); + + movc.on("load", async () => { + movc.loadImage( + "https://cime.github.io/map/icons/city.png", + (error, image) => { + if (error) throw error; + movc.addImage("city", image); + } + ); + + movc.loadImage( + "https://cime.github.io/map/icons/capital.png", + (error, image) => { + if (error) throw error; + movc.addImage("capital-city", image); + movc.addImage("capital", image); + } + ); + + movc.loadImage( + "https://cime.github.io/map/icons/landmark.png", + (error, image) => { + if (error) throw error; + movc.addImage("landmark-0", image); + } + ); + + let lasticocords; + + loginfo("Getting geo data"); + let geo = await fetch( + geoURL || "https://erth2.github.io/movc/geo/geo.geojson" + ); + loginfo("Getting country data"); + let coarray = await fetch( + countryInfoUrl || + "https://erth2.github.io/movc/geo/countries/countries.json" + ); + coarray = await coarray.json(); + let countries = {}; + for (let i = 0; i < coarray.length; i++) + countries[coarray[i].idc] = coarray[i]; + + let geojson = await geo.json(); + + movc.addSource("map-data", { + type: "geojson", + data: geojson, + }); + + movc.addLayer({ + id: "map-data-fill", + type: "fill", + source: "map-data", + paint: { + "fill-color": ["get", "fill"], + "fill-opacity": ["coalesce", ["get", "fill-opacity"], 0.3], + }, + }); + + movc.addLayer({ + id: "map-data-fill-outline", + type: "line", + source: "map-data", + paint: { + "line-color": ["coalesce", ["get", "stroke"], "#0c7700"], + "line-width": 2, + "line-opacity": 0.8, + }, + }); + + movc.addLayer({ + id: "map-data-symbol", + type: "symbol", + source: "map-data", + layout: { + "icon-image": ["get", "type"], + "icon-size": 0.15, + }, + minzoom: 3, + }); + + movc.on("click", "map-data-fill", (e) => { + const coordinates = e.lngLat; + while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { + coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; + } + + onEachFeature(e.features[0], coordinates); + }); + + movc.on("click", "map-data-symbol", (e) => { + const coordinates = e.lngLat; + while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { + coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; + } + + onEachFeature(e.features[0], coordinates); + }); + + function onEachFeature(feature, coordinates) { + if (feature.geometry.type === "Point") { + lasticocords = coordinates; + return new mapboxgl.Popup() + .setLngLat(coordinates) + .setHTML( + ` + ${ + feature?.properties?.amount + ? `
Население - ${feature.properties.amount} чел.
` + : "" + } +
+ ${ + feature?.properties?.img + ? `
${feature.properties.name} img
` + : "" + } +
+
${feature.properties.name} + ${ + feature.properties.name_ru + ? ` - ${feature.properties.name_ru}` + : "" + } +
+
+ ${ + feature.properties.description + ? `
${converter.makeHtml( + feature.properties.description + )}
` + : "" + } +
+ ` + ) + .addTo(movc); + } else if ( + feature.geometry.type === "Polygon" || + feature.geometry.type === "MultiPolygon" + ) { + let country = countries[feature.properties.name] || { + name: "gl js mapbox is awesome", + }; + setTimeout(() => { + if (country.name !== "gl js mapbox is awesome") + if (lasticocords !== coordinates) + return new mapboxgl.Popup() + .setLngLat(coordinates) + .setHTML( + ` +
+
+ +
+
+
+ ${country.name} +
+
+
+ ${JSON.parse(feature.properties.tags).join( + ", " + )} +
+
+ Основание: ${country.date} +
+
+ ${ + country.description + ? `
${converter.makeHtml( + country.description + )}
` + : "" + } +
+
+ ${ + country.about + ? `Подробнее` + : "" + } +
+
` + ) + .addTo(movc); + }, 1); + } + } + }); +};