проба яндекс карт

package-lock.json

@@ -17299,6 +17299,11 @@
       "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk=",
       "dev": true
     },
+    "ymaps": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/ymaps/-/ymaps-0.1.1.tgz",
+      "integrity": "sha512-LCMgNCvPqRjwW4FWUT+Ly6T93W44OCYWFzFnTkUwMq0uy4B3VIRUN+uinX++idXtrJCnA/32FxEb/E505a0YUQ=="
+    },
     "zopflipng-bin": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/zopflipng-bin/-/zopflipng-bin-4.1.0.tgz",

package.json

@@ -27,6 +27,7 @@
     "webpack-stream": "^5.2.1"
   },
   "dependencies": {
-    "swiper": "^4.4.2"
+    "swiper": "^4.4.2",
+    "ymaps": "^0.1.1"
   }
 }

src/assets/css/app.css

@@ -4,3 +4,4 @@
 /* CSS */
 @import url('../../components/common/common.css');
 @import url('../../components/swiper/swiper.css');
+@import url('../../components/ymaps/ymaps.css');

src/assets/js/app.js

 import SwiperSlider from '../../components/swiper';
+import YMaps from '../../components/ymaps';
 
 document.addEventListener( 'DOMContentLoaded', () => {
 	const swiperSlider = new SwiperSlider();
+	const ymaps = new YMaps();
 });
\ No newline at end of file

src/components/component/index.js

@@ -33,8 +33,7 @@ export default class Component {
 	 */
 	setState( newState = {} ){
 
-		console.log( 'Component setState(): Compare states', this.objectEquals( this.state, newState ), this.state, newState );
-
+		// если состояния различаются - обновляем состояние и рендерим
 		if( !this.objectEquals( this.state, newState ) ){
 			Object.assign( this.state, newState );
 			this.render();

src/components/swiper/index.js

@@ -33,11 +33,11 @@ export default class SwiperSlider extends Component {
 		}
 	} ){
 		super( props );
-
 		
 		this.loadData();
 	}
 
+
 	/**
 	 * загружаем данные
 	 */
@@ -97,10 +97,10 @@ export default class SwiperSlider extends Component {
 				data.data.albums.edges.forEach( ( album, index ) => {
 
 					const slide = `<div class="swiper-slide">
-					<h3>Swiper ${index}</h3>
-					<p>Swiper ${index} slide</p>
-					<img src="${album.node.photos[0].resized.url}" alt="${album.node.title}" />
-				</div>`;
+						<h3>Swiper ${index}</h3>
+						<p>Swiper ${index} slide</p>
+						<img src="${album.node.photos[0].resized.url}" alt="${album.node.title}" />
+					</div>`;
 
 					slides[index] = slide;
 				
@@ -113,14 +113,17 @@ export default class SwiperSlider extends Component {
 			});
 	}
 
-	render(){
 
-		// console.log( this.state.slides );
+	/**
+	 * рендерим свайпер
+	 */
+	render(){
 
-		
+		if( this.swiper ){
+			this.swiper.destroy( true, true );
+		}
 		this.swiper = new Swiper( this.props.selector, this.props.options );
 		this.swiper.appendSlide( this.state.slides );
-		console.log( 'Swiper class: render() called' );
 
 	}
 

src/components/swiper/swiper.css

@@ -14,41 +14,43 @@
 
 /* NEW CSS */
 @custom-media --viewport-medium (width <= 50rem);
+
 @custom-selector :--heading h1, h2, h3, h4, h5, h6;
 
 :root {
-  --fontSize: 1rem;
-  --mainColor: #12345678;
-  --secondaryColor: lab(32.5 38.5 -47.6 / 90%);
+	--fontSize: 1rem;
+	--mainColor: #12345678;
+	--secondaryColor: lab(32.5 38.5 -47.6 / 90%);
 }
 
 html {
-  overflow: hidden auto;
+	overflow: hidden auto;
 }
 
 @media (--viewport-medium) {
-  body {
-    color: var(--mainColor);
-    font-family: system-ui;
-    font-size: var(--fontSize);
-    line-height: calc(var(--fontSize) * 1.5);
-    overflow-wrap: break-word;
-    padding-inline: calc(var(--fontSize) / 2 + 1px);
-  }
+
+	body {
+		color: var(--mainColor);
+		font-family: system-ui;
+		font-size: var(--fontSize);
+		line-height: calc(var(--fontSize) * 1.5);
+		overflow-wrap: break-word;
+		padding-inline: calc(var(--fontSize) / 2 + 1px);
+	}
 }
 
 :--heading {
-  margin-block: 0;
+	margin-block: 0;
 }
 
 .hero:matches(main, .main) {
-  background-image: image-set("img/background.jpg" 1x, "img/background-2x.jpg" 2x);
+	background-image: image-set("img/background.jpg" 1x, "img/background-2x.jpg" 2x);
 }
 
 a {
-  color: rgb(0 0 100% / 90%);
+	color: rgb(0 0 100% / 90%);
 
-  &:hover {
-    color: rebeccapurple;
-  }
+	&:hover {
+		color: rebeccapurple;
+	}
 }
\ No newline at end of file

src/components/ymaps/index.html

+<div class="ymaps-container">
+	<h2>Yandex Maps</h2>
+	<div id="map"></div>
+</div>
\ No newline at end of file

src/components/ymaps/index.js

+import ymaps from 'ymaps';
+import Component from '../component';
+ 
+
+	
+
+export default class YMaps extends Component {
+
+	constructor( props = {
+		selector: '#map',
+		lat: -8.369326,
+		lon: 115.166023
+	}){
+		super( props );
+
+		this.loadMap();
+	}
+
+	/**
+	 * Загружаем карту
+	 */
+	loadMap(){
+
+		const el = document.querySelector( this.props.selector );
+
+		ymaps.load( '//api-maps.yandex.ru/2.1/?lang=en_RU' ).then( maps => {
+			this.state.mapInstance = new maps.Map( el, {
+				center: [ parseFloat( this.props.lat ), parseFloat(this.props.lon) ]
+			});
+		})
+			.catch( error => console.log( 'Failed to load Yandex Maps', error ) );
+
+	}
+
+
+	/**
+	 * 
+	 */
+	render(){
+		return false;
+	}
+
+}
\ No newline at end of file

src/components/ymaps/ymaps.css

+.ymaps-container {
+	padding: 50px 0;
+}
+
+#map {
+	width: 600px;
+	height: 400px;
+}
\ No newline at end of file

src/index.html

@@ -15,6 +15,8 @@
 <body>
 
 	@@include( './components/swiper/index.html' )
+
+	@@include( './components/ymaps/index.html' )
 	
 	<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,fetch"></script>
 	<script src="/assets/js/app.js?@@rev"></script>