Map resizing
vanilla.html
react.html
vue.html
variables.ts
variables.css
common.ts
common.css
<!DOCTYPE html>
<html>
<head>
<title>Vanilla example ymaps3-resizer</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<script crossorigin src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>
<!-- To make the map appear, you must add your apikey -->
<script src="https://api-maps.yandex.ru/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>
<script
data-plugins="transform-modules-umd"
data-presets="typescript"
type="text/babel"
src="./common.ts"
></script>
<script
data-plugins="transform-modules-umd"
data-presets="typescript"
type="text/babel"
src="../variables.ts"
></script>
<script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel">
import {LOCATION} from '../variables';
window.map = null;
main();
async function main() {
// Waiting for all api elements to be loaded
await ymaps3.ready;
const {YMap, YMapDefaultSchemeLayer} = ymaps3;
const {YMapResizer} = await ymaps3.import('@yandex/ymaps3-resizer');
// Initialize the map
map = new YMap(document.getElementById('app'), {location: LOCATION});
// Add a map scheme layer
map.addChild(new YMapDefaultSchemeLayer({}));
map.addChild(new YMapResizer({minWidth: 400, minHeight: 280}));
}
</script>
<style> html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .toolbar { position: absolute; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; padding: 16px; } .toolbar a { padding: 16px; } </style>
<link rel="stylesheet" href="../variables.css" />
<link rel="stylesheet" href="./common.css" />
</head>
<body>
<div class="info">
<div class="icon"></div>
<div>Drag corners or sides of the map</div>
</div>
<div class="container">
<div id="app"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>React example ymaps3-resizer</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<script crossorigin src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>
<!-- To make the map appear, you must add your apikey -->
<script src="https://api-maps.yandex.ru/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>
<script
data-plugins="transform-modules-umd"
data-presets="typescript"
type="text/babel"
src="./common.ts"
></script>
<script
data-plugins="transform-modules-umd"
data-presets="typescript"
type="text/babel"
src="../variables.ts"
></script>
<script data-plugins="transform-modules-umd" data-presets="react, typescript" type="text/babel">
import {LOCATION} from '../variables';
window.map = null;
main();
async function main() {
// For each object in the JS API, there is a React counterpart
// To use the React version of the API, include the module @yandex/ymaps3-reactify
const [ymaps3React] = await Promise.all([ymaps3.import('@yandex/ymaps3-reactify'), ymaps3.ready]);
const reactify = ymaps3React.reactify.bindTo(React, ReactDOM);
const {YMap, YMapDefaultSchemeLayer} = reactify.module(ymaps3);
const {YMapResizer} = reactify.module(await ymaps3.import('@yandex/ymaps3-resizer'));
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('app')
);
function App() {
return (
<React.Fragment>
<div className="info">
<div className="icon"></div>
<div>Drag corners or sides of the map</div>
</div>
<div className="container">
<YMap location={LOCATION} ref={(x) => (map = x)}>
<YMapDefaultSchemeLayer />
<YMapResizer minWidth={400} minHeight={280} />
</YMap>
</div>
</React.Fragment>
);
}
}
</script>
<style> html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .toolbar { position: absolute; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; padding: 16px; } .toolbar a { padding: 16px; } </style>
<link rel="stylesheet" href="../variables.css" />
<link rel="stylesheet" href="./common.css" />
</head>
<body>
<div id="app"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Vue example ymaps3-resizer</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<script crossorigin src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>
<!-- To make the map appear, you must add your apikey -->
<script src="https://api-maps.yandex.ru/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>
<script
data-plugins="transform-modules-umd"
data-presets="typescript"
type="text/babel"
src="./common.ts"
></script>
<script
data-plugins="transform-modules-umd"
data-presets="typescript"
type="text/babel"
src="../variables.ts"
></script>
<script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel">
import {LOCATION} from '../variables';
window.map = null;
main();
async function main() {
// For each object in the JS API, there is a Vue counterpart
// To use the Vue version of the API, include the module @yandex/ymaps3-vuefy
const [ymaps3Vue] = await Promise.all([ymaps3.import('@yandex/ymaps3-vuefy'), ymaps3.ready]);
const vuefy = ymaps3Vue.vuefy.bindTo(Vue);
const {YMap, YMapDefaultSchemeLayer} = vuefy.module(ymaps3);
const {YMapResizer} = vuefy.module(await ymaps3.import('@yandex/ymaps3-resizer'));
const app = Vue.createApp({
components: {YMap, YMapDefaultSchemeLayer, YMapResizer},
setup() {
const refMap = (ref) => {
window.map = ref?.entity;
};
const onClick = () => alert('Click!');
return {LOCATION, refMap, onClick};
},
template: `
<div class="info">
<div class="icon"></div>
<div>Drag corners or sides of the map</div>
</div>
<div class="container">
<YMap :location="LOCATION" :ref="refMap">
<YMapDefaultSchemeLayer />
<YMapResizer :minWidth="400" :minHeight="280" />
</YMap>
</div>`
});
app.mount('#app');
}
</script>
<style> html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .toolbar { position: absolute; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; padding: 16px; } .toolbar a { padding: 16px; } </style>
<link rel="stylesheet" href="../variables.css" />
<link rel="stylesheet" href="./common.css" />
</head>
<body>
<div id="app"></div>
</body>
</html>
import type {YMapLocationRequest} from '@yandex/ymaps3-types';
export const LOCATION: YMapLocationRequest = {
center: [37.623082, 55.75254], // starting position [lng, lat]
zoom: 9 // starting zoom
};
:root {
--panel-background-color: #212326;
--panel-color: #fff;
}
ymaps3.import.registerCdn('https://cdn.jsdelivr.net/npm/{package}', '@yandex/ymaps3-resizer@0.0');
.info {
position: absolute;
z-index: 1;
top: 8px;
left: 8px;
display: flex;
flex-direction: row;
align-items: center;
width: 255px;
padding: 8px 12px;
font-size: 14px;
font-style: normal;
line-height: 20px;
color: var(--panel-color);
border-radius: 12px;
background-color: var(--panel-background-color);
box-shadow: 0 0 2px 0 rgba(95, 105, 131, 0.08), 0 2px 4px 0 rgba(95, 105, 131, 0.2);
gap: 6px;
}
.icon {
display: block;
width: 16px;
height: 16px;
background-image: url(./info.svg);
}
.container {
display: flex;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
height: 100%;
background-color: #f5f6f7;
}