2gis-maps/dist/doc/en/examples/events.html

Interactive 2GIS maps API, based on Leaflet

<h2 id="processing-of events">Processing of events</h2><p><dl class="api-incut"><ul class="page-contents"><li><a href="#description">Description</a></li><li><a href="#subscribe-to events">Subscribe to events</a></li><li><a href="#subscribe-to changes of 2gis project">Subscribe to changes of 2GIS project</a></li></ul></dl></p>
<h3 id="description">Description</h3><p>The following are examples of working with events. For more information go to the
<a href="/doc/maps/en/manual/base-classes#dgevented">DG.Evented</a> and the
<a href="/doc/maps/en/manual/base-classes#events">Events</a> sections of documentation.</p>
<h3 id="subscribe-to events">Subscribe to events</h3><p>Sample subscriptions to various events (click on the marker map, geometry):</p>
<p>You clicked on: <span id="clicked_element">nowhere</span></p>
<script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
<div id="map" style="width: 100%; height: 400px;"></div>
<script>
    DG.then(function() {
        var map,
            clickedElement = document.getElementById('clicked_element'),
            coords = [
                [54.99, 82.88],
                [54.985, 82.94],
                [54.984, 82.925],
                [54.981, 82.928]
            ];

        map = DG.map('map', {
            center: [54.98, 82.89],
            zoom: 13
        });

        map.on('click', function(e) {
            clickedElement.innerHTML = 'map, coorinates ' + e.latlng.lat + ', ' + e.latlng.lng;
        });

        DG.marker([54.98, 82.89])
            .on('click', function() {
                clickedElement.innerHTML = 'marker';
            })
            .addTo(map);

        DG.polygon(coords)
            .on('click', function() {
                clickedElement.innerHTML = 'polygon';
            })
            .addTo(map);
    });
</script>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Subscribe to events&lt;/title&gt;
        &lt;script src=&quot;https://maps.api.2gis.ru/2.0/loader.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        You clicked on: &lt;span id=&quot;clicked_element&quot;&gt;nowhere&lt;/span&gt;
        &lt;div id=&quot;map&quot; style=&quot;width: 100%; height: 400px;&quot;&gt;&lt;/div&gt;
        &lt;script&gt;
            DG.then(function() {
                var map,
                    clickedElement = document.getElementById(&#39;clicked_element&#39;),
                    coords = [
                        [54.99, 82.88],
                        [54.985, 82.94],
                        [54.984, 82.925],
                        [54.981, 82.928]
                    ];

                map = DG.map(&#39;map&#39;, {
                    center: [54.98, 82.89],
                    zoom: 13
                });

                map.on(&#39;click&#39;, function(e) {
                    clickedElement.innerHTML = &#39;map, coorinates &#39; + e.latlng.lat + &#39;, &#39; + e.latlng.lng;
                });

                DG.marker([54.98, 82.89])
                    .on(&#39;click&#39;, function() {
                        clickedElement.innerHTML = &#39;marker&#39;;
                    })
                    .addTo(map);

                DG.polygon(coords)
                    .on(&#39;click&#39;, function() {
                        clickedElement.innerHTML = &#39;polygon&#39;;
                    })
                    .addTo(map);
            });
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre><h3 id="subscribe-to changes of 2gis project">Subscribe to changes of 2GIS project</h3><p>If you change the <a href="/doc/maps/en/manual/map#map-projectdetector">project</a> the boundaries of the current one are highlighted:</p>
<p><div id="map1" style="width: 100%; height: 400px;"></div></p>
<script>
    DG.then(function() {
        var map, currentProjectBound;

        map = DG.map('map1', {
            center: DG.latLng(54.98, 82.89),
            zoom: 9
        });

        // subscribe to the changes of the current 2GIS project
        map.on('projectchange', function(e) {
            var bounds = e.getProject().bound;
            currentProjectBound = DG.geoJSON(bounds, {
                color:"#f03",
                weight:1
            }).addTo(map);
        });

        // subscribe to the event of leaving a 2GIS proejct
        map.on('projectleave', function(e) {
            if (currentProjectBound) {
                map.removeLayer(currentProjectBound);
            }
        });
    });
</script>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Subscribe to changes of 2GIS project&lt;/title&gt;
        &lt;script src=&quot;https://maps.api.2gis.ru/2.0/loader.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id=&quot;map&quot; style=&quot;width: 100%; height: 400px;&quot;&gt;&lt;/div&gt;
        &lt;script&gt;
            DG.then(function() {
                var map, currentProjectBound;

                map = DG.map(&#39;map&#39;, {
                    center: DG.latLng(54.98, 82.89),
                    zoom: 9
                });

                // subscribe to the changes of the current 2GIS project
                map.on(&#39;projectchange&#39;, function(e) {
                    var bounds = e.getProject().bound;
                    currentProjectBound = DG.geoJSON(bounds, {
                        color:&quot;#f03&quot;,
                        weight:1
                    }).addTo(map);
                });

                // subscribe to the event of leaving a 2GIS project
                map.on(&#39;projectleave&#39;, function(e) {
                    if (currentProjectBound) {
                        map.removeLayer(currentProjectBound);
                    }
                });
            });
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>