JSFiddle - React, Tailwind, and code Playground

by t1nk

HTML

<script type="text/javascript" src="http://openlayers.org/dev/OpenLayers.js"></script> 

<div id="map" style="width: 600px; height: 300px; border: 1px solid black"></div>
<div id="info"></div>

JavaScript

var map = new OpenLayers.Map({
    div: "map",
    center: new OpenLayers.LonLat(0, 0),
    minResolution: "auto",
    minExtent: new OpenLayers.Bounds(-1, -1, 1, 1),
    maxResolution: "auto",
    maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90)
});

map.addLayer(new OpenLayers.Layer.OSM());
map.addControl(new OpenLayers.Control.LayerSwitcher());

map.addLayer(new OpenLayers.Layer.Vector('kosmosnimki.ru', {
    strategies: [new OpenLayers.Strategy.Fixed()],
    protocol: new OpenLayers.Protocol.HTTP({
        url: 'http://maps.kosmosnimki.ru/TileService.ashx/?',
        params: {
            request: "GetFeature",
            service: "wfs",
            version: "1.0.0",
            typeName: "L235352B48FB24909BCD874FFAF4BBFBF",
            apikey: "L5VW1QBBHJ",
            srsName: "EPSG:3857"
        },
        format: new OpenLayers.Format.GML()
    }),
    isBaseLayer: false,
    visibility: true,
    //tileOptions: {maxGetUrlLength: 1500},
    //renderers: OpenLayers.Layer.Vector.prototype.renderers,
    projection: new OpenLayers.Projection("EPSG:3857")
}));

map.setCenter(new OpenLayers.LonLat(0, 0), 0);