![]() ![]() You can make edits to the index.html, main.js, or style.css files and see the resulting change in your browser while running the development server (with npm start). The remaining rules in the style.css file make it so the element that contains the map fills the entire page. The ol.css stylesheet includes styles for the elements that OpenLayers creates – things like buttons for zooming in and out. If you were starting with an existing application instead of using npm create ol-app, you would install the package with npm install ol. The ol package was installed in the npm create ol-app step above. The first line imports the ol.css file that comes with the ol package (OpenLayers is published as the ol package in the npm registry). It should look something like this: "node_modules/ol/ol.css" Open the style.css file in a text editor. Read through the Basic Concepts tutorial to learn more about Map, View, Layer, and Source components. It initializes a new map, giving it a single layer with an OSM source and a view describing the center and zoom level. The main.js module serves as an entry point for your application. If you were using a different development server, you might include the style.css in a tag in the index.html instead. Vite allows CSS to be imported from JavaScript modules. In this example, we're using Vite as a development server. The import './style.css' line might be a bit unexpected. Take a look through the examples and API docs to understand which modules you might want to use. The import lines are used to pull in the modules that your application needs. OpenLayers is packaged as a collection of ES modules. ![]() Import TileLayer from 'ol/layer/Tile.js' It should look something like this: import './style.css' The map container or target should be a block level element (like a ) and it must appear in the document before the tag that initializes the map. The two important parts in the markup are the element to contain the map and the tag to pull in the JavaScript. Open the index.html file in a text editor. The CSS styles that determine the map size and any other customizations ( style.css).The JavaScript that initializes the map ( main.js).The HTML markup with an element to contain the map ( index.html).Exploring the partsĪn OpenLayers application is composed of three basic parts: Open (or whatever URL is displayed) to see your new application. After running npm start, you'll see output that tells you the URL to open. The third command ( npm start) starts a development server so you can view your application in a browser while working on it. The second command ( cd my-app) changes the working directory to your new my-app project so you can start working with it. The first command will create a directory called my-app (you can use a different name if you wish), install OpenLayers and a development server, and set up a basic app with index.html, main.js, and style.css files. The easiest way to start building a project with OpenLayers is to run npm create ol-app: npm create ol-app my-app The development setup uses Node (14 or higher) and requires that you have git installed. This primer shows you how to put a map on a web page. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |