From 141e8598780397edbf67c1b61830bf152b51a773 Mon Sep 17 00:00:00 2001 From: Artemy Date: Fri, 9 Jun 2023 12:19:07 +0300 Subject: [PATCH] feat: map engine v1 --- README.md | 3 + icons/capital.png | Bin 0 -> 2176 bytes icons/city.png | Bin 0 -> 1057 bytes icons/landmark.png | Bin 0 -> 1420 bytes index.css | 53 ++++++++++ index.html | 65 ++++++++++++ index.js | 252 +++++++++++++++++++++++++++++++++++++++++++++ 7 files changed, 373 insertions(+) create mode 100644 README.md create mode 100644 icons/capital.png create mode 100644 icons/city.png create mode 100644 icons/landmark.png create mode 100644 index.css create mode 100644 index.html create mode 100644 index.js 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 0000000000000000000000000000000000000000..d5a26a3e479c96a677b15ffa44bc3feeef4fb432 GIT binary patch literal 2176 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 literal 0 HcmV?d00001 diff --git a/icons/landmark.png b/icons/landmark.png new file mode 100644 index 0000000000000000000000000000000000000000..172bb124b01a150ba1b21cb91b717c4bbc69ab0a GIT binary patch literal 1420 zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H0wgodS2_SGmUKs7M+SzC{oH>NS%G|oWRDFdh=oLPcLfmwi`!wqQm6i*k&kcwMx=bY^pPM0}uUwQxRvfXam_gy*7<#g0lfc0ZQ z^#mtx{p!ts*+%eW3t`p>cwB&E4E!`y%mu)XX-Rj@#U3! zPVPJSVaDZ4mmWP3_`ZEhzQLX66SnMe+}u8UJ&2RCe#;R@qm!n$VwnwMl7ph2Es%I@ z~kjWN@dgRdLkpYV9CkPR^pMb zXV*3-_IAHfdtdNh$+fR=ci!%eI`a!B?T<|DT^_O`aJi!}Kl754la$X}xW*+pL2mhu zCz~ICWZlog!#1_Fp+B5!jNggkjZ!{gW(d>l8X#WSUnaq zdT>v0W1c{P!bSTg%}Fz_wu+vv!M5-2$->hf7n^6R1zVp81hVEfs=D@-wPkGk(Jgu_ zu*YR~=(aP*YYyD&dmtjr_|i9PTKtJTsjIO|Q*SPlsF1(8_*Uo5x7UK7T;YL2Kbx{s|k)Z@T@&G)1^t>_dca%2iEZfdEBD0smN2_%850EP5LOEV5KfTq8 + + + + + + + + + + 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); + } + } + }); +};