Add coordinates control over OpenLayers map. The coordinate entered is evaluated as the current view's projection and centered on the map. If the view's projection changes, coordinate will be expected in latter projection.
npm install ol-coordsThere is 3 ways of using this control in your project:
Install ol package if not already installed
npm install olUse the control as:
import React, { useEffect } from "react";
import CoordsControl from "ol-coords/dist/ol-coords";
...
import "ol/ol.css";
function App() {
useEffect(() => {
new Map({
target: "map",
layers: [
new TileLayer({
source: new OSM(),
}),
],
controls: [
new ZoomSlider(),
new CoordsControl({ placeholder: "Fly to coords" }),
],
view: new View({
zoom: 7,
center: [34, 39],
projection: getProjection("EPSG:4326"),
}),
});
}, []);
return (
<div>
<h2>OpenLayers Coords Control - for React</h2>
<div id="map" className="map" />
</div>
);
}
export default App;placeholder: String
- Create
index.htmlfile and load OpenLayers javascript & css file from CDN. - Create
map.jsand load this script astype="module"inindex.html
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css"
type="text/css"
/>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js"></script>
<body>
<h2>Coordinate Control Map</h2>
<div id="map" class="map"></div>
<script type="module" src="map.js"></script>
</body>Finally, import CoordsControl where you define the map as we do in map.js:
import CoordsControl from "https://cdn.skypack.dev/-/[email protected]/dist=es2020,mode=imports/optimized/ol-coords.js";
new ol.Map({
target: "map",
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
],
controls: ol.control.defaults({ attribution: true }).extend([
new ol.control.ZoomSlider(),
new CoordsControl({
placeholder: "Fly to coordinates",
}),
]),
view: new ol.View({
zoom: 7,
center: [34, 39],
projection: ol.proj.get("EPSG:4326"),
}),
});placeholder: String
- This method can be used only on modern browsers supporting ES Modules.
- Create
index.htmlandmap.jsfiles as shown in CDN (without bundler). - Only
importsource ofCoordsControlis different from in CDN (without bundler).
import CoordsControl from node_modules where you define the map as we do in map.js:
import CoordsControl from "./node_modules/ol-coords/dist/cdn/ol-coords-cdn.js";
// define ol.Map same as in CDN (without bundler)placeholder: String
For browsers to understand import statement, you need to use a bundler.
-
You can install parcel running
npm i --save-dev parcel -
Then just run
parcel index.htmlto open the app in browser: http://localhost:1234/
👤 bugraaydin1
- Github: @bugraaydin1
Contributions, issues and feature requests are welcome: issues page.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent