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

Interactive 2GIS maps API, based on Leaflet

<h2 id="work-with geojson">Work with GeoJSON</h2><p><dl class="api-incut"><ul class="page-contents"><li><a href="#description">Description</a></li><li><a href="#example-of usage">Example of usage</a></li></ul></dl></p>
<h3 id="description">Description</h3><p>The following is an example of working with GeoJSON. For more information go to the
<a href="/doc/maps/en/manual/other-layers#dggeojson">GeoJSON</a> section of documentation.</p>
<h3 id="example-of usage">Example of usage</h3><p>Display of objects described in the GeoJSON format:</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 = DG.map('map', {
            center: [55.042136, 82.91699],
            zoom: 16
        });

        var data = [
            {
                "type": "Feature",
                "properties": {
                    "info": "Я маркер"
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [82.91799, 55.043136]
                }
            },
            {
                "type": "Feature",
                "properties": {
                    "info": "Я полигон"
                },
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [82.91699, 55.042136],
                            [82.917522, 55.040187],
                            [82.918063, 55.040235],
                            [82.917540, 55.042184],
                            [82.91699, 55.042136]
                        ]
                    ]
                }
            }
        ];

        DG.geoJson(data, {
            onEachFeature: function (feature, layer) {
                layer.bindPopup(feature.properties.info);
            }
        }).addTo(map);
    });
</script>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;GeoJSON&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 = DG.map(&#39;map&#39;, {
                    center: [55.042136, 82.91699],
                    zoom: 16
                });

                var data = [
                    {
                        &quot;type&quot;: &quot;Feature&quot;,
                        &quot;properties&quot;: {
                            &quot;info&quot;: &quot;I am a marker&quot;
                        },
                        &quot;geometry&quot;: {
                            &quot;type&quot;: &quot;Point&quot;,
                            &quot;coordinates&quot;: [82.91799, 55.043136]
                        }
                    },
                    {
                        &quot;type&quot;: &quot;Feature&quot;,
                        &quot;properties&quot;: {
                            &quot;info&quot;: &quot;I am a polyline&quot;
                        },
                        &quot;geometry&quot;: {
                            &quot;type&quot;: &quot;Polygon&quot;,
                            &quot;coordinates&quot;: [
                                [
                                    [82.91699, 55.042136],
                                    [82.917522, 55.040187],
                                    [82.918063, 55.040235],
                                    [82.917540, 55.042184],
                                    [82.91699, 55.042136]
                                ]
                            ]
                        }
                    }
                ];

                DG.geoJson(data, {
                    onEachFeature: function (feature, layer) {
                        layer.bindPopup(feature.properties.info);
                    }
                }).addTo(map);
            });
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>