rlayers/docs/2299.bundle.js

React Components for OpenLayers

"use strict";(self.webpackChunkrlayers=self.webpackChunkrlayers||[]).push([[2299],{2299:(e,r,n)=>{n.r(r),n.d(r,{default:()=>t});const t="import React, {JSX} from 'react';\nimport {fromLonLat} from 'ol/proj';\nimport GeoJSON from 'ol/format/GeoJSON';\nimport {\n    RMap,\n    ROSM,\n    RLayerTile,\n    RLayerVector,\n    RControl,\n    RStyle,\n    RLayerTileJSON,\n    RLayerWMS,\n    RLayerTileWMS\n} from 'rlayers';\nimport RLayerStadia from 'rlayers/layer/RLayerStadia';\nimport 'ol/ol.css';\nimport 'rlayers/control/layers.css';\nimport {Feature} from 'ol';\n\nconst layersButton = <button>&#9776;</button>;\n\nexport default function Layers(): JSX.Element {\n    return (\n        <div>\n            <p>Use the layers controls in the upper right corner to switch the active layer</p>\n            <RMap className='example-map' initial={{center: fromLonLat([2.364, 48.82]), zoom: 7}}>\n                <RControl.RLayers element={layersButton}>\n                    <ROSM properties={{label: 'OpenStreetMap'}} />\n                    <RLayerTile\n                        properties={{label: 'OpenTopo'}}\n                        url='https://{a-c}.tile.opentopomap.org/{z}/{x}/{y}.png'\n                        attributions='Kartendaten: © OpenStreetMap-Mitwirkende, SRTM | Kartendarstellung: © OpenTopoMap (CC-BY-SA)'\n                    />\n                    <RLayerTile\n                        properties={{label: 'Transport'}}\n                        url='http://tile.thunderforest.com/transport/{z}/{x}/{y}.png'\n                    />\n                    <RLayerStadia\n                        properties={{label: 'Stadia Terrain Background'}}\n                        layer='stamen_terrain_background'\n                    />\n                    <RLayerTileJSON\n                        properties={{label: 'Mapbox TileJSON'}}\n                        url='https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json?secure=1'\n                    />\n                    <RLayerWMS\n                        properties={{label: 'Magellium OSM France Schools WMS'}}\n                        url='https://magosm.magellium.com/geoserver/ows'\n                        params={{LAYERS: 'magosm:france_schools_point', FORMAT: 'image/jpeg'}}\n                    />\n                    <RLayerTileWMS\n                        properties={{label: 'Switzerland ArcGIS TileWMS'}}\n                        url='https://wms.geo.admin.ch/'\n                        params={{\n                            LAYERS: 'ch.swisstopo.pixelkarte-farbe-pk1000.noscale',\n                            FORMAT: 'image/jpeg',\n                            serverType: 'mapserver'\n                        }}\n                    />\n                </RControl.RLayers>\n                {/* This one is always visible */}\n                <RLayerVector\n                    zIndex={5}\n                    format={new GeoJSON({featureProjection: 'EPSG:3857', featureClass: Feature})}\n                    url='https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements.geojson'\n                >\n                    <RStyle.RStyle>\n                        <RStyle.RStroke color='#007bff' width={3} />\n                        <RStyle.RFill color='transparent' />\n                    </RStyle.RStyle>\n                </RLayerVector>\n            </RMap>\n        </div>\n    );\n}\n"}}]);