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

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

@@ -34,10 +34,10 @@ export default class SwiperSlider extends Component {
 	} ){
 		super( props );
 		
-		
 		this.loadData();
 	}
 
+
 	/**
 	 * загружаем данные
 	 */
@@ -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,6 +14,7 @@
 
 /* NEW CSS */
 @custom-media --viewport-medium (width <= 50rem);
+
 @custom-selector :--heading h1, h2, h3, h4, h5, h6;
 
 :root {
@@ -27,6 +28,7 @@ html {
 }
 
 @media (--viewport-medium) {
+
 	body {
 		color: var(--mainColor);
 		font-family: system-ui;

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

@@ -16,6 +16,8 @@
 
 	@@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>